/* ============================================================================
   products.css —— 产品列表页 + 商品详情页专有样式（复用 theme.css 令牌）
   ============================================================================ */

/* ===== 列表页：品类筛选 ===== */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filter-pill { border: 1px solid rgba(59,130,246,0.2); background: #fff; color: #475569; padding: 9px 20px; border-radius: 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: .3s; }
.filter-pill:hover { border-color: #3b82f6; color: #3b82f6; }
.filter-pill.is-active { background: linear-gradient(135deg,#3b82f6,#06b6d4); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(59,130,246,0.3); }

/* ===== 列表页：商品网格 ===== */
.p-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.p-card { background: #fff; border-radius: 20px; overflow: hidden; text-decoration: none; border: 1px solid transparent; transition: .4s; display: flex; flex-direction: column; }
.p-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.15); }
.p-thumb { aspect-ratio: 4 / 3; background: linear-gradient(135deg,#f1f5f9,#e0f2fe); display: flex; align-items: center; justify-content: center; color: #93c5fd; overflow: hidden; }
.p-thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-thumb .icon { width: 52px; height: 52px; }
.p-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.p-body h3 { font-size: 16px; font-weight: 700; color: #0f172a; }
.p-cat { font-size: 13px; color: #94a3b8; }
.p-price { margin-top: 6px; font-size: 15px; font-weight: 700; color: #3b82f6; }

.empty { text-align: center; color: #94a3b8; font-size: 16px; padding: 80px 20px; }

/* ===== 详情页 ===== */
.detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.gallery-main { background: linear-gradient(135deg,#f1f5f9,#e0f2fe); border-radius: 20px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #93c5fd; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-main .icon { width: 72px; height: 72px; }
.gallery-thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.thumb { width: 76px; height: 76px; border-radius: 14px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #f1f5f9; padding: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: #3b82f6; }
.detail-info h1 { font-size: 32px; font-weight: 800; color: #0f172a; letter-spacing: -1px; margin-bottom: 12px; }
.d-meta { display: flex; gap: 14px; flex-wrap: wrap; color: #94a3b8; font-size: 14px; margin-bottom: 18px; }
.d-price { font-size: 26px; font-weight: 900; background: linear-gradient(135deg,#3b82f6,#06b6d4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 28px; }
.detail-info h2 { font-size: 20px; font-weight: 700; color: #0f172a; margin: 24px 0 12px; }
.d-specs { display: flex; flex-direction: column; gap: 8px; }
.d-specs .spec-row { display: flex; gap: 12px; font-size: 15px; }
.d-specs .spec-k { color: #94a3b8; min-width: 110px; }
.d-specs .spec-v { color: #1e293b; font-weight: 600; }
.d-desc p { color: #64748b; font-size: 15px; line-height: 1.8; margin-bottom: 12px; }
.detail-info .btn-grad { margin-top: 28px; }

/* ===== 商品不存在 / 已下架 ===== */
.notfound { text-align: center; padding: 80px 20px; color: #64748b; }
.notfound .big { font-size: 64px; font-weight: 900; line-height: 1; background: linear-gradient(135deg,#3b82f6,#06b6d4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.notfound p { margin: 16px 0 24px; font-size: 17px; }

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
  .p-grid { grid-template-columns: repeat(3,1fr); }
  .detail { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .p-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .detail-info h1 { font-size: 24px; }
  .d-price { font-size: 22px; }
}