/* ==========================================================================
   YIXU Tools — 产品页样式（#14）
   ⚠️ 视觉基准：CARBON_FINGER_STYLE_STANDARD.md（2026-09-14 锁定）
      炭黑 #161719 / 白 / 浅板 #F2F2F0 / 橄榄 #70843F / 次要灰 #6C7370
      字体 Arial 类无衬线；方角照片框；禁止渐变、阴影、装饰图形、图标
   仅引用 design-tokens 的通用变量，产品页自有色值在此定义。
   ========================================================================== */

:root {
  --p-ink:      #161719;   /* 炭黑主字段 */
  --p-panel:    #F2F2F0;   /* 规格条 / 浅面板 */
  --p-row:      #202427;   /* 询盘行填充 */
  --p-chip:     #2A2E31;   /* 概览规格 chip */
  --p-olive:    #70843F;   /* 橄榄强调（锁��标准色） */
  --p-olive-lt: #D0CF95;   /* 浅橄榄 eyebrow */
  --p-gray:     #6C7370;   /* 次要文字 */
  --p-line:     #D9DAD7;   /* 浅分隔线 */
}

.p-page { background: var(--neutral-0); color: var(--p-ink); }

/* ============================== 01 概览（深色场） ============================== */
.p-hero { background: var(--p-ink); color: #fff; border-top: 10px solid var(--p-olive); }
/* ⚠️ .p-hero__inner 同时挂 .wrap 类（提供 padding: 0 var(--gutter) 的左右安全边）。
   这里必须用 padding-block（只管上下），**不能用 padding 简写**——
   `padding: 72px 0 64px` 里的左右 0 会把 .wrap 的左右内边距整个覆盖掉，
   导致文字直接贴黑框边缘（老板反馈「左侧文字离黑框太近，完全没有空间」）。

   深色场是「出血」版式（黑框通栏），文字靠内边距呼吸，所以左右要比普通白底区
   更宽：全局 gutter 24px 对 50px 的大标题太紧，这里额外加到 56px。
   用 padding-inline 而非再叠 .wrap —— 两者都是 0 左 0 右，padding-inline 会一并覆盖，
   正好是我们想要的（明确接管，不留隐患）。 */
.p-hero__inner {
  display: grid; grid-template-columns: 1fr 420px; gap: 56px;
  padding-block: 72px 64px;
  padding-inline: 56px;
  align-items: start;
}
.p-hero__eyebrow { color: var(--p-olive-lt); font-size: 22px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.p-hero h1 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.14; margin: 18px 0 20px; font-weight: 700; }
.p-hero__lede { color: #A9AFAC; font-size: 24px; line-height: 1.55; max-width: 56ch; }
.p-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 28px 0 20px;
  background: var(--p-olive); color: #fff; font-size: 18px; font-weight: 700;
  padding: 8px 16px; border-radius: 3px;
}
.p-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.p-chip {
  background: var(--p-chip); color: #E8EBE9; border-radius: 3px;
  padding: 12px 18px; min-width: 150px;
}
.p-chip dt { font-size: 15px; color: #9AA29E; margin: 0 0 4px; }
.p-chip dd { font-size: 24px; font-weight: 700; margin: 0; }
.p-chip dd.is-tbd { color: var(--p-olive-lt); font-size: 18px; font-weight: 600; }
.p-supplier { margin-top: 28px; color: #E8EBE9; font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.p-figure { background: #fff; padding: 16px; }
.p-figure img { width: 100%; height: auto; display: block; }

/* ============================== 内页通用 ============================== */
.p-section { padding: 64px 0; }
.p-section + .p-section { border-top: 1px solid var(--p-line); }
.p-h2 { font-size: clamp(26px, 3vw, 42px); font-weight: 700; margin: 0 0 10px; }
.p-sub { color: var(--p-gray); font-size: 24px; margin: 0 0 34px; }
.p-split { display: grid; grid-template-columns: 470px 1fr; gap: 70px; align-items: start; }
.p-photo { border: 1px solid var(--p-line); background: #fff; }
.p-photo img { width: 100%; height: auto; }

/* 图片说明文字（#30 批3：实机照/ 螺纹特写的免责与提示） */
.p-photo__cap {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--p-line);
  color: var(--p-gray);
  font-size: 13px;
  line-height: 1.5;
}
.p-confirm {
  background: var(--p-ink); color: #fff; font-size: 24px; font-weight: 700;
  padding: 16px 20px; margin-top: 26px;
}

/* ============================== 规格表 ============================== */
.p-table { width: 100%; border-collapse: collapse; font-size: 20px; }
.p-table th, .p-table td { padding: 14px 16px; text-align: left; vertical-align: top; }
.p-table thead th { font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--p-gray); border-bottom: 1px solid var(--p-line); }
.p-table tbody tr:nth-child(odd)  { background: var(--p-panel); }
.p-table tbody tr:nth-child(even) { background: #fff; }
.p-table tbody th { font-weight: 700; width: 44%; border-right: 1px solid var(--p-line); }
.p-table td { font-weight: 700; }
.p-table td .val { font-weight: 700; }

/* ============================== 正文段（#30 迁入的长描述） ============================== */
.p-prose { max-width: 76ch; }
.p-prose p { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.p-prose p + p { margin-top: 14px; }

/* ============================== 兼容块 ============================== */
.p-brand {
  font-size: clamp(34px, 4.4vw, 72px); font-weight: 700; line-height: 1.1;
  letter-spacing: -.01em; margin: 10px 0 26px;
}
.p-points { display: grid; gap: 18px; }
.p-points li { position: relative; padding-left: 30px; color: var(--p-gray); font-size: 21px; line-height: 1.6; }
.p-points li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 11px; height: 11px; background: var(--p-olive); border-radius: 50%;
}
.p-compats { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 20px; }
.p-compats th, .p-compats td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--p-line); vertical-align: top; }
.p-compats th { font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--p-gray); }

