/* ==========================================================================
   DPJ Wholesale · 公开内容页视觉
   --------------------------------------------------------------------------
   作用：让 About us / Shipping / Returns / Buyer protection / FAQ / Contact /
   Privacy / Terms / Knowledge pages 摆脱"裸 hero + 纯文本"的单调观感，做成
   "图文并茂"的导购型内容页：插画 hero、关键数据条、流程时间线、图标主题卡
   和提示 callout。设计令牌复用 storefront-theme.css 的 --sf-* 系列。

   加载位置：在 page() 的内联 <style> 之后作为最后一张 <link>，凭"后加载"
   压住旧层。版本号取文件内容哈希（themeStylesheet() 自动算），文件一改
   浏览器立即拉新版，不受 CDN/边缘缓存拖累。

   文件划分（每个 ≤600 行）：
   - storefront-theme.css   设计令牌、基础版式、页眉、页脚、按钮、表单
   - storefront-home.css    首页专属板块
   - storefront-departments.css  首屏左侧分类栏
   - storefront-content.css 本文件：内容页视觉积木
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 通用：内容页容器、可达性工具
   -------------------------------------------------------------------------- */
.content-page {
  position: relative;
  display: block;
  padding-block: 8px 32px;
}

.content-band {
  width: 100%;
  max-width: var(--sf-container);
  margin-inline: auto;
  padding: 28px var(--sf-gutter);
}
.content-band + .content-band { padding-top: 0; }

.content-band__title {
  margin: 0 0 18px;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--sf-ink);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  border: 0; clip: rect(0 0 0 0);
  overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. 视觉 Hero：左侧文案、右侧插画
   -------------------------------------------------------------------------- */
.content-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 32px;
  max-width: var(--sf-container);
  margin: 24px auto 8px;
  padding: 40px var(--sf-gutter) 44px;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--sf-accent) 14%, transparent) 0, transparent 55%),
    linear-gradient(180deg, var(--sf-accent-soft) 0%, #fff 100%);
  border: 1px solid var(--sf-accent-line);
  border-radius: 20px;
  overflow: hidden;
}
.content-hero::after {
  /* 装饰性同心圆（极淡），用伪元素避免和插画冲突 */
  content: "";
  position: absolute;
  right: -120px; top: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 1px solid var(--sf-accent-line);
  box-shadow: 0 0 0 40px rgba(255,255,255,.6) inset, 0 0 0 41px var(--sf-accent-line) inset;
  opacity: .55;
  pointer-events: none;
}

.content-hero__copy { position: relative; z-index: 1; }
.content-hero__eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid var(--sf-accent-line);
  color: var(--sf-accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--sf-pill);
}
.content-hero__title {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--sf-ink);
}
.content-hero__summary {
  margin: 0 0 18px;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sf-ink-soft);
}
.content-hero__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.content-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-pill);
  font-size: 12px;
  color: var(--sf-muted);
}

.content-hero__art {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
  color: var(--sf-accent);
}
.content-illustration {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
}
.content-illustration__bg { opacity: .35; }

/* --------------------------------------------------------------------------
   3. 一眼概览（Quick facts）
   -------------------------------------------------------------------------- */
.content-quickfacts__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.content-quickfact {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.content-quickfact:hover {
  transform: translateY(-1px);
  border-color: var(--sf-accent-line);
  box-shadow: 0 6px 18px rgba(11,122,83,.08);
}
.content-quickfact__icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--sf-accent-soft);
  color: var(--sf-accent-dark);
  border-radius: 12px;
}
.content-quickfact__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sf-muted);
}
.content-quickfact__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--sf-ink);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   4. 目录 chips
   -------------------------------------------------------------------------- */
.content-toc-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.content-toc-chips__eyebrow {
  margin: 0 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sf-muted);
}
.content-toc-chips ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.content-toc-chips__chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--sf-accent-soft);
  color: var(--sf-accent-dark);
  border: 1px solid var(--sf-accent-line);
  border-radius: var(--sf-pill);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.content-toc-chips__chip:hover {
  background: var(--sf-accent);
  color: #fff;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   5. 流程时间线（Steps）
   -------------------------------------------------------------------------- */
.content-steps__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  position: relative;
}
.content-step {
  position: relative;
  padding: 18px 18px 20px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}
