/* ===================================================================
   pages.css — 二级页共用样式 (about / service / contact / privacy / agreement)
   复用 style.css 的 CSS variables
   =================================================================== */

.page-hero{
  max-width:1280px;margin:0 auto;
  padding:60px 32px 40px;
  text-align:center;
}
.page-hero h1{
  font-family:var(--serif);font-size:48px;font-weight:500;
  letter-spacing:-.5px;margin-bottom:14px;
}
.page-hero p{
  font-size:15px;color:var(--ink-soft);
  max-width:640px;margin:0 auto;
}

/* ============ 通用 section ============ */
.page-section{
  max-width:880px;margin:0 auto;padding:0 32px 60px;
}
/* v2.4 移动优先: 默认 24px 20px */
.page-card{
  background:var(--bg-card);border-radius:8px;
  padding:24px 20px;box-shadow:var(--shadow);
  margin-bottom:18px;
}
.page-card h2{
  font-family:var(--serif);font-size:24px;font-weight:500;
  margin-bottom:20px;padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.page-card h2::before{
  content:"";display:inline-block;width:4px;height:18px;
  background:var(--accent);margin-right:12px;
  vertical-align:middle;border-radius:2px;
}
.page-card h3{
  font-size:16px;font-weight:600;color:var(--ink);
  margin:24px 0 10px;
}
.page-card p{
  font-size:14px;color:var(--ink-soft);line-height:1.85;
  margin-bottom:14px;
}
.page-card ul,.page-card ol{
  padding-left:22px;margin-bottom:14px;
}
.page-card li{
  font-size:14px;color:var(--ink-soft);line-height:1.85;
  margin-bottom:6px;
}
.page-card li strong{color:var(--ink);font-weight:500}
.page-card a{color:var(--accent-deep);border-bottom:1px solid var(--accent-deep)}

/* 时间线 */
.timeline{
  list-style:none;padding:0;margin:0;
  position:relative;
}
.timeline::before{
  content:"";position:absolute;left:8px;top:0;bottom:0;
  width:1px;background:var(--line);
}
.timeline li{
  position:relative;padding-left:36px;
  margin-bottom:18px;font-size:14px;color:var(--ink-soft);
  line-height:1.7;
}
.timeline li::before{
  content:"";position:absolute;left:4px;top:9px;
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);
}
.timeline li strong{color:var(--ink);font-weight:600;margin-right:8px}

/* FAQ */
.faq-list{margin-top:20px}
.faq-item{
  border-bottom:1px dashed var(--line);
  padding:18px 0;
}
.faq-item:first-child{border-top:1px dashed var(--line)}
.faq-q{
  font-size:14px;font-weight:600;color:var(--ink);
  margin-bottom:8px;display:flex;gap:8px;align-items:flex-start;
}
.faq-q::before{
  content:"Q";flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.faq-a{
  font-size:13px;color:var(--ink-soft);line-height:1.8;
  padding-left:30px;
}
.faq-a::before{
  content:"A";margin-right:8px;
  color:var(--ink-faint);font-weight:600;
}

/* 联系卡 */
/* v2.4 移动优先: 默认 1 列堆叠, PC 模拟框里也走 1 列 */
.contact-grid{
  display:grid;grid-template-columns:1fr;gap:18px;
  margin-top:24px;
}
.contact-item{
  background:var(--bg-soft);border-radius:6px;
  padding:20px 22px;display:flex;gap:14px;align-items:flex-start;
}
.contact-icon{
  width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.contact-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.contact-info{flex:1;min-width:0}
.contact-label{font-size:12px;color:var(--ink-faint);letter-spacing:1px;margin-bottom:4px}
.contact-value{font-size:15px;color:var(--ink);font-weight:500}
.contact-sub{font-size:12px;color:var(--ink-soft);margin-top:3px}

/* 配送表格 */
.ship-table{
  width:100%;border-collapse:collapse;margin-top:14px;
  font-size:13px;
}
.ship-table th,.ship-table td{
  padding:12px 14px;text-align:left;
  border-bottom:1px solid var(--line);
}
.ship-table th{
  background:var(--bg-soft);font-weight:600;color:var(--ink);
  font-size:12px;letter-spacing:.5px;
}
.ship-table td{color:var(--ink-soft)}
.ship-table tr:last-child td{border-bottom:0}

/* 选物原则 (about) */
.principle-grid{
  display:grid;grid-template-columns:1fr;gap:18px;
  margin-top:20px;
}
.principle-card{
  background:var(--bg-soft);border-radius:8px;padding:24px;
}
.principle-num{
  font-family:var(--serif);font-size:36px;
  color:var(--accent-deep);font-weight:500;line-height:1;
  margin-bottom:10px;
}
.principle-title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px}
.principle-desc{font-size:13px;color:var(--ink-soft);line-height:1.7}

/* 通用 5 列表 (服务/协议) */
.spec-list{
  list-style:none;padding:0;margin:0;
  counter-reset: spec;
}
.spec-list > li{
  position:relative;padding:18px 0 18px 50px;
  border-bottom:1px solid var(--line);
  counter-increment: spec;
  font-size:14px;color:var(--ink-soft);line-height:1.8;
}
.spec-list > li:last-child{border-bottom:0}
.spec-list > li::before{
  content:counter(spec);
  position:absolute;left:0;top:18px;
  width:32px;height:32px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;font-family:var(--serif);
}

/* 移动端 */
@media (max-width:780px){
  .page-hero{padding:40px 20px 30px}
  .page-hero h1{font-size:32px}
  .page-section{padding:0 16px 40px}
  .page-card h2{font-size:20px}
  .ship-table{font-size:12px}
  .ship-table th,.ship-table td{padding:8px 10px}

  /* ship-table 移动端: 转卡片堆叠 */
  .ship-table thead{display:none}
  .ship-table,.ship-table tbody,.ship-table tr,.ship-table td{display:block;width:100%}
  .ship-table tr{margin-bottom:14px;padding:12px 14px;background:var(--bg-soft);border-radius:6px;border:1px solid var(--line)}
  .ship-table td{padding:5px 0;border-bottom:0;display:flex;gap:8px;align-items:flex-start}
  .ship-table td::before{
    content:attr(data-th);
    flex:0 0 70px;
    font-size:11px;color:var(--ink-faint);
    letter-spacing:.5px;padding-top:1px;
  }
  .ship-table td:first-child{font-weight:600;color:var(--ink);font-size:14px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:4px;display:block}
  .ship-table td:first-child::before{display:none}
}