/* 三态标记（产品页版，色值随 CF 橄榄色系） */
.p-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; white-space: nowrap; }
.p-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.p-status--reported  { color: #7A6410; }  .p-status--reported::before  { background: #A8861B; }
.p-status--verified  { color: #4A6118; }  .p-status--verified::before  { background: var(--p-olive); }
.p-status--tbd       { color: var(--p-gray); } .p-status--tbd::before    { background: #B9BDBB; }
.p-status--pending   { color: var(--p-gray); } .p-status--pending::before  { background: #D9DAD7; }

/* ============================== 警示条 ============================== */
.p-notice {
  background: var(--p-panel); border-left: 4px solid var(--p-olive);
  padding: 16px 20px; margin: 22px 0; font-size: 19px; color: #3B4144;
}
.p-notice strong { font-weight: 700; }

/* ============================== 买家 ============================== */
.p-buyers { display: flex; flex-wrap: wrap; gap: 12px; }
.p-buyers li {
  background: var(--p-panel); padding: 12px 18px; font-size: 20px; color: #3B4144;
}

/* ============================== 05 询盘 ============================== */
.p-inquiry { background: var(--p-row); color: #fff; padding: 56px 0; }
.p-inquiry__inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.p-inquiry h2 { color: #fff; font-size: clamp(24px, 2.6vw, 36px); margin: 0 0 8px; }
.p-inquiry p { color: #B7BDB9; font-size: 20px; margin: 0; }
.p-contact { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.p-contact a {
  color: #fff; border-bottom: 2px solid var(--p-olive); padding-bottom: 2px; font-size: 20px;
}
.p-contact span { color: #8E9693; font-size: 18px; }

/* ============================== 待补产品 ============================== */
.p-pending { background: var(--p-panel); padding: 40px; border: 1px dashed var(--p-line); }
.p-pending h2 { font-size: 26px; margin: 0 0 10px; }
.p-pending p { color: var(--p-gray); font-size: 20px; }

/* ============================== 同系列 ============================== */
.p-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.p-related a { border: 1px solid var(--p-line); background: #fff; padding: 16px; display: block; }
.p-related a:hover { border-color: var(--p-olive); }
.p-related img { width: 100%; height: auto; background: var(--p-ink); }
.p-related .rid { font-size: 18px; font-weight: 700; margin-top: 10px; }

/* ============================== 响应式 ============================== */
@media (max-width: 1024px) {
  .p-hero__inner { grid-template-columns: 1fr; gap: 34px; padding-inline: var(--gutter); }
  .p-split { grid-template-columns: 1fr; gap: 34px; }
  .p-related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .p-section { padding: 48px 0; }
  /* 同上：必须 padding-block / padding-inline分开写，
     `padding: 44px 0 40px` 会再次把左右内边距归零（移动端同样会贴边） */
  .p-hero__inner { padding-block: 44px 40px; padding-inline: var(--gutter); }
  .p-hero__lede, .p-sub, .p-confirm, .p-points li, .p-buyers li { font-size: 17px; }
  .p-chip { min-width: 0; flex: 1 1 46%; padding: 10px 14px; }
  .p-chip dd { font-size: 19px; }
  .p-table, .p-compats { font-size: 17px; }
  .p-table th, .p-table td, .p-compats th, .p-compats td { padding: 10px 12px; }
  .p-related { grid-template-columns: 1fr 1fr; }
  .p-inquiry__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================== 旧站复刻详情页（#32，老板 2026-10-06） ==============================
   以老板截图为基准复刻 yixutools.com 旧站 WooCommerce 详情页；
   唯一差异：去掉「Product overview」折叠块（老板标注删除）。
   颜色/间距引用 design-tokens 变量；WooCommerce 视觉（绿色 CTA / 斑马参数表 / 黑条）按截图取值。 */
.pdu-main { padding: 26px 0 8px; }
.pdu-main__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }

/* ---- 左列：纯图集（老板 2026-10-06 终版：大图 + 缩略图条，无参数表） ---- */
.pdu-stage {
  position: relative; background: #fff; border: 1px solid var(--p-line);
}
.pdu-stage img { display: block; width: 100%; height: auto; }
.pdu-zoom {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid var(--p-line); color: var(--p-gray);
}
.pdu-zoom:hover { color: var(--p-ink); border-color: var(--p-gray); }
/* 表格仅在 Product details 折叠块内使用 */
.pdu-table { width: 100%; border-collapse: collapse; border: 1px solid var(--p-line); margin: 10px 0 4px; }
.pdu-table th, .pdu-table td {
  text-align: left; padding: 8px 12px; font-size: 13px; line-height: 1.5;
  border-bottom: 1px solid var(--p-line);
}
.pdu-table th { width: 40%; font-weight: 400; color: var(--p-gray); }
.pdu-table td { font-weight: 700; }
.pdu-table tr.alt { background: #F5F5F3; }
.pdu-acc__h3 { font-size: 15px; font-weight: 700; margin: 16px 0 2px; }
.pdu-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pdu-thumb {
  width: 64px; height: 64px; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--p-line); overflow: hidden;
}
.pdu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdu-thumb.is-active { border-color: var(--p-olive); box-shadow: 0 0 0 1px var(--p-olive); }

/* ---- 右列：summary ---- */
.pdu-summary { display: flex; flex-direction: column; }
.pdu-cat a { font-size: 13px; color: #2F6B3F; }
.pdu-title { font-size: clamp(26px, 3vw, 34px); font-weight: 700; line-height: 1.25; margin: 8px 0 14px; }
.pdu-lead { color: var(--p-gray); font-size: 16px; line-height: 1.65; margin: 0 0 26px; }
.pdu-cta {
  display: block; text-align: center; background: #2F6B3F; color: #fff;
  font-size: 18px; font-weight: 700; padding: 16px 20px; border-radius: 4px;
}
.pdu-cta:hover { background: #275A34; }
.pdu-links { display: flex; gap: 28px; margin-top: 16px; }
.pdu-links a { color: #2F6B3F; font-size: 15px; }
.pdu-links a:hover { text-decoration: underline; }

/* ---- lower：Category 行 + 折叠块 ---- */
.pdu-lower { padding: 26px 0 60px; }
.pdu-lower__inner {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px;
  border-top: 1px solid var(--p-line); padding-top: 26px;
}
.pdu-meta { font-size: 14px; color: var(--p-gray); }
.pdu-meta a { color: #2F6B3F; }
.pdu-acc { border-bottom: 1px solid var(--p-line); }
.pdu-acc summary {
  cursor: pointer; font-weight: 700; font-size: 17px; padding: 14px 2px;
  list-style-position: outside;
}
.pdu-acc__body { padding: 0 2px 18px; color: var(--p-ink); }
.pdu-acc__body p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; }

@media (max-width: 1024px) {
  .pdu-main__inner { grid-template-columns: 1fr; gap: 30px; }
  .pdu-lower__inner { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- 品牌内链 + 全局 Compatibility Notice（#33 SEO 落地） ---- */
.pdu-brandlinks { margin-top: 20px; font-size: 14px; color: var(--p-gray); }
.pdu-brandlinks a { color: #2F6B3F; }
.pdu-brandlinks a:hover { text-decoration: underline; }
.pdu-notice {
  margin-top: 16px; padding: 12px 16px;
  background: var(--p-panel, #F2F2F0); border-left: 3px solid var(--p-gray);
  font-size: 12.5px; line-height: 1.6; color: var(--p-gray);
}

/* ---- FAQ 折叠块内容（A1） ---- */
.pdu-faq__q { font-weight: 700; margin: 14px 0 4px; }
.pdu-faq__q:first-child { margin-top: 0; }

/* 无图占位（详情页主区） */
.pdu-stage__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 320px; padding: 30px; text-align: center;
  color: var(--p-gray, #6C7370); font-size: 14px; line-height: 1.6;
}
.pdu-stage__empty p { margin: 4px 0; }