/* ============================================================
   pricing-flow.css —— SKU 测算页的主线：选品 → 配置 → 结果
   ------------------------------------------------------------
   这一版把页面从「7 张卡平铺」改成三步走，新增三块 UI：
     ① 选品网格   带商品图，点一张就选中（原来是文字行 + 按钮）
     ② 配置区     标题 / 规格维度 / 利润 / 生成条
     ③ 优劣势栏   挂在每张 SKU 卡底部，自动算出来的优势与劣势
   参数类卡片（定价基准 / 成本参数 / 组合装 / 限时折扣 / 成本表校对）
   收进「高级设置」折叠容器。

   所有颜色都走 design token，浅色 / 深色主题自动跟随；
   这里不写任何硬编码色值，也不写 html[data-theme] 分支。
   ============================================================ */

/* ---------- ① 选品栏（一排商品，横向可滚） ----------
   原来是竖版大卡网格（图 140px 正方形 + 四行文字），
   10 款铺满四行、约 1000px 高，把 ② 配置和 ③ 结果全推到首屏之外。
   用户的原话：「顶部实际上就是选择商品 至于 sku 下面自动配置即可」——
   那 ① 就该是一排商品，不是一屏卡片。

   用横向滚动而不是换行：换行到第二排就又变高了，
   而「把 ② ③ 顶上来」是这次改版唯一的目标。

   格子宽度是**弹性**的（flex: 1 1 0 + min-width），不是固定值：
   10 格刚好铺满一行，有富余就均分、不够就滚 ——
   固定 116px 时在 1440 屏上会隐掉一个多商品，而「有一款看不见」
   是选品区最不能忍的错。 */

.pick-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;              /* 给滚动条留位，不然会压住格子 */
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.pick-rail::-webkit-scrollbar { height: 7px; }
.pick-rail::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}

/* 装不下时右侧渐隐 —— 横向滚动在触屏上几乎没有可发现性，
   7px 的滚动条在手机上基本看不见。渐隐是「右边还有东西」的唯一暗示。
   用 mask 而不是伪元素：mask 贴在元素框上，**不随内容滚动**，
   而 ::after 会被一起滚走。
   类名由 JS 按实际剩余量切换 —— 滚到最右端就撤掉，
   否则最后一款永远灰着一块，像没加载完。 */
.pick-rail.fade-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
}

/* 「左右滑动看全部」：只在真的装不下时才出现（JS 加 .can-scroll） */
.pick-hint {
  display: none;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-2);
}
.pick-hint.can-scroll { display: block; }

.pick-tile {
  flex: 1 1 0;
  min-width: 80px;      /* 1280 视口下 10 格仍能一行装下（再窄才滚） */
  max-width: 148px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pick-tile:hover {
  border-color: var(--border-3);
  box-shadow: var(--shadow-2);
}
.pick-tile.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.pick-tile.is-bad {
  opacity: .55;
  cursor: not-allowed;
}

.pick-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.pick-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s;
}
.pick-tile:hover .pick-img { transform: scale(1.045); }
.pick-img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-3);
}
.pick-no {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  border-radius: var(--r-xs);
}
/* 选中标记从「整条横幅」缩成一枚小角标 ——
   116px 的格子里，一条横幅会把图盖掉一半。 */
.pick-check {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--surface);
  background: var(--accent);
  border-radius: 50%;
}

.pick-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 7px;
}
.pick-title {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  /* 名字最多两行，长了截断 —— 不然格子高矮不齐 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pick-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  min-height: 16px;
}

/* ---------- ② 配置区 ---------- */

.cfg-body {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

/* 「搜同款 / 知识库」从 ① 选品格搬到了这里，紧挨标题块 ——
   它俩是标题的补充说明，不该跟着 17px 的大间距走。 */
.cfg-body > .cfg-links { margin-top: -10px; }

.cfg-empty {
  padding: 25px 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--r);
}

.cfg-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cfg-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.cfg-h b { font-size: 13px; color: var(--text); }
.cfg-hint { font-size: 12px; color: var(--text-3); }
.cfg-note { font-size: 12px; color: var(--text-2); line-height: 1.6; }

.cfg-title {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  resize: vertical;
}
.cfg-title:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.title-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 12px;
  line-height: 1.7;
}
.tm-len { color: var(--text-3); font-variant-numeric: tabular-nums; }
.tm-len.bad { color: var(--danger); font-weight: 500; }
.tm-ok { color: var(--ok); }
.tm-warn { color: var(--warn); }
.tm-taboo {
  padding: 1px 6px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--r-xs);
}

/* 规格维度 */
.dim-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.dim-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.dim-name b { font-size: 12.5px; color: var(--text); }
.dim-hint { font-size: 11.5px; color: var(--text-3); }
.dim-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dim-opt {
  padding: 6px 13px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-2);
  /* 未选中用白底：原来跟选中态一样是浅灰底，两者只差一点色相，
     扫一眼分不出哪个是选中的。白底 + 绿底才够分明。 */
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color .13s, background .13s, border-color .13s;
}
.dim-opt:hover { border-color: var(--border-3); color: var(--text); }
.dim-opt.on {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 500;
}
.dim-opt.on::before {
  content: '✓ ';
  font-size: 11px;
}

