/* ===== 产品中心 ===== */

.page-head { padding: 72px 0 0; text-align: center; }
.page-head h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 900; letter-spacing: .1em; }
.page-head h1 .brush { font-family: var(--brush); font-weight: 400; color: var(--seal); }
.page-head p { margin-top: 14px; color: var(--ink-soft); font-size: 16px; }

/* 系列筛选 */
.filter-bar {
  margin: 44px auto 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 0 24px;
}
.filter-btn {
  font-family: var(--serif); font-size: 15px; letter-spacing: .18em;
  padding: 11px 26px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft);
  transition: all .2s;
}
.filter-btn:hover { border-color: var(--gold); color: var(--gold-deep); }
.filter-btn.on { background: var(--ink); border-color: var(--ink); color: #efe5d0; }

/* 产品网格 */
.plist {
  max-width: var(--maxw); margin: 48px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.pcard { cursor: pointer; display: flex; flex-direction: column; }
.pcard.hidden { display: none; }
.pcard .pimg { position: relative; }
.pcard .pimg image-slot { width: 100%; height: 250px; }
.pcard .series-tag {
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; letter-spacing: .2em;
  background: rgba(36, 26, 15, .78); color: #efe5d0;
  padding: 5px 12px; border-radius: 4px; backdrop-filter: blur(4px);
  pointer-events: none; /* 不拦截 image-slot 的拖拽事件 */
  z-index: 1;
}
.pcard .pad { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pcard h3 { font-size: 18px; letter-spacing: .06em; }
.pcard small { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .1em; }
.pcard .go { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--gold-deep); letter-spacing: .2em; }

/* 详情弹层 */
.pmodal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(36, 26, 15, .55); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.pmodal-mask.open { display: flex; }
.pmodal {
  background: var(--paper-card); border-radius: 14px; overflow: hidden;
  max-width: 880px; width: 100%; max-height: 90vh; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1.1fr;
  border: 1px solid var(--line);
}
.pmodal .mimg { background: var(--paper-deep); min-height: 420px; display: grid; place-items: center; }
.pmodal .mimg image-slot { width: 100%; height: 100%; min-height: 420px; }
.pmodal .mbody { padding: 40px 40px 36px; position: relative; }
.pmodal .mclose {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--paper-card);
  font-size: 17px; cursor: pointer; color: var(--ink-soft);
}
.pmodal .mclose:hover { color: var(--seal); border-color: var(--seal); }
.pmodal .mseries { font-size: 12px; letter-spacing: .3em; color: var(--gold-deep); }
.pmodal h2 { font-size: 30px; font-weight: 900; letter-spacing: .06em; margin-top: 8px; }
.pmodal .mdesc { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); text-wrap: pretty; }
.spec-table { margin-top: 24px; width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td {
  text-align: left; font-size: 13.5px; padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.spec-table th { color: var(--ink-faint); font-weight: 400; width: 92px; letter-spacing: .15em; }
.pmodal .mfoot { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 920px) {
  .plist { grid-template-columns: repeat(2, 1fr); }
  .pmodal { grid-template-columns: 1fr; }
  .pmodal .mimg, .pmodal .mimg image-slot { min-height: 260px; height: 260px; }
}
@media (max-width: 560px) {
  .plist { grid-template-columns: 1fr; }
}
.psearch {
  font-family: var(--serif); font-size: 14.5px; color: var(--ink);
  background: var(--paper-card); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 10px 22px; outline: none; width: 220px; transition: border-color .2s;
}
.psearch:focus { border-color: var(--gold); }
.pcount { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--ink-faint); letter-spacing: .15em; }
.mnav { display: flex; gap: 8px; margin-left: auto; }
.mnav button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--paper-card); color: var(--ink-soft); font-size: 15px;
}
.mnav button:hover { border-color: var(--gold); color: var(--gold-deep); }
.mnav button:disabled { opacity: .35; cursor: default; }