/* ============================================================
   Steed Sports · Product range page
   依赖 styles.css 的设计 Token；本文件只定义 products.html 专属布局
   铁律：新样式一律写在文件末尾的区域，避免被 styles.css 的 !important 压掉
   ============================================================ */

/* ========== 页面头（轻量排版头，与 photo library 同族） ========== */
.pd-head{padding:132px 0 26px;background:var(--bg)}
.pd-head .sec-eyebrow{margin-bottom:16px}
.pd-h1{font-size:clamp(36px,5.2vw,64px);font-weight:800;line-height:1.05;letter-spacing:-.038em;color:var(--ink);margin:0 0 18px;max-width:18ch}
.pd-lead{font-size:clamp(15px,1.5vw,18px);line-height:1.62;color:var(--gray);max-width:64ch;margin:0}
.pd-lead b{color:var(--ink-2);font-weight:600}
.pd-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;font-size:12.5px;color:var(--gray-2);letter-spacing:.02em}
.pd-facts span{display:inline-flex;align-items:center;gap:8px}
.pd-facts b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.pd-facts i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange)}

/* ========== 分类 chips（吸顶） ========== */
.pd-tabs{position:sticky;top:var(--nav-h);z-index:30;background:rgba(245,245,247,.82);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* 产品页不属于采购决策链，隐藏左侧轨道 */
.trail{display:none!important}
.pd-tabs-inner{display:flex;gap:8px;overflow-x:auto;padding:12px 0;
  scrollbar-width:none;-ms-overflow-style:none}
.pd-tabs-inner::-webkit-scrollbar{display:none}
.pd-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:980px;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-2);font-size:12.5px;font-weight:500;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease}
.pd-tab:hover{border-color:rgba(0,0,0,.22);transform:translateY(-1px)}
.pd-tab b{font-size:11px;font-weight:700;color:var(--gray-2);font-variant-numeric:tabular-nums}
.pd-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pd-tab.on b{color:rgba(255,255,255,.6)}

/* ========== 类别区块 ========== */
.pd-main{background:var(--bg);padding:52px 0 0}
/* styles.css 有一条全局 section{padding:var(--pad-sec) 0}，会把每个类别区块撑开百来像素 */
.pd-group{padding:0;margin-bottom:74px;scroll-margin-top:calc(var(--nav-h) + 74px)}
.pd-group:last-of-type{margin-bottom:48px}
.pd-group-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px 56px;
  align-items:start;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.pd-group-t{min-width:0}
.pd-group-t h2{font-size:clamp(22px,2.5vw,30px);font-weight:700;letter-spacing:-.028em;color:var(--ink);margin:0 0 6px;line-height:1.15}
.pd-group-t p{font-size:13.5px;color:var(--gray);margin:0;line-height:1.5}
.pd-build{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.pd-build li{font-size:12.5px;line-height:1.5;color:var(--gray-2);position:relative;padding-left:15px}
.pd-build li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:1.5px;background:var(--orange)}
.pd-build-tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-3);margin-bottom:3px}

/* ========== 产品网格 ========== */
.pd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pd-card{display:block;text-decoration:none;background:var(--surface);border-radius:22px;overflow:hidden;
  border:var(--hair);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pd-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h)}
.pd-shot{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:#fff;cursor:zoom-in}
.pd-shot img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .7s var(--ease)}
.pd-card:hover .pd-shot img{transform:scale(1.045)}
.pd-info{padding:16px 18px 19px}
.pd-name{font-size:15.5px;font-weight:650;letter-spacing:-.012em;color:var(--ink);margin:0 0 5px;line-height:1.3}
.pd-cap{font-size:12.5px;line-height:1.5;color:var(--gray-2);margin:0}

/* ========== 结构单元（大底 / 中底） ========== */
.pd-craft{background:var(--bg);padding:8px 0 96px}
.pd-craft-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px}
.pd-craft figure{margin:0;background:var(--surface);border-radius:20px;overflow:hidden;
  border:var(--hair);box-shadow:var(--shadow-sm);cursor:zoom-in;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pd-craft figure:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h)}
.pd-craft-shot{position:relative;aspect-ratio:2/1;overflow:hidden;background:#fff}
.pd-craft-shot img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .7s var(--ease)}
.pd-craft figure:hover .pd-craft-shot img{transform:scale(1.045)}
.pd-craft figcaption{padding:14px 16px 16px;font-size:12.5px;line-height:1.45;color:var(--gray-2)}
.pd-craft figcaption b{display:block;font-size:14px;font-weight:650;color:var(--ink);letter-spacing:-.01em;margin-bottom:4px}

