/* ============ 列表页（PLP）专属样式 ============ */
.listing-page { background: #fff; }

main.plp { padding-top: 60px; }

/* 面包屑 */
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 22px 4% 0; font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb em { font-style: normal; color: var(--ink); }
.breadcrumb span { color: #c9c5bf; }

/* 页头 */
.plp-head { text-align: center; padding: 40px 4% 8px; }
.plp-brand {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(30px, 4.5vw, 48px); letter-spacing: .28em; text-indent: .28em;
}
.plp-count { margin-top: 16px; font-size: 12px; color: var(--muted); letter-spacing: .05em; }

/* 分类导航条 */
.subnav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 28px;
  padding: 18px 4% 4px; font-size: 12.5px; letter-spacing: .06em;
}
.subnav a { color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); border-color: var(--ink); }

/* 工具条 */
.toolbar {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 18px 4% 16px; border-bottom: 1px solid var(--line);
}
.toolbar-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; letter-spacing: .05em; padding: 8px 16px;
  border: 1px solid var(--ink); border-radius: 22px; transition: all .25s;
}
.toolbar-btn:hover { background: var(--ink); color: #fff; }
.sort-wrap { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.sort-wrap select {
  font-family: inherit; font-size: 12.5px; color: var(--ink);
  border: none; border-bottom: 1px solid var(--ink); background: transparent;
  padding: 4px 2px; cursor: pointer; outline: none;
}

/* 商品网格 */
.plp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 44px 22px; padding: 40px 4% 30px;
}
.plp-card { text-align: center; }
.plp-media {
  position: relative; display: block; overflow: hidden;
  background: #f6f5f3; aspect-ratio: 3 / 4;
}
.plp-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.plp-card:hover .plp-media img { transform: scale(1.05); }

/* 收藏心形 */
.plp-wish {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85); backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-4px); transition: all .25s;
}
.plp-media:hover .plp-wish, .plp-wish.active { opacity: 1; transform: translateY(0); }
.plp-wish.active svg path { fill: var(--ink); }

/* 商品信息 */
.plp-info { padding: 16px 6px 0; }
.plp-name { font-size: 13.5px; letter-spacing: .05em; margin-bottom: 6px; }
.plp-meta { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }

/* 占位图（商品图片未上传时） */
.plp-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(160deg, #f7f6f4 0%, #efedea 100%);
}
.plp-ph-brand {
  font-family: var(--serif); font-size: 19px; letter-spacing: .18em; text-indent: .18em;
  color: #b9b4ac; text-align: center; padding: 0 12px;
}
.plp-ph-note { font-size: 10.5px; letter-spacing: .18em; color: #cfcac2; }

/* 抽屉菜单当前品牌高亮 */
.drawer li a.current { color: #000; font-weight: 600; }

/* 空状态 */
.plp-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 13px; padding: 60px 0; letter-spacing: .06em; }

/* 加载更多 */
.load-more { text-align: center; padding: 8px 0 70px; }
.load-more-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 180px; padding: 13px 34px;
  border: 1px solid var(--ink); border-radius: 26px;
  font-size: 12.5px; letter-spacing: .12em; transition: all .25s;
}
.load-more-btn:hover { background: var(--ink); color: #fff; }
.lm-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid currentColor; border-top-color: transparent;
  display: none; animation: lm-rotate .7s linear infinite;
}
.load-more-btn.loading { pointer-events: none; opacity: .7; }
.load-more-btn.loading .lm-spinner { display: inline-block; }
.load-more-btn.loading .lm-text::after { content: "…"; }
@keyframes lm-rotate { to { transform: rotate(360deg); } }
.load-done { margin-top: 14px; font-size: 11.5px; color: var(--muted); letter-spacing: .1em; }

/* 响应式 */
@media (max-width: 1024px) {
  .plp-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 18px; }
}
@media (max-width: 680px) {
  .plp-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; padding: 30px 5% 20px; }
  .subnav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
  .subnav a { white-space: nowrap; }
  .toolbar { flex-wrap: wrap; gap: 10px; }
}