/* 商品场景图改稿助手案例页 —— 对齐作品集其他项目页的规范：
   面包屑由 app.js 输出；标题字号/行距/按钮复用全站标准。 */
.wy-case{max-width:none;margin:0;width:100%;color:var(--ink)}
.wy-case *,.wy-case *:before,.wy-case *:after{box-sizing:border-box}
.wy-case h1,.wy-case h2,.wy-case h3,.wy-case p,.wy-case figure{margin:0}
.wy-case h1,.wy-case h2,.wy-case h3{line-height:1.3;letter-spacing:-.025em;text-wrap:balance}
.wy-case p{text-wrap:pretty}
.wy-case img{display:block;width:100%;height:100%;object-fit:cover}
.wy-case button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.wy-case a{color:inherit;text-decoration:none}
.wy-case button:focus-visible,.wy-case a:focus-visible,.wy-case input:focus-visible{outline:2px solid #555d68;outline-offset:4px}

/* ---------- 标题区：对齐 page-aigc（长卷页）规范 ---------- */
main.page-commerce{padding-top:32px}
main.page-commerce .breadcrumb{margin-bottom:24px}
main.page-commerce .page-heading{border:0;padding-bottom:0;margin-bottom:32px;align-items:flex-end}
main.page-commerce .page-heading h1{font-size:clamp(28px,3vw,36px);letter-spacing:-.035em;margin-bottom:12px}
main.page-commerce .page-heading p{font-size:14px;line-height:1.6}
main.page-commerce .page-heading .button{white-space:nowrap;flex-shrink:0}

/* ---------- 开场概览卡 ---------- */
.wy-brief{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px}
.wy-brief article{background:var(--bg);border-radius:18px;box-shadow:var(--shadow);padding:20px 22px}
.wy-brief span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.wy-brief p{font-size:13px;line-height:1.75}

/* ---------- 首屏对比 ---------- */
.wy-compare{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:64px}
.wy-compare figure{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:20px;box-shadow:var(--shadow)}
.wy-compare figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:#f0f1f3ee;backdrop-filter:blur(6px);box-shadow:inset 2px 2px 6px #c9cdd35e,inset -2px -2px 6px #fff;font-size:12px;font-weight:600}
.wy-compare-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:#f0f1f3ee;backdrop-filter:blur(6px);box-shadow:var(--shadow);font-size:18px}

/* ---------- 章节导航：横向阶段标签，对齐长卷页 .stage ---------- */
.wy-body{display:block}
.wy-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:44px}
.wy-nav a{display:block}
.wy-nav .wy-stage-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}
.wy-nav .wy-stage-bar{display:block;height:3px;background:#b7bdc5;margin-bottom:12px}
.wy-nav a.is-active .wy-stage-label{color:var(--ink)}
.wy-nav a.is-active .wy-stage-bar{background:var(--ink)}

.wy-section{padding-bottom:72px;scroll-margin-top:120px}
.wy-section-head h2{font-size:24px;font-weight:600;margin-bottom:12px}
.wy-section-head p{font-size:15px;line-height:1.9;color:var(--muted);max-width:640px;margin-bottom:28px}

/* ---------- 01 需求与痛点 ---------- */
.wy-case .flow{margin:0 0 28px}
.wy-pain-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.wy-pain-tabs button{padding:11px 18px;border-radius:12px;background:var(--bg);box-shadow:4px 4px 12px #c8cdd566,-4px -4px 12px #ffffffd9;font-size:13px;font-weight:600;white-space:nowrap}
.wy-pain-tabs button:hover{box-shadow:inset 3px 3px 9px #c9cdd366,inset -3px -3px 9px #fff}
.wy-pain-tabs button.is-active{box-shadow:inset 3px 3px 9px #c9cdd366,inset -3px -3px 9px #fff;color:var(--ink)}
.wy-decision{display:grid;grid-template-columns:1fr 36px 1fr;align-items:center;gap:8px;background:var(--bg);border-radius:20px;box-shadow:var(--shadow);padding:28px}
.wy-decision>div span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.wy-decision>div h3{font-size:19px;margin-bottom:8px}
.wy-decision>div p{font-size:13.5px;line-height:1.8;color:var(--muted)}
.wy-decision>i{font-style:normal;text-align:center;font-size:18px;color:var(--muted)}

/* ---------- 02 产品流程 ---------- */
.wy-process-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.wy-process-tabs button{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 8px;border-radius:14px;background:var(--bg);box-shadow:4px 4px 12px #c8cdd566,-4px -4px 12px #ffffffd9;font-size:13px;font-weight:600;white-space:nowrap}
.wy-process-tabs button b{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;box-shadow:inset 2px 2px 5px #c9cdd366,inset -2px -2px 5px #fff;font-size:11px;font-weight:600;color:var(--muted)}
.wy-process-tabs button:hover,.wy-process-tabs button.is-active{box-shadow:inset 3px 3px 9px #c9cdd366,inset -3px -3px 9px #fff}
.wy-process-tabs button.is-active b{background:var(--ink);color:#fff;box-shadow:none}

.wy-walkthrough{display:grid;grid-template-columns:1.08fr 1fr;gap:28px;background:var(--bg);border-radius:24px;box-shadow:var(--shadow);padding:28px}
.wy-visual-frame{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:16px;box-shadow:inset 3px 3px 10px #c9cdd366,inset -3px -3px 10px #fff}
.wy-tags-overlay{position:absolute;left:10px;bottom:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px}
.wy-tags-overlay span{padding:5px 10px;border-radius:999px;background:#f0f1f3ee;backdrop-filter:blur(6px);box-shadow:inset 2px 2px 5px #c9cdd35e,inset -2px -2px 5px #fff;font-size:11px;white-space:nowrap}
.wy-tags-overlay .wy-tags-label{font-weight:600}
.wy-fusion{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
.wy-fusion span{padding:6px 11px;border-radius:999px;box-shadow:inset 2px 2px 6px #c9cdd366,inset -2px -2px 6px #fff;font-size:11.5px;white-space:nowrap;color:var(--muted)}
.wy-fusion i{font-style:normal;color:var(--muted);font-size:12px}
.wy-fusion b{padding:6px 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:11.5px;white-space:nowrap}

.wy-step-info{display:flex;flex-direction:column;align-items:flex-start}
.wy-step-number{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--muted)}
.wy-step-info h3{font-size:21px;margin:10px 0 10px}
.wy-step-info>p{font-size:14px;line-height:1.85;color:var(--muted)}
.wy-action{margin-top:12px;font-size:13px;font-weight:600}
.wy-inset{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding:16px 18px;border-radius:14px;box-shadow:inset 3px 3px 9px #c9cdd366,inset -3px -3px 9px #fff}
.wy-inset strong{font-size:12px;letter-spacing:.1em;color:var(--muted)}
.wy-inset span{font-size:13px;line-height:1.75}
.wy-checks{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.wy-checks span{padding:6px 12px;border-radius:999px;box-shadow:4px 3px 10px #c8cdd55c,-4px -3px 10px #ffffffd9;font-size:12px;white-space:nowrap;color:var(--muted)}

/* ---------- 03 评测与迭代 ---------- */
.wy-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.wy-metrics button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:88px;padding:14px 16px;border-radius:14px;background:var(--bg);box-shadow:4px 4px 12px #c8cdd566,-4px -4px 12px #ffffffd9;white-space:nowrap}
.wy-metrics button b{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.wy-metrics button span{font-size:13px;font-weight:600}
.wy-metrics button:hover,.wy-metrics button.is-active{box-shadow:inset 3px 3px 9px #c9cdd366,inset -3px -3px 9px #fff}
.wy-metric-detail{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bg);border-radius:20px;box-shadow:var(--shadow);padding:24px 28px;margin-bottom:20px}
.wy-metric-detail>div span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}
.wy-metric-detail>div p{font-size:13.5px;line-height:1.8}
.wy-metric-detail>div+div{padding-left:28px;border-left:1px solid var(--line)}

.wy-gate{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg);border-radius:16px;box-shadow:inset 3px 3px 10px #c9cdd366,inset -3px -3px 10px #fff;padding:16px 20px;font-size:13.5px}
.wy-gate input{width:18px;height:18px;accent-color:#343943}
.wy-gate span{flex:1;min-width:200px}
.wy-gate strong{font-size:13px;white-space:nowrap}
.wy-gate strong.is-pass{color:var(--muted);font-weight:500}

.wy-subhead{margin:48px 0 20px}
.wy-subhead h3{font-size:19px}

.wy-loop-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}
.wy-loop-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px;border-radius:14px;background:var(--bg);box-shadow:4px 4px 12px #c8cdd566,-4px -4px 12px #ffffffd9;white-space:nowrap}
.wy-loop-tabs button b{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.wy-loop-tabs button span{font-size:12.5px;font-weight:600}
.wy-loop-tabs button:hover,.wy-loop-tabs button.is-active{box-shadow:inset 3px 3px 9px #c9cdd366,inset -3px -3px 9px #fff}
.wy-loop-detail{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bg);border-radius:20px;box-shadow:var(--shadow);padding:22px 28px}
.wy-loop-detail>div span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}
.wy-loop-detail>div p{font-size:13.5px;line-height:1.8}
.wy-loop-detail>div+div{padding-left:28px;border-left:1px solid var(--line)}

.wy-issue-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.wy-issue-tabs button{padding:11px 18px;border-radius:12px;background:var(--bg);box-shadow:4px 4px 12px #c8cdd566,-4px -4px 12px #ffffffd9;font-size:13px;font-weight:600;white-space:nowrap}
.wy-issue-tabs button:hover,.wy-issue-tabs button.is-active{box-shadow:inset 3px 3px 9px #c9cdd366,inset -3px -3px 9px #fff}
.wy-issue{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:var(--bg);border-radius:20px;box-shadow:var(--shadow);padding:24px 28px}
.wy-issue>div span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}
.wy-issue>div p{font-size:13.5px;line-height:1.8}

/* ---------- 页尾 ---------- */
.wy-case .case-next{margin-top:8px}
.wy-case .case-next .button{font-size:13px}

/* ---------- 响应式 ---------- */
@media(max-width:1000px){
  .wy-brief{grid-template-columns:repeat(2,1fr)}
  .wy-metrics{grid-template-columns:repeat(3,1fr)}
  .wy-loop-tabs{grid-template-columns:repeat(3,1fr)}
  .wy-walkthrough{grid-template-columns:1fr;gap:22px}
  .wy-nav{gap:16px}
}
@media(max-width:760px){
  main.page-commerce .page-heading{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:28px}
  .wy-compare{gap:12px;margin-bottom:48px}
  .wy-compare figure{aspect-ratio:3/4;border-radius:16px}
  .wy-compare figcaption{left:8px;bottom:8px;padding:5px 10px;font-size:11px}
  .wy-compare-arrow{width:36px;height:36px;font-size:15px}
  .wy-nav{gap:12px;margin-bottom:32px}
  .wy-nav .wy-stage-label{font-size:11px}
  .wy-brief{grid-template-columns:1fr;gap:12px}
  .wy-brief article{padding:16px 18px}
  .wy-section{padding-bottom:56px;scroll-margin-top:110px}
  .wy-section-head p{font-size:14px}
  .wy-process-tabs{grid-template-columns:repeat(2,1fr)}
  .wy-walkthrough{padding:18px}
  .wy-decision{grid-template-columns:1fr;padding:22px}
  .wy-decision>i{transform:rotate(90deg)}
  .wy-metrics{grid-template-columns:repeat(2,1fr)}
  .wy-metrics button{min-height:76px}
  .wy-metric-detail{grid-template-columns:1fr;padding:20px}
  .wy-metric-detail>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
  .wy-loop-tabs{grid-template-columns:repeat(2,1fr)}
  .wy-loop-detail{grid-template-columns:1fr;padding:20px}
  .wy-loop-detail>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
  .wy-issue{grid-template-columns:1fr;gap:18px;padding:20px}
  .wy-case .case-next{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:400px){
  .wy-metrics{grid-template-columns:1fr}
  .wy-process-tabs{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.wy-case *{transition:none!important}}