/* ============================================================
   LAKEFOX section-product-detail — 产品详情页（外汇 / 贵金属 / 原油）
   依赖 base.css 令牌（禁止裸 hex / 禁止 section 内发明令牌）：
     --space-* 间距 / --radius-* 圆角 / --duration-* 动效 / --ease-out
     --acc（卖点图标，白底 ≈5.7:1 ✓，DESIGN-SPEC §4）
     --color-foreground / --color-card-background / --color-card-border
       （scheme 令牌，fallback 品牌色；rgba(10,10,10,·) 为 --bg-dark 透明化，§2.7 例外）
   结构：header（产品名 h2）→ intro → highlights 卖点卡 grid（移动单列 / ≥768 双列）
         → chapters（多段 <p>）→ specs（dl 表，value 保留换行）→ note（小字）
   RTL：水平方向一律逻辑属性（margin-inline / padding-inline / text-align: start）
   动效：仅 transform / box-shadow / background-color（≤300ms，--duration-fast 150ms）；
         prefers-reduced-motion 局部兜底
   无障碍：图标 aria-hidden（卖点已由标题文字播报）；正文色一律前景令牌
   ============================================================ */

.lf-pdetail--bg-soft {
  background: var(--soft);
}

/* 灰底上让报价表以白卡呈现，避免表格与灰底混在一起 */
.lf-pdetail--bg-soft .lf-pdetail__quotes-wrap {
  padding: var(--space-5);
  background: var(--bg-white);
  border-radius: var(--radius-card, 16px);
}

.lf-pdetail {
  padding-block: var(--section-pad); /* 区块垂直节奏对齐 .lf-container 体系（原 var(--space-12) 硬值 48px → section-pad 同值） */
}

/* ---------- 标题 + 定义段 ---------- */

/* 眉题（参考示例：小号大写 + 朱砂短横线） */
.lf-pdetail__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acc);
}

.lf-pdetail__eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--acc);
}
.lf-pdetail__header {
  margin-block-end: var(--space-4);
}

.lf-pdetail__title {
  color: inherit;
  margin: 0;
  text-wrap: balance; /* 长中文标题断点均衡，避免末行孤字（Stage A P-02） */
}

.lf-pdetail__intro {
  margin-block-end: var(--space-10);
  max-width: var(--measure-long); /* 68ch 长文行长（原 70ch 硬值收敛） */
  font-size: var(--text-6); /* 导语 18px：原 clamp(1rem, 0.875rem + 0.5vw, 1.125rem) 收敛到 --text-6 固定档 */
  line-height: var(--leading-relaxed);
  color: var(--color-foreground, var(--text-primary));
}

/* 多段导语（intro 支持 \n 分段）：段间紧凑，末段下方保留区块间距 */
.lf-pdetail__intro + .lf-pdetail__intro {
  margin-block-start: calc(-1 * var(--space-7));
}

/* ---------- 卖点高亮卡（移动端单列，≥768px 双列） ---------- */
.lf-pdetail__highlights {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-12);
}

.lf-pdetail-highlight {
  /* 客户 2026-09：默认态去掉边框与阴影（白卡浮在灰底上），保留 lf-card--hover 的悬停上浮+阴影动效；
     布局改为图标 → 标题 → 描述 纵向居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  min-height: 0;
  border-color: transparent;
  box-shadow: none;
}

.lf-pdetail-highlight__body {
  min-width: 0;
}

/* 卖点图标：青碧（--up，与图例中绿色图标同族；白底 ≈3.5:1 仅作图形 + 文字双通道，§4 color-not-only） */
.lf-pdetail-highlight__icon {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 92px;
  block-size: 92px;
  color: var(--up);
  animation: lf-hl-float 6s var(--ease) infinite;
  transition: transform var(--duration-slow) var(--ease), color var(--duration-base) var(--ease);
}

/* 装饰底盘：低透明度圆角面板 + 柔光，替代单调的纯线框图标 */
.lf-pdetail-highlight__icon-plate {
  position: absolute;
  inset: 8% ;
  z-index: 0;
  border-radius: 26%;
  background:
    radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--ink) 7%, var(--bg-white)) 0%, color-mix(in srgb, var(--ink) 3%, var(--bg-white)) 62%, var(--bg-white) 100%);
  box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--ink) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: inset var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease), background var(--duration-slow) var(--ease);
}

.lf-pdetail-highlight__icon svg {
  position: relative;
  z-index: 1;
}

