/* ============================================================
   款式详情页专属样式（Newest Styles / 样板页共用）
   从 _draft-ember-volt-runner-650471.html 页内样式提取为独立文件
   ============================================================ */

  /* ================= 图廊 ================= */
  .pd-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center}
  .pd-thumb{width:84px;height:84px;border-radius:14px;overflow:hidden;border:1.5px solid #e5e5ea;padding:0;background:#fff;cursor:pointer;flex:0 0 auto}
  .pd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .pd-thumb[aria-current="true"]{border-color:#1c1c1e}
  .pd-cz-note{font-size:12px;color:var(--gray-3,#6e6e73);margin:10px 0 0}

  /* ================= 首屏 ================= */
  /* 模板用 .pd-item-body>*{order:20} 排序：新增元素必须显式给 order，否则沉底 */
  .pd-item-body > .pd-bullets{order:4}
  .pd-item-body > .pd-qf{order:5}
  .pd-item-body > .pd-item-desc{order:6}
  .pd-item-body > .pd-item-act{order:7}
  .pd-item-body > .pd-item-h2{order:8}
  .pd-item-body > .pd-spec{order:9}
  .pd-item-body > .pd-item-fine{order:10}
  .pd-bullets{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
  .pd-bullets li{position:relative;padding-left:19px;font-size:13.5px;line-height:1.5;color:var(--gray-2,#6e6e73)}
  .pd-bullets li::before{content:'';position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:2px;background:var(--orange,#FF5722)}
  .pd-bullets b{color:var(--ink,#1d1d1f);font-weight:650}
  .pd-qf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 18px}
  .pd-qf div{background:var(--surface,#fff);border:var(--hair,1px solid #e8e8ed);border-radius:13px;padding:10px 13px 11px;min-width:0}
  .pd-qf dt{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gray-3,#8e8e93);margin:0 0 3px}
  .pd-qf dd{margin:0;font-size:12.5px;font-weight:600;color:var(--ink,#1d1d1f);line-height:1.4}

  /* ================= 锚点条 ================= */
  .pd-anchor{margin:34px 0 0}
  .pd-item-h2[id], .pd-item-block[id]{scroll-margin-top:calc(var(--nav-h,52px) + 62px)}

  /* ================= 通用 ================= */
  .viz{margin:0}
  .viz-cap{font-size:12px;line-height:1.5;color:var(--gray-3,#8e8e93);margin:12px 0 0}
  .viz-cap b{color:var(--gray-2,#6e6e73);font-weight:600}

  /* ================= A. 材料分层 ================= */
  .viz-an{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:30px 40px;align-items:center}
  .viz-an-stack{position:relative;height:268px;min-width:0}
  .viz-an-stack i{position:absolute;left:6%;width:74%;border-radius:5px;transform:skewX(-22deg);
    box-shadow:0 10px 18px -12px rgba(0,0,0,.35)}
  .viz-an-stack i::after{content:attr(data-k);position:absolute;right:0;top:50%;transform:translate(112%,-50%);
    font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-3,#8e8e93);white-space:nowrap}
  .viz-an-stack .l1{top:4px;height:30px;background:linear-gradient(135deg,#ff8a5c,#ff5722)}
  .viz-an-stack .l2{top:66px;height:20px;background:linear-gradient(135deg,#e8e8ed,#d2d2d7)}
  .viz-an-stack .l3{top:118px;height:56px;background:linear-gradient(135deg,#f6e7cf,#e8d3b0)}
  .viz-an-stack .l4{top:206px;height:24px;background:linear-gradient(135deg,#4a4a4d,#1d1d1f)}
  .viz-an-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;min-width:0}
  .viz-an-legend li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line,#e8e8ed)}
  .viz-an-legend li:last-child{border-bottom:0}
  .viz-an-legend b{grid-column:2;font-size:13.5px;font-weight:650;color:var(--ink,#1d1d1f);margin-bottom:2px}
  .viz-an-legend em{grid-column:2;font-style:normal;font-size:12.5px;line-height:1.45;color:var(--gray-2,#6e6e73)}
  .viz-an-legend s{display:block;width:14px;height:14px;border-radius:4px;margin-top:4px;text-decoration:none}
  .viz-an-legend .s1{background:#ff5722}
  .viz-an-legend .s2{background:#d2d2d7}
  .viz-an-legend .s3{background:#e8d3b0}
  .viz-an-legend .s4{background:#1d1d1f}

  /* ================= B. 工艺流程图 ================= */
  .viz-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
  .viz-flow li{position:relative;padding:0 10px 0 0;min-width:0}
  .viz-flow li::after{content:'';position:absolute;right:4px;top:26px;width:calc(100% - 56px);height:1px;
    background:repeating-linear-gradient(90deg,#c7c7cc 0 4px,transparent 4px 8px)}
  .viz-flow li::before{content:'';position:absolute;right:0;top:22px;width:6px;height:6px;
    border-top:1.5px solid #c7c7cc;border-right:1.5px solid #c7c7cc;transform:rotate(45deg)}
  .viz-flow li:last-child::after,.viz-flow li:last-child::before{display:none}
  .viz-flow .ic{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;
    background:#f5f5f7;border:0;margin-bottom:12px;position:relative;z-index:1}
  .viz-flow .ic svg{width:26px;height:26px;display:block;color:var(--ink,#1d1d1f)}
  .viz-flow .n{position:absolute;left:-1px;top:-15px;font-size:9.5px;font-weight:700;color:#b0b0b6;
    background:none;letter-spacing:.1em;font-variant-numeric:tabular-nums}
  .viz-flow b{display:block;font-size:12.5px;font-weight:650;color:var(--ink,#1d1d1f);line-height:1.3;margin-bottom:3px}
  .viz-flow em{display:block;font-style:normal;font-size:11px;line-height:1.35;color:var(--gray-3,#8e8e93)}

  /* ================= C. 下单时间轴 ================= */
  .viz-tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
  .viz-tl li{position:relative;padding:24px 12px 0 0;min-width:0}
  .viz-tl li::before{content:'';position:absolute;left:0;top:2px;width:11px;height:11px;border-radius:50%;
    background:var(--orange,#FF5722);box-shadow:0 0 0 4px rgba(255,87,34,.14)}
  .viz-tl li::after{content:'';position:absolute;left:15px;top:7px;width:calc(100% - 19px);height:1.5px;background:#e8e8ed}
  .viz-tl li:last-child::after{display:none}
  .viz-tl b{display:block;font-size:12.5px;font-weight:650;color:var(--ink,#1d1d1f);line-height:1.3;margin-bottom:3px}
  .viz-tl em{display:block;font-style:normal;font-size:11px;line-height:1.35;color:var(--gray-3,#8e8e93)}

  /* ================= D. 认证徽章 + 数字条 ================= */
  .viz-cert{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .viz-badge{display:flex;flex-direction:row;align-items:center;text-align:left;gap:12px;
    background:var(--surface,#fff);border:var(--hair,1px solid #e8e8ed);border-radius:14px;padding:15px 14px;min-width:0}
  .viz-badge svg{width:26px;height:26px;display:block;flex:0 0 26px;color:var(--ink,#1d1d1f)}
  .viz-badge .t{min-width:0}
  .viz-badge b{display:block;font-size:12.5px;font-weight:700;color:var(--ink,#1d1d1f);line-height:1.25;margin-bottom:2px;
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .viz-badge span{display:block;font-size:10.5px;font-weight:500;color:var(--gray-3,#8e8e93);line-height:1.3}
  .viz-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:18px;
    border-top:1px solid var(--line,#e8e8ed)}
  .viz-stats div{padding:16px 14px 0 0;min-width:0}
  .viz-stats b{display:block;font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.03em;color:var(--ink,#1d1d1f);line-height:1.05;font-variant-numeric:tabular-nums}
  .viz-stats span{display:block;margin-top:4px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-3,#8e8e93)}

  /* ================= E. 定制矩阵 ================= */
  .viz-mx{width:100%;border-collapse:collapse;font-size:13px}
  .viz-mx th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--gray-3,#8e8e93);padding:0 12px 8px 0;border-bottom:1px solid var(--line,#e8e8ed)}
  .viz-mx th:nth-child(1){width:26%}
  .viz-mx th:nth-child(3){width:100px;text-align:right}
  .viz-mx td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line,#e8e8ed);vertical-align:top;color:var(--ink-2,#3a3a3c);line-height:1.45}
  .viz-mx td:first-child{font-weight:600;color:var(--ink,#1d1d1f)}
  .viz-mx td:last-child{text-align:right;padding-right:0;white-space:nowrap}
  .viz-mx .ok{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:#0e7a3e;background:rgba(14,122,62,.09);border-radius:20px;padding:3px 8px}
  .viz-mx .lock{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:#8e5a00;background:rgba(142,90,0,.1);border-radius:20px;padding:3px 8px}

  /* ================= F. 装箱四级 ================= */
  .viz-pack{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:end}
  .viz-pack li{position:relative;text-align:center;padding-right:16px;min-width:0}
  .viz-pack li::after{content:'';position:absolute;right:6px;top:20px;width:8px;height:8px;
    border-top:1.5px solid #c7c7cc;border-right:1.5px solid #c7c7cc;transform:rotate(45deg)}
  .viz-pack li:last-child::after{display:none}
  .viz-pack svg{width:44px;height:44px;display:block;margin:0 auto 12px;color:var(--ink,#1d1d1f)}
  .viz-pack b{display:block;font-size:12px;font-weight:650;color:var(--ink,#1d1d1f)}
  .viz-pack em{display:block;font-style:normal;font-size:10.5px;line-height:1.35;color:var(--gray-3,#8e8e93);margin-top:2px}

  /* ================= G. FAQ 表 ================= */
  .viz-faq{width:100%;border-collapse:collapse;font-size:13px}
  .viz-faq th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--gray-3,#8e8e93);padding:0 14px 9px 0;border-bottom:1px solid var(--line,#e8e8ed)}
  .viz-faq th:first-child{width:32%}
  .viz-faq td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line,#e8e8ed);vertical-align:top;line-height:1.5}
  .viz-faq td:first-child{font-weight:600;color:var(--ink,#1d1d1f)}
  .viz-faq td:last-child{color:var(--gray-2,#6e6e73);padding-right:0}
  .viz-faq tr:last-child td{border-bottom:0}

  /* ================= 响应式 ================= */
  @media (max-width:1100px){
    .pd-item-grid{grid-template-columns:minmax(0,1fr)}
    .pd-item-media,.pd-item-body{min-width:0;max-width:100%}
    .pd-item-act{flex-wrap:wrap}
    .pd-item-act .btn{white-space:normal}
    .viz-an{grid-template-columns:minmax(0,1fr);gap:22px}
    .viz-an-stack{height:236px}
    .viz-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}
    .viz-flow li:nth-child(3n)::after,.viz-flow li:nth-child(3n)::before{display:none}
    .viz-tl{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px}
    .viz-tl li:nth-child(3n)::after{display:none}
  }
  @media (max-width:640px){
    .pd-thumb{width:68px;height:68px;border-radius:12px}
    .pd-thumbs{gap:8px}
    .pd-item-block{padding:44px 0 0}
    .viz-an-stack{height:212px}
    .viz-an-stack i::after{display:none}
    .viz-flow{grid-template-columns:minmax(0,1fr);gap:0}
    .viz-flow li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 16px;padding:0 0 20px;align-items:start}
    .viz-flow li::after,.viz-flow li::before{display:none}
    .viz-flow .ic{grid-row:1 / span 2;margin-bottom:0}
    .viz-flow b{grid-column:2;margin-top:6px}
    .viz-flow em{grid-column:2}
    .viz-tl{grid-template-columns:minmax(0,1fr);gap:0}
    .viz-tl li{padding:0 0 20px 24px}
    .viz-tl li::before{top:2px}
    .viz-tl li::after{left:5px;top:15px;width:1.5px;height:calc(100% - 12px)}
    .viz-cert{grid-template-columns:repeat(2,minmax(0,1fr))}
    .viz-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .viz-stats div{padding:14px 10px 0 0}
    .viz-pack li{padding-right:8px}
    .viz-pack svg{width:36px;height:36px;margin-bottom:10px}
    .viz-pack li::after{top:16px;right:2px;width:6px;height:6px}
    .viz-pack b{font-size:11px}
    .viz-pack em{font-size:9.5px}
    .viz-mx th:nth-child(1){width:34%}
    .viz-mx th:nth-child(3){width:78px}
    .viz-mx td,.viz-mx th{padding-right:8px}
    .viz-mx .ok,.viz-mx .lock{font-size:9px;padding:2px 6px}
    /* FAQ 表转卡片 */
    .viz-faq thead{display:none}
    .viz-faq,.viz-faq tbody,.viz-faq tr,.viz-faq td{display:block;width:100%}
    .viz-faq tr{padding:14px 0;border-bottom:1px solid var(--line,#e8e8ed)}
    .viz-faq tr:last-child{border-bottom:0}
    .viz-faq td{border:0;padding:0}
    .viz-faq td:first-child{margin-bottom:4px}
    .viz-faq td:last-child{font-size:12.5px}
  }