.content-step__num {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--sf-accent);
  color: #fff;
  border-radius: 12px;
  position: relative;
  font-weight: 700;
}
.content-step__num b {
  position: relative;
  z-index: 1;
  font-size: 18px;
  line-height: 1;
}
.content-step__num .content-mini-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  opacity: .15;
}
.content-step__body h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--sf-ink);
}
.content-step__body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sf-ink-soft);
}
.content-step__connector {
  position: absolute;
  width: 32px; height: 14px;
  right: -25px; top: 22px;
  z-index: 1;
  color: var(--sf-accent);
}

/* --------------------------------------------------------------------------
   6. 主题卡（Topic cards）
   -------------------------------------------------------------------------- */
.content-topics__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.content-topic-card {
  position: relative;
  padding: 24px 24px 22px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: 16px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.content-topic-card:hover {
  transform: translateY(-1px);
  border-color: var(--sf-accent-line);
  box-shadow: 0 8px 22px rgba(11,122,83,.07);
}
.content-topic-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--sf-accent-soft);
  color: var(--sf-accent-dark);
  border-radius: 12px;
  margin-bottom: 12px;
}
.content-topic-card__title {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--sf-ink);
  letter-spacing: -.01em;
}
.content-topic-card__body {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sf-ink-soft);
}
.content-topic-card__checklist {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 6px;
}
.content-topic-card__checklist li {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 8px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sf-ink-soft);
}
.content-topic-card__checklist .content-mini-icon {
  width: 18px; height: 18px;
  margin-top: 2px;
  color: var(--sf-accent-dark);
  stroke-width: 2.4;
}

/* --------------------------------------------------------------------------
   7. Callout（强调提示框）
   -------------------------------------------------------------------------- */
.content-callout {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  margin: 8px var(--sf-gutter) 32px;
  padding: 18px 20px;
  background: var(--sf-accent-soft);
  border: 1px solid var(--sf-accent-line);
  border-left: 4px solid var(--sf-accent);
  border-radius: 12px;
  max-width: calc(var(--sf-container) - var(--sf-gutter) * 2);
  margin-inline: auto;
}
.content-callout--warn {
  background: #fff7ed;
  border-color: #f5d0a8;
  border-left-color: #c2410c;
}
.content-callout--warn .content-callout__icon { color: #c2410c; background: #fde6cf; }
.content-callout--success {
  background: #ecfdf5;
  border-color: #a7e3c1;
  border-left-color: var(--sf-accent-dark);
}
.content-callout--info .content-callout__icon { color: var(--sf-accent-dark); background: var(--sf-accent-soft); }
.content-callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
}
.content-callout__body h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--sf-ink);
}
.content-callout__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sf-ink-soft);
}

/* --------------------------------------------------------------------------
   8. 数据条（Stat strip）
   -------------------------------------------------------------------------- */
.content-stats__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.content-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 18px 20px;
  background: var(--sf-accent-soft);
  border: 1px solid var(--sf-accent-line);
  border-radius: 14px;
}
.content-stat__value {
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--sf-accent-dark);
  line-height: 1.1;
}
.content-stat__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sf-ink);
}
.content-stat__hint {
  font-size: 12px;
  color: var(--sf-muted);
}

/* --------------------------------------------------------------------------
   9. 小图标 / 插画尺寸
   -------------------------------------------------------------------------- */
.content-mini-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.content-mini-icon[fill]:not([fill="none"]) circle,
.content-mini-icon[fill]:not([fill="none"]) rect { stroke: none; }
.content-illustration { color: var(--sf-accent); }

/* --------------------------------------------------------------------------
   10. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .content-hero {
    grid-template-columns: 1fr;
    padding: 28px 22px 32px;
    margin: 18px 16px 8px;
  }
  .content-hero__art { min-height: 200px; order: -1; }
  .content-band { padding-inline: 22px; }
  .content-callout { margin-inline: 22px; }
  .content-topics__grid { grid-template-columns: 1fr; }
  .content-steps__list { grid-template-columns: 1fr 1fr; }
  .content-step__connector { display: none; }
}
@media (max-width: 640px) {
  .content-steps__list { grid-template-columns: 1fr; }
  .content-quickfacts__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .content-quickfacts__grid { grid-template-columns: 1fr; }
  .content-hero__title { font-size: 28px; }
}