/* 第二列图标错峰浮动，避免整排同频 */
.lf-pdetail-highlight:nth-child(2n) .lf-pdetail-highlight__icon {
  animation-delay: -3s;
}

/* 悬停：底盘放大 + 光晕增强 + 图标微微上浮（与 lf-card--hover 的卡片位移叠加） */
.lf-pdetail-highlight:hover .lf-pdetail-highlight__icon {
  transform: translateY(-4px) rotate(-3deg);
}

.lf-pdetail-highlight:hover .lf-pdetail-highlight__icon-plate {
  inset: 2%;
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--acc) 42%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--acc) 18%, transparent);
}

@keyframes lf-hl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.lf-pdetail-highlight__title {
  margin-block-end: var(--space-2);
  font-size: clamp(16px, 1.1vw, 18px); /* 客户 2026-09：标题略收，与描述拉开层级 */
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.lf-pdetail-highlight__desc {
  margin: 0 auto;
  max-inline-size: 32ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ---------- 章节（正文多段） ---------- */
.lf-pdetail__chapters {
  margin-block-end: var(--space-12);
}

.lf-pdetail-chapter {
  padding-block-end: var(--space-8);
  border-block-end: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.08));
}

.lf-pdetail-chapter:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.lf-pdetail-chapter__title {
  margin-block-end: var(--space-3);
}

.lf-pdetail-chapter__body {
  max-width: 70ch;
  margin-block-end: var(--space-3);
  color: var(--color-foreground, var(--text-primary));
}

.lf-pdetail-chapter__body:last-child {
  margin-block-end: 0;
}

/* ---------- 规格表（dl，value 保留换行） ---------- */
.lf-pdetail__specs {
  margin-block-end: var(--space-12);
}

.lf-pdetail__spec-heading {
  margin-block: 0 var(--space-5);
}

.lf-pdetail-specs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lf-pdetail-spec {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.08));
}

.lf-pdetail-spec:first-child {
  padding-block-start: 0;
}

.lf-pdetail-spec:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.lf-pdetail-spec__label {
  font-weight: 600;
  color: var(--color-foreground, var(--text-primary));
}

.lf-pdetail-spec__value {
  margin: 0;
  white-space: pre-line; /* textarea 多行值保留 \n 换行 */
  color: var(--color-foreground, var(--text-primary));
}

/* ---------- 备注（小字，脚注语义） ---------- */
.lf-pdetail__note {
  /* 客户 2026-09：去掉灰底卡片外壳，说明文字改为纯小字（Key Products 下方不再有灰框） */
  margin-block-start: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.lf-pdetail-note {
  font-size: var(--text-3);
}

.lf-pdetail-note p {
  white-space: pre-line; /* 多行脚注保留 \n 换行 */
  color: var(--color-foreground, var(--text-primary));
}

/* ---------- 响应式：≥768px highlights 双列 + spec 双列 ---------- */
@media (min-width: 768px) {
  .lf-pdetail {
    padding-block: var(--section-pad-lg); /* 72px 桌面端 */
  }

  .lf-pdetail__highlights {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .lf-pdetail-spec {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-6);
  }
}

/* ---------- 3 列版式（≥1080px）：6 张卖点卡 3×2 ---------- */
@media (min-width: 1080px) {
  .lf-pdetail__highlights--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lf-pdetail__highlights--cols-3 .lf-pdetail-highlight {
    padding: var(--space-6) var(--space-4);
    gap: var(--space-3);
  }

  .lf-pdetail__highlights--cols-3 .lf-pdetail-highlight__icon {
    inline-size: 76px;
    block-size: 76px;
  }
}


/* ---------- reduced-motion 局部兜底（base.css 全局 kill-switch 之外的段落级保障） ---------- */
@media (prefers-reduced-motion: reduce) {
  .lf-pdetail-highlight {
    transition: none;
  }

  .lf-pdetail-highlight__icon,
  .lf-pdetail-highlight:hover .lf-pdetail-highlight__icon {
    animation: none;
    transform: none;
  }

  .lf-pdetail-highlight:hover {
    box-shadow: none;
    transform: none;
  }
}

/* ---------- 产品报价表（blocks: quote，买入价/卖出价/点差/交易） ----------
   白底卡片 + 表格（G §09 行情表三线式：表头 --thead 淡底、行间发丝线）；
   数值 Plex Mono 等宽 + dir="ltr"（RTL 数字保持左到右，先例 live-quotes） */
.lf-pdetail__quotes-wrap {
  margin-block-start: var(--space-10);
}

.lf-pdetail__quotes-heading {
  margin-block: 0 var(--space-5);
}

.lf-pdetail__quotes-scroll {
  overflow-x: auto; /* 移动端横向滚动（预留） */
  border: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.08));
  border-radius: var(--radius-base);
  background: var(--bg);
}

