/* ============================================================================
   计量单位选择（主单位 + 辅助单位1/2）· st-units-v1.css
   ----------------------------------------------------------------------------
   倍率语义：1 个所选单位 = ratio 个主单位；价格 = 主单位单价 × ratio，
   数量 = 主单位库存 ÷ ratio（一个乘、一个除，别写反）。
   倍率来自飞书「实际换算率」，由「换算率 + 换算方向（拆分/组合）」算出。

   版式（用户 2026-09-25 定）：
     · 「选择单位」在上一行；
     · 单位按钮在左、**换算说明在按钮右边**（原先说明自占一行，不好看）；
     · 切换单位时整块高度恒定 —— 说明文案在主单位上是空串（ratio === 1），
       自占一行时切到主单位那一行会整条消失、下面的库存行与价格档位整体上跳。
       放到按钮同一行后，这一行的高度只由按钮决定 ⇒ 切单位零跳动。

   ⚠️ 一律带 `.commerce-dialog.page-detail` 前缀：st-reference-v6 / st-density-v5 里
      的 `.page-detail .unit-choice` 特异度与本文件同为 (0,2,0)，只靠加载顺序取胜太脆。
   ============================================================================ */

.commerce-dialog.page-detail .unit-line {
  min-width: 0;
  margin: 15px 0 0;
}

/* 小节标题：比商品名低一级、比说明文字高一级，靠字距而不是字号做层次 */
.commerce-dialog.page-detail .unit-label {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  color: #5b6478;
}

/* 单位行：按钮组在左、换算说明在右。nowrap ⇒ 任何时候都只占一行。 */
.commerce-dialog.page-detail .unit-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* 按钮组永不被压缩（换算说明可以省略自己，按钮不行） */
.commerce-dialog.page-detail .unit-choices {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  flex: 0 0 auto;
}

/* 选中态只改颜色、**不改任何几何量**（边框始终 1px、内边距不变），
   否则切换单位时按钮宽度会变，右侧的换算说明跟着左右抖。 */
.commerce-dialog.page-detail .unit-choices .unit-choice {
  min-width: 54px;
  padding: 7px 14px;
  border: 1px solid #dde1ea;
  border-radius: 10px;
  background: linear-gradient(#ffffff, #f4f6f9);
  color: #182a56;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px #0b1f4d0a;
  font-size: 13px;
  font-weight: 650;
  line-height: 18px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.commerce-dialog.page-detail .unit-choices .unit-choice:hover { border-color: #b9c2d6; }
.commerce-dialog.page-detail .unit-choices .unit-choice[aria-pressed="true"] {
  border-color: #0e2f92;
  background: linear-gradient(155deg, #153ca4, #082170);
  color: #fff;
  box-shadow: 0 5px 14px #0821702e, inset 0 1px 0 #ffffff2b;
}
.commerce-dialog.page-detail .unit-choices .unit-choice:active { transform: translateY(1px); }
.commerce-dialog.page-detail .unit-choices .unit-choice:focus-visible {
  outline: 2px solid #0e2f92;
  outline-offset: 2px;
}

/* 换算说明：紧跟在按钮组右边（靠 .unit-picker 的 gap，不写 margin-left:auto）。
   ⚠️ 别用 margin-left:auto 把它推到行尾：桌面端详情列有 400px 宽，按钮组只占一半，
      说明会被丢在两百多像素之外，读起来像「掉在那儿的孤儿」，而不是按钮的注解。
   说明可缩（按钮不可缩）；空说明（主单位）时整节点不显示 —— 行高由按钮决定，
   所以不影响下方任何东西。 */
.commerce-dialog.page-detail .unit-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}
.commerce-dialog.page-detail .unit-hint:empty { display: none; }
.commerce-dialog.page-detail .unit-hint > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commerce-dialog.page-detail .unit-hint .convert-icon {
  flex: none;
  width: 13px;
  height: 13px;
  opacity: .75;
}

/* 询价单里按行切换单位：见 st-inquiry-v1.css。
   那里单位只出现一次（贴着单价的小下拉），并跟着卡片排版一起走 ——
   早期版本在这里给 .line-unit-select 单独排版，结果同一处出现「单位标签 + 下拉」两个盒子。 */

/* 询价单提示条：商品下架后自动从购物车移除时的说明 */
.inquiry-notice{
  margin:12px 10px 2px;
  padding:10px 14px;
  border:1px solid #f0d9b5;
  border-radius:8px;
  background:#fdf6ea;
  color:#8a5a12;
  font-size:12px;
  line-height:1.6;
}

/* 读取失败时的重试按钮（不静默清空购物车） */
.inquiry-notice .notice-retry{
  margin-left:8px;
  padding:3px 10px;
  border:1px solid #d8b26a;
  border-radius:5px;
  background:#fff;
  color:#8a5a12;
  font-size:12px;
  font-weight:600;
}


@media(max-width:720px){
  .commerce-dialog.page-detail .unit-choices .unit-choice { min-width: 46px; padding: 6px 11px; font-size: 12.5px; }
  .commerce-dialog.page-detail .unit-hint { font-size: 11px; }
  .inquiry-notice{margin:10px 16px 2px}
}

/* 窄屏（含 320px）：继续收，保证「按钮组 + 换算说明」仍在一行里完整可读 */
@media(max-width:420px){
  .commerce-dialog.page-detail .unit-picker { gap: 10px; }
  .commerce-dialog.page-detail .unit-choices { gap: 6px; }
  .commerce-dialog.page-detail .unit-choices .unit-choice { min-width: 40px; padding: 6px 8px; font-size: 12px; }
  .commerce-dialog.page-detail .unit-hint { font-size: 10.5px; gap: 4px; }
  .commerce-dialog.page-detail .unit-hint .convert-icon { display: none; }
}