/* ==========================================================================
   九渡 VIS 网站 · 组件补充
   --------------------------------------------------------------------------
   继承 vis.css 的令牌与规范；本文件只新增组件，不覆盖已定义的基础样式。
   规范依据：《九渡 VIS 视觉形象识别手册》A 基础系统
     A-14 标准色 · A-15 色阶 · A-19 专用字体 · A-13 安全留白
   禁止：渐变 / 投影 / 发光 / 描边 / 半透明 / 圆角
   ========================================================================== */

/* ---------------------------------------------------------- 内页页头 */
.page-banner{background:var(--k);color:var(--w);padding:64px 0 56px}
.page-banner .eyebrow{color:var(--g3)}
.page-banner h1{color:var(--w);margin-top:16px;font-size:clamp(26px,3.6vw,44px)}
.page-banner p{margin-top:16px;max-width:58ch;color:var(--g4)}
.page-banner .rule{margin-top:22px}
/* A-13 安全留白：页头标志与标题间距 = 图形标高 ÷ 4 */
.page-banner .mark{height:52px;width:auto;margin-bottom:26px}

.crumb{font-family:var(--en);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g3);padding:18px 0;
  border-bottom:1px solid var(--g5)}
.crumb a:hover{color:var(--k)}

/* ---------------------------------------------------------- 理念区块 */
/* 品牌释义：左序号 + 右释义，纯文字，庄重 */
.belief{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--k)}
.belief > div{padding:38px 32px;border-right:1px solid var(--k)}
.belief > div:last-child{border-right:0}
.belief .zi{font-size:52px;font-weight:700;line-height:1;margin-bottom:16px}
.belief .zi em{font-style:normal;color:var(--y)}
.belief h3{margin-bottom:10px}
.belief p{font-size:14.5px;color:var(--g1)}

/* 理念长文：大字引文 + 释义 */
.creed{max-width:76ch;margin:0 auto;text-align:center}
.creed .big{font-family:var(--kai);font-size:clamp(26px,3.4vw,42px);
  line-height:1.6;font-weight:400}
.creed .sub{margin-top:26px;color:var(--g2);font-size:15px}

/* 三愿 / 承诺条目：编号式（大号品牌黄序号），无横线 */
.vows{display:grid;grid-template-columns:repeat(3,1fr);gap:52px;margin-top:60px}
.vow .idx{display:block;font-family:var(--en);font-size:34px;line-height:1;font-weight:400;
  letter-spacing:.06em;color:var(--y);margin-bottom:18px}
.vow b{display:block;font-size:18px;margin-bottom:10px}
.vow p{font-size:14.5px;color:var(--g1)}

/* ---------------------------------------------------------- 流程步骤 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--k);border-bottom:1px solid var(--k)}
.steps > div{padding:30px 24px;border-right:1px solid var(--g5)}
.steps > div:last-child{border-right:0}
.steps .no{font-family:var(--en);font-size:12px;letter-spacing:.2em;
  color:var(--g2);display:block;margin-bottom:12px}
.steps b{display:block;font-size:16px;margin-bottom:8px}
.steps p{font-size:14px;color:var(--g1)}

/* 纵向时间线（制作工艺） */
.tl{border-left:2px solid var(--k);margin-left:8px;padding-left:30px}
.tl > div{position:relative;padding-bottom:34px}
.tl > div:last-child{padding-bottom:0}
.tl > div::before{content:"";position:absolute;left:-38px;top:7px;
  width:14px;height:14px;background:var(--y);border:2px solid var(--k)}
.tl .no{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--g2)}
.tl b{display:block;font-size:16px;margin:6px 0 6px}
.tl p{font-size:14px;color:var(--g1)}

/* ---------------------------------------------------------- 产品网格 */
.filters{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--k);margin-bottom:36px}
.filters button{
  flex:1 1 auto;min-width:0;padding:15px 8px;border:0;border-right:1px solid var(--k);
  background:var(--w);color:var(--k);cursor:pointer;
  font-family:var(--en);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;transition:background .15s,color .15s;
}
.filters button:last-child{border-right:0}
.filters button:hover{background:var(--g6)}
.filters button[aria-pressed="true"]{background:var(--k);color:var(--y)}

.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}
.prod-card{display:block;border:1px solid var(--g5);background:var(--w)}
.prod-card:hover{border-color:var(--k)}
.prod-card .ph{aspect-ratio:1/1;overflow:hidden;background:var(--g6);
  border-bottom:1px solid var(--g5)}
