/* 客户定制栏目（2026-10-24）
   5 个 hub 页专用组件：参考款轮播、5 步流程、面料/工艺图片卡、规格表、对比栏、FAQ、CTA。
   单独一个文件，避免和前台其它页面的 site.css 互相影响。 */

/* 不可点击的一级菜单「关于我们」 */
.tn .cell-parent{cursor:default}
.tn .cell-parent:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- 参考款（后台「定制管理」配置）---------- */
.gk-car-wrap{position:relative;margin-top:26px}
.gk-car{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
/* 平铺模式固定 4 列：不足 4 个时卡片保持同样大小，不会被拉宽（客户 2026-10-25 要求） */
.gk-car-wrap.is-grid .gk-car{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}
@media (max-width:1080px){.gk-car-wrap.is-grid .gk-car{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.gk-car-wrap.is-grid .gk-car{grid-template-columns:1fr}}
.gk-ref{scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.gk-ref-pic{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--ink-3);border:1px solid var(--line-2);border-radius:2px}
.gk-ref-pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gk-ref:hover .gk-ref-pic img{transform:scale(1.05)}
.gk-ref b{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.35;color:var(--fg)}
.gk-ref i{font-style:normal;font-size:11px;letter-spacing:.12em;color:var(--gold)}
.gk-car-btn{display:none;position:absolute;top:34%;z-index:3;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:rgba(12,12,12,.72);color:#F3EFE7;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.25s}
.gk-car-btn svg{width:16px;height:16px}
.gk-car-btn:hover{background:var(--gold);color:#1A1408;border-color:var(--gold)}
.gk-car-btn[disabled]{opacity:.25;cursor:default}
.gk-car-wrap.is-scroll .gk-car-btn{display:grid}
.gk-car-btn.prev{left:-10px}
.gk-car-btn.next{right:-10px}
@media (max-width:760px){
  .gk-car-btn{display:none!important}
  .gk-car{grid-auto-columns:74%}
}

/* ---------- 5 步流程 ---------- */
.gk-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
.gk-step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line-2)}
.gk-step-no{font-family:var(--serif);font-size:20px;color:var(--gold);line-height:1.2}
.gk-step b{display:block;font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);font-weight:600;margin-bottom:6px}
.gk-step p{margin:0;color:var(--muted);font-size:14px;line-height:1.75;max-width:62ch}

/* ---------- 面料 / 工艺图片卡 ---------- */
/* 面料固定 4 列、工艺固定 3 列（客户 2026-10-25：工艺一行三个，别挤成 5 个） */
.gk-cards{display:grid;gap:18px;margin-top:26px;grid-template-columns:repeat(4,1fr)}
.gk-cards.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.gk-cards,.gk-cards.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.gk-cards,.gk-cards.g3{grid-template-columns:1fr}}
.gk-card{border:1px solid var(--line-2);border-radius:3px;overflow:hidden;background:var(--ink-2);
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.gk-card:hover{border-color:var(--line);transform:translateY(-4px)}
.gk-card-pic{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.gk-card-pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gk-card:hover .gk-card-pic img{transform:scale(1.05)}
.gk-card-body{padding:14px 16px 18px}
.gk-card-body b{display:block;font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.35;margin-bottom:4px}
.gk-card-body i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.gk-card-body p{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}

/* ---------- 规格表 ---------- */
.gk-spec{margin-top:24px;border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.gk-spec table{width:100%;border-collapse:collapse}
.gk-spec th,.gk-spec td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2);font-size:14px;line-height:1.7}
.gk-spec tr:last-child th,.gk-spec tr:last-child td{border-bottom:0}
.gk-spec th{width:32%;font-weight:500;color:var(--muted-2);letter-spacing:.04em;white-space:nowrap}
.gk-spec td{color:var(--fg)}
@media (max-width:680px){
  .gk-spec th{width:40%;white-space:normal;font-size:13px}
  .gk-spec th,.gk-spec td{padding:12px 14px}
}

/* ---------- 「我们 vs 贸易商」对比 ---------- */
.gk-cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
@media (max-width:880px){.gk-cmp{grid-template-columns:1fr}}
.gk-cmp-col{border:1px solid var(--line-2);border-radius:3px;padding:22px 22px 8px;background:var(--ink-2)}
.gk-cmp-col h3{margin:0 0 16px;font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);font-weight:600}
.gk-cmp-col ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.gk-cmp-col li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.gk-cmp-col li i{display:block;width:18px;height:18px;position:relative;margin-top:2px}
.gk-cmp-col li i::before{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;line-height:1}
.gk-cmp-col li b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
.gk-cmp-col li span{font-size:13.5px;line-height:1.7;color:var(--fg)}
.gk-cmp-col.own li i::before{content:"✓";color:var(--gold)}
.gk-cmp-col.trade{background:transparent;border-style:dashed}
.gk-cmp-col.trade li i::before{content:"✕";color:var(--muted-2)}
.gk-cmp-col.trade li span,.gk-cmp-col.trade h3{color:var(--muted)}

/* ---------- FAQ ---------- */
.gk-faq{margin-top:24px;border-top:1px solid var(--line-2)}
.gk-faq-item{border-bottom:1px solid var(--line-2)}
.gk-faq-item summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--serif);font-size:clamp(16px,1.4vw,19px);font-weight:600;line-height:1.45}
.gk-faq-item summary::-webkit-details-marker{display:none}
.gk-faq-item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:20px;color:var(--gold);transition:transform .3s}
.gk-faq-item[open] summary::after{content:"–"}
.gk-faq-item p{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.8;max-width:70ch}

/* ---------- 底部 CTA ---------- */
.gk-cta{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:4px;padding:clamp(24px,3vw,40px);
  background:linear-gradient(120deg,rgba(201,162,74,.10),transparent 60%)}
.gk-cta h3{margin:0 0 8px;font-family:var(--serif);font-size:clamp(21px,2.2vw,30px);font-weight:600}
.gk-cta p{margin:0;color:var(--muted);font-size:14px;line-height:1.75;max-width:56ch}
.gk-cta .btn-main{white-space:nowrap}