/* ========== 定制维度 ========== */
.pd-custom{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:92px 0}
.pd-custom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px}
.pd-custom-item{background:var(--bg);border-radius:18px;padding:22px 22px 24px;border:var(--hair);min-height:134px}
.pd-custom-item h3{font-size:15px;font-weight:650;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em}
.pd-custom-item p{font-size:13px;line-height:1.55;color:var(--gray);margin:0}

/* ========== 三条采购路径 ========== */
.pd-paths{background:var(--bg);padding:92px 0}
.pd-path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.pd-path{display:flex;flex-direction:column;background:var(--surface);border-radius:22px;
  padding:26px 26px 24px;border:var(--hair);box-shadow:var(--shadow-sm);text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pd-path:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h)}
.pd-path-n{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.pd-path h3{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 9px}
.pd-path p{font-size:13.5px;line-height:1.58;color:var(--gray);margin:0 0 20px}
.pd-path-g{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.pd-path:hover .pd-path-g{color:var(--orange)}
.pd-path-g svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.pd-path:hover .pd-path-g svg{transform:translateX(3px)}

/* ========== 页尾 CTA ========== */
.pd-cta{background:var(--bg);padding:72px 0 96px}
.pd-cta-in{background:var(--surface);border-radius:28px;padding:46px 48px;border:var(--hair);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:center;
  box-shadow:var(--shadow)}
.pd-cta-in h2{font-size:clamp(21px,2.4vw,28px);font-weight:700;letter-spacing:-.026em;color:var(--ink);margin:0 0 10px;line-height:1.2}
.pd-cta-in p{font-size:14px;line-height:1.6;color:var(--gray);margin:0}
.pd-cta-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

/* ========== 面包屑 ========== */
.pd-crumb{background:var(--bg);padding:14px 0 0}
.pd-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;
  font-size:12px;color:var(--gray-2)}
.pd-crumb li{display:inline-flex;align-items:center;gap:8px}
.pd-crumb li+li::before{content:'/';color:var(--gray-3)}
.pd-crumb a{color:var(--gray-2);text-decoration:none}
.pd-crumb a:hover{color:var(--ink);text-decoration:underline}
.pd-crumb li[aria-current]{color:var(--ink);font-weight:600}

/* ========== 分类卡片（Hub） ========== */
.pd-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pd-cat{display:block;background:var(--surface);border-radius:22px;overflow:hidden;border:var(--hair);
  box-shadow:var(--shadow-sm);text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pd-cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h)}
.pd-cat-img{aspect-ratio:4/3;overflow:hidden;background:#fff}
.pd-cat-img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .7s var(--ease)}
.pd-cat:hover .pd-cat-img img{transform:scale(1.05)}
.pd-cat-t{padding:16px 18px 19px;display:flex;flex-direction:column;min-height:118px}
.pd-cat-t h2{font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px;line-height:1.25}
.pd-cat-t p{font-size:12.5px;line-height:1.5;color:var(--gray-2);margin:0 0 12px}
.pd-cat-n{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.pd-cat:hover .pd-cat-n{color:var(--orange)}
.pd-cat-n svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.pd-cat:hover .pd-cat-n svg{transform:translateX(3px)}

/* ========== 产品详情页 ========== */
.pd-item{background:var(--bg);padding:20px 0 0}
.pd-item-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px 56px;align-items:start}
.pd-item-shot{aspect-ratio:1/1;border-radius:24px;background:#fff;border:var(--hair);
  box-shadow:var(--shadow-sm);cursor:zoom-in}
.pd-item-shot img{width:100%;height:100%;object-fit:contain;display:block;padding:10px}
.pd-item-note{font-size:11.5px;line-height:1.5;color:var(--gray-3);margin:12px 0 0;text-align:center}
.pd-item-body{padding-top:4px;display:flex;flex-direction:column}
.pd-item-body > *{order:20}
.pd-item-body > .sec-eyebrow{order:1}
.pd-item-body > .pd-item-h1{order:2}
.pd-item-body > .pd-item-mat{order:3}
.pd-item-body > .pd-item-desc{order:4}
.pd-item-body > .pd-item-act{order:5}
.pd-item-body > .pd-item-h2{order:6}
.pd-item-body > .pd-spec{order:7}
.pd-item-body > .pd-item-fine{order:8}
.pd-item-h1{font-size:clamp(26px,3.4vw,42px);font-weight:800;line-height:1.08;letter-spacing:-.034em;
  color:var(--ink);margin:8px 0 10px}
