/* ==========================================================================
   smartprix theme · components.css
   来源：us.smartprix.com index.3b4ef80b.css 组件段（硬编码色已替换为 tokens）
   依赖 tokens.css + base.css
   ========================================================================== */

/* ==========================================================================
   1. 图标 .icon
   ========================================================================== */
.icon{--s:24px;width:var(--s);height:var(--s);fill:currentColor;position:relative;box-sizing:content-box;display:inline-block;line-height:1;flex:0 0 auto}
.icon.hover{cursor:pointer}
.icon.hover:hover{opacity:1;filter:brightness(.5)}
.icon[disabled],.icon.disabled{opacity:.5;cursor:default!important}

/* 通用弱化文字色（原站 index.css 里位于 .sm-btn 之前，故 .sm-btn 的白色会赢） */
.dim{color:var(--color-text-light)}

/* ==========================================================================
   2. 按钮 .sm-btn
   ========================================================================== */
.sm-btn{
  --btn-color:var(--sp-btn-default);
  align-items:center;border-radius:var(--sp-radius);display:inline-flex;flex:0 0 auto;
  font-size:1.0358rem;line-height:1.4;font-weight:500;justify-content:center;max-width:100%;
  outline:0;position:relative;text-decoration:none;text-transform:uppercase;
  -webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;cursor:pointer;
  height:2.5717rem;min-width:50px;padding:0 16px;color:#fff;box-sizing:border-box;font-family:inherit;
}
.sm-btn:hover{color:#fff;filter:brightness(115%);box-shadow:var(--sp-shadow-btn)}
.sm-btn.disabled,.sm-btn[disabled]{opacity:.6;pointer-events:none}
.sm-btn.dim{opacity:.6}
.sm-btn .icon{--s:24px;margin-right:4px}
.sm-btn.loading>.icon,.sm-btn.loading>img{animation:shake .8s linear infinite;transform-origin:50% 100%}
input.sm-btn{outline:none;border:none;font-family:inherit}
/* 尺寸（size-m 即默认，原站无规则） */
.sm-btn.size-s{font-size:.9286rem;height:2.2859rem;padding:0 .8572rem}
.sm-btn.size-s .icon{--s:21px}
.sm-btn.size-xs{font-size:.7857rem;height:2.143rem;padding:0 12px}
.sm-btn.size-xs .icon{--s:18px}
.sm-btn.size-l{font-size:1.2144rem;height:3.0003rem;padding:0 18px}
/* 外观 */
.sm-btn.raised{box-shadow:var(--sp-shadow-btn)}
.sm-btn.raised,.sm-btn.flat{background:var(--btn-color)}
.sm-btn.outline{border:1px solid var(--btn-color);color:var(--btn-color);background:transparent}
.sm-btn.outline:hover{color:var(--btn-color)}
.sm-btn.text{color:var(--btn-color);background:transparent}
.sm-btn.text:hover{color:var(--btn-color);box-shadow:none}
/* 颜色（orange 即默认 --sp-btn-default） */
.sm-btn.primary{--btn-color:var(--color-primary)}
.sm-btn.danger{--btn-color:var(--color-danger)}
.sm-btn.success{--btn-color:var(--color-success)}
.sm-btn.secondary.outline{--btn-color:var(--color-secondary)}
.sm-btn.white{--btn-color:#fff;color:var(--color-text)}
.sm-btn.white-grad{--btn-color:var(--sp-btn-white-grad);color:var(--sp-btn-white-grad-text)!important;border:1px solid #ccc;border-color:var(--sp-btn-white-grad-border)}
.sm-btn.white-grad:hover{border-color:var(--sp-btn-white-grad-border-hover);box-shadow:inset 0 2px #fff,0 1px 2px #0003;filter:none}
.sm-btn.with-icon{min-width:24px}
.sm-btn.with-icon.no-txt{padding:0 6px;border-radius:var(--sp-radius-circle)}
.sm-btn.with-icon.no-txt .icon{margin:0}
.sm-btn+.sm-btn{margin-left:6px}

/* ==========================================================================
   3. 表单 .sm-input
   ========================================================================== */
.sm-input{width:100%;max-width:600px;--isize:24px}
.sm-input>label{display:block;margin-bottom:4px;color:var(--color-text-light);font-size:16px}
.sm-input>.input,.sm-input input:not(.sm-btn),.sm-input textarea,.sm-input select{
  display:block;border:1px solid var(--sp-input-border);border-top-color:var(--sp-input-border-top);
  background:var(--sp-input-bg);color:#000;width:100%;padding:9px 12px;font-size:16px;line-height:24px;
  max-height:300px;box-shadow:var(--sp-input-shadow);border-radius:var(--sp-radius-sm);font-family:inherit;
}
.sm-input>.input:focus,.sm-input input:not(.sm-btn):focus,.sm-input textarea:focus,.sm-input select:focus{outline:none;background:var(--sp-input-focus-bg);border-color:var(--sp-input-focus-border);box-shadow:var(--sp-input-focus-shadow)}
.sm-input>.input:disabled{opacity:.6}
.sm-input>.input[readonly]{background:transparent;border:0;box-shadow:none;padding:2px 0}
.sm-input>.input::selection{background:var(--sp-selection);color:#fff}
.sm-input.has-error>.input,.sm-input.has-error input:not(.sm-btn){background:var(--sp-input-error-bg);border:1px solid var(--sp-input-error-border)}
.sm-input select{-webkit-appearance:none;appearance:none;background:#fff;box-shadow:none}
.sm-input select.empty{color:var(--color-text-extra-light)}
.sm-input>.select-wrap{position:relative}
.sm-input>.select-wrap:after{content:"";background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23363636"><path d="M7,10L12,15L17,10H7Z"/></svg>');background-size:contain;position:absolute;width:24px;height:24px;top:0;right:8px;bottom:0;margin:auto 0;pointer-events:none}
.sm-input>.check-wrap{display:flex;align-items:center;position:relative;cursor:pointer}
.sm-input>.check-wrap>input{display:none}
.sm-input>.check-wrap>.label{order:2;flex:1}
.sm-input>.check-wrap>i{order:1;margin-right:calc(var(--isize)/4)}
.sm-input>.check-wrap>i:before{display:block;content:"";background:var(--icon-checkbox-blank) no-repeat center/contain;width:var(--isize);height:var(--isize)}
.sm-input>.check-wrap>input:checked+i:before{background:var(--icon-checkbox) no-repeat center/contain}
.sm-input>.help,.sm-input>.error{margin-top:2px;text-align:right;font-size:.8572rem}
.sm-input>.help{color:var(--sp-input-help)}
.sm-input>.error{color:var(--color-danger)}
/* input.sm-btn（submit 按钮）不吃上面的文本框样式 */
.sm-input input.sm-btn{display:inline-flex;width:auto;max-height:none;color:#fff;border:0;padding:0 16px;height:2.5717rem;line-height:normal;box-shadow:none;background:var(--btn-color)}
.sm-input.size-s{font-size:.8572rem;--isize:18px}
.sm-input+.sm-input{margin-top:14px}
.sm-input.no-label+.sm-input{margin-top:9px}
.sm-input-group{display:flex;align-items:center;gap:16px;width:100%;max-width:600px}
.sm-input>.count-wrap{display:flex;align-items:center;gap:8px}
.sm-input>.count-wrap>button{color:var(--sp-counter-btn);cursor:pointer}
.sm-input>.count-wrap>button[disabled]{color:var(--sp-counter-btn-disabled);pointer-events:none}

/* ==========================================================================
   4. chip / 标签 / 徽章
   ========================================================================== */
.sm-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--sp-radius-sm);color:#fff;font-weight:700;line-height:1.4287rem;font-size:13px;background:var(--sp-tag-amber)}
.sm-tag.oos{background:var(--sp-tag-oos)}
.sm-tag.val{background:var(--sp-tag-val)}
.sm-tag.dashed{padding:4px 10px;border:1px dashed #ccc;border-radius:var(--sp-radius-sm);background:transparent;color:var(--color-text-light);font-weight:400}
.sm-tag.offer{background:var(--sp-offer-chip-bg);color:var(--sp-offer-chip-text);border:1px solid var(--sp-offer-chip-border);font-weight:400;padding:0 6px}
.sm-cats-badge{position:absolute;top:0;right:0;padding:4px 6px;border-radius:8px;background:var(--color-primary);color:#fff;font-size:.7143rem;font-weight:700;line-height:1;text-transform:uppercase}
.sm-chip{display:inline-flex;align-items:center;padding:6px 8px;border:1px solid var(--sp-filter-chip-border);border-radius:var(--sp-radius);cursor:pointer;font-size:.9286rem;color:var(--color-text);background:#fff}
.sm-chip:hover{background:var(--sp-filter-chip-border)}
.sm-chip>span{margin-left:8px;padding:1px 6px;background:var(--color-border);border-radius:2px;font-size:11px}
.sm-count-badge{font-size:11px;line-height:18px;font-weight:700;background:var(--color-secondary);color:#fff;padding:0 4px;border-radius:var(--sp-radius-sm)}
/* rank 色（工具类见 utilities.css） */

/* ==========================================================================
   5. 评分星 .sm-rating + Spec Score 徽章
   ========================================================================== */
.sm-rating{display:inline-flex;align-items:center;--size:1.0001rem;--rating:5}
.sm-rating>.text{font-size:13px;padding:0 7px;background:var(--sp-rating-badge-bg);color:#fff;border-radius:var(--sp-radius-sm);font-weight:700;margin-right:6px}
.sm-rating>i{display:block;background:var(--icon-star-outline) left/var(--size);width:calc(var(--size) * 5);height:var(--size)}
.sm-rating>i:after{content:"";display:block;background:var(--icon-star) left/var(--size);width:calc(var(--size) * var(--rating));height:100%}
.sm-rating>.count{font-size:.7857rem;color:var(--color-text-light);margin-left:6px}
.sm-rating.size-l{--size:1.7144rem}
.sm-rating.size-l>.text{font-size:24px;padding:0 12px}

/* Spec Score chip：<div class="score rank-1-bg"><b>87</b><small>Spec Score</small></div> */
.sm-score{display:inline-flex;align-items:center;padding:2px 8px;background:var(--color-rank2);border-radius:var(--sp-radius-sm);color:#fff;line-height:1.4287rem;font-size:13px}
.sm-score>b{font-size:1.3572rem;font-weight:700}
.sm-score>small{font-size:13px;opacity:.9;margin-left:6px}

/* ==========================================================================
   6. 卡片 .sm-box 家族
   ========================================================================== */
.sm-box{position:relative;border:1px solid var(--sp-card-border);border-width:1px 0;background:var(--bg-section);margin:var(--mv) 0;contain:content}
.sm-box.padded{padding:var(--pv) var(--phh)}
.sm-box:not(.padded)>h1,.sm-box:not(.padded)>h2{padding:12px var(--phh) 6px var(--phh)}
.sm-box.padded>h1,.sm-box.padded>h2{padding:4px 0 12px}
.sm-box>h3{padding:0 0 10px}
.sm-box.no-margin{margin:0}
.sm-box.no-margin+.no-margin{border-top:0}
.sm-box>.description{margin:0 0 12px;padding:0 var(--phh)}
.sm-box.notice{font-size:1.08rem;line-height:1.4;padding:var(--pv) var(--phh)}
.sm-box.notice-info{background:var(--sp-notice-info-bg)}
.sm-box.notice-warning{background:var(--sp-notice-warning-bg);color:var(--sp-notice-warning-text)}
.sm-box.notice-success{background:var(--sp-notice-success-bg);color:var(--sp-notice-success-text)}
.sm-box.notice-error,.sm-box.notice-danger{background:var(--sp-notice-error-bg);color:var(--sp-notice-error-text)}
.sm-box.notice-palegoldenrod{background:var(--sp-notice-gold-bg);color:var(--sp-notice-gold-text)}
*>.sm-box:first-child{margin-top:0}
*>.sm-box:last-child{margin-bottom:0}
.sm-box-header{display:flex;align-items:center;gap:.5714rem;padding:var(--pv) var(--phh)}
.sm-box-header+.sm-box,.sm-box+.sm-box{margin-top:0}
.padded>.sm-box-header{padding:0 0 var(--pv) 0}
.collapse>.sm-box-header{cursor:pointer}
.collapse>.sm-box-header:after{display:block;font-weight:700;content:"\2212";font-size:24px;height:24px;margin:0 0 0 4px;line-height:24px}
.collapse.closed>.sm-box-header:after{content:"+"}
.sm-box.collapse.closed>*:not(.sm-box-header){display:none}
.sm-box-title{flex:1;min-width:0}
.sm-box-actions{font-size:.9286rem;text-align:right;display:flex;align-items:center;gap:8px}
.sm-box-header h2,.sm-box>h3{font-size:1.2858rem;font-weight:500;line-height:1.3333}
.sm-box-header small{display:block;font-size:.8572rem;line-height:1.3333;margin-top:2px;color:#777}
.size-s .sm-box-header h2{font-size:1.0001rem}
.size-sm .sm-box-header h2{font-size:1.1429rem}
.sm-box.no-bg{background:transparent;border:0;box-shadow:none}
@media (max-width:750px){
  .sm-box{width:100%}
  .sm-box.notice{border-width:0}
  .sm-box.inside{width:auto;border-radius:var(--sp-radius);margin:0 var(--phh);border-width:1px;box-shadow:var(--sp-shadow-card)}
}
@media (min-width:750px){
  .sm-box{border-width:1px;border-radius:var(--sp-radius);box-shadow:var(--sp-shadow-card)}
  .sm-box-group{display:grid;grid-auto-flow:column;grid-gap:var(--phh)}
  .sm-box-group .sm-box{margin:0}
}
.sm-box-item{position:relative;border-top:1px solid var(--color-border);padding:.8572rem var(--ph);font-size:1.0429rem}
.sm-box-item:first-child{border-top:none}
.sm-box-item.type-sub-heading{background:var(--sp-subheading-bg);border:none;padding:.2857rem var(--ph);font-size:1.1429rem;font-weight:700}
.sm-box-item.type-app-link{font-weight:700;cursor:pointer}
.sm-box-item.type-app-link:hover{background:whitesmoke}
.sm-box-item.type-app-link:after{content:"";background:var(--icon-chevron-right) no-repeat center/contain;position:absolute;right:12px;top:0;bottom:0;width:20px}

/* ==========================================================================
   7. 产品卡 .sm-product
   ========================================================================== */
.sm-products{--per-row:3;--img-height:calc(250px / 3);display:grid;grid-template-columns:repeat(var(--per-row),1fr)}
.sm-products.img-long{--img-height:calc(532px / var(--per-row))}
.sm-products.scroll{--per-row:3.5;grid-auto-flow:column;grid-auto-columns:calc(100% / 3.5);grid-template-columns:none;overflow-x:auto}
.sm-products.per-row-5{--per-row:5}
@media (min-width:750px){
  .sm-products{--per-row:4;--img-height:calc(600px / var(--per-row))}
  /* 原站只在 >=750px 且 .grid 时才做 5 列（index.css） */
  .sm-products.grid.len-5{--per-row:5}
  .sm-products.img-long{--img-height:min(calc(900px / var(--per-row)),200px)}
  .sm-products.scroll{--per-row:4.5;grid-auto-columns:calc(100% / 4.5)}
}
.sm-product{
  display:grid;
  grid-template:"img img" var(--img-height) "name name" 1fr "price menu" auto "drop drop" auto "rating rating" auto "actions actions" auto / 1fr 17px;
  grid-gap:0;align-items:center;flex:0 0 var(--item-width);font-size:.8572rem;padding:0 8px;position:relative;cursor:pointer;contain:content;
}
.grid .sm-product{border-top:1px solid var(--color-border);border-right:1px solid var(--color-border);padding:8px 10px}
.sm-product>.sm-img-wrap{grid-area:img;padding:0 4px;justify-self:center;width:100%;height:var(--img-height);object-fit:scale-down}
.sm-product:hover>.sm-img-wrap{transform:scale(var(--sp-hover-scale))}
.sm-product>.name{grid-area:name;color:var(--color-text);margin:.6429rem 0 1px;font-size:.9286rem}
.sm-product>.name:hover{color:var(--sp-name-hover)}
.sm-product>.name>h2,.sm-product>.name>h3{font-size:inherit;font-weight:inherit}
.sm-product>.price{grid-area:price;display:block;font-size:1.0358rem;font-weight:500;color:var(--color-price);margin-top:2px}
/* 降价提示 .sm-pdrop（原站 index.css；US 站默认隐藏，见 utilities/home 覆盖） */
.sm-product>.sm-pdrop{grid-area:drop;display:block;font-size:.7143rem;margin-top:3px;text-align:left}
.sm-pdrop{color:var(--sp-pdrop-green,green)}
.sm-pdrop:before{content:"\25bc";margin-right:.2em}
.sm-pdrop.red{color:var(--color-drop-red)}
.sm-pdrop.red:before{content:"\25b2"}
.grid.per-compare .sm-product>.sm-pdrop{margin-left:6px}
.sm-product>.rating{grid-area:rating;display:flex;align-items:center;margin-top:3px}
.sm-product>.rating>.count{font-size:.7857rem;color:var(--color-text-light);margin-left:6px}
.sm-product>.tags{grid-area:tags;justify-self:start;display:flex;align-items:stretch;white-space:nowrap;flex-flow:wrap;margin-top:4px;font-size:13px}
.sm-product>.tags>div{padding:2px 8px;background:var(--color-rank2);border-radius:var(--sp-radius-sm);color:#fff;line-height:1.4287rem;margin:4px 4px 0 0;display:flex;align-items:center;font-size:13px}
.sm-product>.tags>div.val{background:var(--sp-tag-val)}
.sm-product>.tags>div>b{font-size:1.3572rem}
.sm-product>.tags>div>small{font-size:13px;opacity:.9;margin-left:6px}
.sm-product>.tag{position:absolute;top:0;left:0;margin:0;padding:2px 8px;background:var(--sp-tag-amber);border-radius:0 0 var(--sp-radius-sm);color:#fff;font-weight:700;line-height:1.4287rem;justify-self:start;display:flex;align-items:center;z-index:1}
.sm-product.oos>.tag{background:var(--sp-tag-oos)}
.sm-product>.icon{grid-area:menu;background:transparent;opacity:.3;padding:6px 3px 6px 6px;margin:-4px -3px -6px 0;color:#000;--s:17px!important;overflow:hidden;cursor:pointer}
.sm-product>.icon:hover{opacity:1}
.sm-product.oos{filter:grayscale(1);opacity:.75;background:#f3f3f3}
.sm-product-actions{grid-area:actions;display:flex;flex-direction:column;margin-top:8px}
.sm-product-actions .icon{--s:20px}
.sm-product-actions>*{display:flex;align-items:center;box-sizing:border-box;max-width:110px;padding:8px;cursor:pointer}
.sm-product-actions>button:hover,.sm-product-actions>a:not(.sm-btn):hover{background:var(--sp-actions-bg-hover);color:var(--sp-actions-text-hover);border-radius:var(--sp-radius)}
.sm-product.oos .sm-product-actions{background:var(--sp-actions-oos-bg)}
.grid .has-actions.sm-product .sm-product-actions,
.scroll .has-actions.sm-product .sm-product-actions{flex-direction:row;justify-content:center;justify-self:start;background:var(--sp-actions-bg);border-radius:var(--sp-radius);margin:6px 0 0}
.grid .has-actions.sm-product .sm-product-actions>:not(:first-child),
.scroll .has-actions.sm-product .sm-product-actions>:not(:first-child){display:none}
.grid .has-actions.sm-product .sm-product-actions>*,
.scroll .has-actions.sm-product .sm-product-actions>*{padding:5px 8px}
.grid .has-actions.sm-product .rating+.sm-product-actions,
.scroll .has-actions.sm-product .rating+.sm-product-actions{margin-top:9px}
.sm-product-actions small{display:inline-block;margin-left:4px;font-size:.9072rem;color:var(--color-text-light)}
@media (max-width:749.98px){
  .scroll .has-actions.sm-product .sm-product-actions>*{padding:6px}
  .scroll .has-actions.sm-product .sm-product-actions .icon,
  .scroll .has-actions.sm-product .sm-product-actions svg{--s:16px;width:16px;height:16px}
}
@media (min-width:750px){
  .grid .sm-product{padding:10px 16px}
  .sm-product-actions{flex-direction:row;align-items:center;background:var(--sp-actions-bg);border-radius:var(--sp-radius);margin:12px 0 4px}
  .sm-product-actions>*{padding:10px 16px;max-width:140px}
}
/* list 变体（原站 index.css：drop / tags 都是具名区域） */
.list .sm-product{grid-template:"img name name name" auto "img price drop drop" auto "img rating rating tags" auto "img actions actions actions" 1fr / 130px auto auto 1fr;grid-gap:0 12px;padding:8px var(--ph);align-items:start;border-top:1px solid var(--color-border)}
.list .sm-product>.sm-img-wrap{height:100%;grid-area:img}
.list .sm-product>.name{font-size:1.0286rem;font-weight:500;margin:0}
.list .sm-product>.price{font-size:1.2858rem;margin-top:5px;align-self:center}
.list .sm-product>.sm-pdrop{margin:5px 0 0 -4px;align-self:center;font-size:.8143rem}
.list .sm-product>.tags,.list .sm-product>.rating{margin:0!important;align-self:center}
.list .sm-product>.rating{margin-top:4px}
.list .sm-product>.icon{position:absolute;bottom:3px;right:6px}
.list .sm-product .sm-rating{--size:1.1429rem}
.list .sm-product.has-features{padding:14px 20px;grid-gap:0 22px;--img-width:var(--sp-product-list-img)}
.list .sm-product.has-features>.name{font-size:1.1715rem}
.list .sm-product.has-features>.price{font-size:1.4287rem}
.list .sm-product.has-features>.sm-pdrop{font-size:.8858rem}
@media (min-width:960px){.list.img-wide .sm-product.has-features{--img-width:var(--sp-product-list-img-wide)}}

/* size 变体（原站 index.css 紧跟 list 变体，同特异性靠源序生效） */
.size-s .sm-product{grid-template-columns:60px auto auto 1fr}
.size-xs .sm-product{grid-template-columns:40px auto auto 1fr;padding:6px 8px}
.size-s .sm-product>.name{font-size:.9572rem;font-weight:400}
.size-xs .sm-product>.name{font-size:.8572rem;font-weight:400}
.size-s.list .sm-product>.price{font-size:1.0715rem;margin-top:3px}
.size-xs.list .sm-product>.price{font-size:.9572rem}
.size-xs .sm-product>.price{font-size:.8572rem;margin-top:3px}
.size-s .sm-product>.sm-pdrop,.size-xs .sm-product>.sm-pdrop{margin-top:3px}
.size-s .sm-product-actions{flex-direction:row;justify-content:space-between}
.size-m.list .sm-product>.sm-img-wrap{min-height:120px}

/* 图片包装 */
.sm-img{max-width:100%;max-height:100%;font-size:0;object-fit:contain}
.sm-img:not([src]){visibility:hidden}
.sm-img.cover{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.sm-img-wrap{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:100%}
.sm-img-wrap>img{display:block;position:absolute}

/* ==========================================================================
   8. 特性列表 / 折叠描述 / 链接列表
   ========================================================================== */
.sm-feat{--icon:var(--icon-check);font-size:.8572rem;color:var(--color-text-light)}
.sm-feat>li{display:flex;align-items:center;break-inside:avoid;overflow:hidden}
.sm-feat>li:not(:first-child){margin-top:5px}
.sm-feat>li.s-no{--icon:var(--icon-close-circle);color:var(--color-danger)}
.sm-feat>li:before{content:"";background:var(--icon) no-repeat center/contain;margin-right:6px;opacity:.7;flex:0 0 13px;height:13px}
@media (min-width:940px){.sm-feat{columns:2}}

.sm-desc{position:relative;padding:0 var(--ph);margin-bottom:12px;font-size:13px}
.sm-desc>div{max-height:6em;color:var(--color-text-light);overflow:hidden;font-size:13px}
.sm-desc>span{display:block;position:absolute;right:12px;bottom:0;background:var(--sp-desc-fade);width:160px;text-align:right;color:var(--color-link);cursor:pointer}
.sm-desc.open>div,.sm-ldesc.open>div,.sm-show-more.open>div{max-height:none}
.sm-desc.open>span,.sm-ldesc.open>span,.sm-show-more.open>span{display:none}
.sm-show-more{--h:604px;position:relative}
.sm-show-more>div{max-height:var(--h);overflow:hidden}
.sm-show-more>span{position:absolute;left:0;right:0;bottom:0;height:100px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 70%);cursor:pointer}
.sm-show-more>span>b{display:inline-block;padding:8px 24px;border-radius:var(--sp-radius-showmore);background:#fff;color:var(--color-link);box-shadow:var(--sp-shadow-card);border:1px solid var(--color-border)}

.sm-links{margin:-2px var(--ph) 7px calc(var(--ph) - 3px)}
.sm-links>a{display:flex;align-items:center;font-size:14px;line-height:1.5;padding:4px 0 3px;margin-bottom:1px}
.sm-links>a:before{content:"\2022";position:relative;font-size:26px;line-height:24px;color:var(--sp-links-bullet);padding-right:8px}
.sm-links.no-dot{margin-left:var(--ph)}
.sm-links.no-dot>a{display:block}
.sm-links.no-dot>a:before{content:none}
.sm-block-links{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:row;gap:6px;padding:0 var(--ph) 10px var(--ph)}
.sm-block-links>a{display:flex;flex-direction:column;padding:6px 10px;border:1px solid var(--sp-block-link-border);border-radius:var(--sp-radius-sm);box-shadow:1px 1px 2px #0000001a;background:rgba(255,255,255,.6)}
.sm-block-links>a strong{font-size:1.07em}
.sm-block-links>a:hover{box-shadow:2px 2px 3px #0003;border-color:var(--color-link)}
@media (min-width:750px){.sm-block-links{grid-template-columns:repeat(6,1fr)}}

/* ==========================================================================
   9. 下拉菜单 / Tabs / Load more / 页面操作行
   ========================================================================== */
.sm-dropdown{--top:50px;position:relative;display:flex;align-items:center;cursor:pointer}
.sm-dropdown>.d{--s:14px;opacity:.7;transition:all var(--sp-dur-fast) ease-out}
.sm-dropdown.visible>.d{transform:rotate(180deg)}
.sm-dropdown>.icon:first-child{margin-right:6px}
.sm-menu-wrap{position:absolute;top:var(--top);right:0;z-index:var(--z-menu);transition:opacity var(--sp-dur) ease-out}
.sm-menu-wrap[hidden]{display:none}
.sm-menu{--img-size:24px;display:grid;background:#fff;padding:8px 0;border-radius:var(--sp-radius-sm);box-shadow:var(--sp-shadow-menu);min-width:200px}
.sm-menu>a{display:flex;align-items:center;min-height:44px;padding:0 16px;font-size:15px;color:var(--color-text)}
.sm-menu>a:hover{background:var(--sp-menu-hover);color:var(--color-text)}
.sm-menu>a>.icon{margin:0 8px 0 -3px;color:var(--color-text-extra-light)}
.sm-menu>a>.count{font-size:.8572rem;margin:0 -4px 0 16px;padding:1px 7px;background:var(--sp-menu-count-bg);border-radius:var(--sp-radius);color:var(--color-text-light)}
.sm-menu .sep{border-top:1px solid var(--sp-menu-sep);margin:8px 0}
.sm-menu-column>.title{padding:9px 16px;font-size:16px;background:var(--sp-menu-column-title-bg)}

.sm-tabs{display:flex;flex-direction:column;height:100%}
.sm-tabs-content{padding:0;flex:1;overflow:auto}
.sm-tabs-head{display:flex;align-items:center;text-transform:uppercase;font-size:1.0715rem;font-weight:700;color:var(--sp-tabs-text);background:var(--sp-tabs-bg);overflow-x:auto}
.sm-tabs-head::-webkit-scrollbar{display:none}
.sm-tabs-head>div{position:relative;padding:12px 16px;transition:color var(--sp-dur) ease;cursor:pointer;white-space:nowrap}
.sm-tabs-head>div:hover{color:var(--sp-tabs-hover)}
.sm-tabs-head>div:after{content:"";position:absolute;left:0;bottom:0;height:3px;opacity:0;transform:scaleX(0);transition:all var(--sp-dur) ease;width:100%;background:var(--sp-tabs-active)}
.sm-tabs-head>div.active{color:var(--sp-tabs-active)}
.sm-tabs-head>div.active:after{opacity:1;transform:scaleX(1)}

.sm-load-more{display:flex;justify-content:center;align-items:center;font-size:1.2858rem;background:var(--sp-load-more-bg);height:3.3575rem;flex:0 0 3.3575rem;border:1px solid var(--sp-load-more-border);border-width:1px 0 0 0;color:var(--color-link);font-weight:700;cursor:pointer;width:100%}
.sm-load-more:hover{color:var(--color-link-hover)}

.sm-page-actions{background:var(--sp-page-actions-bg-mobile)}
h1+.sm-page-actions{margin-top:6px}
.sm-page-actions>ul{display:grid;grid-auto-flow:column;justify-content:space-between;padding:0 10px}
.sm-page-actions li{flex:0;display:flex;align-items:center;justify-content:center;padding:12px 0;font-size:15px;line-height:20px;color:var(--sp-page-actions-text);cursor:pointer}
.sm-page-actions li>span{margin-left:4px}
.sm-page-actions li:hover{color:var(--color-link)}
@media (min-width:750px){
  .sm-page-actions{border-radius:0 0 var(--sp-radius) var(--sp-radius);padding:0 12px;background:var(--sp-page-actions-bg)}
  .sm-page-actions>ul{justify-content:end;grid-gap:50px}
}

/* ==========================================================================
   10. 面包屑 / 分页（原站无组件，按站点视觉语言补充）
   ========================================================================== */
.sm-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:8px var(--ph);font-size:.8572rem;color:var(--color-text-light);background:var(--bg-section)}
.sm-breadcrumb>li{display:flex;align-items:center}
.sm-breadcrumb>li+li:before{content:"";display:inline-block;width:14px;height:14px;margin:0 2px;background:var(--icon-chevron-right) no-repeat center/contain;opacity:.55}
.sm-breadcrumb a{color:var(--color-link)}
.sm-breadcrumb a:hover{color:var(--color-link-hover)}
.sm-breadcrumb>li[aria-current],.sm-breadcrumb>li.current{color:var(--color-text-light)}

.sm-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:var(--pv) var(--ph);background:var(--sp-load-more-bg);border-top:1px solid var(--sp-load-more-border)}
.sm-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid var(--sp-block-link-border);border-radius:var(--sp-radius-sm);background:#fff;color:var(--color-link);font-size:.9286rem;font-weight:500}
.sm-pagination .page-numbers:hover{border-color:var(--color-link);color:var(--color-link-hover)}
.sm-pagination .page-numbers.current{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.sm-pagination .page-numbers.dots{border:0;background:transparent;color:var(--color-text-light)}

/* ==========================================================================
   11. 表格：规格表 / 对比表
   ========================================================================== */
.sm-fullspecs-grp{background:var(--bg-section);break-inside:avoid}
.sm-fullspecs-grp>.title{font-size:14px;text-transform:uppercase;background:var(--sp-specs-group-title-bg);padding:3px var(--ph)}
.sm-fullspecs-grp td{font-size:13px;padding:4px var(--ph) 4px 6px;border-bottom:1px solid var(--sp-specs-group-title-bg);word-break:break-word}
.sm-fullspecs-grp td .icon{top:2px;margin-right:3px}
.sm-fullspecs-grp td.title{padding-left:var(--ph);padding-right:6px;font-weight:700;color:var(--sp-specs-key);width:var(--sp-specs-key-w)}
.sm-fullspecs-grp tr:last-child td{border-bottom:0}
@media (min-width:750px){.sm-fullspecs.two-column{columns:2;background:var(--sp-specs-group-title-bg);gap:0 4px}}

.sm-comp-table{width:100%;display:table;background:var(--bg-section)}
.sm-comp-table td{padding:8px 10px;border-right:1px solid var(--color-border);font-size:13px;line-height:1.4;white-space:pre-wrap;vertical-align:middle}
.sm-comp-table td.heading{font-weight:700;background:var(--sp-cmp-heading);border-right:3px solid var(--sp-cmp-line);text-align:right}
.sm-comp-table tr{border-bottom:1px solid var(--sp-cmp-line)}
.sm-comp-table .specsScore span{display:inline-block;padding:6px 10px;background:var(--sp-cmp-score-bg);border-radius:var(--sp-radius);color:#fff;font-weight:700;font-size:15px}
@media (min-width:750px){
  .sm-comp-table td{background:var(--sp-cmp-cell);font-size:14px}
  .sm-comp-table td:nth-child(2n+3){background:var(--sp-cmp-cell-alt)}
  .sm-comp-table td.heading{background:var(--sp-cmp-heading)}
  .sm-comp-table td.winner{background:var(--sp-cmp-winner)!important}
}

/* ==========================================================================
   12. 计数条 / Toast / 遮罩 / 抽屉 / 弹层
   ========================================================================== */
.sm-cnt-bar{display:table;font-size:12px;color:#777;width:100%}
.sm-cnt-bar>.text{display:table-cell;text-align:right;vertical-align:middle}
.sm-cnt-bar>.bar{display:table-cell;width:100%}
.sm-cnt-bar>.bar>div{background:var(--bg-light-blue);height:9px;margin:6px 6px 6px 12px;border-radius:var(--sp-radius-sm)}
.sm-cnt-bar>.bar>div>div{height:9px;min-width:3%;border-radius:var(--sp-radius-sm)}
.sm-cnt-bar>.count{display:table-cell;vertical-align:middle;font-weight:700;white-space:nowrap}
.sm-cnt-bar-group{display:table;width:100%}
.sm-cnt-bar-group .sm-cnt-bar{display:table-row}
@media (min-width:750px){.sm-cnt-bar{font-size:15px}.sm-cnt-bar>.bar>div{height:14px;margin:7px 12px}.sm-cnt-bar>.bar>div>div{height:14px}}

.sm-toast{color:#fff;background:var(--sp-toast-bg);font-size:14px;position:fixed;z-index:var(--z-toast);left:8px;right:8px;bottom:8px;border-radius:var(--sp-radius);min-height:48px;padding:8px 16px;display:flex;align-items:center;box-shadow:var(--sp-shadow-toast);transition:opacity var(--sp-dur) var(--sp-ease-out)}
.sm-toast.error{background:var(--sp-toast-error)}
.sm-toast[hidden]{display:none}
@media (min-width:750px){.sm-toast{top:110px;width:420px;font-size:16px;bottom:auto;left:auto;right:16px}}

.sm-overlay{position:fixed;inset:0;background:var(--sp-overlay);opacity:.4;z-index:var(--z-overlay);transition:opacity 2s var(--sp-ease-out)}
.sm-overlay[hidden]{display:none}
.sm-drawer{position:fixed;top:0;bottom:0;left:0;width:75%;max-width:360px;min-width:260px;background:#fff;transform:translate3d(-100%,0,0);z-index:var(--z-drawer);box-shadow:var(--sp-shadow-drawer);transition:transform var(--sp-dur) var(--sp-ease-out);display:flex;flex-direction:column}
.sm-drawer.open{transform:translate3d(0,0,0)}
.sm-drawer>.content{flex:1;overflow:auto;background:var(--sp-drawer-content-bg)}
.drawer-heading{background:var(--color-primary);color:#fff;padding:12px var(--ph);font-size:18px;font-weight:700}
@media (min-width:750px){.drawer-heading{font-size:20px}}
.sm-bottom-popup{position:fixed;left:0;right:0;bottom:0;background:var(--sp-popup-bg);max-height:90%;z-index:var(--z-popup);transition:transform var(--sp-dur) ease-out;box-shadow:var(--sp-shadow-popup);display:flex;flex-direction:column}
.sm-popup-head{background:var(--sp-popup-head);color:#fff;display:flex;align-items:center}
.sm-popup-head .title{font-size:16px;padding:0 12px}
.sm-popup-foot{background:var(--sp-popup-foot);padding:var(--pv) var(--ph)}
@media (min-width:750px){
  .sm-bottom-popup{left:50%;right:auto;transform:translateX(-50%);max-width:620px;width:100%;border-radius:var(--sp-radius-popup)}
  .sm-bottom-popup.wide{max-width:710px}
  .sm-popup-head{border-radius:var(--sp-radius-popup-head)}
}

/* ==========================================================================
   13. 广告位占位 sm-dap（复刻为可配置占位块，不接真实广告）
   ========================================================================== */
sm-dap{--bg:initial;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:var(--mv) 0;position:relative;height:calc(1px * var(--h));box-sizing:content-box;background:var(--bg,transparent);max-width:100%}
sm-dap:first-child{margin-top:0}
sm-dap:last-child{margin-bottom:0}
sm-dap>div{position:relative;display:flex;align-items:center;justify-content:center;background:var(--bg,var(--sp-ad-bg));--aw:calc(1px * var(--w));width:var(--aw,100%);max-width:100%;height:calc(1px * var(--h));color:var(--sp-ad-text);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border:1px dashed var(--sp-ad-border)}
sm-dap:not(.s)>div,sm-dap:not(.s) img{border-radius:var(--sp-radius)}
@media (max-width:750px){
  sm-dap.p-d{display:none!important}
  sm-dap.s{width:100vw;height:calc(100vw * var(--h) / var(--w))}
  sm-dap.s>div{transform:scale(calc(var(--window-width) / var(--w)))}
}
@media (min-width:750px){
  sm-dap.p-m{display:none!important}
  #app>sm-dap{width:calc(100% - 20px);max-width:calc(var(--main-width) - 20px);align-self:center}
}

/* ==========================================================================
   14. Loading
   ========================================================================== */
#app>.loading{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-loading);pointer-events:none}
#app>.loading>div{width:46px;min-height:46px;background:#fff;border-radius:var(--sp-radius-circle);box-shadow:0 0 6px 2px #0006;margin-top:54px}

/* ==========================================================================
   15. Discuss / 评论线程 .sm-discuss / .sm-thread / .sm-comment
   原站 index.css 全文。频道页、详情页、对比页共用，各页 CSS 不要再重复定义。
   ========================================================================== */
.sm-discuss:not(.empty){margin-bottom:18px}
.sm-discuss-head{margin-bottom:8px}
.sm-discuss-empty-text{padding:6px var(--ph) 10px var(--ph);color:var(--color-text-light);font-size:14px}
.sm-discuss .sm-input>textarea{max-height:120px}

.sm-thread{padding:9px var(--ph);contain:content}
.sm-thread.highlight{background:var(--sp-thread-highlight,#fafad2);padding-top:9px}
.sm-thread.comment:last-child{margin-bottom:8px;padding-bottom:0}
.sm-thread.comment+.sm-box-item{margin-top:8px}
.sm-thread.review{border-top:1px solid var(--sp-thread-line,#e5e5e5)}
.sm-thread.review>.sm-thread-replies{margin-top:15px}
.sm-thread-replies{border-left:3px solid var(--sp-thread-line,#e5e5e5);margin:18px 0 0 6px}
.sm-thread-replies>.sm-thread{padding-right:0}
.sm-thread-replies>.sm-thread:first-child{padding-top:0}
.sm-thread-more{font-size:1.0001rem;padding:8px 0 0 12px;color:var(--color-link);cursor:pointer}
.sm-thread-more:first-child{padding-top:0}

.sm-comment{
  display:grid;
  grid-template:"avatar name date" min-content "avatar points date" min-content "content content content" 1fr "actions actions actions" min-content / auto min-content 1fr;
  grid-gap:2px 12px;font-size:.8929rem;contain:content;padding:3px 0;
}
.sm-comment.type-review{grid-template:"avatar name date" min-content "avatar points rating" min-content "h3 h3 h3" min-content "content content content" 1fr "imgs imgs imgs" min-content "link link link" min-content "actions actions actions" min-content / auto min-content 1fr}
.sm-comment.type-comment{padding:0}
.sm-comment .u-wrap{display:contents;cursor:pointer}
.sm-comment .avatar{grid-area:avatar;width:40px;height:40px;border-radius:var(--sp-radius-sm);object-fit:cover}
.sm-comment .name{grid-area:name;font-weight:700;color:#666;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.sm-comment .points{grid-area:points;color:#888;white-space:nowrap}
.sm-comment .date{grid-area:date;justify-self:end;color:#888;white-space:nowrap}
.sm-comment .rating{grid-area:rating;--size:16px;justify-self:end}
.sm-comment>h3{grid-area:h3;color:#333;font-size:1.1715rem;margin:6px 0 2px;line-height:24px}
.sm-comment>.content{grid-area:content;color:var(--color-text-slight-light);white-space:pre-wrap;word-break:break-word;margin-top:8px;font-size:1.0001rem}
.sm-comment>h3+.content{margin-top:0}
.sm-comment>.images{grid-area:imgs;display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));grid-gap:6px;margin:8px 0 2px}
.sm-comment>.images>img{height:48px;width:100%;object-fit:cover;border-radius:var(--sp-radius-sm)}
.sm-comment>.link{grid-area:link;margin-top:4px;font-size:.9286rem}
.sm-comment .actions{grid-area:actions;display:flex;justify-content:space-between;align-items:center;font-size:.8572rem;margin-top:8px;color:#89a;margin-bottom:-4px}
.sm-comment .actions>div{display:flex;align-items:center}
.sm-comment .actions>div:first-child>div{display:flex;align-items:center}
.sm-comment .actions>div:first-child>div:first-child:hover{color:var(--color-success)}
.sm-comment .actions>div:first-child>div:last-child:hover{color:var(--color-danger)}
.sm-comment .actions .icon+span{margin-left:4px}
.sm-comment .actions .btn{padding:8px;margin:-8px;cursor:pointer;display:flex;align-items:center}
.sm-comment .actions .btn.reply:hover{color:var(--color-link)}
.sm-comment>.content+.actions{margin-top:4px}
.sm-comment>.reply-wrap{margin:12px 0 -4px 12px;grid-area:5 / 1 / 5 / 4}
.sm-comment.type-review>.reply-wrap{grid-area:8 / 1 / 8 / 4}
@media (min-width:750px){
  .sm-thread{padding:12px var(--ph)}
  .sm-thread-replies{margin:22px 0 0 37px}
  @supports (display:contents){
    .sm-comment{grid-template:"avatar name points date" min-content "avatar content content content" 1fr "avatar actions actions actions" min-content / auto min-content min-content 1fr;grid-gap:2px 14px}
    .sm-comment.type-review{grid-template:"avatar name points date" min-content "avatar rating rating rating" min-content "h3 h3 h3 h3" 1fr "content content content content" min-content "imgs imgs imgs imgs" min-content "link link link link" min-content "actions actions actions actions" min-content / auto min-content 1fr min-content}
  }
  .sm-comment>.content{margin-top:4px}
  .sm-comment .actions{justify-content:flex-start}
  .sm-comment .actions>*+*{margin-left:24px!important}
  .sm-comment .avatar{width:50px;height:50px}
  .sm-comment .rating{justify-self:start;--size:20px}
  .sm-comment>.reply-wrap{grid-area:4 / 2 / 4 / 5}
  .sm-comment.type-review>.reply-wrap{grid-area:8 / 1 / 8 / 5}
}

/* ==========================================================================
   16. 对比推荐条 .sm-comp-with（原站 index.css；首页 / 详情页 / 对比页共用）
   ========================================================================== */
.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),.sm-comp-with>a>span:nth-child(1){grid-area:img1;max-width:36px;max-height:36px;justify-self:center}
.sm-comp-with>a>img:nth-child(2),.sm-comp-with>a>span: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:#708090;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)}

/* ==========================================================================
   17. 图标栏 .sm-cats（原站 index.css；抽屉 / 首页 / 频道页共用）
   ========================================================================== */
.sm-cats{--per-row:5;display:grid;grid-template-columns:repeat(var(--per-row),1fr);grid-gap:8px 0;width:100%;padding:8px 4px}
.sm-cats.scrl{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(91% / var(--per-row));overflow:auto}
.sm-cats>a{box-sizing:border-box;padding:0 4px;text-align:center;font-size:.9286rem;overflow:hidden;color:var(--color-text);width:100%;max-width:var(--sp-cats-item-max-w,124px);display:flex;flex-direction:column;contain:content}
.sm-cats>a>span{display:block;padding:2px;position:relative}
.sm-cats>a img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;max-width:100%;max-height:none;box-sizing:border-box;border-radius:var(--sp-radius);transition:transform var(--sp-dur) var(--sp-ease-out)}
.sm-cats>a>b{display:block;overflow:hidden;text-overflow:ellipsis;margin-top:4px;font-weight:400}
.sm-cats>a:hover{color:var(--color-text);text-shadow:-.05ex 0 currentColor,.05ex 0 currentColor}
.sm-cats>a:hover img{transform:scale(var(--sp-hover-scale-cat))}
.sm-cats>a.hl>span>:not(.sm-cats-badge){box-shadow:0 0 1px 1px var(--color-primary)}
.sm-cats>a.hl>b{color:var(--color-primary);font-weight:600}
.sm-cats.icon-s{grid-gap:16px 0}
.sm-cats.icon-s>a>span{padding:4px 16px}
.sm-cats.round>a img{border-radius:50%}
.sm-box-header+.sm-cats{padding-top:2px}
/* 无 logo 的回退图标（本主题新增） */
.sm-cats .sp-cat-icon{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:var(--sp-radius);background:var(--bg-light-blue);color:var(--color-primary)}
.sm-cats-letter{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:50%;background:var(--bg-light-blue);color:var(--color-link);font-style:normal;font-weight:700;font-size:1.4rem}
@media (min-width:750px){
  .sm-cats{--per-row:10}
  .sm-cats>a{font-size:1.0358rem}
  .sm-cats>a>span{padding:8px}
  .sm-cats.icon-s>a>span{padding:6px 14px}
  .aside-320 .sm-cats>a{font-size:.9286rem}
  .aside-320 .sm-cats>a>span{padding:5px}
  aside:not(#_) .sm-cats>a{font-size:13px}
  aside:not(#_) .sm-cats>a>span{padding:2px}
}

/* ==========================================================================
   18. 轮播 .sm-swiper（原站 index.css；首页 banner 与详情页图库共用）
   ========================================================================== */
.sm-swiper-wrapper{position:relative;height:50vw;display:flex;flex-direction:column}
.sm-swiper{display:flex;width:100%;flex:1;scroll-snap-type:x mandatory;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.sm-swiper::-webkit-scrollbar{display:none}
.sm-swiper>*{display:flex;justify-content:center;align-items:center;position:relative;flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always}
.sm-swiper img{max-width:100%;max-height:100%;object-fit:contain}
.sm-swiper sm-dap{margin:0}
.sm-swiper-indicators{position:absolute;bottom:.2857rem;left:0;width:100%;z-index:1;text-align:right;padding:0 .4286rem;box-sizing:border-box}
.sm-swiper-indicators>ul{background:rgba(0,0,0,.2);padding:.2143rem .4286rem;border-radius:.4286rem;display:inline-grid;grid-gap:.2143rem;grid-auto-flow:column}
.sm-swiper-indicators>ul>li{display:inline-block;width:.5rem;height:.5rem;background:#555;border-radius:50%}
.sm-swiper-indicators>ul>li.on{background:#fff}
@media (min-width:750px){
  .sm-swiper-indicators{display:none}
  .sm-swiper img{border-radius:var(--sp-radius)}
}

/* ==========================================================================
   19. 横滚箭头 .sm-slider-arrow（原站 index.css）
   ========================================================================== */
.sm-slider-arrow{--size:32px;z-index:3}
.sm-slider-arrow>div{
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px #0000001c;
  width:var(--size);height:calc(var(--size) * 2);position:absolute;top:calc(50% - var(--size));
  right:0;background:rgba(255,255,255,.7);-webkit-user-select:none;user-select:none;cursor:pointer;
  border-radius:var(--sp-radius) 0 0 var(--sp-radius);
}
.sm-slider-arrow>div:after{content:"";width:var(--size);height:var(--size);background:var(--icon-chevron-right) no-repeat center/var(--size)}
.sm-slider-arrow>div:first-child{border-radius:0 var(--sp-radius) var(--sp-radius) 0;right:auto;left:0}
.sm-slider-arrow>div:first-child:after{background:var(--icon-chevron-left) no-repeat center/var(--size)}
.sm-slider-arrow>div[hidden]{display:none}
@media (max-width:749.98px){.sm-slider-arrow{display:none}}

/* ==========================================================================
   20. 文章卡 .sm-articles / .sm-article（原站 index.css）
   ========================================================================== */
.sm-articles{display:grid;grid-gap:8px}
.sm-box .sm-articles{padding:0 var(--ph) 10px var(--ph)}
.sm-articles.scroll{grid-auto-columns:min(66.6667%,290px);grid-auto-flow:column;grid-template-columns:none;grid-gap:8px;padding:0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.sm-articles.scroll.len-1{grid-auto-columns:100%}
.sm-articles.scroll .sm-article{margin:0}
.sm-articles.scroll::-webkit-scrollbar{display:none}
.sm-box>.sm-articles.scroll{padding-bottom:.5714rem}
.sm-box>.sm-articles.scroll:first-child{padding-top:.5714rem}
@media (min-width:750px){
  .sm-articles.scroll{--per-row:3;grid-auto-flow:row;grid-template-columns:repeat(var(--per-row),1fr);padding:0 var(--ph)}
  .sm-articles.scroll.len-4,.sm-articles.scroll.len-8{--per-row:4}
}

.sm-article{--img-w:108px;position:relative;display:grid;grid-gap:2px 14px;grid-template:"image title" min-content "image info" min-content "image desc" min-content "image tags" 1fr / var(--img-w) 1fr;margin-top:16px;cursor:pointer;font-size:13px;line-height:1.5;contain:content}
.sm-article:first-child{margin-top:0!important}
.sm-article>img{grid-area:image;border-radius:var(--sp-radius);height:81px;object-fit:cover;width:100%;transition:transform var(--sp-dur) var(--sp-ease-out)}
.sm-article>a{grid-area:title;font-size:15px;font-weight:700;color:#444}
.sm-article>p{grid-area:desc;color:#777}
.sm-article>.info{grid-area:info;color:#777;margin:4px 0}
.sm-article>.info a{color:#444}
.sm-article>.info a:hover{color:var(--color-link-hover)}
.sm-article>.tags{grid-area:tags;display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.sm-article>.tags>a{padding:0 9px;border-radius:var(--sp-radius);font-size:12px;height:21px;line-height:21px;border:1px solid #ccc;color:#777;white-space:nowrap}
.sm-article>.tags>a:hover{background:var(--color-link-hover);color:#fff}
.sm-article>.tag{position:absolute;top:0;left:0;background:#007dfa;color:#fff;padding:1px 7px;border-radius:var(--sp-radius) 0;font-weight:700;font-size:12px;text-align:center;max-width:98px;overflow:hidden;white-space:nowrap;z-index:2}
.sm-article:hover>img{transform:scale(var(--sp-hover-scale))}
.sm-article:hover>a{color:var(--sp-name-hover)}
.sm-article.size-l{--img-w:120px;margin-top:26px}
.sm-article.size-l>img{height:120px}
.sm-article.size-l>a{font-size:17px}
.sm-article.size-s{--img-w:70px;margin-top:12px;grid-gap:0 10px;align-items:center;grid-template:"image title" 1fr / var(--img-w) 1fr}
.sm-article.size-s>img{height:50px}
.sm-article.size-s>a{font-size:14px;font-weight:500}
.sm-article.text-on-image{grid-template:"title" "info";height:150px;align-content:end;padding:4px 12px;border-radius:var(--sp-radius);overflow:hidden;font-size:12px}
.sm-article.text-on-image:before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.1) 20%,rgba(0,0,0,.8) 100%)}
.sm-article.text-on-image>img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.sm-article.text-on-image>a{z-index:2;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.2)}
.sm-article.text-on-image:hover>a{color:wheat}
.sm-article.text-on-image>.info{z-index:2;color:#eee;text-shadow:1px 1px 2px rgba(0,0,0,.2)}
.sm-article.text-on-image>.info a{color:#fff}
.sm-article.text-on-image>p{display:none!important}
.sm-article.text-on-image>.tags{position:absolute;z-index:2;left:12px;top:4px}
.sm-article.text-on-image>.tags a{color:#f9f9f9;border-color:#e3e3e3}
@media (min-width:750px){
  .sm-article.size-l{--img-w:250px;grid-gap:4px 20px;margin-top:32px}
  .sm-article.size-l>img{height:200px}
  .sm-article.size-l>a{font-size:22px}
  .sm-article.size-l>p{font-size:15px}
}

/* ==========================================================================
   16. 对比推荐条 .sm-comp-with（原站 index.css；首页 / 详情页 / 对比页共用）
   ========================================================================== */
.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),.sm-comp-with>a>span:nth-child(1){grid-area:img1;max-width:36px;max-height:36px;justify-self:center}
.sm-comp-with>a>img:nth-child(2),.sm-comp-with>a>span: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:#708090;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)}