/* ==========================================================================
   hub.css — 品类频道页 / Finder 页（规格 04）
   原站对应文件：FinderPage.c039c6b4.css（= assets/css/5ea3a3d7bf.css）
   加上 index.css 中只有本页用到的 .sm-cats.scrl / .sm-discuss / .sm-comment 段。
   通用件（.sm-box / .sm-product / .sm-feat / .sm-desc / .sm-links …）在
   components.css，布局网格（.aside-320.aside-left.aside-imp）在 base.css，
   本文件只补它们没有的部分与本页覆盖，全部限定在 .pg-prf 或本页专属类名下。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 标题盒（§2.1）
   -------------------------------------------------------------------------- */
.pg-prf h1 {
  margin: 0;
}
@media (min-width: 750px) {
  .pg-prf h1 { padding: 14px var(--ph) 8px var(--ph) }
}
.pg-prf .sm-desc > div { line-height: 1.5 }
.pg-prf .sm-desc > span > a { color: var(--color-link); cursor: pointer }

/* 描述里的价格 snippet 表（§2.1）：.sm-content table/caption/th/td 已在 base.css。 */

/* --------------------------------------------------------------------------
   2. Popular Brands 圆形品牌条（§2.2）
   components.css/header.css 已有 .sm-cats 基础，这里补 scrl / round / 10 列
   -------------------------------------------------------------------------- */
/* .sm-cats.scrl / .round / .sm-box-header+.sm-cats / hover 已在 components.css §17 */
.pg-prf .sm-cats .sp-cat-icon { width: 100%; font-size: 1.7rem; font-weight: 700; border-radius: 50% }
@media (min-width: 750px) {
  .pg-prf .sm-cats { --per-row: 10; grid-auto-columns: 1fr !important }
  .pg-prf .sm-cats > a { font-size: 1.0358rem }
  .pg-prf .sm-cats > a > span { padding: 8px }
  .pg-prf.aside-320 .sm-cats > a { font-size: .9286rem }
  .pg-prf.aside-320 .sm-cats > a > span { padding: 5px }
}

/* --------------------------------------------------------------------------
   3. 结果盒头部：计数 + 排序（§2.3）
   -------------------------------------------------------------------------- */
.pg-prf-results-wrap { margin: var(--mv) 0 }
.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: #e2f5cc;
  margin: -10px calc(-1 * var(--ph)) -10px 0;
  padding: 8px 12px;
  white-space: nowrap;
  border-radius: 0 var(--sp-radius) 0 0;
}
.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 #d9d9d9; border-radius: var(--sp-radius); cursor: pointer;
}
.pg-prf-head > ul > li:hover { background: #d9d9d9 }
.pg-prf-head > ul > li > span {
  margin-left: 8px; padding: 1px 6px; background: #eee;
  border-radius: 2px; font-size: 11px;
}
@media (min-width: 750px) { .pg-prf-head > ul { flex-wrap: wrap; margin-top: 20px } }

.pg-prf-empty { padding: 24px var(--ph); color: var(--color-text-light); font-size: 15px }

/* --------------------------------------------------------------------------
   4. 结果卡 list 变体（§2.4）
   基础 .sm-product 在 components.css；这里落原站 FinderPage 的 grid 模板与字号
   -------------------------------------------------------------------------- */
.pg-prf .sm-products.list { display: block; overflow: hidden }
.pg-prf .list .sm-product {
  display: grid;
  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);
}
.pg-prf .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;
}
.pg-prf .sm-products.size-m.list .sm-product > .sm-img-wrap { min-height: 120px }
.pg-prf .sm-product > .name { grid-area: name }
.pg-prf .sm-product > .price { grid-area: price }
.pg-prf .sm-product > .sm-pdrop { grid-area: drop }
.pg-prf .sm-product > .rating { grid-area: rating }
.pg-prf .sm-product > .tags { grid-area: tags; justify-self: start; margin-top: 4px; font-size: 13px }
.pg-prf .sm-product > .specs { grid-area: specs; align-self: start; margin-top: 8px }
.pg-prf .list .sm-product > .name { font-size: 1.0286rem; font-weight: 500; margin: 0 }
.pg-prf .list .sm-product.has-features > .name { font-size: 1.1715rem }
.pg-prf .list .sm-product > .price { font-size: 1.2858rem; margin-top: 5px; align-self: center }
.pg-prf .list .sm-product.has-features > .price { font-size: 1.4287rem }
.pg-prf .list .sm-product > .sm-pdrop { margin: 5px 0 0 -4px; align-self: center; font-size: .8143rem }
.pg-prf .list .sm-product.has-features > .sm-pdrop { font-size: .8858rem }