.lf-pdetail__quotes {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.lf-pdetail__quotes-head {
  padding: var(--space-3) var(--space-5);
  background: var(--thead); /* 表头底色（客户 2026-08：科技感卡片表） */
  color: var(--color-foreground, var(--text-primary));
  font-size: var(--text-3);
  font-weight: 700;
  text-align: start;
  white-space: nowrap;
}

.lf-pdetail__quotes-head--product {
  text-align: start;
}

.lf-pdetail__quotes-head--action {
  text-align: end;
}

.lf-pdetail__quote-row + .lf-pdetail__quote-row > * {
  border-block-start: 1px solid var(--hairline); /* 行间发丝分割 + 留白（客户 2026-08） */
}

.lf-pdetail__quote-row {
  transition: background-color var(--duration-fast) var(--ease-out);
}

.lf-pdetail__quote-row:hover {
  background: var(--soft); /* 行悬停高亮 */
}

.lf-pdetail__quote-product {
  padding: var(--space-4) var(--space-5);
  text-align: start;
  font-weight: 400;
}

.lf-pdetail__quote-product b {
  display: block;
  font-family: var(--num-font);
  font-size: var(--text-5);
  font-weight: 700;
  color: var(--color-foreground, var(--text-primary));
}

.lf-pdetail__quote-product span {
  color: var(--color-foreground, var(--text-secondary));
  font-size: var(--text-3);
}

.lf-pdetail__quote-cell {
  padding: var(--space-4) var(--space-5);
  font-family: var(--num-font);
  font-size: var(--text-4);
  color: var(--color-foreground, var(--text-primary));
  white-space: nowrap;
}

.lf-pdetail__quote-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-4);
  font-weight: 700;
  white-space: nowrap;
}

.lf-pdetail__quote-chip--buy {
  background: color-mix(in srgb, var(--up) 12%, var(--bg));
  color: var(--ink);
}

.lf-pdetail__quote-chip--sell {
  background: color-mix(in srgb, var(--acc) 12%, var(--bg));
  color: var(--ink);
}

.lf-pdetail__quote-cell--spread {
  color: var(--acc); /* 点差为关键数字（G§02），旁有表头双通道 */
  font-weight: 700;
}

.lf-pdetail__quote-action {
  padding: var(--space-4) var(--space-5);
  text-align: end;
  white-space: nowrap;
}

.lf-pdetail__quote-action .lf-btn {
  min-height: 44px; /* 触摸目标 ≥44px */
  padding: 10px 22px;
  font-size: var(--text-3);
}

.lf-pdetail__quotes-note {
  margin-block: var(--space-4) 0;
  font-size: var(--text-3);
  color: var(--color-foreground, var(--text-secondary));
}

/* ---------- 报价表移动端：压缩关键列 + 右缘滚动提示（Stage A P-01/P-03） ----------
   375 实测 5 列 min-content 575-633px >> 容器 333px；Spread/Trade 初始视口外。
   ① ≤600px：列 padding 收窄 + 数值降 13px → Product/Buy/Sell 三关键列首屏完整入屏，
     Spread 露头作滚动线索，Trade 需短滚（原 242-300px → 约 60-160px）即达；
   ② ≤480px：滚动容器右缘叠加白色渐隐（::after 不随内容滚动，pointer-events 穿透），
     提供「可横滑」进入提示；RTL 由 [dir="rtl"] 翻转至左缘。
   1440 不受影响（媒体查询范围外，回归无变化）。纯 CSS，不动表结构。 */
@media (max-width: 600px) {
  .lf-pdetail__quotes-head,
  .lf-pdetail__quote-product,
  .lf-pdetail__quote-cell,
  .lf-pdetail__quote-action {
    padding-inline: var(--space-3);
  }

  .lf-pdetail__quote-product b {
    font-size: var(--text-3); /* 产品代号 16px → 14px，压 Product 列宽 */
  }

  .lf-pdetail__quote-chip {
    font-size: var(--text-3); /* 买/卖价 15px → 13px（表内数字仍 ≥13px 可读） */
  }

  .lf-pdetail__quote-action .lf-btn {
    padding-inline: 12px;
    font-size: var(--text-3);
  }
}

