/* 首页「采购服务」轮播（2026-10-18，版式取自设计稿 B「询价单」，服务文案取自设计稿 A「采购之外」）：
   一排标签（当前那个下面的进度条走完就换下一块）+ 一次一块：我要采购 / 不只是采购 / 有货？来接单（「采购怎么走」10-18 按用户要求去掉了）。
   几块等高（取最高的那块），轮换时下面的内容不跳；票根式的虚线和打孔缺口是这组模块共用的记号。
   只在首页加载（Home::index 的 styles），颜色都用 base.css 的变量；轮播脚本在 js/home.js */
.qc{margin-top:24px;border-radius:10px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.qc-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-bottom:1px solid var(--line)}
.qc-tab{position:relative;display:flex;align-items:center;gap:10px;min-width:0;height:56px;padding:0 24px;text-align:left;color:var(--ink3)}
.qc-tab+.qc-tab::before{content:"";position:absolute;left:0;top:16px;bottom:16px;border-left:1px solid var(--line)}
.qc-tab svg{flex:none;width:26px;height:26px;opacity:.5;filter:grayscale(1);transition:opacity .2s,filter .2s}
.qc-tab b{flex:none;font-size:16px;font-weight:700;color:var(--ink)}
.qc-tab span{min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qc-tab:hover b,.qc-tab.on b{color:var(--brand)}
.qc-tab.on svg{opacity:1;filter:none}
.qc-bar{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--brand);transform:scaleX(0);transform-origin:left}
.qc-tab.on .qc-bar{transform:scaleX(1)}
.qc-tab.on.run .qc-bar{animation:qc-run 7s linear both}
/* 暂停要写得比上一条更具体：animation 简写会把 play-state 重置成 running */
.qc:hover .qc-tab.on.run .qc-bar,.qc:focus-within .qc-tab.on.run .qc-bar{animation-play-state:paused}
@keyframes qc-run{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.qc-view{overflow:hidden;overflow:clip}
.qc-track{display:flex;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.qc-p{flex:0 0 100%;min-width:0}

/* 我要采购：左边一句填空，右边票根放电话（上下各一个打孔缺口） */
.qc-buy{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 280px;background:var(--brand-bg)}
.qc-buy::before,.qc-buy::after{content:"";position:absolute;right:271px;width:18px;height:18px;border-radius:50%}
.qc-buy::before{top:-9px;background:#fff}
.qc-buy::after{bottom:-9px;background:var(--page)}
.iq-form,.iq-done{display:flex;flex-direction:column;justify-content:center;padding:20px 28px}
.iq-form[hidden],.iq-done[hidden]{display:none}
.iq-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.iq-h h2{font-size:16px;line-height:30px;font-weight:700;color:var(--ink2)}
.iq-sen{margin-top:4px;font-size:22px;line-height:48px;font-weight:800}
.iq-f{position:relative;display:inline-block;margin:0 8px;vertical-align:baseline;line-height:1}
.iq-f input{width:100px;height:36px;padding:0 6px;border:0;border-bottom:2px solid var(--brand);border-radius:0;background:transparent;font-size:18px;font-weight:700;color:var(--brand-d);outline:0}
.iq-f input::placeholder{color:#E9AF87;font-weight:400}
.iq-f input:focus{background:#fff;border-radius:4px 4px 0 0}
.iq-f.m input{width:300px}
.iq-f .err{position:absolute;left:6px;top:100%;margin-top:3px;font-size:12px;line-height:16px;font-weight:400;white-space:nowrap}
.iq-f.has-err input{border-bottom-color:var(--danger)}
.iq-ct{display:flex;flex-wrap:wrap;align-items:center;gap:14px 4px;margin-top:10px;font-size:15px;color:var(--ink2)}
.iq-ct .iq-f{margin:0 16px 0 6px}
.iq-ct .iq-f input{width:150px;height:34px;font-size:15px;color:var(--ink)}
.iq-ct .btn{height:38px;padding:0 26px;border-radius:19px;font-size:15px;font-weight:700}
.iq-hot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:var(--ink3)}
.iq-hot button{height:28px;padding:0 12px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--brand-line);font-size:13px;color:var(--ink)}
.iq-hot button:hover{color:var(--brand-d)}
.iq-hot i{margin-left:6px;font-style:normal;font-family:var(--num);color:var(--ink3)}
.iq-stub{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:20px 28px;border-left:2px dashed #F2BF98}
.iq-stub span{font-size:13px;color:var(--ink2)}
.iq-stub .tel{font-family:var(--num);font-size:28px;line-height:36px;font-weight:600;letter-spacing:.5px;white-space:nowrap}
.iq-stub .more{margin-top:6px;font-size:14px;font-weight:600;color:var(--brand)}
.iq-done h2{font-size:22px;line-height:32px;font-weight:800}
.iq-done p{margin-top:6px;font-size:15px;color:var(--ink2)}
.iq-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}

/* 不只是采购：四张小单子，下沿是票根虚线 + 两侧打孔 */
.qc-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:center;gap:16px;padding:22px 28px}
.ns-c{display:flex;flex-direction:column;border-radius:8px;background:var(--brand-bg2);box-shadow:inset 0 0 0 1px #F7DDC9}
.ns-t{padding:16px 18px 12px}
.ns-th{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ns-th h3{font-size:17px;line-height:28px;font-weight:800}
.ns-th .btn{flex:none}
.ns-t p{margin-top:6px;font-size:13px;line-height:20px;color:var(--ink2)}
.ns-f{position:relative;margin-top:auto;padding:9px 18px 11px;border-top:1.5px dashed #F2BF98;font-size:12px;line-height:18px;color:var(--ink3)}
.ns-f::before,.ns-f::after{content:"";position:absolute;top:-8px;width:14px;height:14px;border-radius:50%;background:#fff}
.ns-f::before{left:-7px}
.ns-f::after{right:-7px}
.ns-f span{white-space:nowrap}

/* 有货？来接单：深色整块，右边企业 / 个人两种入驻 */
.qc-join{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 40px;padding:24px 28px 24px 32px;background:#262626;color:#fff}
.qc-join h2{font-size:26px;line-height:36px;font-weight:800}
.qc-join p{margin-top:4px;font-size:14px;color:#C9C1BB}
.qc-join ul{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:14px;font-size:14px;color:#EDE6E0}
.qc-join li::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--brand)}
.hj-os{display:flex;gap:14px}
.hj-o{display:flex;flex-direction:column;width:200px;padding:16px 18px;border-radius:8px;background:#36322F}
.hj-o b{font-size:17px;line-height:24px}
.hj-o span{margin:2px 0 12px;font-size:12px;color:#B8AFA8}

@media (max-width:1240px){
  .qc-tab{padding:0 16px}
  .qc-tab span{display:none}
  .qc-buy{grid-template-columns:minmax(0,1fr) 230px}
  .qc-buy::before,.qc-buy::after{right:221px}
  .iq-f.m input{width:240px}
  .iq-stub{padding:20px 22px}
  .iq-stub .tel{font-size:24px}
}
@media (max-width:1100px){
  .qc-more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qc-join{grid-template-columns:1fr}
}
@media (max-width:900px){
  .qc-buy{grid-template-columns:1fr}
  .qc-buy::before,.qc-buy::after{display:none}
  .iq-stub{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:4px 14px;padding:14px 28px 18px;border-left:0;border-top:2px dashed #F2BF98}
  .iq-stub .tel{font-size:22px;line-height:30px}
}
/* 手机宽度：不轮播，几块上下排列 */
@media (max-width:767px){
  .qc-tabs{display:none}
  .qc-track{display:block;transform:none!important}
  .qc-p+.qc-p{border-top:10px solid var(--page)}
  .iq-form,.iq-done,.qc-more,.qc-join{padding:16px}
  .iq-stub{padding:12px 16px 16px}
  .iq-sen{font-size:17px;line-height:42px}
  .iq-f.m{display:block;margin:0}
  .iq-f.m input{width:100%}
  .iq-f input{width:96px;font-size:16px}
  .iq-ct .iq-f input{width:130px}
  .iq-hot{margin-left:0}
  .qc-more{grid-template-columns:1fr}
  .hj-os{flex-direction:column}
  .hj-o{width:auto}
}
/* 「减少动态效果」：滑动缩短，照样自动轮换（进度条要走完才换下一块，不能去掉） */
@media (prefers-reduced-motion:reduce){
  .qc-track{transition-duration:.25s}
}