/* 降价角标（components.css 没有 .sm-pdrop） */
.sm-pdrop { color: green; display: block; font-size: .7143rem; margin-top: 3px; text-align: left }
.sm-pdrop:before { content: "\25bc"; margin-right: .2em }
.sm-pdrop.red { color: var(--color-drop-red) }
.sm-pdrop.red:before { content: "\25b2" }

/* 卡片左上角状态角标 */
.pg-prf .sm-product > .tag { margin: 0; border-radius: 0 0 var(--sp-radius-sm) 0 }

@media (min-width: 750px) {
  .pg-prf .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;
  }
  .pg-prf .list .sm-product > .tags,
  .pg-prf .list .sm-product > .rating { margin: 0 !important; align-self: center }
  .pg-prf .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;
  }
  .pg-prf .list .sm-product.has-features > .name { margin-bottom: 8px }
  .pg-prf .list .sm-product.has-features > .price { font-size: 1.5501rem; margin-top: 0; text-align: right }
  .pg-prf .list .sm-product.has-features > .sm-pdrop { margin: 0; text-align: right }
  .pg-prf .list .sm-product.has-features > .tags { margin-left: -10px !important }
  .pg-prf .list .sm-product.has-features > .tags > div { margin-top: 0 }
}

/* --------------------------------------------------------------------------
   5. 结果列表里的广告位（§2.6）
   -------------------------------------------------------------------------- */
.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);
  width: 100%;
}

/* --------------------------------------------------------------------------
   6. Discuss（§2.7）
   -------------------------------------------------------------------------- */
.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-form.padded { padding: 0 var(--ph) }
.sm-thread { padding: 9px var(--ph); contain: content }
.sm-thread.comment:last-child { margin-bottom: 8px; padding-bottom: 0 }
@media (min-width: 750px) { .sm-thread { padding: 12px var(--ph) } }

.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-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 > .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 .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:first-child { display: flex; align-items: center }
.sm-comment .actions .btn { padding: 8px; margin: -8px; cursor: pointer; display: flex; align-items: center }
.sm-comment .actions .icon + span { margin-left: 4px }
.sm-comment .actions > div:first-child > div:first-child:hover { color: var(--color-rank1) }
.sm-comment .actions > div:first-child > div:last-child:hover { color: var(--color-danger) }
.sm-comment .actions .btn.reply:hover { color: var(--color-link) }
.sm-comment > .content + .actions { margin-top: 4px }
@media (min-width: 750px) {
  @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 > .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 }
}

/* --------------------------------------------------------------------------
   7. 左侧筛选面板（§2.10）
   -------------------------------------------------------------------------- */
