/* ==========================================================================
   产品中心 · 二级页
   ========================================================================== */

/* ---------- page hero ---------- */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#F6FAFE 0%,#EAF4FB 70%,#E3EFF8 100%);border-bottom:1px solid var(--line);padding:26px 0 44px}
.page-hero-inner{position:relative;z-index:2}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--light)}
.breadcrumb a{transition:color .2s}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb span{color:#c9d3dc}
.page-label{margin-top:26px}
.page-hero h1{margin-top:8px;font-size:44px;font-weight:300;letter-spacing:.04em;color:var(--ink)}
.page-desc{margin-top:10px;max-width:520px;font-size:13px;line-height:1.9;color:var(--muted)}
.page-bus{position:absolute;right:20px;bottom:14px;width:min(560px,42vw);z-index:1;opacity:.96}
.page-bus svg{width:100%;height:auto;filter:drop-shadow(0 18px 18px rgba(20,50,80,.12))}

/* ---------- layout ---------- */
.products-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:44px;padding-top:34px;padding-bottom:72px}
.sidebar{position:sticky;top:84px;align-self:start}
.filter-group{padding:16px 0 8px;border-top:1px solid var(--line)}
.filter-group:first-child{border-top:0;padding-top:0}
.filter-group h3{display:flex;align-items:baseline;justify-content:space-between;font-size:15px;font-weight:400;color:var(--ink)}
.filter-group h3 span{font-family:var(--din);font-size:9.5px;letter-spacing:.16em;color:#b7c2cc}
.filter-list{display:grid;gap:1px;margin-top:8px}
.filter-list button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 10px;border:0;border-left:2px solid transparent;background:none;font:inherit;font-size:13px;color:var(--muted);text-align:left;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.filter-list button:hover{color:var(--blue);background:#F7FAFE}
.filter-list button.is-active{color:var(--blue);background:#F1F7FE;border-left-color:var(--blue);font-weight:600}
.filter-list button em{font-style:normal;font-family:var(--din);font-size:10.5px;color:#aebac5}
.filter-list button.is-active em{color:var(--blue)}

/* ---------- results bar ---------- */
.results-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.results-bar p{font-size:13px;color:var(--muted)}
.results-bar b{display:inline-block;margin:0 3px;font-family:var(--din);font-size:22px;line-height:1;color:var(--blue)}
#filterSummary{margin-left:8px;font-size:12px;color:var(--light)}
.sort-wrap{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--light)}
.sort-wrap select{height:32px;padding:0 8px;border:1px solid var(--line);background:#fff;font-family:inherit;font-size:12px;color:var(--ink-2);cursor:pointer}
.sort-wrap select:focus{outline:2px solid rgba(0,74,187,.3);outline-offset:1px}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #D6E4F2;background:#F5FAFF;font-size:11.5px;color:#33506B}
.chip button{padding:0;border:0;background:none;font-size:13px;line-height:1;color:#7A9AB8;cursor:pointer}
.chip button:hover{color:var(--blue)}
.chip-clear{padding:4px 2px;border:0;background:none;font:inherit;font-size:11.5px;color:var(--blue);cursor:pointer}

/* ---------- product grid ---------- */
.plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:18px}
.pc{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;transition:transform .25s,border-color .25s,box-shadow .25s;animation:pcIn .45s ease both;animation-delay:calc(var(--i,0) * 35ms)}
.pc:hover{transform:translateY(-3px);border-color:#BFD3E3;box-shadow:0 18px 34px -26px rgba(6,42,75,.5)}
.pc-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/2.5;padding:16px 18px 8px;overflow:hidden;background:radial-gradient(120% 130% at 50% 0%,#FCFDFE,#F0F5F9 58%,#E6EDF4)}
.pc-visual svg{width:100%;height:auto;filter:drop-shadow(0 12px 12px rgba(6,42,75,.12));transition:transform .4s ease}
.pc-visual--photo{background:#F7F9FB;padding:8px}
.pc-img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .4s ease}
.pc:hover .pc-img{transform:translateY(-3px)}
.pc:hover .pc-visual svg{transform:translateY(-3px)}
.pc-tag{position:absolute;top:12px;left:12px;z-index:1;padding:3px 7px;border:1px solid var(--line);background:rgba(255,255,255,.9);font-size:10px;color:var(--muted)}
.pc-brandline{position:absolute;top:13px;right:12px;z-index:1;font-family:var(--din);font-size:9.5px;letter-spacing:.12em;color:var(--blue)}
.pc-body{display:flex;flex-direction:column;flex:1;padding:15px 18px 16px}
.pc-series{font-family:var(--din);font-size:10px;letter-spacing:.1em;color:var(--muted-2)}
.pc-title{margin-top:4px;font-size:16px;font-weight:600;line-height:1.45;color:var(--ink)}
.pc-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid #F1F1F1}
.pc-specs dt{font-size:10px;color:#aaa}
.pc-specs dd{margin:2px 0 0;font-size:12px;font-weight:600;color:var(--ink-2)}
.pc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.pc-status{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted)}
.pc-more{font-size:11.5px;color:var(--blue);transition:color .2s}
.pc:hover .pc-more{color:var(--orange-2)}
.pc-open{position:absolute;inset:0;z-index:3;border:0;background:none;cursor:pointer}
.pc-open:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}
.plist-empty{padding:90px 0;text-align:center;font-size:14px;color:var(--light)}
.plist-empty b{display:block;margin-bottom:6px;font-size:16px;font-weight:400;color:var(--muted)}

/* ---------- mobile filters ---------- */
.mobile-filters{display:none}

/* ---------- custom cta ---------- */
.custom-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:40px;padding:30px 34px;border:1px solid #E1ECF6;background:linear-gradient(100deg,#F2F8FE,#E9F3FB)}
.custom-cta-en{font-family:var(--din);font-size:9.5px;letter-spacing:.2em;color:var(--blue)}
.custom-cta h2{margin-top:4px;font-size:22px;font-weight:300;color:var(--ink)}
.custom-cta p{margin-top:6px;max-width:520px;font-size:12.5px;line-height:1.85;color:var(--muted)}

@keyframes pcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .products-layout{grid-template-columns:210px minmax(0,1fr);gap:32px}
  .plist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-bus{width:min(480px,40vw)}
}
@media (max-width:900px){
  .products-layout{grid-template-columns:1fr;gap:18px;padding-top:24px}
  .sidebar{display:none}
  .mobile-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
  .mobile-filters label{display:block;margin-bottom:4px;font-size:10px;color:var(--light)}
  .mobile-filters select{width:100%;height:34px;padding:0 6px;border:1px solid var(--line);background:#fff;font-family:inherit;font-size:12px;color:var(--ink-2)}
  .page-hero h1{font-size:36px}
  .page-bus{width:min(420px,46vw);opacity:.5}
}
@media (max-width:600px){
  .page-hero{padding-bottom:30px}
  .page-hero h1{font-size:30px}
  .page-desc{font-size:12px}
  .page-bus{display:none}
  .mobile-filters{grid-template-columns:1fr 1fr}
  .plist{grid-template-columns:1fr}
  .custom-cta{flex-direction:column;align-items:flex-start;padding:24px}
  .custom-cta h2{font-size:19px}
  .custom-cta .btn{width:100%}
  .results-bar{align-items:center}
}