/* 九清国内站 · 产品定制页 /<产品>/design/
   ⚠️ 铁律：本文件是这一页 CSS 的唯一副本。不要在页面正文、页脚 widget 或 Customizer 再放一份。
      版本号由 joeqing-design.php 用 filemtime 生成，改完即时生效，不吃缓存。

   版式基准：tesla.cn/model3/design 实测 ——
     左边一张大图占满剩余宽度并吸顶跟随，右边一条固定宽度的选项栏滚动，
     底部一条常驻操作条（特斯拉放「价格 + 立即下单」，我们放「加微信 + 提交」）。
   全站设计基准照旧：按钮 40px 高 / 圆角 4px / 14px·500，主色 #3E6AE1，卡片底 #f4f4f4。

   ⚠️ 手机优先：站长的流量主要来自抖音/视频号/小红书，几乎全是手机。
      所以选项一律做成**可点的标签**，不用 <select>（外贸站那页 7 个下拉框，手机上实测很难用）。
*/

.jqd{
  color:#3f4856;font-size:16px;line-height:1.75;
  /* 两栏的宽度和间距集中在这里。底部悬浮卡片要和右栏严丝合缝地对齐，
     它是 position:fixed（脱离了两栏容器），只能靠同一组变量算出来。
     改宽度只改这三行，卡片会自动跟上 —— 2026-08-26 图从 720 缩到 360 时，
     就是因为卡片自己贴视口右边，和右栏错开了一大截。 */
  --jqd-img:720px;     /* 灰底框的宽度 */
  --jqd-shot:58%;      /* 机械图在灰底框里占多大。站长 2026-08-26：先 50%，再「大 15%」→ 50×1.15≈58 */
  --jqd-panel:440px;
  --jqd-gap:clamp(32px,4vw,64px);
}
.jqd *{box-sizing:border-box}

/* 正文被 Astra 的 .entry-content 限制在 --jq-shell(1224) 内，
   但这一页要像 tesla 那样铺满整屏。用 calc 负边距顶出容器，再把内边距补回来。
   ⚠️ 不要在这里另定一套宽度变量 —— 2026-08-18 就是因为自定义 1280
      导致页头页脚和正文三条左边线错开 20px。 */
.jqd{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:var(--jq-gutter,28px);padding-right:var(--jq-gutter,28px);
}

/* 定制页没有页脚，Astra 仍在正文下方留一段空白 —— 实测是 .content-area 的
   **margin-bottom:60px**（不是 padding，我第一次打错目标了）。
   这 60px 撑长了可滚动距离，却不属于两栏的行高，等于凭空缩短了左图能粘住的范围：
   滚到底时图会被顶上去 58px。页脚都不要了，这段留白也没有意义。 */
.jqd-page .site-content .content-area{margin-bottom:0!important}

/* 蜜罐：移出视口而不是 display:none —— 有些机器人会跳过 display:none 的字段 */
.jqd-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.jqd-err{
  margin:0 0 24px!important;padding:12px 16px;border-radius:4px;
  background:#fdecec;color:#a1281f;font-size:14.5px;
}

/* ── 两栏 ───────────────────────────────────────────────────────────────── */
.jqd-layout{
  display:grid;
  /* 2026-08-26 站长：机械图再缩一半（720 → 360）。
     左栏跟着收成定宽而不是继续占满剩余宽度 —— 图缩到 360 还让左栏撑到 886，
     图会孤零零飘在一大片空白里。两栏定宽后整体居中，看着才是有意收窄的。 */
  grid-template-columns:minmax(0,1fr) var(--jqd-panel);
  gap:var(--jqd-gap);
  align-items:start;
  /* ⚠️ 上面那句「两栏定宽后整体居中」当时只写在注释里，代码没跟上：左栏一直是 1fr，
     会一路撑满剩余宽度，而灰底框卡死在 --jqd-img(720)、又在栏里居中。
     后果是屏幕越宽、图左边的空档越大，右栏却始终死贴右边距 —— 整块看着往右偏。
     实测 1512 视口：图左边空 146px，右栏右边只空 28px（站长 2026-08-28 反馈「整体右移」）。
     修法是给整块加个上限再居中，而**不是**把左栏改成 minmax(0,720px)：
     那样 900~1276 这段宽度里两栏加起来超过容器，grid 不会压缩定长轨道，整行会溢出。
     1fr 保留着，窄屏照样自适应；只有宽到装得下 720+间距+440 时才开始居中。
     ⚠️ 底部那张 fixed 卡片要跟着一起居中，见 .jqd-bar-in —— 两处的 max-width 必须同源。 */
  max-width:calc(var(--jqd-img) + var(--jqd-gap) + var(--jqd-panel));
  margin-inline:auto;
}
/* ⚠️ 底部留白必须放在**右栏里**，不能放在 .jqd-layout 上。
   position:sticky 的活动范围是它所在那一行的高度，而行高 = 最高的那个格子（右栏）。
   留白放在 layout 上是在行**外面**，粘性元素用不到，图还没滚到底就被行底顶上去了
   —— 2026-08-26 站长在伸缩矩阵屏那页发现：滚到底时图被推到 -66px（本该停在 112）。
   放进右栏后这 120px 算进行高，图的活动范围跟着变长。 */
