/**
 * smartprix theme · finder.css
 *
 * 列表 / 筛选页（`/mobiles/…`）与品类 Hub 共用的样式。
 * 1:1 复刻原站 `FinderPage.c039c6b4.css` 全文，外加公共 index.css 里
 * `.sm-products.list` 变体的产品行卡规则（components.css 只覆盖了 grid 变体）。
 *
 * 参考：docs/spec/05-finder-list.md §2.0–2.9 / §6，04-category-hub.md §2.3–2.5、§2.10–2.11。
 * 颜色一律走 tokens.css 变量。
 */

/* ==========================================================================
   1. 页面骨架（05 §2.0）
   ========================================================================== */
.pg-prf-results-wrap { margin: var(--mv) 0; }

@media (min-width: 750px) {
  .pg-prf h1 { padding: 14px var(--ph) 8px var(--ph); }
}

/* 结果列表内的广告条：第 5 / 12 张卡之后（05 §2.7） */
.pg-prf .sm-products .dap-native { margin: 0; }
.pg-prf .sm-products .sm-dap:not(.dap-native),
.pg-prf .sm-products sm-dap:not(.dap-native) {
  background: var(--bg-body);
  padding: var(--mv) 0;
  margin: 0;
  border-radius: 0;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   2. 结果头部：计数 + 排序（05 §2.3）
   ========================================================================== */
.pg-prf-head { padding: 10px var(--ph); }
.pg-prf-head > div { font-size: 16px; display: flex; align-items: center; }
.pg-prf-head > div > div:first-child { flex: 1; }

.pg-prf-d-sort {
  display: flex;
  align-items: center;
  background: var(--sp-filter-bg);
  margin: -10px calc(-1 * var(--ph)) -10px 0;
  padding: 8px 12px;
  white-space: nowrap;
  border-radius: 0 var(--sp-radius) 0 0;
}
.pg-prf-d-sort .sm-input { margin-left: 12px; width: 174px; }

/* 分类 chip（mobiles 无子分类，保留以备全站搜索复用） */
.pg-prf-head > ul {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  margin-top: 10px;
  gap: 4px;
}
.pg-prf-head > ul > li {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--sp-filter-chip-border);
  border-radius: var(--sp-radius);
  cursor: pointer;
}
.pg-prf-head > ul > li:hover { background: var(--sp-filter-chip-border); }
.pg-prf-head > ul > li > span {
  margin-left: 8px;
  padding: 1px 6px;
  background: var(--color-border);
  border-radius: 2px;
  font-size: 11px;
}
@media (min-width: 750px) {
  .pg-prf-head > ul { flex-wrap: wrap; margin-top: 20px; }
}

/* ==========================================================================
   3. 产品行卡 list 变体（04 §2.4）
   ========================================================================== */
.sm-products.list { display: block; overflow: hidden; grid-template-columns: none; }

.list .sm-product {
  flex: 1;
  grid-template:
    "img name name name" auto
    "img price drop drop" auto
    "img rating rating rating" auto
    "img tags tags tags" auto
    "img actions actions actions" 1fr / 130px auto auto 1fr;
  align-items: start;
  grid-gap: 0 12px;
  padding: 8px;
  border-top: 1px solid var(--color-border);
}
.list .sm-product.has-features {
  grid-template:
    "img name name name" auto
    "img price drop drop" auto
    "img rating rating rating" auto
    "img tags tags tags" auto
    "img specs specs specs" 1fr
    "actions specs specs specs" auto / 130px auto auto 1fr;
}
.list .sm-product.oos + .sm-product.oos { border-top-color: #e3e3e3; }
.list.size-s .sm-product { grid-template-columns: 60px auto auto 1fr; }
.list.size-xs .sm-product { grid-template-columns: 40px auto auto 1fr; padding: 6px 8px; }

/* components.css 把 .tags 放在 grid-area:drop（grid 变体）——list 变体必须回到 tags 区 */
.list .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;
}
.list .sm-product > .sm-pdrop { grid-area: drop; display: block; font-size: .7143rem; text-align: left; color: green; }
.list .sm-product > .sm-pdrop:before { content: "\25bc"; margin-right: .2em; }
.list .sm-product > .name { font-size: 1.0286rem; font-weight: 500; margin: 0; }
.list .sm-product.has-features > .name { font-size: 1.1715rem; }
.list .sm-product > .price { font-size: 1.2858rem; margin-top: 5px; align-self: center; }
.list .sm-product.has-features > .price { font-size: 1.4287rem; }
.list .sm-product > .sm-pdrop { margin: 5px 0 0 -4px; align-self: center; font-size: .8143rem; }
.list .sm-product.has-features > .sm-pdrop { font-size: .8858rem; }
.list .sm-product > .rating { margin-top: 4px; }
.list .sm-product > .rating .sm-rating { --size: 1.1429rem; }
.list .sm-product > .sm-img-wrap { height: 100%; }
.size-m.list .sm-product > .sm-img-wrap { min-height: 120px; }
.list .sm-product > .icon { position: absolute; bottom: 3px; right: 6px; }
.sm-product > .specs { grid-area: specs; align-self: start; margin-top: 8px; }

