/* ===== 商品页折扣卡（含蓄版） ===== */ .cs-tier{border:1px solid #E5E0DA;border-radius:10px;background:#fff;padding:11px 12px 10px;position:relative;overflow:hidden;transition:border-color .28s,background-color .5s} .cs-tier.flash{animation:cs-tier-flash-light 1.3s cubic-bezier(.16,1,.3,1) both} @keyframes cs-tier-flash-light{0%{background-color:rgba(139,26,26,.055)}40%{background-color:rgba(139,26,26,.028)}100%{background-color:#fff}} .cs-tier.is-hit{border-color:#E8C9C9} .cs-tier__hd{display:flex;align-items:center;margin-bottom:7px} .cs-tier__label{font-size:9.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#8A837B} .cs-tier.is-hit .cs-tier__label{color:#A86767} .cs-tier__msg{font-size:12.5px;line-height:1.45;color:#1A1A1A;margin:0 0 9px;min-height:18px} .cs-tier__msg .hl{color:#8B1A1A;font-weight:800} .cs-tier__msg .sub{color:#8A837B;font-weight:500} .cs-tier__msg.swap{animation:cs-tier-swap .42s cubic-bezier(.16,1,.3,1) both} @keyframes cs-tier-swap{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:translateY(0)}} .cs-tier .qbar{position:relative} .cs-tier .qbar__track{height:8px;border-radius:999px;background:#ECE7E1;position:relative;overflow:hidden;box-shadow:inset 0 1px 1px rgba(26,26,26,.07)} .cs-tier .qbar__fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#8B1A1A 0%,#B8302F 90%,#C7453F 100%);border-radius:999px;transition:width .62s cubic-bezier(.16,1,.3,1);will-change:width} .cs-tier .qbar__fill::after{content:"";position:absolute;left:0;right:0;top:.5px;height:2.5px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0))} .cs-tier .qbar__shine{position:absolute;top:0;bottom:0;width:48px;left:-54px;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0))} .cs-tier .qbar__shine.run{animation:cs-tier-shine .78s ease-out both} @keyframes cs-tier-shine{0%{opacity:.9;left:-54px}100%{opacity:0;left:100%}} .cs-tier .qbar__meta{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px;gap:8px} .cs-tier .qbar__cnt{font-size:11px;color:#8A837B;font-variant-numeric:tabular-nums;min-width:0} .cs-tier .qbar__cnt b{color:#5C5751;font-weight:750} .cs-tier .qbar__off{font-size:11.5px;font-weight:800;color:#8B1A1A;white-space:nowrap;flex:none;letter-spacing:.1px} .cs-tier .qbar__off.pop{animation:cs-tier-pop .58s cubic-bezier(.2,1.5,.4,1) both} @keyframes cs-tier-pop{0%{transform:scale(1)}38%{transform:scale(1.19)}100%{transform:scale(1)}} .cs-tier .qchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;min-height:17px} .cs-tier .qchip{font-size:9.5px;font-weight:750;letter-spacing:.2px;color:#8B1A1A;background:#FAF3F3;border:1px solid #EEDDDD;border-radius:999px;padding:1.5px 7px;white-space:nowrap} .cs-tier .qchip.born{animation:cs-tier-chip .6s cubic-bezier(.2,1.5,.4,1) both} @keyframes cs-tier-chip{0%{transform:scale(.6);opacity:0}55%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}} .cs-tier__toast{position:absolute;left:0;right:0;top:0;z-index:5;background:linear-gradient(90deg,#8B1A1A,#B8302F);color:#fff;font-size:11px;font-weight:750;padding:6px 14px;display:flex;align-items:center;gap:8px;transform:translateY(-100%);opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .28s} .cs-tier__toast.show{transform:translateY(0);opacity:1} .cs-tier+.cs-tier{margin-top:12px} /* ===== 购物车行内血条（第四十九轮改版：与数量控件同一行，右端只放目标值） ===== * 桌面 / 手机 **同一套主张**：血条紧跟在数量控件（加号按钮）右边、同一条 flex 行， * 最右端是一个数＝目标值（未满档 −15% / 已满档 ✓ −20%）。 * 🔴🔴 手机端块购物车行是 display:grid，而**网格列的 min-width 默认是 auto** * ⇒ 不钉下面那一条，血条内容会把整张表撑宽、顶出横向滚动（第四十九轮实测 471/390）。 * 与 .wc-block-cart-item__wrap 上的 minmax(0,1fr) 是同一个坑。 */ .wc-block-cart-items__row>.wc-block-cart-item__product{min-width:0} /* 🔴🔴 数量区原生是「内容宽」（桌面实测 143px＝控件107+间距12+移除24；wrap 是 column + align-items:flex-start，子项不拉伸），血条挤进去只能分到 69px（轨道 14px）。 撑满整行后：桌面轨道 127px（＝原型值）、手机 docW 400→379（**同时是防溢出的关键**）。 只作用于**本插件已识别的行**（data-cs-pid 由 rowPid() 写入）⇒ 不碰其他容器。 */ .wc-block-cart-items__row[data-cs-pid] .wc-block-cart-item__quantity{width:100%} /* 🔴🔴 第六十轮：**不再用 182px 基准 + min-width:64px**。 旧口径实测把抽屉里的血条压到 64px 下限、轨道只剩 **9px**（＝用户说的 「桌面端布局略显异常 / 血条偶尔像是不见了」）。现在： · `.cs-trow` 只占**内容宽**（flex:0 1 auto），不再吃一个巨大的 182px 基准； · 轨道给一个**真实基准 56px**（min 30px）—— 压缩由轨道承担， 右端读数**绝不参与收缩**（flex:0 0 auto）。 结果：抽屉桌面端轨道 9px → 56px，紧凑但一眼可见。 */ .cs-trow{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:8px;margin:0 4px;font-size:11px;line-height:1.2} /* 🔴🔴 轨道宽度必须写 `width`，**不能写 `flex-basis`** —— 实测（注入法，1280 视口）： `flex:0 1 56px` ⇒ 轨道被解析到 **min-width 30px**（基准被吞） `flex:1 1 56px` ⇒ 同样 30px `flex:0 0 56px` / `flex:0 1 auto;width:56px` ⇒ **56px**（后者仍可被压到 min-width） 原因：`.cs-trow` 自己是个内容宽的 flex item，主轴基准在「内联级 flex 容器 + 内容宽父级」这条链上会被 intrinsic 尺寸算法吃掉。 ⇒ 取 `flex:0 1 auto;width:56px;min-width:30px`：**桌面得 56px、窄屏仍能收到 30px**。 */ .cs-trow__track{flex:0 1 auto;width:56px;min-width:30px;height:5px;border-radius:999px;background:rgba(139,26,26,.10);position:relative;overflow:hidden;box-shadow:inset 0 1px 1px rgba(26,26,26,.06)} .cs-trow__fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#8B1A1A 0%,#B8302F 90%,#C7453F 100%);border-radius:999px;transition:width .62s cubic-bezier(.16,1,.3,1);will-change:width} .cs-trow__fill.is-instant{transition:none} .cs-trow__shine{position:absolute;top:0;bottom:0;width:40px;left:-46px;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0))} .cs-trow__shine.run{animation:cs-tier-shine .7s ease-out both} /* ===== 右端读数：**两个独立节点** num + tick（第六十轮拆，第六十一轮改横排） ===== * 第六十轮起因（用户反馈·手机端抽屉）：`✓ −20%` 是一串文字，被挤时**整串**（含勾选） * 掉到下一行 ⇒ 行距变大、行高参差。当时指示把勾选放到**数值下方**， * 于是拆成 `.cs-trow__num`（数字，nowrap 钉死）+ `.cs-trow__tick`（勾选）两节点竖排。 * 🔴🔴 第六十一轮（抽屉已加宽到 420px，窄 drawer 的约束消失）：用户改要求 * 「勾勾放到**最后面**、放在完成折扣的数字后面」⇒ **只把 flex 方向改回横排**， * 勾选落在数字**右侧同一行**。DOM 与 JS 一字未动 —— 这正是「拆成两个独立节点」 * 这个前置设计换来的好处：竖排/横排是一行 CSS 的事。 * 🔴 min-width **钉住整格**（不是钉数字）：−5% 与 −20% 宽度不同时轨道也不抖。 * 🔴 勾选层**常驻**（未解锁时 visibility:hidden，不是 display:none）—— * 否则「刚满档」那一拍整格突然变宽，行距跳变。 * 🔴🔴 光「节点常驻」**还不够**：空的 `` 是**零尺寸**，所以： * · 竖排时代（rc9）要给 `min-height:1em`，否则未满档 tick 盒 `0×0`、 * 读数格 14px，满档 23px ⇒ **跳 9px**（实测）；加了之后 23→23。 * · 横排时代（rc10）改给 **`min-width:.85em`** —— 空勾选**两态同宽占位**， * 否则满档那一拍读数格突然变宽、把可收缩的轨道往回压 6~8px ⇒ 轨道"抖一下"。 * （`min-height:1em` 保留作兜底：行高此时由 num 主导。） */ .cs-trow__off{flex:0 0 auto;display:inline-flex;flex-direction:row;align-items:baseline;justify-content:flex-end;gap:2px;min-width:44px;text-align:right;color:#8B1A1A;font-weight:800;font-size:11.5px;letter-spacing:-.2px;font-variant-numeric:tabular-nums} .cs-trow__num{display:block;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums} .cs-trow__tick{display:block;flex:0 0 auto;min-width:.85em;min-height:1em;line-height:1;text-align:center;font-size:9px;font-weight:700;opacity:.92} .cs-trow__tick.is-off{visibility:hidden} .cs-trow__off.pop{animation:cs-tier-pop .58s cubic-bezier(.2,1.5,.4,1) both} .cs-trow.is-hit .cs-trow__fill{box-shadow:0 0 0 1px rgba(139,26,26,.16)} @media (max-width:600px){ /* 手机：数量列很窄（实测列宽 ~163px、数量控件 107px + 移除按钮 24px 已占满） ⇒ 血条**只吃自己那一份**、绝不伸缩；压缩一律由轨道承担（min 24px）， 数字 + 勾选那一格**宽度固定**（40px）⇒ 永远不可能换行。 第六十一轮：勾选已改成横排在数字右侧，min-width 由 38 → 40 容纳「数字 + 间隙 + 勾选」。 */ .cs-trow{flex:0 1 auto;max-width:none;gap:5px;margin:0 4px} /* 🔴 与桌面同一条规则、同一个坑：宽度必须走 `width`，不能走 `flex-basis`（见上方注释）。 若写成 `flex:0 1 50px`，在手机这条更窄的链上同样会被吞到 min-width 24px， 轨道就只剩 24px —— 加宽抽屉的收益会被这里吃掉一半。 */ .cs-trow__track{flex:0 1 auto;width:50px;min-width:24px;height:6px} .cs-trow__off{min-width:40px;font-size:10.5px;gap:2px} .cs-trow__num{font-size:10.5px} .cs-trow__tick{font-size:8.5px;min-width:.85em} } /* 🔴🔴 极窄机（≤360px）专用：qty 容器与右下角 × 按钮**水平重叠 18px**， 读数（无论竖排还是横排）都会落进重叠区 ⇒ 勾勾压在 × 图标上（320 实测截图可见）。 这里把血条相关宽度整体收紧 ≈17px，把读数推到 × 左侧。 实测（320 视口 · q=20）：读数右缘 247 → **229**，× 左缘 233 ⇒ 间隙 4px。 375 / 390 及以上不受影响（375 实测间隙已有 41px）。 */ @media (max-width:360px){ .cs-trow{gap:4px;margin:0 2px} .cs-trow__track{width:40px;min-width:20px} .cs-trow__off{min-width:36px;font-size:10px} .cs-trow__num{font-size:10px} .cs-trow__tick{font-size:8px;min-width:.8em} } /* ===== 第五十一轮：原价划线 + 折后价 + 档位徽章链（购物车行 / 迷你车行 **同一套**） ===== * 两处载体不同、主张完全一致： * · 购物车页 td.wc-block-cart-item__total （WC 元素 = .wc-block-formatted-money-amount） * · 迷你车 span.cs-cart-pop__price （WC 元素 = .woocommerce-Price-amount） * 🔴 删除线**只加在 WC 原有的金额元素上**（不给整格加）——整格加会把我们插进去的 * 折后价与徽章一起划掉；也绝不自建一枚「原价」节点，否则页面上会出现两个原价。 * 🔴🔴 用户要的是「划掉那条线，**下面**再写折后价」⇒ 金额格必须**竖排**。 * 实测：块购物车的 td.wc-block-cart-item__total 本身就是 `display:flex`（**横排**）， * 不掰成 column 的话折后价会跑到原价**右边**、徽章容器只分到 48px * ⇒ 徽章被压成两行并从右缘溢出（第五十一轮实测抓到，390 视口下 `10%` 那枚探出格子）。 * ⚠️ 只作用于 `[data-cs-pid]` 的行（＝我们已识别为参与商品的行）⇒ 卡夹等不参与的行 * 一个字都不动，连 WC 自带的 Sale 徽章位置也不受影响。 */ .wc-block-cart-items__row[data-cs-pid] .wc-block-cart-item__total{flex-direction:column;align-items:flex-end} /* 让金额块吃满整格（它是 flex item，不给 width 就缩到内容宽 48px） */ .wc-block-cart-items__row[data-cs-pid] .wc-block-cart-item__total > .cs-tmoney{width:100%} /* 🔴🔴 徽章容器**也必须**给 width —— 它同样是 flex item（`.cs-tmoney` 是 column + flex-end） * ⇒ 不给就收缩到 max-content，而 flex-wrap:wrap 的 max-content 在 Chrome 里算出来只有 * 49px（实测）⇒ 三枚徽章照样被压成三行。给了才拿到整格宽度（93px），三枚一行放得下。 */ .wc-block-cart-items__row[data-cs-pid] .wc-block-cart-item__total > .cs-tmoney > .cs-ttags{width:100%} .cs-tstruck{text-decoration:line-through;text-decoration-thickness:1px;color:#9C948C;font-weight:500} .cs-tmoney{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-top:3px;text-align:right} .cs-tmoney__now{font-weight:800;color:#8B1A1A;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.1px} .cs-ttags{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end} /* 「方框框住 N%」—— 用 3px 圆角的小方框，而不是胶囊（用户明确说「方框」） */ .cs-ttag{font-size:9.5px;font-weight:750;letter-spacing:0;line-height:1.55;border-radius:3px;padding:0 4px;white-space:nowrap;border:1px solid transparent;font-variant-numeric:tabular-nums} .cs-ttag.is-now{color:#8B1A1A;background:#FAF3F3;border-color:#E0B6B6} /* 已过的档位：划掉 + 褪色 ⇒ 「这一档已经拿到了」 */ .cs-ttag.is-past{color:#A8A19A;background:#FBFAF9;border-color:#E9E4DE;text-decoration:line-through} /* ===== 中屏（is-medium · 容器 525–676px）：沿用 rc7 的三列 ===== * WC 原生只定义两列（`80px 132px`）⇒ 金额格落在**隐式 auto 轨道**上只剩 49px； * 改三列后金额格 ≈91px（768 实测），两枚徽章（rc8 起最多两枚）绰绰有余。 * 选择器带 `.wc-block-cart` 前缀把特异度顶到 (0,4,1) 压过 WC 的 (0,3,1)， * **不赌样式注入顺序**。 */ .wc-block-cart:is(.is-medium) table.wc-block-cart-items .wc-block-cart-items__row{grid-template-columns:80px minmax(0,1fr) auto} .wc-block-cart:is(.is-medium) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product{grid-column:2 / 3} .wc-block-cart:is(.is-medium) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{grid-column:3 / 4} /* ===== 窄屏（is-mobile / is-small · 容器 ≤405px）：行改**两行**结构 ===== * * 第五十一轮（rc7）在这里把 WC 的两列改成三列，让三枚徽章排成一行 —— 那一步只解决了 * 「徽章换行」；第五十二轮实测暴露出更深的两处问题，**都是 WC 原生布局造成的**： * ① 三列把**商品列压到只有 116px**，而本站商品名是 eBay 式长名（79+ 字符） * ⇒ 折成 **7 行红字**，整行被撑到 264px 高，读起来像一堵链接墙； * ② `div.wc-block-cart-item__quantity`（在商品列**内部**）要装 * `[− N +]`(102) + 血条(90) + 删除(24) = **252px**，而容器只有 132px * ⇒ **真实溢出 120px**，删除按钮被顶到 `x=356`（行右界只有 343） * ⇒ **删除键跑到行外面**。这就是用户报的「变形」。 * 三列布局下「步进器 + 血条（同一行，R49 起的长期要求）+ 删除」需要 ≈215px， * 在 311px 的行宽里**物理上不可能**同时留住缩略图列与价格列 ⇒ 只能改结构。 * * 修法（rc8）：把金额格挪到**第二行**（跨第 2 列、与标题左缘对齐）—— * 第一行 = 缩略图 + 商品列（标题 /「单价 · 规格」/ 数量+血条+删除） * 第二行 = 价格行（原价划掉 → 折后价 → 档位徽章），**横排左对齐** * 实测（390×844 / 卡膜 25 件）：商品列 116 → **245px**；数量行需求 252 vs 可用 245 * ⇒ 拥挤消失、删除键回到行内；`docW ≤ vw` 无横向溢出。 * ⚠️ 只作用于 `is-mobile` / `is-small`；`is-medium`(≥600) 与 `is-large`(≥900) 一个像素不动。 */ .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row{ grid-template-columns:56px minmax(0,1fr);column-gap:10px;padding:12px 0} .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product{grid-column:2 / 3} /* 金额格换到第二行（WC 原文是 `grid-row-start:1`，会把隐式轨道吃掉） */ .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{grid-column:2 / 3;grid-row:2} /* 缩略图列 80 → 56px（图 64 → 52，仍是 3:4），省下的 24px 全给商品列 */ .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img{max-width:52px} /* 商品列内部改成可换行的「行」布局：标题独占一行、单价与规格并排一行、数量行独占一行。 * 原来是 flex 竖排（每块各占一行）⇒ 单价与规格只能各占一行，白白吃掉高度。 */ .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap{ display:flex;flex-wrap:wrap;row-gap:3px;column-gap:8px} /* 🔴 标题：限 3 行 + 去掉下划线改正文色。 * 本站商品名是 eBay 式长名，手机端原样渲染会折 7 行红字把整行撑爆； * 列宽从 116 → 245px 后 3 行足够放下 79 字符（长名才会吃满 3 行）。 * 区分规格的关键信息由下面的 Shape / Size 行承担，可点性靠 active 恢复。 */ .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-name{ flex:1 1 100%;min-width:0;color:#1D1D1F;text-decoration:none; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; font-size:13px;line-height:1.34} .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-name:active{text-decoration:underline} /* 单价（WC 在手机端会在商品列里多印一个 $4.99 = **每件单价**，与右侧行小计并列会误读） * 与规格行并排 + 一起降级为灰色次要信息 ⇒ 一眼能看出它是「单价 · 规格」而不是总价 */ .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices{flex:0 0 auto} .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices, .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices .wc-block-components-product-price{font-size:12px;color:#8A837C} .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__metadata{flex:1 1 auto;min-width:0} .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-details{font-size:12px;color:#8A837C} /* 数量行（步进器 + 血条 + 删除）独占一整行 ⇒ 在 245px 里不再挤压。 * 🔴 实测（390px / 卡膜 25 件）：`__quantity` 的内容宽 = 步进器102 + 间距 + 血条90 + 间距 + 删除24 * = **252px**，而商品列只有 245px ⇒ 仍差 7px，删除按钮右缘 350 越过行右界 343。 * 那两段 18px 间距 = **WC 的 12px column-gap + 血条自身的 `margin:0 6px`**。 * 收紧为 7px + 3px ⇒ 内容宽 236px，留 9px 余量。 * 另加 `flex-wrap:wrap` 做**兜底**：万一字体/语言让内容再宽几像素，血条换行到第二行 * 也只是行变高，**不会再把删除按钮顶到行外**（宁可变高，不可溢出/被裁）。 */ .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity{ flex:1 1 100%;min-width:0;margin-top:2px;column-gap:7px;flex-wrap:wrap} .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row .cs-trow{margin:0 3px} /* 价格行（第二行 / 245px）：横排 —— 原价划掉 → 折后价 → 档位徽章，左对齐。 * 🔴 必须把上面 (0,3,0) 的 `column + flex-end` 掰回 `row + flex-start`， * 并同时把 `.cs-tmoney` / `.cs-ttags` 的 `width:100%` 收回 `auto` * （100% 在 flex row 里会把它们各自顶到单独一行，反而变成四行）。 */ .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row[data-cs-pid] .wc-block-cart-item__total{ flex-direction:row;align-items:baseline;justify-content:flex-start; gap:8px;flex-wrap:wrap;text-align:left;margin-top:2px} /* 🔴 B4（第五十九轮 2026-09-25）：上面这条带 `[data-cs-pid]` ＝**本插件已识别**的行 * （＝参与阶梯折扣的商品，如卡膜 #29、卡夹 #541）。**未参与**阶梯优惠的商品 * （`cs_tier_eligible()` 返 false，如封箱线商品）⇒ 不被识别 ⇒ 拿不到上面这条， * 窄屏下仍是 WC 原生的 `justify-content:flex-end`（**右对齐**） * ⇒ 与紧邻的已识别行左右错开。这里把**未识别行**也拉成同一套「横排左对齐」。 * 实测依据：WC `cart.css` → `.wc-block-cart-item__total{display:flex;justify-content:flex-end}`。 * ⚠️ 只作用于窄屏（is-mobile / is-small）；桌面与中屏一个像素不动 * —— 桌面下两类行都是右对齐，本来就一致。 */ .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row:not([data-cs-pid]) .wc-block-cart-item__total{ flex-direction:row;align-items:baseline;justify-content:flex-start; gap:8px;flex-wrap:wrap;text-align:left;margin-top:2px} .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row[data-cs-pid] .wc-block-cart-item__total > .wc-block-cart-item__total-price-and-sale-badge-wrapper{ flex-direction:row;align-items:baseline;gap:6px} .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row[data-cs-pid] .wc-block-cart-item__total > .cs-tmoney{ width:auto;flex-direction:row;align-items:baseline;justify-content:flex-start;margin-top:0;gap:8px;text-align:left} .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items .wc-block-cart-items__row[data-cs-pid] .wc-block-cart-item__total > .cs-tmoney > .cs-ttags{ width:auto;justify-content:flex-start;flex-wrap:nowrap} /* 🔴 rc8 起删掉了 rc7 的 `@media (max-width:600px){.cs-ttags{gap:2px}.cs-ttag{font-size:9px;…}}` —— * 那条是为了把**三枚**徽章硬塞进 83px 的窄格而压字号/内边距。现在徽章最多两枚、 * 且窄屏有了 245px 的整行价格行 ⇒ 不需要再压，恢复 9.5px / 4px 的正常可读尺寸。 * （迷你车的徽章仍由上面 `.cs-cart-pop__price .cs-ttag` 的 9px 单独收窄。） */ @media (prefers-reduced-motion:reduce){.cs-tier *,.cs-tier,.cs-trow *,.cs-trow{animation:none !important;transition:none !important}} /* ===== 迷你购物车（右下角浮层）宿主：让价格格变成「原价 / 折后价 / 徽章」三行的右对齐列 ===== * ⚠️ 只改 display / 对齐，不动宽度策略：它是 flex 行的一个 item， * 宽度仍由内容决定 ⇒ 徽章**禁止换行**后，价格列会自己变宽到能放下徽章 * （实测 10% 档 2 枚 ≈59px、20% 档 3 枚 ≈82px），绝不挤压元信息列到不可读。 */ .cs-cart-pop__price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right} .cs-cart-pop__price .cs-ttags{flex-wrap:nowrap} .cs-cart-pop__price .cs-tmoney{margin-top:1px;gap:2px} .cs-cart-pop__price .cs-tmoney__now{font-size:13px} .cs-cart-pop__price .cs-ttag{font-size:9px;padding:0 3.5px} .cs-cart-pop__price .cs-tstruck{font-size:13px} @media (prefers-reduced-motion:reduce){.cs-tier *,.cs-tier,.cs-trow *,.cs-trow{animation:none !important;transition:none !important}}