/**
 * Product list page styles (from static product.html)
 * 内页 Banner（.ph）样式已并入 site.css 通用
 */

/* --- 筛选条样式 --- */
  .fbar{background:#fff;border-bottom:1px solid var(--line)}
  .fbar-in{
    display:flex;align-items:center;justify-content:space-between;
    gap:26px;flex-wrap:wrap;padding:18px 0;
  }
  /* 左侧：分类按钮组 */
  .fbar-tabs{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    flex:1 1 auto;min-width:0;
  }
  .fbar-tab{
    display:inline-flex;align-items:center;gap:8px;flex:none;
    font-family:var(--font-sans);font-size:11.5px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;line-height:1;
    padding:12px 18px;border:1px solid var(--line);color:var(--ink);background:transparent;
    text-decoration:none;cursor:pointer;white-space:nowrap;
    transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  }
  .fbar-tab em{font-style:normal;color:var(--muted);font-size:10.5px;transition:color .35s var(--ease)}
  .fbar-tab:hover{border-color:var(--ink)}
  .fbar-tab.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
  .fbar-tab.is-on em{color:rgba(255,255,255,.6)}

  /* 右侧：结果数量 + 排序 */
  .fbar-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap;flex:none}
  .fbar-count{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
  .fbar-count b{color:var(--ink)}
  .fbar-sort{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .fbar-sort select{
    border:1px solid var(--line);background:#fff;color:var(--ink);
    padding:9px 12px;font-size:12px;outline:none;cursor:pointer;
  }
  .fbar-sort select:focus{border-color:var(--gold)}

  /* 二级分类行：仅一级有子类时出现 */
  .fbar-sub{border-top:1px solid var(--line);background:var(--cream)}
  .fbar-sub-in{padding:12px 0 14px}
  .fbar-subtabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .fbar-subtab{
    display:inline-flex;align-items:center;gap:7px;flex:none;
    font-family:var(--font-sans);font-size:11px;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;line-height:1;
    padding:9px 14px;border:1px solid transparent;color:var(--muted);background:transparent;
    text-decoration:none;cursor:pointer;white-space:nowrap;
    transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  }
  .fbar-subtab em{font-style:normal;color:inherit;opacity:.65;font-size:10px}
  .fbar-subtab:hover{color:var(--ink);border-color:var(--line)}
  .fbar-subtab.is-on{color:var(--ink);border-color:var(--ink);background:#fff}
  .fbar-subtab.is-on em{opacity:.55}

  /* 定制服务类目说明条 */
  .fbar-note{display:none;border-top:1px solid var(--line);background:var(--cream)}
  .fbar-note.is-on{display:block}
  .fbar-note p{padding:14px 0;font-size:13.5px;color:var(--body)}
  .fbar-note b{font-family:var(--font-serif);font-weight:400;font-size:16px;color:var(--ink)}

  /* 平板 / 手机：自动换行自适应，无横向滚动条 */
  @media (max-width:1100px){
    .fbar-in{align-items:stretch;gap:16px}
    .fbar-tabs{
      display:flex;flex-wrap:wrap;
      width:100%;
      gap:8px;
      overflow:visible;
    }
    .fbar-tab{
      padding:11px 14px;font-size:11px;letter-spacing:.12em;
      white-space:normal;text-align:center;justify-content:center;
      max-width:100%;
    }
    .fbar-right{width:100%;justify-content:space-between}
  }

  @media (max-width:680px){
    .container.fbar-in{padding:12px 24px;gap:12px}
    .fbar-tabs{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
      width:100%;
    }
    .fbar-tab{
      width:100%;
      padding:11px 10px;font-size:10.5px;letter-spacing:.08em;gap:5px;
      white-space:normal;line-height:1.35;
      justify-content:center;text-align:center;
    }
    .fbar-tab em{font-size:10px}
    .fbar-right{width:100%;justify-content:space-between;gap:12px}
    .fbar-count{font-size:12px}
    .fbar-sort{gap:6px;font-size:10.5px;letter-spacing:.1em}
    .fbar-sort select{padding:8px 10px;font-size:11.5px;max-width:46vw}
    .fbar-sub-in{padding:10px 24px 12px}
    .fbar-subtabs{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:6px;
      width:100%;
    }
    .fbar-subtab{
      width:100%;
      padding:10px 8px;font-size:10px;letter-spacing:.06em;gap:4px;
      white-space:normal;line-height:1.35;
      justify-content:center;text-align:center;
    }
    .fbar-note .container{padding-left:24px;padding-right:24px}
    .fbar-note p{padding:12px 0;font-size:13px}
  }

  @media (max-width:420px){
    .fbar-tabs{gap:6px}
    .fbar-tab{padding:10px 8px;font-size:10px}
  }

/* --- 产品网格样式 --- */
  /* 上 74px 与筛选条拉开距离；下 104px 让最后一行产品卡与下方「服务承诺条」有足够呼吸空间 */
  .pgrid-wrap{padding:74px 0 104px}
  /* 一排四个，双排以上自动换行 */
  .pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 26px;align-items:stretch}

  /* 单张产品卡 */
  .pcard{position:relative;display:flex;flex-direction:column;height:100%}
  .pcard-media{position:relative;display:block;overflow:hidden;background:var(--sand);aspect-ratio:1/1;flex:none}
  .pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
  .pcard:hover .pcard-media img{transform:scale(1.05)}

  /* 悬浮出现的底部按钮条 */
  .pcard-cta{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:rgba(30,27,23,.9);color:#fff;
    font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    padding:14px 10px;transform:translateY(100%);transition:transform .45s var(--ease);
  }
  .pcard-cta svg{width:13px;height:13px}
  .pcard:hover .pcard-cta{transform:translateY(0)}

  /* 文字信息区 */
  .pcard-body{padding-top:20px;display:flex;flex-direction:column;flex:1}
  .pcard-name{
    font-family:var(--font-serif);font-weight:400;font-size:19px;line-height:1.4;color:var(--ink);
    min-height:2.8em;display:flex;align-items:flex-start;   /* 预留两行高度，让下方小字对齐 */
  }
  .pcard-name a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .45s var(--ease)}
  .pcard:hover .pcard-name a{background-size:100% 1px}
  .pcard-spec{margin-top:9px;font-size:12.5px;color:var(--muted);line-height:1.6}

  /* 底部操作区：左侧两个链接并排，右侧 MOQ */
  .pcard-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .pcard-foot span{font-size:11.5px;color:var(--muted);letter-spacing:.1em}
  .pcard-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

  /* 无结果提示 */
  .pgrid-empty{display:none;text-align:center;padding:70px 0 10px;color:var(--muted)}
  .pgrid-empty.is-on{display:block}
  .pgrid-empty b{display:block;font-family:var(--font-serif);font-size:22px;font-weight:400;color:var(--ink);margin-bottom:10px}

  @media (max-width:1100px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (max-width:820px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}}
  @media (max-width:480px){.pgrid{grid-template-columns:1fr;gap:30px}}
  /* 窄屏等比收一收底部留白，避免页面纵向过长 */
  @media (max-width:680px){.pgrid-wrap{padding:58px 0 72px}}

/* --- 分页样式 --- */
  /* 注意：底部留白已由 .pgrid-wrap 的 padding-bottom 统一负责，这里不再重复加内边距 */
  .pg-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:66px;padding-bottom:0}
  .pg-nav.is-off{display:none}
  .pg-btn,.pg-num{
    min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line);color:var(--ink);background:#fff;
    font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    text-decoration:none;
    transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  }
  .pg-num{font-size:12.5px;letter-spacing:0}
  a.pg-btn:hover,a.pg-num:hover{background:var(--ink);border-color:var(--ink);color:#fff}
  .pg-num.is-on,span.pg-num.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
  .pg-btn.is-off{opacity:.35;pointer-events:none}

/* --- 服务承诺条样式 --- */
  .sv{background:var(--cream);padding:76px 0}
  .sv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
  .sv-item{background:var(--cream);padding:40px 32px 38px;transition:background .4s var(--ease)}
  .sv-item:hover{background:#fff}
  .sv-icon{display:block;width:34px;height:34px;object-fit:contain;margin-bottom:20px}
  .sv-name{font-family:var(--font-serif);font-weight:400;font-size:20px;line-height:1.35;color:var(--ink);margin-bottom:12px}
  .sv-text{font-size:13.5px;color:var(--body)}
  @media (max-width:1000px){.sv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.sv-grid{grid-template-columns:1fr}.sv-item{padding:30px 22px}}