.jqd-panel{padding-bottom:120px}

/* 左：机械图。吸顶跟着滚，客户改选项时不用来回翻。
   顶部偏移用 --jq-hd（design.js 量出的真实页头高度，登录态还含 32px 管理栏），
   不要写死 —— 写死过一次，登录态下大图被页头压掉一截。 */
/* 左栏撑满整行，真正粘住的是里面那个灰底框（sticky 写在下面 .jqd-stage-inner 里）——
   这样它的活动范围是整行高度，而不是它自己那 540px。
   ⚠️ 不要在这里另写一条 .jqd-stage-inner{position:sticky}：下面那条原有规则里有
      position:relative，排在后面会把它盖掉，结果只剩一个 top 偏移，图整体往下挪 112px。
      2026-08-26 实测踩过。 */
.jqd-stage{align-self:stretch}
.jqd-stage-inner{
  /* sticky 就写在这里（不要另起一条，见上面 .jqd-stage 的注释）。
     手机端在下面的媒体查询里还原成 relative。 */
  /* 页头 2026-08-27 起不再吸顶（对齐 tesla：只有首页固定），
     所以这里不用再让开页头高度，直接贴视口顶部下方一点。 */
  position:sticky;top:24px;
  background:#f4f4f4;border-radius:4px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:4 / 3;

  /* 灰底框限宽 720（原来是左栏满宽 886，太大）。
     ⚠️ 「图太大」要分两件事，2026-08-26 我连着弄错两次：
        框的大小 = 这里的 --jqd-img；
        图在框里占多大 = 下面 .jqd-shot 的 --jqd-shot。
        站长要的是**框不动、图缩小**，别再去动这一行。 */
  max-width:var(--jqd-img);margin-inline:auto;

  /* ⚠️ 这里**绝对不要**再写 max-height:calc(100svh - var(--jq-hd) …)。
     --jq-hd 是跟着滚动实时更新的（管理栏滚走后页头 88px→56px），
     max-height 跟着从 482px 变成 516px，盒子一变高图就跟着放大约 7% ——
     站长 2026-08-26 反馈的「滑动页面时图片莫名放大」就是这么来的。
     图的尺寸必须和滚动位置无关。 */
}
/* 机械图在灰底框里居中，只占 --jqd-shot 那么大，四周留白。
   父级是 flex + 居中，所以不用再写定位。 */
.jqd-shot{width:var(--jqd-shot);height:var(--jqd-shot);object-fit:contain;display:block}
.jqd-shot[hidden]{display:none}
.jqd-stage-cap{
  position:absolute;left:0;right:0;bottom:0;margin:0!important;
  padding:14px 20px;font-size:14px;font-weight:500;color:#171a20;
  background:linear-gradient(to top,rgba(255,255,255,.92),rgba(255,255,255,0));
}

