/* ================================================================
   products.css — 产品列表页（@layer pages）
   D 方向：经典蓝 + 橙红 CTA，信息密集的列表/网格商品行
   依赖全局 tokens / base / components；本文件只放本页独有结构。
   ================================================================ */
@layer pages {

  /* ---------------- 页面外框 ---------------- */
  .products-page {
    padding: var(--space-lg) 0 var(--space-xl);
  }

  /* ================================================================
     1. 左侧筛选面板 .filter-panel
     ================================================================ */
  .filter-panel {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  /* 移动端筛选开关按钮（桌面隐藏；<992px 由响应式块显示）*/
  .filter-toggle { display: none; }
  .filter-panel__title {
    padding: 10px 14px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-white);
    background: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .filter-panel__group {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-bg-light);
  }
  .filter-panel__group:last-child { border-bottom: none; }
  .filter-panel__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
  }

  /* 分类列表 */
  .filter-cat {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .filter-cat a {
    display: block;
    padding: 5px 8px;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    transition: var(--transition-fast);
  }
  .filter-cat a:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
  }
  .filter-cat a.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-left-color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
  }

  /* 复选/单选项 */
  .filter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    padding: 3px 0;
    cursor: pointer;
  }
  .filter-check input { accent-color: var(--color-primary); }

  /* 价格 / 起订量输入行 */
  .filter-range {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
  }
  .filter-range input {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  .filter-range input:focus {
    outline: none;
    border-color: var(--color-primary);
  }
  /* 筛选表单（价格区间 + 材质多选 + Apply 一行）。Apply 行里筛选生效时多一个「清除」链接 */
  .filter-apply {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .filter-range__clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }
  .filter-range__clear:hover { color: var(--color-primary); }

  /* 材质 / 牌号多选：选项多于 ProductListQuery::MATERIAL_FOLD_AT 时折叠成约 8 行，
     纯 CSS checkbox 开关（.filter-more__cb → .filter-check-list → .filter-more__toggle 同父且 cb 在前）。
     ⚠ 默认 display:none，只有折叠时才渲染这个 checkbox（模板按 $_materialFold 决定输出），
       别改成「默认可聚焦」——旺铺 .sf-fold__cb 那次桌面多出看不见的 Tab 停靠点就是这么来的 */
  .filter-more__cb { display: none; }
  .filter-check-list--fold { max-height: calc(8 * 27px); overflow: hidden; }   /* .filter-check 一行 ≈ 27px（padding 3+3 + 行高 21） */
  .filter-more__cb:checked ~ .filter-check-list--fold { max-height: none; }
  .filter-more__toggle {
    display: inline-flex;
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    cursor: pointer;
    user-select: none;
  }
  .filter-more__hide { display: none; }
  .filter-more__cb:checked ~ .filter-more__toggle .filter-more__show { display: none; }
  .filter-more__cb:checked ~ .filter-more__toggle .filter-more__hide { display: inline; }
  .filter-check span { overflow-wrap: anywhere; }

  /* ================================================================
     2. 推荐供应商卡 .supplier-promo
     ================================================================ */
  .supplier-promo {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border-top: 3px solid var(--color-accent);
  }
  .supplier-promo__head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
  }
  .supplier-promo__logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-white);
    flex-shrink: 0;
  }
  .supplier-promo__name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    text-decoration: none;
  }
  .supplier-promo__name:hover { color: var(--color-primary); }
  .supplier-promo__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 4px;
  }
  .supplier-promo__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
  }
  .supplier-promo__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-sm);
  }
  .supplier-promo__thumb {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition-fast);
  }
  .supplier-promo__thumb:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-sm); }
  .supplier-promo__thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: var(--color-gray-100);
  }
  .supplier-promo__thumb-name {
    font-size: var(--font-size-xs);
    color: var(--color-text);
    padding: 4px 6px 0;
    margin: 0;
  }
  .supplier-promo__thumb-price {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    padding: 0 6px 6px;
    margin: 0;
  }

  /* ================================================================
     3. 工具栏 .products-toolbar（结果数 + 排序 + 视图切换）
     ================================================================ */
  .products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
  }
  .products-toolbar__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }
  .products-toolbar__count strong { color: var(--color-text-strong); }
  .products-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }
  .products-toolbar__sort {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 5px 28px 5px 10px;
    background: var(--color-bg-white);
  }

  .view-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .view-toggle__btn {
    width: 32px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-white);
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
  }
  .view-toggle__btn + .view-toggle__btn { border-left: 1px solid var(--color-border); }
  .view-toggle__btn.active {
    background: var(--color-primary);
    color: var(--color-text-white);
  }

  /* ================================================================
     4. 商品列表（横向行） .product-row
     ================================================================ */
  .product-list-d { display: block; }

  .product-row {
    display: grid;
    grid-template-columns: 190px 1fr 170px;
    gap: var(--space-lg);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    transition: var(--transition-base);
  }
  .product-row:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
  }

  /* 图廊（左） */
  .product-row__gallery {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-gray-100);
  }
  .product-row__gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }
  .gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-fast);
  }
  .product-row__gallery:hover .gallery-arrow { opacity: 1; }
  .gallery-arrow--prev { left: 6px; }
  .gallery-arrow--next { right: 6px; }
  .gallery-arrow:hover { background: var(--color-bg-white); color: var(--color-primary); }
  .gallery-indicator {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 11px;
    color: var(--color-text-white);
    background: rgba(15, 23, 42, 0.6);
    padding: 1px 7px;
    border-radius: 10px;
  }

  /* 视频支持：左上角标 + 居中播放按钮 */
  .gallery-media-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--color-text-white);
    background: rgba(15, 23, 42, 0.6);
    padding: 1px 7px;
    border-radius: 10px;
  }
  .gallery-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55);
    color: var(--color-text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    transition: var(--transition-fast);
  }
  .gallery-play:hover { background: var(--color-accent); }
  /* 内嵌播放的 video 占满图廊 */
  .product-row__gallery video {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: #000;
  }

  /* 信息（中） */
  .product-row__info { min-width: 0; }
  .product-row__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    margin: 0 0 6px;
  }
  .product-row__title a {
    color: var(--color-text-strong);
    text-decoration: none;
  }
  .product-row__title a:hover { color: var(--color-primary); }
  .product-row__price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    margin: 0 0 4px;
  }
  .product-row__moq {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 8px;
  }
  .product-row__supplier {
    font-size: var(--font-size-sm);
    margin: 0 0 8px;
  }
  .product-row__supplier a {
    color: var(--color-text-secondary);
    text-decoration: none;
  }
  .product-row__supplier a:hover { color: var(--color-primary); }
  .product-row__trust {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }
  .product-row__trust .tag-icon {
    width: 16px;
    height: 11px;
    object-fit: cover;
    vertical-align: middle;
  }
  .product-row__rating strong { color: var(--color-text-strong); }

  /* 操作（右） */
  .product-row__actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
  }

  /* ================================================================
     5. 网格视图 .product-list-d--grid（切换后启用，product-row 重排为竖卡）
     ================================================================ */
  .product-list-d--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-md);
  }
  .product-list-d--grid .product-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-bottom: 0;
  }
  .product-list-d--grid .product-row__title { font-size: var(--font-size-sm); }
  .product-list-d--grid .product-row__price { font-size: var(--font-size-md); }
  .product-list-d--grid .product-row__actions { flex-direction: column; }

  /* ================================================================
     6. 响应式
     ================================================================ */
  @media (max-width: 991.98px) {
    .product-row {
      grid-template-columns: 140px 1fr;
    }
    .product-row__actions {
      grid-column: 1 / -1;
      flex-direction: row;
    }

    /* 筛选面板折叠为抽屉：默认收起，产品列表立即可见，点开关才展开 */
    .filter-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 11px 14px;
      background: var(--color-primary);
      color: var(--color-text-white);
      border: none;
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-bold);
      cursor: pointer;
    }
    .filter-toggle__chevron { transition: transform .2s; }
    .filter-toggle[aria-expanded="true"] .filter-toggle__chevron { transform: rotate(180deg); }

    .filter-panel { display: none; margin-top: var(--space-sm); }
    .filter-panel.filter-panel--open { display: block; }
    /* 开关按钮已充当标题，隐藏面板内重复的 “Filters” 标题栏 */
    .filter-panel__title { display: none; }
  }
  @media (max-width: 767.98px) {
    /* 推荐供应商卡：手机端保留头部(品牌曝光 + Quick Quotation CTA)，
       隐藏下方与产品列表重复的缩略图排，缩短到列表的距离 */
    .supplier-promo__thumbs { display: none; }
    .supplier-promo__head { margin-bottom: 0; }
    /* logo + 公司名同行：名称列可收缩、长名在列内换行，避免整块被挤到 logo 下方；
       操作按钮压到整行下方 */
    .supplier-promo__info { flex: 1 1 0; min-width: 0; }
    .supplier-promo__actions { flex-basis: 100%; margin-left: 0; }

    /* 推荐供应商卡压缩：logo + 名称一行，Quick Quotation 放在名称下方（2026-09-29）。
       只作用于产品列表页那一张卡（.supplier-promo--compact）——/suppliers 供应商目录复用
       同一套 .supplier-promo 标记给每一张卡片，那边 meta（Diamond/年限/Audited）与
       Learn More 是主要比对信息，不能被这套压缩规则连带隐藏。
       ⚠ 别把按钮挪回名称右侧同一行：按钮约 138px，390 宽下名称只剩 98px、360 宽只剩 68px，
       「Jinyu Steel Co., Ltd.」会被截成「Jinyu Ste…」（首版就是这样上的，用户报出来才改）。
       按钮继承上面那条 flex-basis:100% 独占下一行，左缩进 = logo 56px + 间距 16px，与名称左对齐 */
    .supplier-promo--compact .supplier-promo__meta,
    .supplier-promo--compact .supplier-promo__actions .btn--ghost { display: none; }
    .supplier-promo--compact .supplier-promo__actions { padding-left: calc(56px + var(--space-md)); margin-top: calc(-1 * var(--space-xs)); }
    .supplier-promo--compact .supplier-promo__name {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* /suppliers 供应商目录卡（非 --compact，2026-10-02 用户定「压缩 + 恢复产品」）：
       ① 收紧内边距与间距，不隐藏任何东西（meta 与 Learn More 是目录页的比对信息，见上一条）；
       ② 产品缩略图在手机上**恢复**成横滑——上面那条 `.supplier-promo__thumbs{display:none}` 是给产品列表
          那一张推荐卡写的（缩略图与列表重复），目录页复用同一个类被连带藏掉，手机上看不到任何一家卖什么。
          横滑只在卡内滚，第三张露半张提示可滑；不改 ImageHelper 预设（thumb w120，与桌面同一份）。 */
    .supplier-promo:not(.supplier-promo--compact) { padding: var(--space-sm) var(--space-md); }
    .supplier-promo:not(.supplier-promo--compact) .supplier-promo__head { gap: var(--space-xs) var(--space-sm); }
    .supplier-promo:not(.supplier-promo--compact) .supplier-promo__meta { margin-top: 2px; gap: 4px; }
    .supplier-promo:not(.supplier-promo--compact) .supplier-promo__thumbs {
      display: flex;
      gap: var(--space-sm);
      margin-top: var(--space-sm);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .supplier-promo:not(.supplier-promo--compact) .supplier-promo__thumb { flex: 0 0 104px; }
  }
  /* 按钮行左缩进与公司名对齐（logo 56 + 间距 8）：只在 ≥375 做——320/360 下两个按钮加缩进放不下一行，
     会折成两行反而更高（2026-10-02 实测 en 320 2.95→3.05 屏）。 */
  @media (min-width: 375px) and (max-width: 767.98px) {
    .supplier-promo:not(.supplier-promo--compact) .supplier-promo__actions { padding-left: calc(56px + var(--space-sm)); }
  }

  @media (max-width: 575.98px) {
    /* 列表视图：左图右文紧凑行，一屏约 5 个（原整宽大图卡一屏 2 个）。
       只作用于列表视图——网格视图的双列紧凑卡在下面，别用这条覆盖它 */
    .product-list-d:not(.product-list-d--grid) .product-row {
      grid-template-columns: 110px minmax(0, 1fr);
      gap: var(--space-xs) var(--space-sm);
      padding: var(--space-sm);
    }
    .product-list-d:not(.product-list-d--grid) .product-row__gallery img {
      width: 110px;
      height: 110px;
      object-fit: cover;
    }
    .product-list-d:not(.product-list-d--grid) .gallery-arrow,
    .product-list-d:not(.product-list-d--grid) .gallery-indicator,
    .product-list-d:not(.product-list-d--grid) .gallery-media-badge,
    .product-list-d:not(.product-list-d--grid) .product-row__trust,
    .product-list-d:not(.product-list-d--grid) .product-row__actions .btn--ghost { display: none; }
    .product-list-d:not(.product-list-d--grid) .product-row__actions {
      grid-column: 2;
      justify-content: flex-start;
    }
    .product-list-d:not(.product-list-d--grid) .product-row__title { font-size: var(--font-size-sm); }
    .product-list-d--grid .product-row { grid-template-columns: minmax(0, 1fr); }
    .products-toolbar { gap: var(--space-sm); }

    /* 网格视图：手机端强制 2 列紧凑卡（图+标题+价格），隐藏次要信息，
       与列表视图(1 列详细)形成明显区分。修“列表/网格切换几乎一致” */
    .product-list-d--grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-sm);
    }
    .product-list-d--grid .product-row { padding: var(--space-sm); }
    .product-list-d--grid .product-row__moq,
    .product-list-d--grid .product-row__supplier,
    .product-list-d--grid .product-row__trust,
    .product-list-d--grid .product-row__actions { display: none; }
  }

}