/* css/products.css — 仅负责产品目录区块 */

:root{
  --pc-gap:16px;
  --pc-radius:14px;
  --pc-shadow:0 8px 20px rgba(0,0,0,.08);
  --pc-border:#e9e9ef;
  --pc-text:#1a1a1f;
  --pc-muted:#6b7280;
  --pc-brand:#2fb3ff;
  --pc-good:#7be495;
  --pc-bg:#ffffff;
}

@media (prefers-color-scheme: dark){
  :root{
    --pc-border:#e9e9ef;
    --pc-text:#1a1a1f;
    --pc-muted:#6b7280;
    --pc-bg:#ffffff;
  }
}

.pc-badge.good{
  border-color:rgba(123,228,149,.35);
  color:#2e7d46;
  background:rgba(123,228,149,.12);
}

/* 避免旧 .width1200 卡死移动端的补救容器（不影响旧布局） */
.pc-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* 栅格 */
.pc-grid{
  display:grid;
  gap:var(--pc-gap);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:1024px){
  .pc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .pc-grid{ grid-template-columns: 1fr; }
}

/* 卡片 */
.pc-card{
  background:var(--pc-bg);
  border:1px solid var(--pc-border);
  border-radius:var(--pc-radius);
  box-shadow:var(--pc-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.pc-media{
  aspect-ratio: 16/9;
  background:#f2f4f7;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.pc-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 两图横排 */
.pc-media-row{
  display:flex;
  gap:12px;               /* 两图之间的间距 */
  justify-content:center; /* 居中对齐 */
  aspect-ratio:auto;      /* 覆盖原有16/9限制 */
  background:none;        /* 去掉灰背景 */
}
.pc-media-row img{
  flex:1 1 45%;           /* 每张图占大约一半宽度 */
  max-width:45%;
  height:auto;
  object-fit:contain;
  border:1px solid #eee;
  border-radius:8px;
}

.pc-body{ padding:14px 14px 12px; }
.pc-title{ margin:0 0 4px; font-size:18px; color:var(--pc-text); }
.pc-sub{ margin:0 0 10px; font-size:13px; color:var(--pc-muted); }

/* 规格块 */
.pc-specs{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:8px 12px;
  margin:8px 0 2px;
}
.pc-spec{
  background:transparent;
  border:1px dashed var(--pc-border);
  border-radius:10px;
  padding:8px 10px;
  min-height:42px;
}
.pc-spec b{ display:block; font-size:12px; color:var(--pc-muted); font-weight:600; }
.pc-spec span{ font-size:14px; color:var(--pc-text); }

/* 徽标与按钮行 */
.pc-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pc-badge{
  font-size:12px; padding:4px 8px; border-radius:999px;
  border:1px solid var(--pc-border);
  color:var(--pc-muted); background:transparent;
}
.pc-badge.good{ border-color:rgba(123,228,149,.35); color:#2e7d46; background:rgba(123,228,149,.12); }
@media (prefers-color-scheme: dark){
  .pc-badge.good{ color:#2e7d46; }
}

.pc-actions{
  display:flex; gap:10px; padding:12px 14px 16px; margin-top:auto;
}
.pc-btn{
  flex:1; text-align:center; text-decoration:none;
  font-weight:700; padding:10px 12px; border-radius:10px;
  border:1px solid var(--pc-border);
  color:var(--pc-text);
}
.pc-btn.primary{
  background: linear-gradient(90deg, var(--pc-brand), #6fe3ff);
  color:#081018; border:none;
}

/* 区块标题 */
.pc-section{ padding:18px 0 28px; }
.pc-section h2{ margin:0 0 8px; font-size:22px; color:var(--pc-text); }
.pc-section p{ margin:0; color:var(--pc-muted); font-size:14px; }

/* 旧表格美化为“柔性表”用的辅助类（可复用，不强制） */
.flex-table{
  display:grid; gap:10px; grid-template-columns: repeat(3, minmax(0,1fr));
}
.flex-table .cell{
  border:1px solid var(--pc-border); border-radius:10px; padding:10px;
}
@media (max-width:800px){ .flex-table{ grid-template-columns: 1fr; } }

/* 详情页图片缩小显示 */
#product-detail .pc-media{
  aspect-ratio:auto;   /* 不要强制 16/9 */
  background:none;     /* 去掉灰底 */
  display:flex;
  justify-content:center;
}

#product-detail .pc-media img{
  max-width: 50%;      /* 图片最多占容器 50% 宽度 */
  height:auto;
  border:1px solid #eee;
  border-radius:8px;
}