.list .has-actions.sm-product:not(.has-features) .sm-product-actions {
  background: var(--sp-actions-bg);
  justify-self: start;
  border-radius: var(--sp-radius);
  gap: 0 4px;
}
.list .has-actions.sm-product:not(.has-features) .sm-product-actions > * { padding: 6px 10px; }

@media (min-width: 750px) {
  .list .sm-product {
    padding: 8px var(--ph);
    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;
  }
  .list .sm-product > .tags,
  .list .sm-product > .rating { margin: 0 !important; align-self: center; }
  .list .sm-product.has-actions:not(.has-features) > .rating { margin: 4px 0 !important; }
  .list .sm-product.has-actions:not(.has-features) .sm-product-actions { margin: 5px 0 0; }
  .list .sm-product.has-features {
    --img-width: 130px;
    padding: 14px 20px;
    grid-gap: 0 22px;
    grid-template:
      "img name name price"
      "img rating tags drop"
      "img actions actions actions"
      "img specs specs specs" 1fr
      "img specs specs specs" / var(--img-width) auto 1fr auto !important;
  }
  .list .sm-product.has-features > .name { margin-bottom: 8px; }
  .list .sm-product.has-features > .price { font-size: 1.5501rem; margin-top: 0; }
  .list .sm-product.has-features > .sm-pdrop { margin: 0; text-align: right; }
  .list .sm-product.has-features > .tags { margin-left: -10px !important; }
  .list .sm-product.has-features > .tags > div { margin-top: 0; }
  aside .list .sm-product { border: 0; }
}

/*
 * 卡片操作条 hover（04 §2.4）：原站 Compare 是 `<button>`，本主题为了让
 * 「加入对比」在无 JS 时也可用，改成了 `<label>+checkbox`，于是 components.css
 * 的 `.sm-product-actions>button:hover` 选不中它 —— 这里补回同一套 hover。
 */
.pg-prf .sm-product-actions > label:hover,
.pg-prf .sm-product-actions > label:focus-within {
  background: var(--sp-actions-bg-hover);
  color: var(--sp-actions-text-hover);
  border-radius: var(--sp-radius);
}

/* ==========================================================================
   4. 桌面筛选面板（04 §2.10 / 05 §2.2）
   ========================================================================== */
.sm-desktop-filters {
  background: var(--sp-filter-bg);
  font-size: 13px;
  box-shadow: var(--sp-shadow-card);
  border: 1px solid var(--sp-card-border);
  border-radius: var(--sp-radius);
}
.sm-desktop-filters > div > .heading {
  display: flex;
  align-items: center;
  color: var(--sp-filter-head-text);
  background: var(--sp-filter-head-bg);
  border-top: 1px solid var(--sp-filter-head-border);
  border-bottom: 1px solid var(--sp-filter-head-border);
  font-size: 15px;
  font-weight: 500;
  padding: 3px 12px;
  cursor: pointer;
}
.sm-desktop-filters > div > .heading > span { flex: 1; }
.sm-desktop-filters div[data-h="Brands"] .sm-filters-list { max-height: 250px; overflow: auto; }
.sm-desktop-filters > div[hidden] { display: none; }
.sm-desktop-filters > div:first-child > .heading { border-top: 0; cursor: default; }
.sm-filters-hidden { display: none !important; }

.sm-filters-list { contain: content; }
.sm-filters-list > label {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--sp-filter-mobile-line);
  cursor: pointer;
  contain: content;
}
.sm-filters-list > label.disabled { opacity: .6; cursor: default; }
.sm-filters-list > label[hidden] { display: none; }
.sm-filters-list > label > span { flex: 1; padding: 0 10px; }
.sm-filters-list > label > small { font-size: .7857rem; color: var(--sp-filter-count); }

.sm-filters-search { padding: 12px 12px 6px; }
.sm-filters-search > .sm-input > .input {
  font-size: 14px;
  line-height: 21px;
  padding: 6px 12px;
  box-shadow: inset 0 0 3px #ddd;
}