.pd-item-mat{font-size:13.5px;line-height:1.55;color:var(--gray);margin:0 0 18px}
.pd-item-desc{font-size:14px;line-height:1.68;color:var(--gray);margin:0 0 16px}
.pd-item-desc p{margin:0 0 12px}
.pd-item-h2{font-size:15px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--gray-3);margin:0 0 14px}
.pd-spec{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 14px}
.pd-spec th,.pd-spec td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.pd-spec th{width:38%;font-weight:500;color:var(--gray-2);padding-right:16px}
.pd-spec td{color:var(--ink-2);line-height:1.5}
.pd-item-fine{font-size:12px;line-height:1.55;color:var(--gray-3);margin:0 0 22px;
  padding:12px 14px;background:var(--surface);border-radius:12px;border:var(--hair)}
.pd-item-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  position:sticky;top:calc(var(--nav-h, 52px) + 12px);z-index:6;
  background:var(--bg);padding:10px 0 14px;margin:0 0 22px;
  box-shadow:0 12px 16px -12px rgba(0,0,0,.12)}

.pd-item-block{padding:64px 0 0}
.pd-faq{display:flex;flex-direction:column;gap:10px;max-width:78ch}
.pd-faq-item{background:var(--surface);border-radius:16px;border:var(--hair);overflow:hidden}
.pd-faq-item summary{cursor:pointer;padding:16px 20px;font-size:14.5px;font-weight:600;color:var(--ink);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pd-faq-item summary::-webkit-details-marker{display:none}
.pd-faq-item summary::after{content:'+';font-size:19px;font-weight:400;color:var(--gray-2);flex:0 0 auto}
.pd-faq-item[open] summary::after{content:'\2212'}
.pd-faq-item p{padding:0 20px 18px;margin:0;font-size:13.5px;line-height:1.62;color:var(--gray)}

/* ========== 响应式 ========== */
@media (max-width:1100px){
  .pd-item-act{top:auto;bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--surface);border:var(--hair);border-radius:16px;padding:10px 12px;
    box-shadow:var(--shadow-sm);margin:8px 0 12px}
  .pd-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-item-grid{grid-template-columns:1fr;gap:30px}
  .pd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-craft-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-custom-grid,.pd-path-grid{grid-template-columns:1fr}
  .pd-group-head{grid-template-columns:1fr;gap:16px}
  .pd-cta-in{grid-template-columns:1fr;padding:34px 28px}
  .pd-cta-act{justify-content:flex-start}
}
@media (max-width:768px){
  .pd-head{padding:116px 0 22px}
  .pd-main{padding:36px 0 0}
  .pd-group{margin-bottom:56px}
  .pd-grid{gap:14px}
  .pd-info{padding:13px 14px 15px}
  .pd-name{font-size:14px}
  .pd-cap{font-size:11.5px}
  .pd-craft{padding:8px 0 72px}
  .pd-custom,.pd-paths{padding:68px 0}
  .pd-cta{padding:44px 0 72px}
}
@media (max-width:460px){
  /* 2026-10-08 首页瘦身同款手法（张总：菜单页逐页控长度）：
     460px 以下原先产品卡/品类卡全强制单列——28 张产品卡竖排 11.1 屏、
     7 张品类卡竖排 3.3 屏，Products 页手机端被撑到 18.2 屏。 */
  /* 产品卡：回到双列（电商列表惯例），窄卡不放材质描述（详情页有），只留名称 */
  .pd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .pd-cap{display:none}
  .pd-name{font-size:13px;-webkit-line-clamp:2}
  .pd-info{padding:11px 12px 13px}

  /* 品类卡：横滑单排出血（右侧露边暗示可滑），与首页六宫格同款交互；3.3 屏 → 约 0.5 屏 */
  .pd-cat-grid{
    display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding:2px 22px 14px;margin:0 -22px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pd-cat-grid::-webkit-scrollbar{display:none}
  .pd-cat{flex:0 0 76%;max-width:76%;scroll-snap-align:start}
  .pd-cat-img{aspect-ratio:16/9}
  .pd-cat-t{min-height:0;padding:13px 15px 16px}

  .pd-craft-in{gap:12px}
  .pd-build li{font-size:12px}
  .pd-item-block{padding:48px 0 0}
}

/* ========== 产品页询盘表 ========== */
#inquire{scroll-margin-top:84px}
.pd-cta-in.has-form{align-items:start;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);gap:36px}
.pd-cta-in.has-form .sec-eyebrow{margin-bottom:10px}
.pd-inq-ref{font-size:13px;line-height:1.5;color:var(--ink-2);padding:12px 14px;background:var(--bg-2,#f5f5f7);
  border-radius:12px;border:var(--hair);margin:14px 0 0}
.pd-inq-form{display:block}
.pd-inq-form .pd-inq-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.pd-inq-form .pd-inq-field{display:flex;flex-direction:column;gap:4px}
.pd-inq-form label{font-size:11px;font-weight:600;color:var(--ink-2);letter-spacing:.04em}
.pd-inq-form input,.pd-inq-form select,.pd-inq-form textarea{
  padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;font-family:inherit;font-size:13px;
  background:#fbfbfd;width:100%;box-sizing:border-box;color:var(--ink)}
.pd-inq-form textarea{min-height:84px;resize:vertical}
.pd-inq-form .pd-inq-pack{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;font-size:12.5px;
  line-height:1.45;color:var(--ink-2);cursor:pointer}
.pd-inq-form .pd-inq-pack input{width:auto;margin-top:2px}
.pd-inq-form button[type=submit]{width:100%;padding:12px;background:var(--orange);color:#fff;border:none;
  border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.pd-inq-note{margin:12px 0 0;font-size:11.5px;line-height:1.6;color:var(--gray);text-align:center}
.pd-inq-form .form-status{display:none;margin-top:14px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.5}
@media (max-width:1100px){
  .pd-cta-in.has-form{grid-template-columns:1fr}
  .pd-inq-form .pd-inq-row{grid-template-columns:1fr}
}

/* ========== 认证信任条（2026-10-08 张总拍板）==========
   认证要在产品页被看见：买家点开任意一款鞋都撞见 ISO 三证 + SMETA 4-Pillar，
   入口指向 factory-credentials.html。
   措辞纪律见 09_内容营销/认证内容体系-真值源-2026-10-08.md
   —— SMETA 只写 audited，禁 certified（审计 ≠ 认证）。 */
.pd-cert{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-top:44px;padding:20px 24px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px}
.pd-cert-main{flex:1 1 340px;min-width:0}
.pd-cert-k{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange)}
.pd-cert-t{margin:7px 0 0;font-size:14px;line-height:1.55;color:var(--gray)}
.pd-cert-t b{color:var(--ink);font-weight:600}
.pd-cert-a{flex:0 0 auto;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;
  padding-bottom:2px;border-bottom:1.5px solid var(--orange);transition:opacity .25s var(--ease)}
.pd-cert-a:hover{opacity:.65}
@media (max-width:900px){
  .pd-cert{margin-top:34px;padding:18px}
  .pd-cert-main{flex:1 1 100%}
  .pd-cert-a{font-size:13px}
}

/* ── 2026-10-09 总览页「All=摘要视图」：每组 6 张代表款 + View all（学分类着陆页逻辑） ── */
body.pd-brief .pd-gfilter .pd-extra{display:none}
.pd-viewall-row{display:none}
body.pd-brief .pd-viewall-row{display:flex;justify-content:center;margin-top:26px}
.pd-viewall{
  display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:999px;
  font-size:14px;font-weight:600;color:var(--ink,#111);background:transparent;
  border:1.5px solid var(--line-2,#e2e2e6);cursor:pointer;
  transition:border-color .3s,color .3s,background .3s;
}
.pd-viewall svg{width:17px;height:17px}
.pd-viewall:hover{border-color:rgba(255,87,34,.5);color:#ff5722;background:#fff}
@media (max-width:460px){
  body.pd-brief .pd-gfilter .pd-extra{display:none}
  .pd-viewall{padding:11px 22px;font-size:13px}
}
@media (max-width:460px){
  /* 手机 All 摘要视图：每组 4 张（2 满行），进一步压长度 */
  body.pd-brief .pd-gfilter .pd-card:nth-child(n+5){display:none}
}