@media (max-width: 480px) {
  .lf-pdetail__quotes-scroll {
    position: relative;
  }

  .lf-pdetail__quotes-scroll::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 22px;
    pointer-events: none;
    background: linear-gradient(to left, var(--bg), transparent);
  }

  [dir="rtl"] .lf-pdetail__quotes-scroll::after {
    background: linear-gradient(to right, var(--bg), transparent); /* inset-inline-end 已镜像到左缘，仅渐变方向需翻转 */
  }
}


/* 标题下引导句（客户 2026-09：主标题 + 副标题 + 正文 三段式） */
.lf-pdetail__subtitle {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 700;
  color: var(--ink-2);
}


/* ---------- 客户 2026-09：tech 变体（正规 + 科技质感） ---------- */
.lf-pdetail--tech {
  position: relative;
}

.lf-pdetail--tech .lf-pdetail__header {
  position: relative;
}

.lf-pdetail--tech .lf-pdetail__eyebrow {
  font-family: var(--num-font);
  letter-spacing: 0.2em;
}

.lf-pdetail--tech .lf-pdetail__title {
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.01em;
}

.lf-pdetail--tech .lf-pdetail__subtitle {
  position: relative;
  padding-inline-start: var(--space-4);
  font-weight: 800;
  color: var(--pri);
}

.lf-pdetail--tech .lf-pdetail__subtitle::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 3px;
  width: 3px;
  border-radius: 2px;
  background: var(--acc);
}

/* 正文承载卡：白底 + 发丝边 + 内高光（正规文档感） */
.lf-pdetail--tech .lf-pdetail__intro {
  max-width: 76ch; /* 客户 2026-09：去承载卡，仅保留正文 */
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lf-pdetail--tech .lf-pdetail__intro p + p { margin-block-start: var(--space-4); }

/* ---------- 圆形图标列表版卖点（客户 2026-09 参考稿；仅按页启用，默认不受影响） ---------- */
@media (min-width: 1080px) {
  .lf-pdetail__highlights--style-icon-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8) var(--space-7);
  }
}

.lf-pdetail__highlights--style-icon-list .lf-pdetail-highlight {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: start;
}

.lf-pdetail__highlights--style-icon-list .lf-pdetail-highlight__icon {
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--space-3);
  border-radius: 50%;
  color: var(--text-inverse, #fff);
  background: var(--acc);
  animation: none;
}

.lf-pdetail__highlights--style-icon-list .lf-pdetail-highlight__icon-plate {
  display: none;
}

.lf-pdetail__highlights--style-icon-list .lf-pdetail-highlight:nth-child(3n + 2) .lf-pdetail-highlight__icon {
  background: var(--pri3);
}

.lf-pdetail__highlights--style-icon-list .lf-pdetail-highlight:nth-child(3n) .lf-pdetail-highlight__icon {
  background: var(--deep);
}

.lf-pdetail__highlights--style-icon-list .lf-pdetail-highlight__icon svg {
  inline-size: 26px;
  block-size: 26px;
}

.lf-pdetail__highlights--style-icon-list .lf-pdetail-highlight__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.lf-pdetail__highlights--style-icon-list .lf-pdetail-highlight__desc {
  max-inline-size: none;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}

.lf-pdetail__highlights--style-icon-list .lf-pdetail-highlight:hover .lf-pdetail-highlight__icon {
  transform: none;
}

/* ---------- 板块背景图（客户 2026-09：几何立体图形，右侧空间层次） ---------- */
.lf-pdetail {
  position: relative;
}

.lf-pdetail__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: min(62%, 900px) auto;
  opacity: 0.5;
  pointer-events: none;
}

.lf-pdetail > .lf-container {
  position: relative;
  z-index: 1;
}

/* 小节标题左侧红色竖线（客户 2026-09，accounts 页「账户总览」） */


/* 第二段正文视觉包裹（客户 2026-09，accounts 页）：浅灰底 + 品牌红左边框 + 充足内边距 */
.lf-pdetail__intro + .lf-pdetail__intro {
  background: var(--soft);
  border-inline-start: 4px solid var(--acc);
  border-radius: 0 var(--radius-card, 16px) var(--radius-card, 16px) 0;
  padding: var(--space-5) var(--space-6);
  margin-block-start: var(--space-5);
}

@media (max-width: 640px) {
  .lf-pdetail__intro + .lf-pdetail__intro {
    padding: var(--space-4) var(--space-5);
  }
}