/*! 产品中心列表（立创商城风格）——自成一体的样式，不依赖平台主题 */

.pl {
    --pl-blue: #2b7fd4;
    --pl-blue-d: #1c66b0;
    --pl-red: #e64545;
    --pl-line: #e6e8eb;
    --pl-muted: #9aa1ad;
    --pl-text: #333;
    --pl-headbg: #f5f7fa;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    font-size: 13px;
    color: var(--pl-text);
    background: #fff;
    line-height: 1.6;
    text-align: left;
}

.pl *,
.pl *::before,
.pl *::after { box-sizing: border-box; }

.pl img { max-width: 100%; border: 0; }

/* --------------------------------------------------------------- 工具栏 */
.pl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--pl-line);
}
.pl-input {
    flex: 1 1 220px;
    min-width: 160px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d5d8dd;
    border-radius: 3px;
    font-size: 13px;
}
.pl-select {
    height: 34px;
    padding: 0 8px;
    border: 1px solid #d5d8dd;
    border-radius: 3px;
    background: #fff;
    font-size: 13px;
}
.pl-btn {
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--pl-blue);
    border-radius: 3px;
    background: var(--pl-blue);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.pl-btn:hover { background: var(--pl-blue-d); }
.pl-btn--ghost { background: #fff; color: var(--pl-blue); }
.pl-btn--cart { background: #fff; color: var(--pl-blue); margin-left: auto; }
.pl-btn--cart b { color: var(--pl-red); }
.pl-reset { color: var(--pl-blue); text-decoration: underline; font-size: 13px; }
.pl-count { color: var(--pl-muted); font-size: 12px; }
.pl-count b { color: var(--pl-text); }

/* ----------------------------------------------------------------- 表头 */
.pl-head { display: none; }
.pl-empty { padding: 60px 10px; text-align: center; color: var(--pl-muted); }

/* ----------------------------------------------------------------- 数据行 */
.pl-row {
    position: relative;
    padding: 16px 0;
    border-bottom: 1px solid var(--pl-line);
    background: #fff;
}
.pl-row:last-of-type { border-bottom: 0; }

/* 第一列 */
.pl-c1 { display: flex; gap: 12px; }
.pl-thumb {
    position: relative;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    border: 1px solid var(--pl-line);
    border-radius: 3px;
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pl-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pl-thumb__ph { color: #c3c8d0; font-size: 12px; }
.pl-hot {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1px 6px;
    background: var(--pl-red);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    border-radius: 0 0 3px 0;
}
.pl-info { min-width: 0; flex: 1 1 auto; }
.pl-mpn { font-size: 15px; font-weight: 700; color: #1a1a1a; word-break: break-all; }
.pl-kv { font-size: 12px; color: var(--pl-text); margin-top: 2px; word-break: break-word; }
.pl-kv > span { color: var(--pl-muted); }
.pl-c2 .pl-kv { margin-top: 3px; }
.pl-none { color: #c3c8d0; font-size: 12px; }
.pl-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pl-tools { display: none; /* 收藏/对比/复制 整行隐藏（用户要求），恢复改回 display:flex */ margin-top: 8px; flex-wrap: wrap; gap: 12px; }
.pl-mini {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pl-muted);
    font-size: 12px;
    cursor: pointer;
}
.pl-mini:hover { color: var(--pl-blue); }

/* 标签列（优惠券/标签）整列隐藏：表头与每行的 .pl-c3 同类名一处生效，
   列宽已在 768/1200 两个断点里重新分配给其余五列 */
.pl-c3 { display: none; }

/* 标签 */
.pl-tag {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 1px 6px;
    border: 1px solid #9cc3e8;
    border-radius: 2px;
    color: #2b7fd4;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

/* 价格梯度 */
.pl-price { font-size: 13px; color: var(--pl-text); }
.pl-price > span { color: var(--pl-muted); }
.pl-price b { color: var(--pl-blue); font-weight: 600; }
.pl-price.is-active b { color: #1a1a1a; font-weight: 700; }
.pl-ask { color: var(--pl-blue); }

/* 库存交期 */
.pl-pill {
    display: inline-block;
    padding: 1px 8px;
    margin-bottom: 6px;
    background: #f2f3f5;
    border-radius: 10px;
    color: #6b7280;
    font-size: 12px;
}
.pl-pack { font-size: 12px; color: var(--pl-muted); margin-top: 2px; }

/* 操作 */
.pl-qty { position: relative; width: 78px; }
.pl-qty__input {
    width: 100%;
    height: 32px;
    padding: 0 22px 0 8px;
    border: 1px solid #d5d8dd;
    border-radius: 3px;
    font-size: 13px;
    text-align: left;
}
.pl-qty__btns {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 20px;
    height: 30px;
    display: flex;
    flex-direction: column;
}
.pl-qty__btns button {
    flex: 1;
    padding: 0;
    border: 0;
    border-left: 1px solid #d5d8dd;
    background: #fafbfc;
    color: #666;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}
.pl-qty__btns button:first-child { border-bottom: 1px solid #d5d8dd; border-radius: 0 3px 0 0; }
.pl-qty__btns button:last-child { border-radius: 0 0 3px 0; }
.pl-qty__btns button:hover { background: #eef1f5; color: var(--pl-blue); }

.pl-total { margin-top: 8px; font-size: 12px; color: var(--pl-muted); }
.pl-total b { color: #1a1a1a; }

/* 单个型号的库存：操作列内，位于「加入询价单」正上方。
   有货绿色（stock_text / stock），未标注橙色引导咨询 */
.pl-stk {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--pl-muted);
}
.pl-stk b { font-weight: 600; color: #2e9e5b; text-align: right; }
.pl-stk.is-ask b { color: #e6843b; }

.pl-add {
    display: block;
    width: 100%;
    height: 34px;
    margin-top: 8px;
    border: 0;
    border-radius: 3px;
    background: var(--pl-blue);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.pl-add:hover { background: var(--pl-blue-d); }
.pl-recent { margin-top: 6px; text-align: center; font-size: 11px; color: var(--pl-muted); }

/* 加入询价单下方的联系图标：QQ（一键跳转）/ 微信（点开二维码）/ 电话（直拨） */
.pl-contact {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}
.pl-ct {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: #fff;
}
.pl-ct--qq { color: #12b7f5; }
.pl-ct--qq:hover { background: #e9f8fe; }
.pl-ct--wx { color: #07c160; }
.pl-ct--wx:hover { background: #e9f9f0; }
.pl-ct--tel { color: #2b7fd4; }
.pl-ct--tel:hover { background: #eaf3fc; }

/* 微信图标点开的二维码浮层（JS 禁用时退化为新窗口打开二维码图片） */
.pl-wxpop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    display: none;
    width: 148px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    text-align: center;
    z-index: 40;
}
.pl-ct--wx.is-open .pl-wxpop { display: block; }
.pl-wxpop img { display: block; width: 100%; height: auto; border-radius: 4px; }
.pl-wxpop em { display: block; margin-top: 6px; font-size: 11px; color: var(--pl-muted); font-style: normal; }

/* ----------------------------------------------------------------- 分页
   像素页没有 Bootstrap，ThinkPHP 默认输出的 li 是块级 list-item，
   « 1 2 3 4 » 会竖排成一列 —— 这里补全套按钮样式并强制单行 flex 排布 */
.pl-pager { margin-top: 22px; text-align: center; }
.pl-pager .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pl-pager .pagination > li { display: block; margin: 0; }
.pl-pager .pagination > li > a,
.pl-pager .pagination > li > span {
    display: inline-block;
    box-sizing: border-box;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--pl-line);
    border-radius: 4px;
    background: #fff;
    color: var(--pl-blue);
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.pl-pager .pagination > li > a:hover {
    background: #eaf3fc;
    border-color: var(--pl-blue);
}
.pl-pager .pagination > .active > a,
.pl-pager .pagination > .active > span {
    background: var(--pl-blue);
    border-color: var(--pl-blue);
    color: #fff;
    cursor: default;
}
.pl-pager .pagination > .disabled > a,
.pl-pager .pagination > .disabled > span {
    background: #fafbfc;
    border-color: var(--pl-line);
    color: #c3c8d0;
    cursor: not-allowed;
}

/* --------------------------------------------------------------- 询价单 */
.pl-modal[hidden] { display: none; }
.pl-modal { position: fixed; inset: 0; z-index: 1200; }
.pl-modal__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.pl-modal__box {
    position: relative;
    width: 92%;
    max-width: 520px;
    max-height: 86vh;
    overflow: auto;
    margin: 8vh auto 0;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}
.pl-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pl-line);
    font-size: 15px;
}
.pl-modal__x { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--pl-muted); cursor: pointer; }
.pl-modal__body { padding: 14px 16px 18px; }

.pl-cart-list { max-height: 180px; overflow: auto; margin-bottom: 14px; }
.pl-cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--pl-line);
    font-size: 13px;
}
.pl-cart-item em { font-style: normal; color: var(--pl-muted); }
.pl-cart-item button { border: 0; background: none; color: var(--pl-red); cursor: pointer; font-size: 12px; }
.pl-cart-empty { color: var(--pl-muted); font-size: 13px; padding: 8px 0; }

.pl-form__row { display: flex; align-items: flex-start; margin-bottom: 10px; }
.pl-form__row label { flex: 0 0 78px; padding-top: 8px; font-size: 13px; color: #555; }
.pl-form__row label i { color: var(--pl-red); font-style: normal; }
.pl-form__row input,
.pl-form__row textarea {
    flex: 1 1 auto;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #d5d8dd;
    border-radius: 3px;
    font-size: 13px;
    font-family: inherit;
}
.pl-form__msg { min-height: 18px; font-size: 12px; color: var(--pl-red); }
.pl-form__msg.is-ok { color: #2e9e5b; }
.pl-form__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.pl-btn--primary { background: var(--pl-blue); color: #fff; }

/* ================================================================= 断点 */
/* 中等屏：先给出行式布局，两列合一调整 */
@media (min-width: 768px) {
    .pl-head {
        display: flex;
        gap: 12px;
        padding: 10px 0;
        background: var(--pl-headbg);
        border-bottom: 1px solid var(--pl-line);
        color: #666;
        font-size: 12px;
    }
    .pl-row {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }
    .pl-c1 { flex: 0 0 29%; max-width: 29%; }
    .pl-c2 { flex: 0 0 21%; max-width: 21%; }
    .pl-c4 { flex: 0 0 15%; max-width: 15%; }
    .pl-c5 { flex: 0 0 15%; max-width: 15%; }
    .pl-c6 { flex: 0 0 20%; max-width: 20%; }
    .pl-head > div { padding: 0 2px; }
    .pl-c1, .pl-c2, .pl-c3, .pl-c4, .pl-c5, .pl-c6 { min-width: 0; }
    .pl-add { font-size: 13px; }
}

/* 宽屏：列宽微调，接近截图比例 */
@media (min-width: 1200px) {
    .pl-row, .pl-head { gap: 16px; }
    .pl-c1 { flex: 0 0 31%; max-width: 31%; }
    .pl-c2 { flex: 0 0 20%; max-width: 20%; }
    .pl-c4 { flex: 0 0 14%; max-width: 14%; }
    .pl-c5 { flex: 0 0 16%; max-width: 16%; }
    .pl-c6 { flex: 0 0 19%; max-width: 19%; }
}

/* 窄屏：卡片式堆叠 */
@media (max-width: 767px) {
    .pl { padding: 10px; }
    .pl-row {
        padding: 14px 12px;
        border: 1px solid var(--pl-line);
        border-radius: 6px;
        margin-bottom: 12px;
    }
    .pl-c1 { margin-bottom: 4px; }
    .pl-thumb { flex: 0 0 72px; width: 72px; height: 72px; }
    .pl-c2 { margin-top: 8px; }
    .pl-c4 { margin-top: 10px; }
    .pl-c5 { margin-top: 8px; }
    .pl-c6 {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px dashed var(--pl-line);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .pl-qty { flex: 0 0 78px; }
    .pl-total { flex: 1 1 auto; margin: 0; }
    .pl-stk { flex: 1 1 100%; margin-top: 0; }
    .pl-add { flex: 1 1 100%; margin-top: 4px; }
    .pl-recent { flex: 1 1 auto; text-align: left; }
    .pl-contact { flex: 1 1 100%; margin-top: 0; }
    .pl-btn--cart { margin-left: 0; }
    .pl-toolbar { gap: 6px; }
    .pl-input { flex: 1 1 100%; }
}

/* ------------------------------------------------- 菜单下 banner
   与其它内页同款的规格：PC 400px 高、标题白色 40px 左对齐在 1200 容器内，
   移动端 140px 高、居中、字号缩小（与原站移动版内页 banner 一致）。
   背景是本页专属的 page-cpzx.jpg（2048x584 超清暗调），白字对比度实测 19:1。 */
.pb {
    position: relative;
    box-sizing: border-box;
    /* full-bleed：外层 .cms-embed 的宽度受平台 JS 时序影响（实测 1424/1432 两种），
       用 100vw + 负外边距始终铺满视口，右侧不留缝；页面级 overflow-x:hidden 兜底不会撑出滚动条 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 400px;
    background: #0a1424 url("/uploads/banner/page-cpzx.jpg") 50% 50% / cover no-repeat;
    overflow: hidden;
}

.pb__inner {
    box-sizing: border-box;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 16px 16px;          /* 底部内边距把内容整体上提，标题落在 400px 盒的 149px 处，与其它内页对齐 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.pb__title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
}

.pb__sub {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 1.4;
    color: #eee;
}

@media (max-width: 767px) {
    .pb { height: 140px; }
    .pb__inner {
        padding: 0 12px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .pb__title { font-size: 18px; }
    .pb__sub { font-size: 12px; margin-top: 4px; }
}

/* ============================== 列表 + 右侧联系栏（库存 / QQ / 手机 / 微信） */
.pl-layout {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.pl-layout > .pl {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;   /* 宽度交给 flex 分配，让出右侧给联系栏 */
    margin: 0;
}
.pl-side {
    flex: 0 0 236px;
    position: sticky;
    top: 92px;         /* 让开固定导航（80px） */
    display: none;     /* 整块隐藏（每行已有库存与联系图标），列表 .pl 占满 1200；要恢复删掉这一行 */
    flex-direction: column;
    gap: 12px;
}
.ps-card {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 6px;
    padding: 14px;
}
.ps-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}
.ps-title::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--pl-blue);
}
.ps-stock__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    line-height: 2;
    color: var(--pl-text);
}
.ps-stock__row b { font-size: 18px; font-weight: 700; color: var(--pl-blue-d); }
.ps-stock__row b.is-hot { color: var(--pl-red); }
.ps-tip { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--pl-muted); }

.ps-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s;
}
.ps-btn svg { flex: 0 0 auto; }
.ps-btn span { white-space: nowrap; }
.ps-btn b { margin-left: auto; font-size: 14px; font-weight: 700; letter-spacing: .2px; }
.ps-btn--qq { background: var(--pl-blue); color: #fff; }
.ps-btn--qq:hover { background: var(--pl-blue-d); }
.ps-btn--tel { background: #f2f6fb; color: var(--pl-blue-d); border: 1px solid #d8e6f6; }
.ps-btn--tel:hover { background: #e7f0fb; }

.ps-qr {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--pl-line);
    text-align: center;
}
.ps-qr a { display: inline-block; line-height: 0; }
.ps-qr img {
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto 6px;
    border: 1px solid var(--pl-line);
    border-radius: 4px;
}
.ps-qr span { font-size: 12px; color: var(--pl-muted); }

/* 中屏：右栏收窄，二维码与按钮跟着缩 */
@media (min-width: 768px) and (max-width: 1199px) {
    .pl-side { flex-basis: 200px; }
    .ps-qr img { width: 132px; height: 132px; }
    .ps-btn { padding: 9px 10px; font-size: 12px; }
    .ps-btn b { font-size: 13px; }
}

/* 窄屏：右栏落到列表下方 */
@media (max-width: 767px) {
    .pl-layout { display: block; }
    .pl-side { position: static; margin-top: 16px; }
    .ps-qr img { width: 180px; height: 180px; }
    .ps-stock__row { font-size: 14px; }
}

/* 列宽修正：flex-basis 用百分比时，gap 不计入百分比之和，
   六列 + 5×16px 间隙会超出容器约 80px —— 加了右栏后「操作」列会压到联系栏上。
   把收缩打开（0 0 → 0 1），列按原比例缩到正好填满容器，比例不变。 */
@media (min-width: 768px) {
    .pl-head > div,
    .pl-row > div { flex-shrink: 1; }
}

/* 联系栏在 .pl 外面，拿不到 .pl 上定义的设计变量（--pl-blue 等），
   不补上会导致 var() 解析失败：QQ 按钮白字配透明底（等于看不见）、
   卡片描边与强调色全部失效。这里补一份同值的变量。 */
.pl-side {
    --pl-blue: #2b7fd4;
    --pl-blue-d: #1c66b0;
    --pl-red: #e64545;
    --pl-line: #e6e8eb;
    --pl-muted: #9aa1ad;
    --pl-text: #333;
}