/* ============================================================
   产品中心 · 一屏一款 · 竖向滚动（product-flow.css）
   ------------------------------------------------------------
   只服务 product.html，需在 product-single.css 之后加载。
     1) 每个产品占一屏，向下滚动（不再左右切换）
     2) 右侧竖轴：两段刻度轨道 + 进度填充，当前款名字常显
     3) 窄屏：竖轴换成底部一条「上一款 / 下一款」浮条
     4) 屏内不裁切、按钮箭头朝下
   ============================================================ */

/* 屏幕阅读器专用标题 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* 滚动吸附：一屏一款；stop 用 normal，快速滚动可以连翻几屏 */
html.pv-flow {
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--header-h);
}

.pv {
  /* 关键：用 min-height 而不是固定高度，内容多了就往下长，绝不裁切 */
  min-height: calc(100svh - var(--header-h));
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
.pv + .pv { border-top: 1px solid var(--c-line-2); }

/* ============================================================
   右侧产品轴
   ------------------------------------------------------------
   五观 / 五心 各自一段：组标在上，下面是一条 2px 刻度轨。
   已读点位染色、轨道按进度填色；当前款名字做成胶囊常显。
   ============================================================ */
.pvn {
  position: fixed; z-index: 70;
  right: calc(var(--gutter) - 26px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  width: 36px;
}

/* 顶部总量：当前第几款 / 共几款 */
.pvn__count {
  display: flex; align-items: baseline; gap: 2px;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 10.5px; line-height: 1; letter-spacing: .06em;
  color: var(--c-mute);
}
.pvn__count b { font-size: 14px; font-weight: 700; color: var(--pv-accent); }
.pvn__count i { font-style: normal; opacity: .55; }

.pvn__grp {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}
.pvn__grp + .pvn__grp { margin-top: 28px; }

.pvn__grp[data-group="guan"] { --g: #3F8A45; --g-ink: #2C6E33; }
.pvn__grp[data-group="xin"]  { --g: #3A82BE; --g-ink: #2A6699; }

/* 组标：轨道之外，段首居中 */
.pvn__gk {
  margin: 0 0 10px;
  white-space: nowrap;
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; line-height: 1;
  color: var(--g-ink);
}

/* 一段刻度：轨道 + 进度 + 点位 */
.pvn__seg {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}
.pvn__rail {
  position: absolute; left: 50%; top: 0; bottom: 0;
  transform: translateX(-50%);
  width: 2px; border-radius: 2px;
  background: #CFDDD4;
}
.pvn__fill {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 2px; height: 0; border-radius: 2px;
  background: var(--g);
  transition: height .42s var(--e-out);
}

/* 点位：32 × 26 的点击区，点居中坐在轨道上 */
.pvn__i {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 36px; height: 30px;
  outline-offset: 4px;
}
.pvn__d {
  width: 9px; height: 9px; border-radius: 50%;
  background: #CBD8CE;
  transition: width var(--t-base) var(--e-out),
              height var(--t-base) var(--e-out),
              background-color var(--t-base) var(--e-out),
              opacity var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
}
/* 已读：染上大类色，半透明 */
.pvn__i.is-done .pvn__d {
  background: var(--g);
  opacity: .55;
}
.pvn__i:hover .pvn__d {
  width: 11px; height: 11px;
  background: var(--g);
  opacity: 1;
}

/* 当前这一点：11px 实心 + 2px 白环 + 一圈同色光晕 */
.pvn__i.is-active .pvn__d {
  width: 12px; height: 12px;
  background: var(--pv-accent);
  opacity: 1;
  box-shadow: 0 0 0 2px #FBFDFB, 0 0 0 5px var(--pv-accent-soft);
}

/* 名字胶囊：只在当前款显示，浮在轨道左侧 */
.pvn__t {
  position: absolute;
  right: calc(100% + 6px); top: 50%;
  transform: translate(-4px, -50%);
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 13px 6px 10px;
  white-space: nowrap;
  border-radius: var(--r-pill);
  background: var(--pv-accent);
  box-shadow: 0 6px 18px var(--pv-accent-soft);
  font-size: 13px; font-weight: 600; line-height: 1.2;
  color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.pvn__t b {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  opacity: .7;
}
.pvn__i.is-active .pvn__t {
  opacity: 1; transform: translate(0, -50%);
}

/* 胶囊前的细引线，把名字与点位连起来 */
.pvn__i.is-active::after {
  content: "";
  position: absolute;
  right: calc(100% + 2px); top: 50%;
  width: 6px; height: 1px;
  transform: translateY(-50%);
  background: var(--pv-accent);
  opacity: .5;
}

/* 给索引让位：正文右侧留出胶囊的位置 */
@media (min-width: 900px) {
  .pv-body #main .wrap,
  .pv-body .site-footer .wrap { padding-right: 200px; }
}

/* ============================================================
   窄屏：底部浮动条（上一款 / 下一款）
   ============================================================ */
.pvm {
  display: none;
  position: fixed; z-index: 72;
  left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  align-items: center; gap: 4px;
  padding: 5px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 22px rgba(14, 40, 24, .14), 0 1px 3px rgba(14, 40, 24, .08);
  backdrop-filter: blur(8px);
}
.pvm__b {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--c-slate);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.pvm__b:active { background: var(--pv-accent-soft); color: var(--pv-accent); }
.pvm__b svg { width: 15px; height: 15px; }
.pvm__c {
  display: flex; flex-direction: column; align-items: center;
  min-width: 96px; padding-inline: 4px;
  line-height: 1.2;
}
.pvm__c b { font-size: 13px; font-weight: 700; color: var(--c-ink); }
.pvm__c i {
  margin-top: 1px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .06em; color: var(--c-mute);
}

@media (max-width: 899px) {
  .pvn { display: none; }
  .pv { min-height: 0; }
  .pv + .pv { border-top: 1px solid var(--c-line); }
  .pvm { display: flex; }
  /* 浮条不压住最后一屏的页脚 */
  .pv-body .site-footer { padding-bottom: 78px; }
}

/* 矮屏：整体压缩，保证 15 个点仍在一屏内 */
@media (max-height: 820px) and (min-width: 900px) {
  .pvn__i { height: 25px; }
  .pvn__grp + .pvn__grp { margin-top: 16px; }
  .pvn__gk { margin-bottom: 8px; }
  .pvn__count { margin-bottom: 12px; }
}
@media (max-height: 720px) and (min-width: 900px) {
  .pvn__i { height: 21px; }
  .pvn__grp + .pvn__grp { margin-top: 12px; }
  .pvn__count { margin-bottom: 10px; }
  .pvn__gk { font-size: 10px; margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html.pv-flow { scroll-snap-type: none; }
  html { scroll-behavior: auto; }
  .pvn__fill, .pvn__t, .pvn__d { transition: none; }
}

/* ============================================================
   沐心 A / B / C：产品页内的扫码采购入口
   ============================================================ */
.pv__buy {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(14px, 1.6vw, 20px);
  padding: 12px 16px 12px 12px;
  border-radius: var(--r-lg, 16px);
  background: #fff;
  border: 1px solid var(--c-line-2);
  box-shadow: 0 2px 10px rgba(14, 40, 24, .05);
  transition: box-shadow var(--t-base) var(--e-out), transform var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.pv__buy:hover {
  transform: translateY(-2px);
  border-color: var(--pv-accent-line);
  box-shadow: 0 10px 26px rgba(14, 40, 24, .10);
}
.pv__buy-qr {
  flex: none;
  width: 84px; height: 84px;
  border-radius: 8px;
  background: #fff;
  padding: 3px;
  border: 1px solid var(--c-line-2);
}
.pv__buy-t { min-width: 0; }
.pv__buy-k {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--pv-accent);
}
.pv__buy-d {
  margin: 5px 0 0;
  font-size: 13.5px; line-height: 1.6; color: var(--c-ink);
}
.pv__buy-n {
  display: block; margin-top: 4px;
  font-size: 11.5px; line-height: 1.5; color: var(--c-mute);
}

@media (max-width: 899px) {
  .pv__buy-qr { width: 76px; height: 76px; }
  .pv__buy-d { font-size: 13px; }
}