/* ---- 可删的选项 chip ----
   切换键和删除键是并排的两个按钮（不是把 × 嵌进按钮里 —— 那是非法结构）。
   所以左边圆角、右边平角，中间共用一条边线，看起来还是一个整体。 */
.dim-chip {
  display: inline-flex;
  align-items: stretch;
}
.dim-chip .dim-opt {
  border-radius: 999px 0 0 999px;
  border-right-width: 0;
  padding-right: 10px;
}
.dim-chip .dim-opt:hover { border-color: var(--border-3); }
.dim-x {
  display: flex;
  align-items: center;
  padding: 0 9px 0 6px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0 999px 999px 0;
  cursor: pointer;
  transition: color .13s, background .13s, border-color .13s;
}
.dim-x:hover {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-line);
}

/* ---- 「＋ 加一档」 ----
   ⚠️ 选择器必须写成 input[type="number"].dim-in。
   components.css 里有一条 input[type="text"], input[type="number"], select,
   textarea { width: 100% } —— 它是 (0,1,1)，而单类选择器 .dim-in 只有
   (0,1,0)，压不过它，输入框会被撑成一整行，把「＋ 加」挤到下一行去。
   这跟 README 里记的 .t-ok / .sku-m .v 是同一类坑：不是没生效，是被压住了。 */
.dim-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
input[type="number"].dim-in {
  width: 62px;
  padding: 5px 8px;
  font: inherit;
  font-size: 12.5px;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  border: 1px dashed var(--border-3);
  border-radius: var(--r-sm);
}
input[type="number"].dim-in:focus {
  outline: none;
  border-style: solid;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="number"].dim-in::placeholder { color: var(--text-3); }
.dim-add-btn {
  padding: 6px 11px;
  font: inherit;
  font-size: 12.5px;
  /* 不加这个，「＋ 加」会被挤成两行 —— 只数输入框是定宽的，
     剩下的空间在窄一点的视口下不够放 4 个字 */
  white-space: nowrap;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px dashed var(--border-3);
  border-radius: 999px;
  cursor: pointer;
  transition: color .13s, background .13s, border-color .13s;
}
.dim-add-btn:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-style: solid;
  border-color: var(--accent);
}
.dim-add-wide { padding: 6px 14px; }

/* ---- 自定义赠品编辑器 ----
   同样地：.gc-qty / .gc-model 都得带上元素名，才压得住 components.css
   里那条 width: 100%。 */
.gc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--r);
}
.gc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
select.gc-model {
  /* 弹性但封顶 300px：让它一直长到把一行占满，两行的高度就一样了，
     而右边那列删除键也就对齐成一竖排，扫起来快 */
  flex: 1 1 190px;
  max-width: 300px;
  min-width: 0;
  padding: 5px 7px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
}
.gc-times { font-size: 12.5px; color: var(--text-3); user-select: none; }
.gc-unit { font-size: 12.5px; color: var(--text-3); }
input[type="number"].gc-qty {
  width: 58px;
  padding: 5px 7px;
  font: inherit;
  font-size: 12.5px;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
}
.gc-del {
  /* 不推最右。型号下拉封顶 300px、数量框定宽 58px，所以删除键本来
     就落在同一个横坐标上、天然对齐成一列；用 margin-left:auto 反而
     在它和数量框之间留出六百多像素的死区，眼睛要横跨整个卡片。 */
  padding: 4px 9px;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.gc-del:hover { color: var(--danger); background: var(--danger-soft); }
.gc-prev {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  line-height: 1.7;
}
.gc-lb { color: var(--text-2); }
.gc-cost { color: var(--text-3); font-variant-numeric: tabular-nums; }
.gc-foot { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---- SKU 名预览（标题块下面那一条） ---- */
.sn-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.9;
}
.sn-lb {
  flex: none;
  padding: 1px 7px;
  font-size: 11.5px;
  color: var(--text-3);
  background: var(--surface-3);
  border-radius: var(--r-xs);
}
.sn-code {
  padding: 1px 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: color .13s, border-color .13s;
  /* 这里刻意**不**用 keep-all：标题是用户自己敲的，可能一个空格都没有，
     禁掉 CJK 断行就会横向溢出。宁可让「30支装」有极小概率从中间断开，
     也不能撑破卡片。 */
  overflow-wrap: anywhere;
}
.sn-code:hover { color: var(--accent); border-color: var(--accent); }
.sn-more { color: var(--text-3); }

/* 利润口径切换 */
.pm-seg {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  background: var(--surface-3);
  border-radius: var(--r-sm);
}
.pm-btn {
  padding: 6px 14px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-2);
  background: none;
  border: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
}
.pm-btn.on {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-weight: 500;
}
.profit-in {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profit-in label { font-size: 12.5px; color: var(--text-2); }
.profit-in input { width: 96px; }

/* 生成条 */
.cfg-gen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
}
.gen-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.gen-n {
  flex: 0 0 auto;
  min-width: 33px;
  height: 33px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--surface);
  background: var(--accent);
  border-radius: var(--r-sm);
}
.gen-txt { min-width: 0; font-size: 13px; color: var(--text); }
.gen-list {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-2);
  word-break: break-all;
}
.gen-btn { flex: 0 0 auto; }

