/* ========================================================
   products.css —— 产品展示/列表页样式（浅色蓝主题，New 站点）
   host/baremetal/mail/ssl/sql 列表页 + 共享卡片
   购买/结账页样式已抽到 css/checkout.css
   ======================================================== */
:root{
  --pb-primary:#2563eb; --pb-primary-dark:#1d4ed8;
  --pb-heading:#0b1f4d; --pb-text:#5f6b7e; --pb-muted:#8a98a8;
  --pb-border:#e6e9ef; --pb-soft:#f5f8fc;
}
/* ========================================================
   产品展示页（default.asp）共享 .product-* 类 —— 浅色
   host/baremetal/mail/ssl/sql 列表页共用；hero 用 custom.css 的 .page-hero
   ======================================================== */
.product-page{ background:#fff; }

/* 区块 + 标题 */
.product-section{ max-width:1200px; margin:0 auto; padding:80px 20px; }
.product-section-title{ text-align:center; max-width:680px; margin:0 auto 36px; }
.product-section-title h2{ font-size:32px; font-weight:700; color:var(--pb-heading); margin-bottom:12px; }
.product-section-title p{ font-size:16px; color:#7a8699; margin:0; }

/* 分类标签 */
.product-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:36px; }
.product-tab{ font-size:15px; font-weight:600; color:#44516a; background:#fff; border:1px solid var(--pb-border); padding:10px 20px; cursor:pointer; transition:.2s; }
.product-tab:hover{ border-color:var(--pb-primary); color:var(--pb-primary); }
.product-tab.active{ background:linear-gradient(135deg,var(--pb-primary),var(--pb-primary-dark)); border-color:transparent; color:#fff; box-shadow:0 8px 20px rgba(37,99,235,.28); }

/* 产品网格 + 卡片 */
.product-list{ display:none; }
.product-list.active{ display:block; animation:pdFade .35s ease; }
@keyframes pdFade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.product-empty{ grid-column:1/-1; text-align:center; color:#9aa6b4; padding:60px 0; }
.product-card{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--pb-border); transition:transform .25s, box-shadow .25s, border-color .25s; }
.product-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(20,40,80,.12); border-color:#cdd9f5; }
.product-card-badge{ position:absolute; top:0; right:0; z-index:1; background:linear-gradient(135deg,var(--pb-primary),var(--pb-primary-dark)); color:#fff; font-size:12px; font-weight:700; padding:5px 12px; }
.product-card-header{ padding:24px 24px 16px; border-bottom:1px solid #eef1f6; }
.product-card-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--pb-primary),var(--pb-primary-dark)); margin-bottom:14px; }
.product-card-icon svg{ width:24px; height:24px; color:#fff; }
.product-card-name{ font-size:21px; font-weight:700; color:var(--pb-heading); }
.product-card-desc{ font-size:14px; color:var(--pb-muted); margin-top:5px; min-height:18px; }
.product-card-body{ padding:18px 24px; }
.product-spec-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px dashed #eef1f6; }
.product-spec-row:last-child{ border-bottom:none; }
.product-spec-label{ display:inline-flex; align-items:center; gap:8px; font-size:15px; color:#7a8699; }
.product-spec-label svg{ width:18px; height:18px; color:var(--pb-primary); flex:0 0 auto; }
.product-spec-value{ font-size:15px; font-weight:600; color:#27344a; text-align:right; }
.product-card-features{ padding:4px 24px 16px; display:flex; flex-direction:column; gap:8px; }
.product-feature{ display:flex; align-items:center; gap:8px; font-size:14px; color:#5f6b7e; }
.product-feature svg{ width:15px; height:15px; color:#10b981; flex:0 0 auto; }
.product-card-footer{ margin-top:auto; padding:18px 24px 22px; border-top:1px solid #eef1f6; background:#fafbfd; }
.product-price-group{ margin-bottom:14px; }
.product-price-main{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.product-price-amount{ font-size:31px; font-weight:800; color:var(--pb-primary); }
.product-price-period{ font-size:15px; color:var(--pb-muted); }
.product-price-discount{ font-size:13px; font-weight:700; color:#dc2626; background:#fff0f0; border:1px solid #fbcbcb; padding:2px 8px; }
.product-price-yearly{ font-size:14px; color:var(--pb-muted); margin-top:4px; }
/* 库存徽标（裸金属） */
.product-stock-badge{ display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:12px; font-weight:600; color:#0f9d6b; background:#eafaf3; border:1px solid #c7efdd; padding:4px 10px; }
.product-stock-badge svg{ flex:0 0 auto; }
.product-stock-badge strong{ font-weight:800; }
.product-stock-badge.low-stock{ color:#d97706; background:#fff7e6; border-color:#fde3b3; }
.product-buy-btn{ display:block; text-align:center; background:linear-gradient(135deg,var(--pb-primary),var(--pb-primary-dark)); color:#fff; font-size:16px; font-weight:700; padding:14px; text-decoration:none; transition:.25s; }
.product-buy-btn:hover{ color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.34); transform:translateY(-2px); }

/* 优势/特性区（灰底） */
.product-features-section{ background:var(--pb-soft); padding:80px 0; }
.product-features-container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.product-features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* 四块一行（如 host 支持的功能与技术）；自带响应式降列，优先级高于下方基础媒体查询 */
.product-features-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:992px){ .product-features-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .product-features-grid.cols-4{ grid-template-columns:1fr; } }
.product-feature-card{ background:#fff; border:1px solid var(--pb-border); padding:30px 26px; transition:transform .25s, box-shadow .25s; }
.product-feature-card:hover{ transform:translateY(-5px); box-shadow:0 16px 38px rgba(20,40,80,.1); }
.product-feature-card h3{ font-size:18px; font-weight:700; color:var(--pb-heading); margin-bottom:10px; }
.product-feature-card p{ font-size:14px; color:#7a8699; line-height:1.8; margin:0; }
.product-feature-icon{ width:54px; height:54px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--pb-primary),var(--pb-primary-dark)); margin-bottom:18px; }
.product-feature-icon svg{ width:26px; height:26px; color:#fff; }
/* 帮助区文章链接（覆盖旧内联深色） */
.product-feature-card .product-feature a{ color:#5f6b7e; }
.product-feature-card .product-feature a:hover{ color:var(--pb-primary); }

@media (max-width:992px){
  .product-grid,.product-features-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .product-section{ padding:54px 16px; }
  .product-section-title h2{ font-size:26px; }
  .product-grid,.product-features-grid{ grid-template-columns:1fr; }
  .product-features-section{ padding:54px 0; }
}

/* SSL/数据库 证书类型徽标（ssl + sql 展示页共用） */
.ssl-brand-badge{ display:inline-block; padding:5px 14px; font-size:13px; font-weight:700; color:#fff; line-height:1.4; }
.ssl-type-dv{ background:#10b981; }
.ssl-type-ov{ background:var(--pb-primary); }
.ssl-type-ev{ background:linear-gradient(135deg,#f59e0b,#d97706); }

/* SSL 证书页：多域名输入 */
.ssl-domains-input{ display:flex; flex-direction:column; gap:10px; }
.ssl-domain-row{ display:flex; gap:10px; align-items:center; }
.ssl-domain-row .product-buy-input{ flex:1; }
.ssl-domain-row .ssl-remove-domain{ flex:0 0 auto; width:40px; height:44px; display:flex; align-items:center; justify-content:center; color:#ef4444; background:#fff; border:1px solid var(--pb-border); cursor:pointer; }
.ssl-domain-row .ssl-remove-domain:hover{ border-color:#ef4444; background:#fef2f2; }
.ssl-add-domain-btn{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:9px 16px; font-size:14px; font-weight:600; color:var(--pb-primary); background:#fff; border:1px solid var(--pb-border); cursor:pointer; transition:.2s; }
.ssl-add-domain-btn:hover{ border-color:var(--pb-primary); background:var(--pb-soft); }