/* ==========================================================================
   Compare（规格 07）
   —— 对比入口页 /mobiles/compare.php、A vs B 结果页、以及全站对比队列 UI
   （气泡 .sm-comp-bubble / 浮层 .sm-comp-float / 搜索对话框 .sm-aac / 抽屉 .sm-compq）
   本文件在 tokens/base/components/utilities 之后加载，可安全覆盖其中的通用规则。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页面骨架
   -------------------------------------------------------------------------- */
.pg-cmp{--cmp-left-col:160px}
/* 原站 main 是 flex 列（外边距不折叠），各直接子块的纵向间距恒为 --mv（实测 16px）：
   .sm-box mb16 → .sm-box-group m0 → sm-dap m16 → .sm-discuss-box m0，末块 mb 为 0。
   home.css 里全局的 .sm-box-group{margin:var(--mv) 0} 会在这里叠出 32px，需要归零。 */
/* 选择器带 main 是为了压过 home.css 里晚加载的全局 .sm-box-group{margin:var(--mv) 0}。 */
main.pg-cmp>*{margin-top:0;margin-bottom:var(--mv)}
main.pg-cmp>*:last-child{margin-bottom:0}
.pg-cmp h1{font-size:1.4287rem}
@media (min-width:750px){
  .pg-cmp{--cmp-left-col:130px}
  .pg-cmp h1{font-size:24px}
}
@media (min-width:960px){
  .pg-cmp{--cmp-left-col:160px}
  .pg-cmp h1{font-size:28px;line-height:1.25}
}