/* ---------- ③ 优劣势栏（挂在每张 SKU 卡底部） ---------- */

.sku-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed var(--border-2);
}
.pc-col { min-width: 0; }
.pc-h {
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 500;
}
.pc-pro .pc-h { color: var(--ok); }
.pc-con .pc-h { color: var(--danger); }
.pc-col ul {
  margin: 0;
  padding-left: 15px;
}
.pc-col li {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-2);
}
.pc-pro li::marker { color: var(--ok); }
.pc-con li::marker { color: var(--danger); }

/* ---------- 高级设置（折叠） ---------- */

.adv { margin-top: 2px; }

.adv-head {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  font: inherit;
  font-size: 13px;
  color: var(--text-2);
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.adv-head:hover { border-color: var(--border-2); color: var(--text); }
.adv-head.open {
  border-radius: var(--r) var(--r) 0 0;
  border-bottom-color: transparent;
}
.adv-caret {
  display: inline-block;
  transition: transform .16s;
}
.adv-head.open .adv-caret { transform: rotate(90deg); }
.adv-sub { font-size: 11.5px; color: var(--text-3); }

.adv-body { display: none; }
.adv-body.open {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-top: 13px;
}

/* ---------- 备货计划小结 ----------
   备货量本身不参与计算，但「一共要压多少钱在货上」是真正要看的数，
   所以给一行固定的小结，空着时是灰的引导语，填了才变实。 */
.stock-sum {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border-2);
  background: transparent;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-3);
}
.stock-sum.on {
  border-style: solid;
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text-2);
}
.stock-sum b { color: var(--text); }
.stock-sum.on b { color: var(--accent); }

/* ---------- 窄屏 ----------
   选品栏不需要窄屏规则了：它本来就是横向滚动的，
   屏幕窄就多滚两下，格子尺寸不变 —— 变尺寸反而会让图变小、更难认。 */

@media (max-width: 620px) {
  .sku-pc { grid-template-columns: 1fr; }
  .cfg-gen {
    flex-direction: column;
    align-items: stretch;
  }
  .gen-btn { width: 100%; }
  .adv-sub { display: none; }
}

/* ---------- 步骤导航：这一页 4.5~5.1 屏，得有锚点 ----------
   定价页是全场最长的一页。滚到中间既看不见自己在第几步，
   也没有任何东西能点着跳回去 —— 只能一路滚。

   粘在顶栏下面：顶栏是 position:sticky; top:0，那这条就 top:62px
   （窄屏顶栏缩到 56px，下面的 media 里跟着改）。
   **这两处硬编码是一对，改顶栏高度必须一起改。 */
.step-nav {
  position: sticky;
  top: 62px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.step-nav .sn-lb {
  flex: none;
  font-size: 11.5px;
  color: var(--text-3);
  padding-left: 4px;
  margin-right: 1px;
}
.step-nav .sn {
  flex: none;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}
.step-nav .sn:hover { background: var(--surface-3); color: var(--text); }
/* 长短两份文案：桌面显示长版，手机换短版（长版三个装不下，会截断） */
.step-nav .sn .short { display: none; }
/* 当前所在那一步：描边 + 主色底，比单纯变色更容易在余光里认出来 */
.step-nav .sn.on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 600;
}

/* ---------- 卡片锚点的落点补偿 ----------
   .content [id] 那条规则给了 78px，但三张卡没有 id，等于没生效 ——
   scrollIntoView 把卡片顶到视口顶部后，卡头被 62px 的顶栏整个盖住。
   这里按「顶栏 + 导航条 + 一点呼吸」重新给，且特异性要压过
   .content [id]（0,2,0），所以写成 .content .pf-step（0,3,0）。 */
.content .pf-step { scroll-margin-top: 116px; }   /* 62 + 44 + 10 */

@media (max-width: 1000px) {
  /* 顶栏在这里缩到 56px，粘着的导航条要跟着上移 */
  .step-nav { top: 56px; }
  .content .pf-step { scroll-margin-top: 110px; }
}

@media (max-width: 620px) {
  .step-nav {
    gap: 4px;
    padding: 5px 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .step-nav::-webkit-scrollbar { display: none; }
  .step-nav .sn-lb { display: none; }
  .step-nav .sn { flex: 1 1 auto; padding: 4px 9px; font-size: 12px; }
  .step-nav .sn .full { display: none; }
  .step-nav .sn .short { display: inline; }
}