.prod-card .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .3s}
.prod-card:hover .ph img{transform:scale(1.03)}
.prod-card .meta{padding:14px 15px 16px}
.prod-card .code{font-family:var(--en);font-size:11px;letter-spacing:.14em;
  color:var(--g2)}
.prod-card .nm{font-size:14.5px;font-weight:700;margin-top:5px;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.prod-card .views{font-family:var(--en);font-size:11px;color:var(--g3);font-weight:400}
.empty{text-align:center;padding:80px 0;color:var(--g2)}
.more-row{text-align:center;margin-top:44px}

/* ---------------------------------------------------------- 车间照片 */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery figure{aspect-ratio:1;overflow:hidden;background:var(--g6);
  border:1px solid var(--g5)}
.gallery img{width:100%;height:100%;object-fit:cover}

/* 大图 + 说明（about / services） */
.figrow{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:start}
.figrow figure{overflow:hidden;background:var(--g6);border:1px solid var(--g5)}
.figrow img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------------------------------------------------------- 表单 */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-size:13px;font-weight:700}
.field label .req{color:var(--k);font-family:var(--en)}
.field input,.field select,.field textarea{
  font-family:var(--cn);font-size:15px;color:var(--k);
  background:var(--w);border:1px solid var(--k);padding:13px 14px;
  line-height:1.6;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--y);outline-offset:0}
.form .actions{grid-column:1 / -1;display:flex;align-items:center;gap:18px}
.form-msg{font-size:14px;color:var(--g1)}

/* ---------------------------------------------------------- 联系信息 */
.info-list{border-top:1px solid var(--k)}
.info-list > div{display:grid;grid-template-columns:180px 1fr;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--g5)}
.info-list dt,.info-list .k{font-size:13px;font-weight:700}
.info-list .v{font-size:15px;color:var(--g1)}
.info-list .v .en{font-family:var(--en)}
.info-list .note{font-size:13.5px;color:var(--g2);margin-top:4px}

/* ---------------------------------------------------------- 产品详情页 */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.pd-main{border:1px solid var(--k);background:var(--g6);aspect-ratio:1/1;overflow:hidden}
.pd-main img{width:100%;height:100%;object-fit:contain}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd-thumbs button{width:78px;height:78px;padding:0;border:1px solid var(--g5);
  background:var(--g6);cursor:pointer;overflow:hidden}
.pd-thumbs button[aria-pressed="true"],.pd-thumbs button:hover{border-color:var(--k)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pd-code{font-family:var(--en);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--k);margin-bottom:14px}
.pd-name{font-size:clamp(26px,3.4vw,40px);line-height:1.3}
.pd-name-en{font-family:var(--en);font-size:15px;color:var(--g2);margin-top:6px}
.pd-tag{font-size:15px;color:var(--k);margin:20px 0;padding:14px 0;
  border-top:1px solid var(--g5);border-bottom:1px solid var(--g5)}
.spec{width:100%;border-collapse:collapse;margin-bottom:30px}
.spec tr{border-bottom:1px solid var(--g5)}
.spec td{padding:13px 8px;font-size:14.5px;vertical-align:top;color:var(--g1)}
.spec td:first-child{color:var(--g2);width:130px;font-size:12.5px;letter-spacing:.06em;
  font-family:var(--en)}
.pd-actions{display:flex;gap:14px;flex-wrap:wrap}

.detail2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.detail2 figure{margin:0;border:1px solid var(--g5);background:var(--w)}
.detail2 img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.detail2 figcaption{padding:16px 18px;font-size:14px;color:var(--g1);
  border-top:1px solid var(--g5)}
.detail2 figcaption strong{color:var(--k);font-weight:700;margin-right:6px}

/* ---------------------------------------------------------- 工具类 */
.mt6{margin-top:6px}.mt14{margin-top:14px}.mt22{margin-top:22px}
.mt38{margin-top:38px}.mt56{margin-top:56px}
.mb0{margin-bottom:0}
.tc{text-align:center}
.mini{font-size:13.5px;color:var(--g2)}
.nowrap{white-space:nowrap}

/* ---------------------------------------------------- 响应式补充 */
@media (max-width:960px){
  .pd{grid-template-columns:1fr;gap:34px}
  .detail2{grid-template-columns:1fr}
  .belief{grid-template-columns:1fr}
  .belief > div{border-right:0;border-bottom:1px solid var(--k)}
  .belief > div:last-child{border-bottom:0}
  .vows{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps > div{border-bottom:1px solid var(--g5)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .figrow{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .info-list > div{grid-template-columns:1fr;gap:6px}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr}
  .steps > div{border-right:0}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .filters button{min-width:50%;flex:1 1 50%}
}