/*!
 * web/assets/css/index/19-pos-cart.css
 * 2026-09-19 —— 销售开单购物车折叠交互层（bencho 式缓动融入）
 * 依赖：06-dark-patch.css 的 .pos-cart__* 基础样式；18-bencho-motion.css 的动效原则
 * （transform/opacity 优先、prefers-reduced-motion 由全局层兜底）
 */
.pos-cart__head{cursor:pointer;user-select:none;gap:8px;flex-wrap:wrap;padding:2px 4px;margin:-2px -4px 6px;border-radius:8px;transition:background-color .2s ease}
.pos-cart__head:hover{background:rgba(125,125,125,.08)}
:root.dark .pos-cart__head:hover{background:rgba(255,255,255,.06)}
.pos-cart__head-main{display:flex;align-items:center;gap:6px;min-width:0}
.pos-cart__head-sum{font-weight:500;font-size:12px;color:var(--pci);white-space:nowrap}
.pos-cart__ops{display:flex;align-items:center;gap:12px;font-weight:400;flex:none}
.pos-cart__fold{font-size:12px;color:var(--ts)}
.pos-cart__caret{transition:transform .28s cubic-bezier(.22,.9,.3,1.2);transform:rotate(-90deg);color:var(--ts)}
.pos-cart__caret--open{transform:rotate(0deg)}
/* 折叠进/出场：max-height + opacity + 轻微位移（bencho collapse 手感） */
.pos-fold-enter-active,.pos-fold-leave-active{overflow:hidden;transition:max-height .32s cubic-bezier(.22,.9,.3,1.08),opacity .24s ease,transform .32s cubic-bezier(.22,.9,.3,1.08)}
.pos-fold-enter-from,.pos-fold-leave-to{max-height:0;opacity:0;transform:translateY(-8px)}
.pos-fold-enter-to,.pos-fold-leave-from{max-height:2400px;opacity:1;transform:none}
/* 步进器在购物车控制行内的兜底：容器过窄时禁止两侧按钮盖住数字 */
.pos-cart__ctrl-item .el-input-number{min-width:136px}
@media (max-width:360px){
  /* 批次86 续四 #366③：这里的 !important 原本是抢模板行内 style 的，内联已搬进
     06-dark-patch.css 的 .pos-cart__ctrl-row 基础规则（19 比 06 后装载），强权撤掉。 */
  .pos-cart__ctrl-row{grid-template-columns:1fr 1fr}
}
/* #171 快速建品「库里已有同名商品」列表：点一行 = 把已有那个加进本单，不再新建。
   颜色全部走变量（深色主题下 --cs/--bd/--ts 自动换），不在这里写死白底。 */
.pos-dup-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--bd);
  border-radius:10px;background:var(--cs);margin-top:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pos-dup-row:active{transform:scale(.995);border-color:var(--ac)}
@media (max-width:360px){
  .pos-dup-row{padding:8px 10px}
  .pos-dup-row>div{flex:1 1 100%}
}

/* ============================================================================
 * #182 POS 商品卡密度（2026-09-27，实测驱动）
 *
 * 实测 390×844：`.pos-grid-left` 是一列 flex，卡片高 184px —— **一屏只看得到 3 个商品**。
 * 而收银台最高频的动作恰恰是"扫一眼列表 → 点加购"，选货全靠滚。
 * （另：这里原本还有 10 类触摸外壳 <44px 的小按钮，手机上点不准，见 §76 的下限。）
 *
 * 收法（不靠藏信息换密度）：
 *   1) 两列网格 —— 分节标题（热销/全部）跨满整行，不然会被切成两半；
 *   2) 图片 64→44px（仍可点，正好是触摸下限），价格与库存并到同一行（少一行字，信息一条不少）；
 *   3) 操作区两个按钮等宽并排，并把可点高度顶到 44px —— 密度上去的同时，按钮反而更好点了。
 * 宽屏完全不动（这段只在 ≤767px 生效）。
 * ========================================================================== */
@media (max-width:767px){
  .pos-grid-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pos-grid-left .pos-sec-divider{grid-column:1 / -1}
  .pos-card--left{padding:8px;gap:8px;border-radius:10px}
  .pos-card--left .pos-card__img{width:44px;height:44px;border-radius:8px}
  .pos-card--left .pos-card__body{gap:0}
  .pos-card--left .pos-card__name{font-size:13px;padding:13px 0}
  .pos-card--left .pos-card__meta{font-size:11px;gap:6px}
  .pos-card--left .pos-card__price{font-size:14px}
  .pos-card--left .pos-card__ctrl{margin-top:6px;gap:6px}
  .pos-card--left .pos-card__ctrl .el-button{flex:1 1 0;min-width:0;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;font-size:12px}
}

/* ============================================================================
 * #361（业主：「快速新建商品，缺失了规格矩阵」）快速建品的「颜色 × 尺码」矩阵
 * 标签输入与表格本身复用 04-components.css 的 .spec-chip-input / .spec-matrix*
 * （和「添加商品」「其它开单」完全同一套，不另起第二套皮肤），这里只补外壳排版：
 *   · 一律 var(--*)，浅色值不写死（暗黑判据 D2）；
 *   · 字号 12px 起（下限判据 F1）；
 *   · 格子宽度交给 .spec-matrix 自己管，不给内联固定宽度（#296 棘轮）。
 * ========================================================================== */
.qk-mx{margin-top:10px;padding-top:10px;border-top:1px solid var(--bd);
  display:flex;flex-direction:column;gap:6px}
.qk-mx__hd{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.qk-mx__title{font-size:14px;font-weight:600;color:var(--tc)}
.qk-mx__n{font-size:12px;color:var(--ts)}
.qk-mx__lbl{font-size:12px;color:var(--ts)}
.qk-mx__bulk{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.qk-mx__empty,.qk-mx__hint{font-size:12px;color:var(--ts);line-height:1.6}
.qk-mx__hint{opacity:.85}
@media (max-width:767px){
  /* 窄屏把批量价输入框并进一行，别让「应用」按钮掉到下一行看起来像坏了 */
  .qk-mx__bulk .el-input-number{flex:1 1 120px;min-width:0}
  .qk-mx__bulk .el-button{min-height:44px}
}