/* 标题盒内的广告行（§2.1.3） */
.pg-cmp-dap-row{display:flex;justify-content:center;align-items:center;gap:24px;background:#f2f2f2;margin:16px 0}
.pg-cmp-dap-row sm-dap{padding:7px 10px;background:aliceblue;border-radius:var(--sp-radius);box-shadow:0 0 4px 1px #ccc;margin:0}
.pg-cmp-dap-row:empty{display:none}
/* Overview 下方的广告位：原站内联 margin:0;padding:2px 0（clean.html 实测），
   紧贴 Overview 表底部，不带 --mv 外边距。 */
.pg-cmp sm-dap[pos="d_compare_below_overview"]{margin:0;padding:2px 0}
@media (max-width:749.98px){.pg-cmp-dap-row{display:none}}
@media (min-width:750px) and (max-width:1140px){
  .pg-cmp-dap-row{gap:8px}
  .pg-cmp-dap-row sm-dap[pos]{padding:0}
}

.pg-cmp-cpdt-wrap{margin-top:6px;position:relative}
/* 粘性列头 .sm-cpdt.fixed 已移到 .sm-box 之外（page-compare.php），
   所以 components.css 里 .sm-box{contain:content}（原站原文）可以保持不动。 */

/* --------------------------------------------------------------------------
   2. 槽位表 .sm-cpdt（§2.1.4 / §2.2.2）
   -------------------------------------------------------------------------- */
.sm-cpdt{display:flex;width:100%;position:relative;border-top:1px solid var(--color-border)}
.sm-cpdt>div{flex:0 0 50%;box-sizing:border-box}
.sm-cpdt>div:first-child{display:none}
.sm-cpdt>.item{position:relative;--item-width:100%;--img-height:140px}
.sm-cpdt>.item.item{border-left:1px solid var(--color-border);overflow:hidden}
.sm-cpdt>.item:first-child{border-left:0}
.sm-cpdt>.item.empty{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.1429rem 0;min-height:154px;cursor:pointer;color:var(--color-text)}
.sm-cpdt>.item.empty>span{margin-top:.2857rem}
.sm-cpdt>.item.empty:hover{background:aliceblue}
.sm-cpdt .sm-product{cursor:default;border:0;width:100%;box-sizing:border-box}
.sm-cpdt.per-compare .sm-product{grid-template:"img img img" var(--img-height) "name name name" 1fr "price drop menu" auto "rating rating rating" auto / auto 1fr 17px}

/* “vs” 圆标 */
.sm-cpdt>small{display:block;position:absolute;top:50%;font-size:16px;font-weight:700;padding:6px 9px;border-radius:50%;background:#eee;margin:-24px 0 0 -16px;left:50%;z-index:1}

/* 排名徽标 / 移除按钮 */
.sm-cpdt>.item>b{position:absolute;top:0;left:0;display:block;background:#eee;border-bottom-right-radius:var(--sp-radius);padding:2px 6px;font-size:20px;font-weight:400;line-height:1.5;z-index:1}
.sm-cpdt>.item>.x-btn{position:absolute;top:2px;right:1px;padding:4px;margin:-4px;background:transparent;border:0;cursor:pointer;color:#789;line-height:0;z-index:1}
.sm-cpdt>.item>.x-btn:hover{color:var(--color-danger)}
.sm-cpdt>.item>.x-btn .icon{--s:18px}

/* 移动端的 count-N 变体 */
.count-2 .sm-cpdt>.item:nth-child(n+4){display:none}
.count-3 .sm-cpdt>.item:nth-child(n+5){display:none}
.count-3 .sm-cpdt>div{flex:0 0 33.3333%}
.count-3 .sm-cpdt>small:nth-of-type(1){left:33.3333%}
.count-3 .sm-cpdt>small:nth-of-type(2){left:66.6666%}
.count-3 .sm-cpdt>.item{--img-height:120px}
.count-4 .sm-cpdt>div{flex:0 0 25%}
.count-4 .sm-cpdt>small{font-size:13px;padding:3px 5px;margin:-34px 0 0 -11px}
.count-4 .sm-cpdt>small:nth-of-type(1){left:25%}
.count-4 .sm-cpdt>small:nth-of-type(2){left:50%}
.count-4 .sm-cpdt>small:nth-of-type(3){left:75%}
.count-4 .sm-cpdt>.item{--img-height:80px}
.pg-cmp-landing .sm-cpdt>.item{min-height:246px}

@media (min-width:750px){
  .sm-cpdt{display:grid;grid-template-columns:var(--cmp-left-col) repeat(4,1fr);border:1px solid var(--color-border);border-radius:var(--sp-radius);align-items:stretch}
  .sm-cpdt>div{flex:none}
  .sm-cpdt>div:first-child{display:block}
  .sm-cpdt>.item{--img-height:170px}
  .sm-cpdt>.item>b{padding:2px 10px}
  .sm-cpdt>.item>.x-btn{top:5px;right:5px}
  .sm-cpdt>small{font-size:18px;padding:8px 12px;margin:-24px 0 0 -20px}
  .sm-cpdt>small:nth-of-type(1){left:calc((100% - var(--cmp-left-col)) * .25 + var(--cmp-left-col))}
  .sm-cpdt>small:nth-of-type(2){left:calc((100% - var(--cmp-left-col)) * .5 + var(--cmp-left-col))}
  .sm-cpdt>small:nth-of-type(3){left:calc((100% - var(--cmp-left-col)) * .75 + var(--cmp-left-col))}
  .count-2 .sm-cpdt>.item:nth-child(n+4),
  .count-3 .sm-cpdt>.item:nth-child(n+5){display:flex}
  .count-3 .sm-cpdt>.item,.count-4 .sm-cpdt>.item{--img-height:170px}
  .pg-cmp-landing .sm-cpdt>.item{min-height:289px;display:flex;align-items:center}
}

/* 粘性列头（§2.2.4） */
.sm-cpdt.fixed{display:none;opacity:0;position:fixed;top:var(--top-fixed,0px);left:0;background:var(--bg-section);transition:opacity var(--sp-dur-slow) ease-in;box-shadow:0 1px 6px 1px #ccc;border:0;border-radius:0;width:100%;align-items:stretch;z-index:var(--z-cpdt-fixed)}
.sm-cpdt.fixed.show{display:flex;opacity:1}
.sm-cpdt.fixed>.item,.sm-cpdt.size-s>.item{--img-height:90px}
.sm-cpdt.fixed>.item.empty,.sm-cpdt.size-s>.item.empty{min-height:80px}
.sm-cpdt.size-s .sm-product>.name{font-size:13px}
.sm-cpdt.size-s .sm-product>.price{font-size:14px}
.pg-cmp-landing .sm-cpdt.fixed>.item{min-height:0}
@media (min-width:750px){
  .sm-cpdt.fixed{max-width:calc(var(--main-width) - 20px);left:auto}
  .sm-cpdt.fixed.show{display:grid}
}
@media (min-width:750px) and (max-width:1220px){
  .sm-cpdt.fixed{left:10px;right:10px;width:auto}
}
.count-4 .sm-cpdt.fixed .sm-product{grid-template:"img" var(--img-height) "name" 1fr "price" auto / auto;padding:6px 4px}
.count-4 .sm-cpdt.fixed .sm-product>.name{font-size:12px;margin-top:4px}
.count-4 .sm-cpdt.fixed .sm-product>.price{font-size:12px}
.count-4 .sm-cpdt.fixed .sm-product>.icon{display:none}

/* --------------------------------------------------------------------------
   3. 按钮行 .pg-cmp-ma + 页面动作（§2.1.5 / §2.1.6）
   -------------------------------------------------------------------------- */
.pg-cmp-ma{padding:5px 12px;text-align:center;border-top:1px solid var(--color-border)}
/* utilities.css 里的工具类 .dim{color:var(--color-text-light)} 与 .sm-btn.dim（原站只降不透明度）
   同特异性且后加载，会把 COMPARE NOW 的白字变成灰字；这里提高特异性还原成白色。 */
.pg-cmp .sm-btn.flat.dim,.pg-cmp .sm-btn.raised.dim,
.sm-comp-ui .sm-btn.flat.dim,.sm-comp-ui .sm-btn.raised.dim{color:#fff}
.pg-cmp-landing .pg-cmp-ma{padding:.5714rem 12px}
@media (min-width:750px){
  .pg-cmp:not(.pg-cmp-landing) .pg-cmp-ma{display:none}
}
.pg-cmp .sm-page-actions>ul{justify-content:space-between;grid-gap:0}
@media (min-width:750px){
  .pg-cmp .sm-page-actions.comparison{position:absolute;top:0;left:0;border-radius:0 0 var(--sp-radius) 0;padding:0 8px;z-index:1}
  .pg-cmp .sm-page-actions.comparison>ul{grid-auto-flow:row;grid-gap:0;justify-content:end}
  /* 原站三行等宽（实测 li 90.84×44），内容居中而非左对齐；水平内边距为 0。 */
  .pg-cmp .sm-page-actions.comparison li{justify-content:center;padding:12px 0}
}

/* --------------------------------------------------------------------------
   4. Top / Recent / Related Comparisons —— .sm-comp-with（§2.1.7）
   -------------------------------------------------------------------------- */
.sm-comp-with>a{display:grid;grid-template:"name1 img1 vs img2 name2" minmax(36px,auto) / 1fr 36px 36px 36px 1fr;font-size:13px;line-height:18px;align-items:center;padding:8px var(--ph);border-top:1px solid var(--color-border);color:var(--color-text);contain:content}
.sm-comp-with>a>img:nth-child(1){grid-area:img1;max-width:36px;max-height:36px;justify-self:center}
.sm-comp-with>a>img:nth-child(2){grid-area:img2;max-width:36px;max-height:36px;justify-self:center}
.sm-comp-with>a>span:nth-child(3){grid-area:name1;padding-right:6px}
.sm-comp-with>a>span:nth-child(4){grid-area:vs;justify-self:center;color:slategray;font-weight:700}
.sm-comp-with>a>span:nth-child(5){grid-area:name2;text-align:right;padding-left:6px}
.sm-comp-with>a:hover{background:honeydew;color:var(--color-link-hover)}

/* --------------------------------------------------------------------------
   5. 对比表 .sm-comparison / .sm-comp-table（§2.2.5 / §2.2.6）
   -------------------------------------------------------------------------- */
.sm-comparison{position:relative;background:var(--bg-section);border:1px solid var(--sp-card-border);border-width:0 0 1px;margin:0 0 var(--mv);contain:content}
/* 结果页里标题盒与对比表是连在一起的（原站无间隙） */
.pg-cmp:not(.pg-cmp-landing)>.sm-box:first-of-type{margin-bottom:0}
.sm-comparison>h2{text-align:center;padding:8px var(--ph);background:var(--bg-light-blue);font-weight:400;font-size:16px;line-height:1.5}
.pg-cmp .sm-comp-table{display:block;width:100%;background:var(--bg-section)}
.pg-cmp .sm-comp-table tbody{display:block}
.pg-cmp .sm-comp-table tr{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto;align-items:stretch;border:0}
.pg-cmp .sm-comp-table td{padding:8px 10px;border-right:1px solid var(--color-border);text-align:center;font-size:13px;line-height:1.4;width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;white-space:pre-wrap;word-break:break-word;box-sizing:border-box;background:none}
.pg-cmp .sm-comp-table td:first-child,.pg-cmp .sm-comp-table td:last-child{border-right:0}
.pg-cmp .sm-comp-table td>div{display:flex;justify-content:center;align-items:center}
.pg-cmp .sm-comp-table td.heading{grid-area:1 / 1 / 1 / 5;background:ghostwhite;color:var(--color-text-light);padding:3px 10px;font-weight:400;text-align:center;border-right:0}
.pg-cmp .sm-comp-table td .desc{display:flex;align-items:center;color:var(--color-text-light);font-size:12px;margin-top:6px}
.pg-cmp .sm-comp-table td.winner{background:var(--sp-cmp-winner) !important}
.pg-cmp .sm-comp-table td.winner .desc{color:var(--sp-cmp-winner-desc)}
.pg-cmp .sm-comp-table td .icon{margin-right:2px;flex-shrink:0}
.pg-cmp .sm-comp-table tr.features td>div:not(:first-child){margin-top:4px}
.pg-cmp .sm-comp-table .specsScore span{padding:6px 10px;background:var(--sp-cmp-score-bg);border-radius:var(--sp-radius);color:#fff;font-weight:700;font-size:15px}
.pg-cmp .sm-comp-table.overview td{flex-direction:column}
.pg-cmp.count-3 .sm-comp-table tr{grid-template-columns:repeat(3,1fr)}
.pg-cmp.count-4 .sm-comp-table tr{grid-template-columns:repeat(4,1fr)}
.pg-cmp.count-4 .sm-comp-table td{font-size:.8572rem;padding:.5714rem .4286rem}

@media (min-width:750px){
  .sm-comparison{border-width:0 1px 1px;border-radius:0 0 var(--sp-radius) var(--sp-radius);box-shadow:var(--sp-shadow-card)}
  .pg-cmp:not(.pg-cmp-landing)>.sm-box:first-of-type{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .sm-comparison>h2{text-align:left;font-size:18px}
  .pg-cmp .sm-comp-table .specsScore span{font-size:22px}
  .pg-cmp .sm-comp-table tr{grid-template-columns:var(--cmp-left-col) repeat(4,1fr) !important;grid-template-rows:auto;border:0;border-bottom:1px solid var(--sp-cmp-line)}
  .pg-cmp .sm-comp-table tr:first-child{border-top:1px solid var(--sp-cmp-line)}
  .pg-cmp .sm-comp-table td{justify-content:flex-start;text-align:left;background:var(--sp-cmp-cell);font-size:14px}
  .pg-cmp .sm-comp-table td.heading{grid-area:1;justify-content:flex-end;text-align:right;font-weight:700;background:var(--sp-cmp-heading);border-right:3px solid var(--sp-cmp-line);color:var(--color-text-light)}
  .pg-cmp .sm-comp-table td .desc{font-size:13px}
  .pg-cmp .sm-comp-table td .icon{margin-right:4px}
  .pg-cmp .sm-comp-table td:nth-child(2n+3){background:var(--sp-cmp-cell-alt)}
  .pg-cmp .sm-comp-table.overview td{align-items:flex-start;justify-content:center}
  .pg-cmp .sm-comp-table.overview td.heading{align-items:flex-end}
}

/* 移动端 3–4 台：两格网格塞不下，改成"参数名列 + 横向滚动"，首列粘性。
   2 台时保持原站的两列布局（标题行贯通），不加滚动。 */
@media (max-width:749.98px){
  .pg-cmp.count-3 .sm-comparison,
  .pg-cmp.count-4 .sm-comparison{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pg-cmp.count-3 .sm-comp-table tr{grid-template-columns:112px repeat(3,minmax(130px,1fr));grid-template-rows:auto}
  .pg-cmp.count-4 .sm-comp-table tr{grid-template-columns:112px repeat(4,minmax(130px,1fr));grid-template-rows:auto}
  .pg-cmp.count-3 .sm-comp-table td,
  .pg-cmp.count-4 .sm-comp-table td{background:var(--sp-cmp-cell);text-align:left;justify-content:flex-start;border-right:0}
  .pg-cmp.count-3 .sm-comp-table td:nth-child(2n+3),
  .pg-cmp.count-4 .sm-comp-table td:nth-child(2n+3){background:var(--sp-cmp-cell-alt)}
  .pg-cmp.count-3 .sm-comp-table td.heading,
  .pg-cmp.count-4 .sm-comp-table td.heading{grid-area:auto;position:sticky;left:0;z-index:1;background:var(--sp-cmp-heading);color:var(--color-text-light);font-weight:700;text-align:right;justify-content:flex-end;border-right:3px solid var(--sp-cmp-line);padding:8px 10px}
  .pg-cmp.count-3 .sm-comp-table tr,
  .pg-cmp.count-4 .sm-comp-table tr{border-bottom:1px solid var(--sp-cmp-line)}
  .pg-cmp.count-3 .sm-comp-table.overview td,
  .pg-cmp.count-4 .sm-comp-table.overview td{align-items:flex-start;justify-content:center}
  .pg-cmp.count-3 .sm-comp-table.overview td.heading,
  .pg-cmp.count-4 .sm-comp-table.overview td.heading{align-items:flex-end}
  .pg-cmp.count-3 .sm-comparison>h2,
  .pg-cmp.count-4 .sm-comparison>h2{position:sticky;left:0;width:100vw;box-sizing:border-box}
}

/* “Only differences” 开关（§6.1，WP 版新增，默认关闭） */
.pg-cmp-diff{display:flex;justify-content:flex-end;align-items:center;padding:8px var(--ph);border-bottom:1px solid var(--color-border)}
@media (min-width:750px){.pg-cmp-diff{position:absolute;top:0;right:0;height:43px;padding:0 var(--ph);border-bottom:0;z-index:1}}
.sm-switch{display:inline-flex;align-items:center;font-size:13px;color:var(--color-text-light);cursor:pointer;user-select:none}
.sm-switch>input{position:absolute;opacity:0;width:0;height:0}
.sm-switch>i{display:block;width:34px;height:18px;border-radius:9px;background:#ccc;position:relative;transition:background var(--sp-dur) var(--sp-ease-out);flex:0 0 34px}
.sm-switch>i:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform var(--sp-dur) var(--sp-ease-out)}
.sm-switch>input:checked+i{background:var(--color-primary)}
.sm-switch>input:checked+i:after{transform:translateX(16px)}
.sm-switch>input:focus-visible+i{outline:2px solid var(--color-primary);outline-offset:2px}
.sm-switch>span{margin-left:8px}
.pg-cmp.only-diff .sm-comp-table tr.is-same{display:none}

/* --------------------------------------------------------------------------
   6. 结果页尾部区块（§2.2.7）
   -------------------------------------------------------------------------- */
.pg-cmp-rp .sm-product-actions>:not(:first-child){display:none}
.pg-cmp-rp .rating+.sm-product-actions{margin-top:9px}
.pg-cmp-rp .sm-product-actions>button{background:transparent;border:0;font:inherit;color:inherit}
.pg-cmp-rp .sm-product-actions>button:hover{background:var(--sp-actions-bg-hover);color:var(--sp-actions-text-hover);border-radius:var(--sp-radius)}
.pg-cmp-rp .sm-product-actions small{margin-left:4px;font-size:.9072rem;color:var(--color-text-light)}
.pg-cmp-rp .sm-product-actions .i-on{display:none}
.pg-cmp-rp .sm-product-actions button[aria-pressed="true"] .i-add{display:none}
.pg-cmp-rp .sm-product-actions button[aria-pressed="true"] .i-on{display:inline-block}
@media (min-width:750px){
  .pg-cmp-rp{--per-row:5}
  .pg-cmp-rp .sm-product:nth-child(n+6){display:none}
}

/* .sm-discuss / .sm-discuss-empty-text 在 components.css §15 */
.sm-discuss-box textarea.input{width:100%;max-width:600px;background:honeydew;box-sizing:border-box}

/* --------------------------------------------------------------------------
   7. 全站对比队列 UI（§2.3 / §2.4）
   -------------------------------------------------------------------------- */
.sm-comp-ui [hidden]{display:none !important}

/* 7.1 气泡 */
.sm-comp-bubble{--bs-o:10%;position:fixed;bottom:24px;left:24px;z-index:var(--z-bubble);font-size:15px;font-weight:500;cursor:pointer;padding:7px;margin:-7px}
.sm-comp-bubble>div{background:#fff;box-shadow:0 6px 10px -2px #1b1f2733,0 4px 74px #1b1f2759,0 0 0 6px rgb(0 0 0 / var(--bs-o));border-radius:25px;height:50px;display:flex;align-items:center;position:relative}
.sm-comp-bubble:hover{--bs-o:25%}
.sm-comp-bubble .imgs{width:46px;height:46px;margin:3px;background:#cdd0d6;border-radius:50%;display:flex;align-items:center;flex-direction:row-reverse;padding:3px;overflow:hidden;box-sizing:border-box}
.sm-comp-bubble .imgs.count-1{justify-content:center}
.sm-comp-bubble img{max-height:calc(100% - calc(20% * calc(var(--n) - 1)));max-width:100%;margin-left:calc(-3% * var(--n));object-fit:contain}
.sm-comp-bubble span{padding:0 6px 0 20px;white-space:nowrap}
.sm-comp-bubble i{position:absolute;top:-4px;right:-3px;padding:1px 6px;background:#f11382;color:#fff;z-index:2;border-radius:50%;font-size:12px;font-weight:700;font-style:normal}
@media (max-width:600px){
  .sm-comp-bubble{left:-12px;bottom:-6px}
  .sm-comp-bubble span{display:none}
}

/* 7.2 底部弹层通用（打开动画） */
.sm-comp-ui .sm-bottom-popup{transform:translateY(100%)}
.sm-comp-ui .sm-bottom-popup.open{transform:translateY(0)}
@media (min-width:750px){
  .sm-comp-ui .sm-bottom-popup{transform:translate(-50%,100%)}
  .sm-comp-ui .sm-bottom-popup.open{transform:translate(-50%,0)}
  .sm-comp-ui .sm-bottom-popup.wide{max-width:710px}
}
@media (min-width:840px){
  .sm-comp-ui .sm-bottom-popup.wide{max-width:800px}
}
.sm-comp-ui .sm-overlay{opacity:0;z-index:8;transition:opacity var(--sp-dur) var(--sp-ease-out)}
.sm-comp-ui .sm-overlay.open{opacity:.4}
.sm-popup-head .close{background:transparent;border:0;color:inherit;padding:10px;cursor:pointer;line-height:0}
.sm-popup-head .title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 7.3 浮动对比条 */
.sm-comp-float{background:#fff}
.sm-comp-float>.head{padding:8px 12px;font-size:15px;line-height:22px;background:#eee;display:flex;align-items:center}
.sm-comp-float>.head *:first-child{flex:1}
.sm-comp-float>.head .close{background:transparent;border:0;color:#789;padding:6px;margin:-6px;cursor:pointer;line-height:0}
.sm-comp-float>.head .close:hover{color:var(--color-danger)}
.sm-comp-float .sm-cpdt{border:0;overflow:auto}
.sm-comp-float .sm-cpdt>.item{min-height:180px}
.sm-comp-float .sm-cpdt>.item.empty{min-height:180px}
.sm-comp-float .sm-product{padding:8.5px 16px}
.sm-comp-float>.btn-wrap{display:flex;align-items:center;justify-content:center;padding:8px 12px;border-top:1px solid var(--color-border)}
.sm-comp-float>.btn-wrap .sm-btn{font-size:14px;height:34px}
.sm-comp-float>.btn-wrap .sm-btn.cn-btn{font-size:15px;height:36px}
@media (min-width:750px){
  .sm-comp-float>.head{border-radius:8px 8px 0 0}
  .sm-comp-float .sm-cpdt{grid-template-columns:0 repeat(4,1fr)}
}

/* 7.4 “Add Product To Comparison” 对话框 */
.sm-aac{max-height:min(750px,90vh)}
.sm-aac>div:not(.sm-popup-head){background:#fff;padding:12px;display:flex;flex-direction:column;overflow:hidden;flex:1;min-height:0}
.sm-aac .hint{margin:0 0 10px;font-size:14px;color:var(--color-text-light)}
.sm-aac .sm-input>.input{width:100%;box-sizing:border-box;border:1px solid #d2d2d2;border-top-color:silver;background:honeydew;padding:9px 12px;font-size:16px;line-height:24px;border-radius:3px;box-shadow:inset 0 0 6px #ddd;font-family:inherit}
.sm-aac .sm-input>.input:focus{background:#ffc;border-color:#cea75b;outline:none}
.sm-aac-items{overflow:auto;margin-top:6px;flex:1;min-height:0;background:#fff}
.sm-aac-items .sm-product{grid-template:"img name" auto "img price" auto / 40px 1fr;grid-gap:0 10px;padding:6px 8px;border-top:1px solid var(--color-border);align-items:center}
.sm-aac-items .sm-product:first-child{border-top:0}
.sm-aac-items .sm-product>.sm-img-wrap{grid-area:img;height:40px;width:40px}
.sm-aac-items .sm-product>.name{grid-area:name;font-size:.8572rem;margin:0}
.sm-aac-items .sm-product>.price{grid-area:price;font-size:.8572rem;margin:0}
.sm-aac-items .sm-product:hover{background:aliceblue}
.sm-aac-items .empty{padding:16px 8px;text-align:center;color:var(--color-text-light);font-size:14px}

/* 7.5 Compare Queue 抽屉 */
.sm-compq-drawer{z-index:var(--z-drawer)}
.sm-compq>.empty{padding:12px;text-align:center;font-size:14px;color:var(--color-text-light)}
.sm-compq .sm-box{margin:0 0 var(--mv)}
.sm-compq-actions{padding:8px 0;text-align:center;border-top:1px solid var(--color-border)}
.sm-compq>.btn-wrap{text-align:center;margin:12px 0}
.sm-compq .sm-product{grid-template:"img name" auto "img price" auto / 40px 1fr;grid-gap:0 10px;padding:6px 8px;border-top:1px solid var(--color-border);align-items:center}
.sm-compq .sm-product>.sm-img-wrap{grid-area:img;height:40px;width:40px}
.sm-compq .sm-product>.name{grid-area:name;font-size:.8572rem;margin:0}
.sm-compq .sm-product>.price{grid-area:price;font-size:.8572rem;margin:0}
.sm-compq .sm-product>.x-btn{position:absolute;top:4px;right:4px;background:transparent;border:0;color:#789;cursor:pointer;line-height:0;padding:4px}
.sm-compq .sm-product>.x-btn:hover{color:var(--color-danger)}

/* 7.6 列表/详情页的 Compare 勾选态 */
.sm-product-actions .compare{display:flex;align-items:center;cursor:pointer}
.sm-product-actions .compare.is-on,
.sm-page-actions li.is-on{color:var(--color-rank1)}
.sm-product-actions .compare.is-on small{color:var(--color-rank1)}
.sm-product-actions .sp-compare-add.is-on,.sm-product-actions .sp-compare-add.is-on small{color:var(--color-rank1)}
.sm-product-actions .sp-compare-add.is-on .icon{fill:var(--color-rank1) !important}
.sm-page-actions li.is-on .icon{fill:var(--color-rank1)}