/* pdp-tabs.v1.css —— 产品详情页「四个签」版式（TASK-0183 · 2026-09-23）
   配色一律用官网真实 CSS 变量（--copper / --navy / --ink / --muted / --line / --paper / --paper-2 / --radius），
   每个 var() 都带官网同值的兜底，颜色不允许自配（业主 2026-09-23：「颜色不要用红色，和我们之前的颜色一样」）。
   只在试点页引用（<link href="/assets/pdp-tabs.v1.css?v=1">）；铺开时由生成器统一输出。 */

/* ── 外层：与其它 section 同节奏 ───────────────────────────────── */
.pdp-tabs-section { padding-top: clamp(34px, 4vw, 54px); padding-bottom: clamp(30px, 4vw, 48px); }
.pdp-anchor { display: block; position: relative; top: -96px; visibility: hidden; }  /* 锚点避开 sticky 顶栏 */

/* ── 签条 ─────────────────────────────────────────────────────── */
.pdp-tabs {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; border-bottom: 2px solid var(--copper, #9a6b3f); margin: 0 0 0;
}
.pdp-tabs::-webkit-scrollbar { display: none; }
.pdp-tab {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  font: inherit; font-size: 15px; line-height: 1.2; color: var(--ink-2, #2c3743);
  background: var(--paper-2, #f2eee8); border: 1px solid var(--line, #e2ddd5); border-bottom: 0;
  border-radius: var(--radius, 4px) var(--radius, 4px) 0 0;
  padding: 12px 22px; margin-bottom: -2px; position: relative;
}
.pdp-tab:hover { background: #ece5da; }
.pdp-tab:focus-visible { outline: 2px solid var(--copper, #9a6b3f); outline-offset: 2px; }
.pdp-tab[aria-selected="true"] {
  background: var(--copper, #9a6b3f); border-color: var(--copper, #9a6b3f);
  color: #fff; font-weight: 600;
}

/* ── 面板 ─────────────────────────────────────────────────────── */
.pdp-panel { padding: 26px 0 0; }
.pdp-panel[hidden] { display: none !important; }
.pdp-panel:focus { outline: none; }
.pdp-panel:focus-visible { outline: 2px solid var(--copper, #9a6b3f); outline-offset: 3px; }

/* 面板里的块原本是整页 section（自带上下 40–72px 内边距、灰底、分隔线），
   收进签里要压平 —— 只留块与块之间的一条细分隔线。 */
.pdp-panel section.section {
  padding: 0; margin: 0; background: none; border: 0; border-radius: 0;
}
.pdp-panel .wrap { max-width: none; margin: 0; padding: 0; }
.pdp-panel .section + .section,
.pdp-panel > .section-head {
  margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line, #e2ddd5);
}
.pdp-panel .section-head { max-width: 800px; }
.pdp-panel .section-head h2 { font-size: clamp(21px, 2.1vw, 27px); }
.pdp-panel .faq { max-width: none; }
.pdp-panel > section:first-child .section-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* 面板里的卡片 / 时间线在窄签里排两列就够，避免字太小 */
.pdp-panel .pdp-timeline { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pdp-panel .pdp-prod-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ── Key data（常驻，两列 8 条）────────────────────────────────── */
.pdp-keydata { padding-top: clamp(30px, 4vw, 44px); padding-bottom: clamp(26px, 3vw, 36px); }
.pdp-keydata-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 4px; }
.pdp-keydata-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pdp-keydata-table th, .pdp-keydata-table td {
  text-align: left; vertical-align: top; padding: 10px 12px;
  border-bottom: 1px solid var(--line, #e2ddd5);
}
.pdp-keydata-table th {
  width: 42%; color: var(--muted, #6b7683); font-weight: 500; background: var(--paper, #faf8f5);
}
.pdp-keydata-table b { color: var(--ink, #141a21); }
.pdp-kd-badge {
  display: inline-block; background: var(--paper-2, #f2eee8); border: 1px solid var(--line, #e2ddd5);
  color: var(--muted, #6b7683); border-radius: var(--radius, 4px);
  padding: 1px 7px; font-size: 11.5px; line-height: 1.5;
}

/* ── 小屏 ─────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .pdp-tab { padding: 11px 16px; font-size: 14px; }
  .pdp-panel { padding-top: 20px; }
  .pdp-keydata-cols { grid-template-columns: 1fr; gap: 0; }
}

/* ── 打印 ───────────────────────────────────────────────────────
   只印当前选中的签（[hidden] 的面板不会进纸），并且**不要把页面按 A4 的窄宽度
   压成一列** —— 打印宽度约 794 CSS px，正好踩到官网页面的 880px 断点，
   不拦一下的话首屏、Key data、推荐位会全变单列，白白多出三四页。 */
@media print {
  .pdp-anchor { display: none; }
  .pdp-tabs { flex-wrap: wrap; overflow: visible; row-gap: 4px; }  /* 5 个签在 A4 宽度下要能换行，别被裁掉 */
  .pdp-hero-grid { grid-template-columns: 1.1fr 1fr; }
  .pdp-hero-gallery, .pdp-hero-info { position: static; }
  .pdp-keydata-cols { grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .pdlg-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pdp-timeline, .pdp-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-tabs-section { padding-top: 16px; padding-bottom: 16px; }
  .pdp-panel { padding-top: 14px; }
  .pdp-tab { padding: 8px 14px; font-size: 13px; }
  .pdp-tab[aria-selected="true"] { background: var(--paper-2, #f2eee8); color: var(--ink, #141a21); border-color: var(--line, #e2ddd5); }
  .pdp-keydata-table th, .pdp-keydata-table td { padding: 6px 9px; font-size: 12.5px; }
}