.sm-desktop-filters {
  background: #e2f5cc;
  font-size: 13px;
  box-shadow: var(--sp-shadow-card);
  border: 1px solid gainsboro;
  border-radius: var(--sp-radius);
  overflow: hidden;
}
.sm-desktop-filters > div > .heading {
  display: flex;
  align-items: center;
  color: #718f3d;
  background: #d4ebba;
  border-top: 1px solid #cbe4b0;
  border-bottom: 1px solid #cbe4b0;
  font-size: 15px;
  font-weight: 500;
  padding: 3px 12px;
  cursor: pointer;
}
.sm-desktop-filters > div > .heading > span { flex: 1 }
.sm-desktop-filters > div:first-child > .heading { border-top: 0; cursor: default }
.sm-desktop-filters div[data-h="Brands"] .sm-filters-list { max-height: 250px; overflow: auto }
.sm-filters-list { contain: content }
.sm-filters-list > label {
  display: flex; align-items: center; padding: 12px;
  border-bottom: 1px solid #eaeaec; cursor: pointer; contain: content;
}
.sm-filters-list > label.disabled { opacity: .6; cursor: default }
.sm-filters-list > label > span { flex: 1; padding: 0 10px }
.sm-filters-list > label > small { font-size: .7857rem; color: #94969f }
.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-help {
  padding: 12px; font-size: 1.0715rem; line-height: 24px;
  text-align: center; margin-top: 14px; color: #666;
}
.sm-filters-list > .price { padding: 14px; display: flex; flex-direction: column; align-items: center }
.sm-filters-list > .price > .sm-input { margin: 10px; width: 100% }
.sm-filters-hidden { display: none !important }
@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: #d4ecac; border-radius: var(--sp-radius-sm) }
  .sm-filters-list::-webkit-scrollbar-thumb { background-color: #bedb8e; border-radius: var(--sp-radius-sm) }
  .sm-filters-list > label { border: 0; padding: 4px 12px }
  .sm-filters-list > label:hover { background: #d4ecac; color: #59860a }
  .sm-filters-applied { border-radius: 5px; background: #f5fffa; border: 1px dashed #bfcede }
  .sm-filters-applied > div:not(:last-child) { border-bottom: 1px dashed #bfcede }
  .sm-filters-help { margin-top: 48px }
}

/* --------------------------------------------------------------------------
   8. 移动端吸底 Sort / Filter 条与筛选弹层（§2.11）
   -------------------------------------------------------------------------- */
.pg-prf-actions {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 24px;
  height: 46px;
  border-top: 1px solid #e0e0e0;
  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 #e0e0e0; 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: hotpink; border-radius: var(--sp-radius-sm); color: #fff; font-weight: 700;
}

/* JS 克隆出来的全屏筛选弹层 */
.sp-filters-modal {
  position: fixed; inset: 0; z-index: 60; background: #fff;
  display: flex; flex-direction: column;
}
.sp-filters-modal[hidden] { display: none }
.sp-filters-modal > header {
  display: flex; align-items: center; gap: 8px; height: var(--header-h, 56px);
  padding: 0 12px; background: var(--bg-header); color: #fff; font-size: 18px; font-weight: 500;
}
.sp-filters-modal > header > .sp-filters-close { margin-left: auto; cursor: pointer; display: flex }
.sp-filters-modal > .sp-filters-body { flex: 1; overflow: auto; background: #e2f5cc }
.sp-filters-modal .sm-desktop-filters { border: 0; border-radius: 0; box-shadow: none }
@media (min-width: 750px) { .sp-filters-modal { display: none !important } }

/* --------------------------------------------------------------------------
   9. 断点：<750 时 main 回到单列 flex（base.css 已隐藏 aside）
   -------------------------------------------------------------------------- */
@media (max-width: 750px) {
  .pg-prf { display: flex; flex-direction: column }
  .pg-prf .sm-page-actions > ul { justify-content: space-between }
  .pg-prf .list .sm-product.has-features > .sm-product-actions {
    grid-area: actions; flex-direction: column; background: none; margin-top: 8px;
  }
  .pg-prf .sm-products.grid.max-row-2 .sm-product:nth-child(n+7) { display: none }
}

/* --------------------------------------------------------------------------
   10. 与原站逐像素对比后的补丁
   -------------------------------------------------------------------------- */
/* 商家图标与 "View →" 之间的 4px（§2.4 .sm-product-actions>.store img） */
.pg-prf .sm-product-actions > .store img { width: 17px; height: 17px; margin-right: 4px }
.pg-prf .sm-product-actions > * > img { border-radius: 50% }
.pg-prf .sm-product-actions small { margin-left: 4px; font-size: .9072rem; color: var(--color-text-light) }

/* Related Searches 的 26px 圆点已在 components.css 按原站实现。 */

/* 以下两条页面级覆盖已在源头改正（QA 收尾），此处不再需要：
   - utilities.css 的通配 `.price{color}` 已删除（原站没有该规则）；
   - components.css 的 `.sm-product>.tag` 已改回 flex / 继承 .8572rem。 */

/* --------------------------------------------------------------------------
   10. 与原站逐像素对比后的补丁
   -------------------------------------------------------------------------- */
/* 商家图标与 "View →" 之间的 4px（§2.4 .sm-product-actions>.store img） */
.pg-prf .sm-product-actions > .store img { width: 17px; height: 17px; margin-right: 4px }
.pg-prf .sm-product-actions > * > img { border-radius: 50% }
.pg-prf .sm-product-actions small { margin-left: 4px; font-size: .9072rem; color: var(--color-text-light) }

/* Related Searches 的 26px 圆点已在 components.css 按原站实现。 */