.sm-filters-applied,
.sm-filters-gsr { font-size: 12px; line-height: 18px; color: var(--color-text-semi-light); }
.sm-filters-applied .head {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  background: var(--sp-filter-mobile-line);
  color: #444;
  padding: 6px 12px;
}
.sm-filters-applied > div {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sp-filter-mobile-line);
}
.sm-filters-applied > div[hidden] { display: none; }
.sm-filters-applied .heading,
.sm-filters-gsr .heading {
  font-weight: 700;
  color: #444;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.sm-filters-applied .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px;
  cursor: pointer;
  line-height: 0;
}
.sm-filters-applied .close:hover .icon,
.sm-filters-applied .close:hover { fill: #444 !important; }
.sm-filters-clear { padding: 12px; text-align: center; }

.sm-filters-gsr { margin: -8px 0 14px; color: #444; }
.sm-filters-gsr-item { padding: 8px; border-bottom: 1px solid var(--sp-filter-mobile-line); }
.sm-filters-gsr-item > div:last-child {
  display: flex;
  align-items: center;
  overflow: auto;
  margin: 6px -8px 0;
  padding-left: 8px;
}
.sm-filters-gsr-item > div:last-child label {
  display: flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid #e2e2e2;
  border-radius: var(--sp-radius-sm);
  margin-right: 4px;
  padding: 5px 10px;
}
.sm-filters-gsr-item > div:last-child input { margin-right: 4px; }

.sm-filters-help {
  padding: 12px;
  font-size: 1.0715rem;
  line-height: 24px;
  text-align: center;
  margin-top: 14px;
  color: var(--color-text-semi-light);
}

.sm-filters-list > .price { padding: 14px; display: flex; flex-direction: column; align-items: center; }
.sm-filters-list > .price > .sm-input { margin: 10px; width: 100%; }

@media (min-width: 750px) {
  .sm-filters-list > .price { padding: 0; flex-direction: row; }
  .sm-filters-list { padding: 4px 0 6px; }
  .sm-filters-list::-webkit-scrollbar { width: 10px; }
  .sm-filters-list::-webkit-scrollbar-track-piece { background-color: var(--sp-filter-scroll-track); border-radius: var(--sp-radius-sm); }
  .sm-filters-list::-webkit-scrollbar-thumb { background-color: var(--sp-filter-scroll-thumb); border-radius: var(--sp-radius-sm); }
  .sm-filters-list > label { border: 0; padding: 4px 12px; }
  .sm-filters-list > label:hover { background: var(--sp-filter-hover-bg); color: var(--sp-filter-hover-text); }
  .sm-filters-list > label.disabled:hover { background: none; color: inherit; }
  .sm-filters-applied {
    border-radius: 5px;
    background: var(--sp-filter-applied-bg);
    border: 1px dashed var(--sp-filter-applied-border);
  }
  .sm-filters-applied > div:not(:last-child) { border-bottom: 1px dashed var(--sp-filter-applied-border); }
  .sm-filters-help { margin-top: 48px; }
}

/* ==========================================================================
   5. 移动端底部操作条（04 §2.11 / 05 §2.9）
   ========================================================================== */
.pg-prf-actions {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 24px;
  height: 46px;
  border-top: 1px solid var(--bg-light-blue-border);
  position: sticky;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: hsl(207, 100%, 96%);
  box-shadow: 0 7px 7px 7px #0003;
}
.pg-prf-actions > div {
  flex: 1;
  max-width: 50%;
  border-left: 1px solid var(--bg-light-blue-border);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.pg-prf-actions > div:first-child { border-left: 0; }
.pg-prf-actions > div > .icon { margin-right: 4px; }
.pg-prf-actions select {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.pg-prf-actions small {
  font-size: 12px;
  line-height: 18px;
  margin-left: 10px;
  padding: 0 10px;
  background: var(--color-secondary);
  border-radius: var(--sp-radius-sm);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 750px) {
  .way-item-finder { --bottom-0: 46px; }
}

/* ==========================================================================
   6. 移动端筛选弹层（05 §2.9）
   ========================================================================== */
.sm-filters { font-size: 13px; line-height: 19px; color: var(--color-text); z-index: 99; display: flex; flex-direction: column; height: 100%; }
.sm-filters > .main { display: flex; flex: 1; overflow: hidden; }
.sm-filters > .main > div { overflow: auto; min-width: 140px; -webkit-overflow-scrolling: touch; }
.sm-filters > .main > div::-webkit-scrollbar { display: none; }
.sm-filters > .main > .left { flex: 1; }
.sm-filters > .main > .right { flex: 2; background: #fff; box-shadow: 0 0 4px 1px #cfcfcf; z-index: 1; }
.sm-filters > .main > .right[hidden] { display: none; }
.sm-filters > .main > .price { padding: 14px; display: flex; flex-direction: column; align-items: center; }
.sm-filters > .main > .price > .sm-input { margin: 10px; width: 100%; }

.sm-filters-sidebar { background: var(--sp-filter-mobile-bg); }
.sm-filters-sidebar > li {
  padding: 12px;
  border-bottom: 1px solid var(--sp-filter-mobile-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.sm-filters-sidebar > li > small {
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  background: var(--color-secondary);
  color: #fff;
  padding: 0 4px;
  border-radius: var(--sp-radius-sm);
}
.sm-filters-sidebar > li.current { background: #fff; }

.sm-filters-popup { display: flex; flex-direction: column; height: 90%; }
.sm-filters-popup[hidden] { display: none; }
.sm-filters-popup > .sm-popup-head { flex: 0 0 auto; }
.sm-filters-popup > .sm-popup-head + div { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
.sm-filters-popup > .sm-popup-head + div > * { flex: 1; min-height: 0; }
.sm-filters-popup > .sm-popup-foot { flex: 0 0 auto; }
.sm-filters-popup .sm-popup-head .close { cursor: pointer; line-height: 0; }
@media (min-width: 750px) {
  .sm-filters-popup { display: none !important; }
}