body.pg-lock { overflow:hidden; }
.pg-container { width:min(1440px,calc(100% - 60px)); margin:0 auto; }

/* 顶部大图 */
.pg-hero { width:100%; height:420px; overflow:hidden; background:#f3f4f6; }
.pg-hero img { display:block; width:100%; height:100%; object-fit:cover; }

/* 主体 */
.pg-products { padding:76px 0 100px; background:#fff; }
.pg-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:48px; align-items:start; }

/* 左侧分类整体 */
.pg-sidebar { position:sticky; top:30px; }
.pg-sidebar-card { overflow:hidden; border:1px solid #e6eaf0; border-radius:10px; background:#fff; box-shadow:0 8px 30px rgba(15,23,42,.045); }
.pg-sidebar-head { padding:22px 22px 18px; border-bottom:1px solid #edf0f4; }
.pg-sidebar-label { margin-bottom:5px; color:#0c5adb; font-size:12px; line-height:1.4; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.pg-sidebar-title { margin:0; color:#111827; font-size:21px; line-height:1.3; font-weight:700; }

/* 产品分类 */
.nwpl-filter-list { padding:8px; background:#fff; }

.nwpl-filter-btn { position:relative; display:flex; align-items:center; width:100%; min-height:52px; padding:12px 40px 12px 34px; border-radius:7px; color:#4b5563; font-size:14px; line-height:1.45; font-weight:500; text-decoration:none !important; background:#fff; transition:color .2s ease,background .2s ease; }

.nwpl-filter-btn + .nwpl-filter-btn { margin-top:2px; }

.nwpl-filter-btn::before { content:""; position:absolute; left:14px; top:50%; width:7px; height:7px; border:2px solid #b7c0cc; border-radius:50%; transform:translateY(-50%); transition:.2s ease; }

.nwpl-filter-btn::after { content:"›"; position:absolute; right:15px; top:50%; color:#a8b0bc; font-size:20px; line-height:1; transform:translateY(-50%); transition:right .2s ease,color .2s ease; }

.nwpl-filter-btn:hover { color:#0c5adb; background:#f5f8fd; }

.nwpl-filter-btn:hover::before { border-color:#0c5adb; }

.nwpl-filter-btn:hover::after { right:12px; color:#0c5adb; }

.nwpl-filter-btn[data-current="true"] { color:#fff !important; background:#0c5adb !important; font-weight:600; }

.nwpl-filter-btn[data-current="true"]::before { border-color:#fff; background:#fff; }

.nwpl-filter-btn[data-current="true"]::after { color:#fff; }

/* 右侧 */
.pg-content { min-width:0; }

.pg-content-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:20px; }

.pg-title-label { margin-bottom:8px; color:#0c5adb; font-size:12px; line-height:1.4; font-weight:700; text-transform:uppercase; letter-spacing:.11em; }

.pg-content-title { margin:0; color:#101828; font-size:34px; line-height:1.2; font-weight:700; letter-spacing:-.02em; }

/* 分类介绍 */
.pg-content-description { margin:0 0 30px; color:#667085; font-size:15px; line-height:1.8; }

.pg-content-description:empty { margin-bottom:30px; min-height:0; }

.pg-content-description p { margin:0; }

/* 产品列表 */
.pg-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px; align-items:stretch; }

/* 产品卡片 */
.pg-card { display:flex; flex-direction:column; min-width:0; height:100%; overflow:hidden; border:1px solid #e8ebef; border-radius:9px; background:#fff; cursor:pointer; outline:none; transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease; }

.pg-card:hover { border-color:#d6dde7; transform:translateY(-3px); box-shadow:0 14px 36px rgba(15,23,42,.09); }

.pg-card:focus-visible { border-color:#0c5adb; box-shadow:0 0 0 3px rgba(12,90,219,.12); }

/* 产品图片 */
.pg-card-image { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#f5f6f8; }

.pg-card-image img { display:block; width:100%; height:100%; object-fit:cover; background:#f5f6f8; transition:transform .45s ease; }

.pg-card:hover .pg-card-image img { transform:scale(1.035); }

/* Hover */
.pg-card-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(12,20,34,.16); opacity:0; transition:opacity .28s ease; }

.pg-card:hover .pg-card-overlay { opacity:1; }

.pg-card-view { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:6px; background:rgba(255,255,255,.96); color:#111827; font-size:12px; line-height:1; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.13); transform:translateY(5px); transition:transform .28s ease; }

.pg-card:hover .pg-card-view { transform:translateY(0); }

.pg-card-view svg { width:16px; height:16px; }

/* 产品标题 */
.pg-card-body { flex:1; display:flex; flex-direction:column; padding:17px 18px 19px; background:#fff; }

.pg-card-title { margin:0; min-width:0; color:#1d2939; font-size:16px; line-height:1.48; font-weight:600; word-break:break-word; transition:color .2s ease; }

.pg-card-title:empty::after { content:"\00a0"; }

.pg-card:hover .pg-card-title { color:#0c5adb; }

/* 没有产品 */
.nwpl-empty { display:flex; align-items:center; justify-content:center; min-height:220px; margin-top:10px; padding:40px 20px; border:1px solid #e8ebef; border-radius:9px; background:#fafbfc; color:#98a2b3; font-size:14px; font-weight:500; text-align:center; }

/* 分页 */
.nwpl-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:48px; padding-top:30px; border-top:1px solid #edf0f3; }

/* Pboot自身按钮 + numbar按钮统一 */
.nwpl-pagination > a,
.nwpl-pagination > span,
.nwpl-pagination > li > a,
.nwpl-pagination > li > span { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 13px; border:1px solid #e3e7ed; border-radius:6px; background:#fff; color:#475467; font-size:13px; line-height:1; font-weight:600; text-decoration:none !important; transition:color .2s ease,border-color .2s ease,background .2s ease; }

.nwpl-pagination > li { margin:0; padding:0; list-style:none; }

.nwpl-pagination > a:hover,
.nwpl-pagination > li > a:hover { color:#0c5adb; border-color:#b8c9e9; background:#f6f9ff; }

.nwpl-pagination .nwpl-page-current { color:#fff !important; border-color:#0c5adb !important; background:#0c5adb !important; pointer-events:none; }

.nwpl-pagination > span,
.nwpl-pagination > li.active > a,
.nwpl-pagination > li.active > span,
.nwpl-pagination .active,
.nwpl-pagination .page-num-current { color:#fff !important; border-color:#0c5adb !important; background:#0c5adb !important; }

.nwpl-page-num svg { width:18px; height:18px; }

.nwpl-page-home,
.nwpl-page-end { min-width:62px !important; }

/* 弹窗 */
.pg-modal { position:fixed; z-index:999999; inset:0; display:flex; align-items:center; justify-content:center; padding:30px; background:rgba(9,16,28,.88); opacity:0; visibility:hidden; transition:opacity .25s ease,visibility .25s ease; }

.pg-modal.open { opacity:1; visibility:visible; }

.pg-modal-box { position:relative; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(360px,.72fr); width:min(1240px,100%); max-height:calc(100vh - 60px); overflow:hidden; border-radius:10px; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.38); transform:translateY(10px) scale(.985); transition:transform .28s ease; }

.pg-modal.open .pg-modal-box { transform:translateY(0) scale(1); }

/* 弹窗大图 */
.pg-modal-image-wrap { position:relative; display:flex; align-items:center; justify-content:center; min-height:620px; padding:42px 65px; background:#f4f5f7; }

.pg-modal-image { display:block; width:auto; max-width:100%; max-height:calc(100vh - 140px); object-fit:contain; }

/* 左右按钮 */
.pg-modal-prev,
.pg-modal-next { position:absolute; z-index:5; top:50%; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid rgba(0,0,0,.06); border-radius:50%; background:#fff; color:#344054; font-size:26px; line-height:1; cursor:pointer; transform:translateY(-50%); box-shadow:0 6px 20px rgba(15,23,42,.11); transition:.2s ease; }

.pg-modal-prev { left:20px; }

.pg-modal-next { right:20px; }

.pg-modal-prev:hover,
.pg-modal-next:hover { color:#fff; border-color:#0c5adb; background:#0c5adb; }

/* 弹窗信息 */
.pg-modal-info { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:58px 45px; background:#fff; overflow-y:auto; }

.pg-modal-label { min-height:16px; margin-bottom:12px; color:#0c5adb; font-size:11px; line-height:1.4; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }

.pg-modal-title { min-height:39px; margin:0 0 30px; color:#101828; font-size:29px; line-height:1.35; font-weight:700; }

.pg-detail-list { width:100%; border-top:1px solid #e8ebef; }

.pg-detail-row { display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; min-height:60px; padding:18px 0; border-bottom:1px solid #e8ebef; }

.pg-detail-label { color:#344054; font-size:13px; line-height:1.6; font-weight:700; }

.pg-detail-value { min-width:0; color:#667085; font-size:13px; line-height:1.7; }

.pg-detail-value:empty::after { content:"-"; }

.pg-modal-number { min-height:17px; margin-top:24px; color:#98a2b3; font-size:12px; }

.pg-modal-number strong { color:#475467; }

/* 关闭按钮 */
.pg-modal-close { position:absolute; z-index:20; right:16px; top:16px; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid #e4e7ec; border-radius:50%; background:#fff; color:#475467; font-size:22px; line-height:1; cursor:pointer; transition:.2s ease; }

.pg-modal-close:hover { color:#fff; border-color:#101828; background:#101828; }

/* 平板 */
@media (max-width:1180px) {
    .pg-layout { grid-template-columns:220px minmax(0,1fr); gap:30px; }
    .pg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pg-modal-box { grid-template-columns:1.1fr .8fr; }
    .pg-modal-image-wrap { min-height:520px; padding:35px 50px; }
}

/* 手机 */
@media (max-width:767px) {
    .pg-container { width:calc(100% - 30px); }
    .pg-hero { height:260px; }
    .pg-products { padding:45px 0 65px; }
    .pg-layout { display:block; }

    .pg-sidebar { position:static; margin-bottom:34px; }
    .pg-sidebar-card { border:0; border-radius:0; box-shadow:none; }
    .pg-sidebar-head { padding:0 0 16px; border:0; }

    .nwpl-filter-list { display:flex; gap:8px; padding:0; overflow-x:auto; scrollbar-width:none; }
    .nwpl-filter-list::-webkit-scrollbar { display:none; }

    .nwpl-filter-btn { flex:0 0 auto; width:auto; min-height:40px; padding:9px 14px; border:1px solid #e4e7ec; border-radius:6px; background:#fff; white-space:nowrap; }

    .nwpl-filter-btn::before,
    .nwpl-filter-btn::after { display:none; }

    .nwpl-filter-btn[data-current="true"] { color:#fff !important; border-color:#0c5adb; background:#0c5adb !important; }

    .pg-content-title { font-size:27px; }

    .pg-content-description { margin-bottom:24px; }

    .pg-content-description:empty { margin-bottom:24px; }

    .pg-grid { grid-template-columns:1fr; gap:22px; }

    .nwpl-pagination { margin-top:38px; }

    .hidden-sm { display:none !important; }

    .pg-modal { padding:12px; }

    .pg-modal-box { display:block; width:100%; max-height:calc(100vh - 24px); overflow-y:auto; border-radius:8px; }

    .pg-modal-image-wrap { min-height:0; padding:55px 18px 22px; }

    .pg-modal-image { width:100%; max-height:48vh; }

    .pg-modal-info { padding:28px 22px 32px; overflow:visible; }

    .pg-modal-title { min-height:0; margin-bottom:22px; font-size:23px; }

    .pg-detail-row { grid-template-columns:110px minmax(0,1fr); gap:12px; min-height:56px; padding:14px 0; }

    .pg-modal-prev,
    .pg-modal-next { width:38px; height:38px; }

    .pg-modal-prev { left:9px; }

    .pg-modal-next { right:9px; }

    .pg-modal-close { right:10px; top:10px; }
}