/* 右：选项栏 */
.jqd-panel{min-width:0}
.jqd-h1{
  font-size:clamp(26px,3vw,36px);line-height:1.25;font-weight:700;color:#171a20;
  margin:0 0 12px!important;text-wrap:balance;
}
.jqd-lead{margin:0 0 32px!important;color:#5C5E62;font-size:15.5px;line-height:1.7}

/* ── 一组选项 ───────────────────────────────────────────────────────────── */
.jqd-step{border:0;margin:0 0 clamp(28px,3.4vw,38px)!important;padding:0!important}
/* 条件显示的步骤（例：只有室内的多层旋转屏才问层数）。
   写明确一点，别指望浏览器默认的 [hidden] —— 这一页别处给 fieldset 设过 display，
   一旦哪天加了规则，[hidden] 会被盖掉，那一组就永远显示。 */
.jqd-step[hidden]{display:none!important}
.jqd-legend{
  display:flex;align-items:center;gap:10px;padding:0;margin:0 0 14px;
  font-size:clamp(17px,1.8vw,19px);font-weight:600;color:#171a20;
}
.jqd-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:#171a20;color:#fff;
  font-size:13px;font-weight:600;line-height:1;flex:0 0 auto;
}
.jqd-opt{font-size:13px;font-weight:400;color:#8e9199}
.jqd-hint{margin:0 0 12px!important;font-size:14px;color:#5C5E62;line-height:1.6}
.jqd-hint-sm{margin:10px 0 0!important;font-size:13px;color:#8e9199}

.jqd-opts{display:flex;flex-wrap:wrap;gap:10px}
/* 带说明文字的那组（滑轨六个子类）排成两列，一行一个太长、挤成一行又看不清 */
.jqd-opts-desc{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* radio 本身藏起来，但**不能用 display:none** —— 那样键盘 Tab 不到，无障碍会坏。
   用 clip 方案：仍在焦点顺序里，只是看不见。 */
.jqd-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.jqd-chip{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-height:44px;padding:10px 16px;border-radius:4px;
  background:#f4f4f4;color:#393C41;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.jqd-opts:not(.jqd-opts-desc) .jqd-chip{align-items:center;text-align:center}
.jqd-chip-t{font-size:15px;font-weight:500;line-height:1.3}
.jqd-chip-d{font-size:12.5px;line-height:1.4;color:#8e9199}
.jqd-chip:hover{background:#ececec}
.jqd-radio:checked + .jqd-chip{background:#3E6AE1;color:#fff}
.jqd-radio:checked + .jqd-chip .jqd-chip-d{color:rgba(255,255,255,.82)}
/* 键盘聚焦时要看得见，否则只用键盘的人不知道焦点在哪 */
.jqd-radio:focus-visible + .jqd-chip{box-shadow:0 0 0 2px #fff,0 0 0 4px #3E6AE1}

/* ── 上传图纸 ───────────────────────────────────────────────────────────── */
/* 原生 <input type=file> 各浏览器长得都不一样，藏起来用 label 当按钮。
   ⚠️ 同样不能 display:none —— 会掉出焦点顺序，键盘用户永远点不到。 */
.jqd-file{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jqd-file-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.jqd-file-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 22px;border-radius:4px;border:1px solid #171a20;
  background:#fff;color:#171a20;font-size:14px;font-weight:500;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.jqd-file-btn:hover{background:#171a20;color:#fff}
.jqd-file-input:focus-visible + .jqd-file-btn{box-shadow:0 0 0 2px #fff,0 0 0 4px #3E6AE1}
.jqd-file-name{font-size:14px;color:#8e9199;word-break:break-all;min-width:0;flex:1 1 auto}
/* 「移除」做成文字链而不是第二个实心按钮：选文件是主动作，移除是补救，
   两个同样重的按钮并排会让人分不清该点哪个。 */
.jqd-file-clear{
  flex:0 0 auto;border:0;background:none;padding:4px 2px;cursor:pointer;
  font-size:13px;color:#5C5E62;text-decoration:underline;text-underline-offset:2px;
}
.jqd-file-clear:hover{color:#a1281f}
.jqd-file-clear[hidden]{display:none}
.jqd-file-name.is-set{color:#171a20}
.jqd-file-name.is-bad{color:#a1281f}

/* ── 数值输入（项目面积的长/宽这类）───────────────────────────────────── */
.jqd-nums{display:flex;flex-wrap:wrap;gap:12px}
.jqd-num-field{display:flex;align-items:center;gap:8px}
.jqd-num-lab{font-size:14px;color:#5C5E62;flex:0 0 auto}
.jqd-num-unit{font-size:14px;color:#8e9199;flex:0 0 auto}
.jqd-num-field input{
  width:110px;height:44px;padding:0 12px;
  border:1px solid #d3d7dc;border-radius:4px;background:#fff;color:#171a20;
  /* ⚠️ 16px 不能再小：iOS Safari 对 <16px 的输入框会自动放大整页，放大后缩不回去 */
  font-size:16px;
}
.jqd-num-field input:focus{outline:0;border-color:#3E6AE1;box-shadow:0 0 0 3px rgba(62,106,225,.15)}

/* ── 联系方式 ───────────────────────────────────────────────────────────── */
.jqd-inputs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.jqd-field{display:flex;flex-direction:column;gap:6px}
.jqd-field-wide{grid-column:1 / -1}
.jqd-field span{font-size:14px;color:#5C5E62}
.jqd-field input{
  height:48px;padding:0 14px;border:1px solid #d3d7dc;border-radius:4px;
  font-size:16px;color:#171a20;background:#fff;width:100%;
  /* ⚠️ 16px 不能再小：iOS Safari 对 <16px 的输入框会自动放大整页，一放大就再也缩不回去 */
}
.jqd-field input:focus{outline:0;border-color:#3E6AE1;box-shadow:0 0 0 3px rgba(62,106,225,.15)}

.jqd-note{margin:28px 0 0!important;font-size:12.5px;line-height:1.7;color:#8e9199}

/* ── 底部常驻条 ─────────────────────────────────────────────────────────── */
/* 只负责定位，本身不画任何东西。
   pointer-events:none 是必要的：这一层是全宽的，不关掉点击会挡住卡片左边那一整条页面。 */
.jqd-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  pointer-events:none;
}
/* 把卡片推到和正文同一条右边线上。
   ⚠️ 这里**不能**套 --jq-shell(1224)：这一页的 .jqd 是通栏的（左右各留一个 gutter），
   右边线在「视口宽 - gutter」上，不在 1224 的居中容器上。
   套了 shell 卡片会往左缩 108px，和上面的选项栏错开一条边 —— 2026-08-24 实测。 */
.jqd-bar-in{
  /* 卡片是 position:fixed，脱离了两栏容器，只能自己算出右栏的右边线在哪。
     ⚠️ 2026-08-28 前这里写的是「左栏是 1fr 占满剩余，所以右栏右边线 = 视口 - gutter，
        贴右即可」。.jqd-layout 加了 max-width 居中之后这句就不成立了 ——
        两栏整体往左缩了，卡片还贴着视口右边，会和右栏错开一大截。
        所以这里照抄同一条 max-width（多加两侧 gutter，因为这一层自己带 padding），
        同样 margin-inline:auto，两边算出来的右边线才重合。改一处必须改另一处。 */
  width:100%;
  max-width:calc(var(--jqd-img) + var(--jqd-gap) + var(--jqd-panel) + 2 * var(--jq-gutter, 28px));
  margin-inline:auto;
  padding:0 var(--jq-gutter,28px);
  display:flex;justify-content:flex-end;
}
/* 真正那张卡。数值来自 tesla.cn/model3/design 桌面端实测：
   408×70 / 圆角 9px 9px 0 0 / 投影 0 -2px 8px rgba(0,0,0,.1) / 内边距 12px 24px。
   宽度我们用 440 —— 和右边选项栏同宽，卡片左右两条边正好压在选项栏上，
   照抄 408 反而会和上面的内容错开一条边。 */
.jqd-bar-card{
  pointer-events:auto;
  width:var(--jqd-panel);max-width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 24px;min-height:70px;
  background:#fff;border-radius:9px 9px 0 0;
  box-shadow:0 -2px 8px rgba(0,0,0,.1);
  /* iPhone 底部小黑条会盖住按钮 */
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
}
/* ⚠️ 左边这段必须能被压缩（flex:1 1 auto + min-width:0 + 省略号）。
   写死不压缩的话，只要这行字变宽（微信里客户把字体调大就会），
   就会把右边的按钮整个顶出屏幕 —— 2026-08-24 站长手机实测就是这么被切掉的。 */
/* 卡片里的两个状态：正常(live) 和 提交成功(done)，同一时间只显示一个 */
.jqd-bar-live{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-width:0}
.jqd-bar-live[hidden]{display:none}
.jqd-bar-done{display:flex;align-items:center;gap:12px;width:100%;min-width:0}
.jqd-bar-done[hidden]{display:none}
.jqd-bar-tick{flex:0 0 auto}
/* 文字这一列要能被压缩，理由同 .jqd-bar-sum：不然文字一长就把按钮顶出屏幕 */
.jqd-bar-done-tx{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;overflow:hidden}
.jqd-bar-done-t{font-size:15px;font-weight:600;color:#171a20;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jqd-bar-done-s{font-size:13px;color:#5C5E62;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jqd-bar-copy{flex:0 0 auto;white-space:nowrap}

.jqd-bar-sum{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;overflow:hidden}
.jqd-bar-p{font-size:15px;font-weight:600;color:#171a20;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jqd-bar-s{font-size:13px;color:#5C5E62;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jqd-bar-btns{display:flex;align-items:center;flex:0 0 auto}
/* 按钮宽度**由文字撑开**，不写死 —— tesla.cn/model3/design 手机版实测：
   「立即下单」110×40，padding 4px 24px，14px·500，圆角 4px，#3E6AE1。
   写死宽度是上面那个被顶出屏幕的 bug 的另一半原因。 */
.jqd-bar-go{flex:0 0 auto;white-space:nowrap}

/* ── 按钮 ───────────────────────────────────────────────────────────────── */
.jqd-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 24px;border:0;border-radius:4px;
  font-size:14px;font-weight:500;line-height:1;cursor:pointer;
  /* !important 是必要的：Astra 给正文里的 <a> 加了下划线，「加微信」是 <a> 会被划一道 */
  text-decoration:none!important;
  transition:background-color .2s ease,color .2s ease;
}
.jqd-btn-primary{background:#3E6AE1;color:#fff}
.jqd-btn-primary:hover{background:#3457b8;color:#fff}
.jqd-btn-ghost{background:#f4f4f4;color:#171a20}
.jqd-btn-ghost:hover{background:#e6e6e6;color:#171a20}

/* ── 提交成功 ───────────────────────────────────────────────────────────── */
.jqd-done{max-width:760px;padding:clamp(32px,5vw,56px) 0}
.jqd-tick{display:block;margin:0 0 20px}
.jqd-done-h{font-size:clamp(22px,2.6vw,30px);font-weight:700;color:#171a20;margin:0 0 10px!important}
.jqd-done-p{margin:0 0 32px!important;color:#5C5E62}
.jqd-done-ways{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.jqd-qr{margin:0!important;text-align:center}
.jqd-qr img{display:block;width:150px;height:150px;border-radius:4px}
.jqd-qr figcaption{margin-top:8px;font-size:13px;color:#8e9199}
.jqd-done-label{margin:0 0 4px!important;font-size:14px;color:#5C5E62}
.jqd-done-num{margin:0 0 16px!important;font-size:24px;font-weight:600;color:#171a20;letter-spacing:.02em}
.jqd-done-btns{display:flex;gap:10px;flex-wrap:wrap;margin:0!important}
.jqd-done-back{margin:32px 0 0!important;font-size:14px}
.jqd-done-back a{color:#3E6AE1;text-decoration:underline}

/* ── 手机 ───────────────────────────────────────────────────────────────── */
/* 站长的流量几乎全在手机，这一段是主版本不是适配版。
   大图改成吸在页头下面的一条，选项在下面滚 —— 跟 tesla 手机版一个思路。 */
@media (max-width:900px){
  .jqd-layout{grid-template-columns:1fr;gap:24px;max-width:none}
  .jqd-panel{padding-bottom:104px}
  /* 手机是单栏，整块吸顶；把桌面端加在 inner 上的粘性还原 */
  .jqd-stage-inner{position:relative;top:auto}
  .jqd-stage{
    position:sticky;top:0;z-index:5;
    margin-left:calc(0px - var(--jq-gutter,18px));margin-right:calc(0px - var(--jq-gutter,18px));
    background:#fff;padding:8px var(--jq-gutter,18px);
    /* 下面的选项会从大图底下滚过去，加一道极淡的分隔影，让"滚到图后面"看着是有意的 */
    box-shadow:0 6px 12px -8px rgba(0,0,0,.18);
  }
  .jqd-stage-inner{aspect-ratio:16 / 10}
  .jqd-stage-cap{padding:10px 14px;font-size:13px}
  .jqd-h1{font-size:24px}
  .jqd-lead{font-size:15px;margin-bottom:26px!important}
  /* 两列在窄屏会挤成两行字，改一列 */
  .jqd-opts-desc{grid-template-columns:1fr}
  .jqd-inputs{grid-template-columns:1fr}
  /* 手机上卡片铺满整宽、去掉圆角，退化成一条 —— tesla 手机版也是这样。
     左右内边距用站内统一的 --jq-gutter(18px) 而不是 tesla 的 24：
     要跟这一页上面的标题和选项卡片对齐同一条左边线，对齐比抄数字重要。 */
  .jqd-bar-in{padding:0;max-width:none}
  .jqd-bar-card{
    width:100%;gap:12px;
    padding:12px var(--jq-gutter,18px);
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    border-radius:0;
  }
  /* 只剩一个按钮之后，左边这段「选了什么」在手机上也放得下了，
     跟 tesla 手机版一样：左边显示当前配置，右边一个按钮。 */
  .jqd-bar-p{font-size:14px}
  .jqd-bar-s{font-size:12px}
  .jqd-bar-done-t{font-size:14px}
  .jqd-bar-done-s{font-size:12px}
  .jqd-bar-copy{padding:0 14px;font-size:13px}
}

/* 动画敏感的人（系统里开了「减弱动态效果」）不要有过渡 */
@media (prefers-reduced-motion:reduce){
  .jqd-chip,.jqd-btn,.jqd-file-btn{transition:none}
}