/* Keep the approved V8 composition; adjust only commerce details and legibility. */
.restored-v13 .archive-header{mix-blend-mode:normal}
.restored-v13 .purchase-primary{background:#2561ad;color:#fff!important;border:0!important;border-radius:2px;padding:12px 17px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;font-size:15px!important;font-weight:750;line-height:1.45;opacity:1!important;clip-path:none}
.restored-v13 .purchase-primary:hover{background:#174982;color:#fff}
.restored-v13 .header-order{margin-left:1.6cqw;white-space:nowrap}
.restored-v13 .hero-model-actions{top:26cqw;z-index:7}
.restored-v13 .hero-model-actions>strong{font-size:clamp(16px,1.5cqw,28px)}
.restored-v13 .model-price{margin:14px 0 10px;line-height:1.2}
.model-price b{font-size:clamp(30px,3cqw,54px);font-weight:850;letter-spacing:-.04em}
.model-price span{display:block;font-size:14px;font-weight:400;margin-top:8px;color:#485965}
.restored-v13 .hero-model-actions>div{gap:8px}
.restored-v13 .hero-model-actions button{font-size:clamp(14px,1.05cqw,18px);min-height:40px}
.restored-v13 .hero-model-actions .purchase-primary{padding:11px 18px;min-height:46px;width:auto}
.sale-brief{display:grid;grid-template-columns:1.15fr 1.2fr 1.05fr 1fr;gap:26px;padding:28px 3.5%;border-block:1px solid #bcc8d1;background:#dce3e8;color:#172735}
.sale-brief>div{min-width:0;display:grid;align-content:start;gap:8px}
.sale-brief span{font-size:14px;color:#485b6b}
.sale-brief strong{font-size:clamp(16px,1.3cqw,23px);font-weight:750;line-height:1.5}
.sale-brief small{font-size:14px;color:#4c5e6c;line-height:1.65}
.restored-v13 .merch-action[data-product]{background:none;color:inherit;border:0;padding:9px 0;min-height:44px;font-size:15px!important;text-decoration:underline;text-underline-offset:6px;text-decoration-color:#79909d}
.restored-v13 .merch-action[data-product]:hover{color:#477a9b}
.restored-v13 .desk-info .merch-action[data-product]:hover,.restored-v13 .badge-info .merch-action[data-product]:hover{color:#bfe6f8}
.restored-v13 .merch-action.purchase-primary{width:100%}
.restored-v13 .merch-material>span,.restored-v13 .merch-size>span{display:block;font:400 14px/1.5 sans-serif;color:#52636f;margin:0 0 6px}
.restored-v13 .merch-price strong{font-size:clamp(32px,3.1cqw,54px)}
.restored-v13 .merch-price small{font-size:14px}
.restored-v13 .delivery-note{font-size:14px!important;line-height:1.6;color:inherit;opacity:.88;margin:3px 0}
.restored-v13 .bonus-items span{font-size:clamp(16px,1.4cqw,24px);font-weight:700}
.restored-v13 .bonus-items strong{font-size:clamp(16px,1.35cqw,23px);font-weight:500;line-height:1.6;color:#c7d9e3}
.restored-v13 .bonus-link,.restored-v13 .merch-buy{font-size:14px!important;min-height:40px}
.restored-v13 .badge-actions{grid-template-columns:1fr;gap:8px}
.restored-v13 .badge-actions .purchase-primary{order:-1}
.restored-v13 .purchase-strip{background:#dce4e9;color:#314756;border-color:#a4b5bf;font-size:14px}
.restored-v13 .purchase-strip :is(p,a){font-size:14px;line-height:1.7;color:#314756}
.restored-v13 .archive-footer nav a{display:flex}
.restored-v13 .archive-footer p{color:#b8c6cf;font-size:14px}
.restored-v13 .gallery-total,.restored-v13 .product-facts,.restored-v13 .product-facts .fact-note,.restored-v13 .gallery-help{font-size:14px}
.restored-v13 .gallery-promotion{padding:15px 0;margin:16px 0;border-block:1px solid #b7c7d0;color:#244666}
.restored-v13 .gallery-promotion>strong{font-size:17px}
.restored-v13 .gallery-promotion>p{font-size:14px;line-height:1.75}
.restored-v13 .order-dialog :is(.order-instruction,.order-note,.order-flow>span){font-size:14px!important}
@media(min-width:701px) and (max-width:1100px){
 .restored-v13 .archive-header{padding-inline:5cqw;gap:1.5cqw}.restored-v13 .archive-partner{width:10cqw}.restored-v13 .archive-nav{gap:16px}.restored-v13 .header-order{font-size:13px!important;padding:10px 13px}
 .sale-brief{grid-template-columns:1fr 1fr;gap:22px}
 .restored-v13 .hero-model-actions{top:21.5cqw;left:73cqw;width:21cqw}.restored-v13 .hero-model-actions>strong{font-size:14px}.restored-v13 .model-price{margin:10px 0}.restored-v13 .model-price b{font-size:28px}.restored-v13 .model-price span{font-size:12px}.restored-v13 .hero-model-actions button{font-size:13px}.restored-v13 .hero-model-actions .purchase-primary{font-size:13px!important;padding:8px 12px;min-height:40px}
}
@media(max-width:700px){
 .restored-v13 .archive-header{gap:12px}.restored-v13 .header-order{display:none}.restored-v13 .mobile-menu{display:block;margin-left:auto;position:relative}
 .restored-v13 .mobile-menu summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;cursor:pointer}.restored-v13 .mobile-menu summary span{display:block;width:23px;height:2px;background:#172b38}
 .restored-v13 .mobile-menu nav{position:absolute;right:-10px;top:49px;width:min(310px,90vw);display:grid;padding:16px;background:#e7edf1;color:#192c39;border:1px solid #a8bbc8;box-shadow:0 12px 28px #102b3930;gap:3px;font-size:16px}.restored-v13 .mobile-menu nav>*{padding:10px;min-height:44px;text-align:left}
 .restored-v13 .archive-hero{height:calc(129cqw + 244px);min-height:0}
 .restored-v13 .hero-model-actions{top:auto;bottom:12px;left:5cqw;width:90cqw;padding:12px;display:grid;grid-template-columns:1fr auto;gap:8px 12px}
 .restored-v13 .hero-model-actions>strong{font-size:14px;width:auto;margin:0;align-self:end}.restored-v13 .model-price{grid-column:1;grid-row:2;margin:0}.restored-v13 .model-price b{font-size:27px}.restored-v13 .model-price span{font-size:12px;margin-top:3px}.restored-v13 .hero-model-actions>div{grid-column:2;grid-row:1/3;gap:5px;align-items:end}.restored-v13 .hero-model-actions button{font-size:12px;min-height:30px}.restored-v13 .hero-model-actions .purchase-primary{font-size:14px!important;padding:10px 13px;min-height:44px}
 /* 周边的位置统一交给文件末尾 ⑤「手机端重排」块处理，这里不再重复定位 */
 .restored-v13 .hero-controls{top:36cqw;bottom:auto;left:auto;right:5cqw;flex-direction:row;align-items:center;gap:9px}
 .sale-brief{grid-template-columns:1fr 1fr;padding:23px 20px;gap:22px 18px}.sale-brief span{font-size:13px}.sale-brief strong{font-size:16px}.sale-brief small{font-size:13px}
 .restored-v13 .bonus-items span{font-size:16px}.restored-v13 .bonus-items strong{font-size:17px}
 .restored-v13 .badge-actions{grid-template-columns:1fr} .restored-v13 .archive-footer nav{width:100%;gap:12px 24px;flex-wrap:wrap;font-size:14px}.restored-v13 .archive-footer p{font-size:12px}
}

/* ============================================================
   2026-09-23 · 突出雕像主体 + 两大核心卖点（灯光 / 武器磁吸）
   ① 缩小衣服、鼠标垫、徽章等周边陈列，让机体成为视觉主体
   ② hero 文案区加入「4 枚磁力灯 / 4 个武器部件」卖点条
   ③ 新增灯效热区点位
   全部用 .restored-v13 前缀提升优先级，确保盖过 campaign-v7 / merch-v8
   ============================================================ */

/* ---- ① 周边尺寸：2026-09-23 晚按猫叔要求「恢复原来的大小」，本段已撤销 ----
   原值来自 campaign-v7 / archive / merch-v8（衣服 48cqw/32.7cqw、鼠标垫 35cqw、挂牌 16cqw、徽章 23cqw）。
   本文件不再覆盖周边的 width/height，只保留必要的定位微调（见文末 ⑥）。 */

/* ---- ② hero 卖点条 ---- */
.restored-v13 .hero-features{display:grid;gap:6px;margin:11px 0 0;padding:0;list-style:none;line-height:1.45}
.restored-v13 .hero-features li{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline;
  padding:7px 10px;background:#ffffffa6;border-left:3px solid #2561ad}
.restored-v13 .hero-features li>b{font-size:clamp(12px,1cqw,17px);font-weight:850;white-space:nowrap;color:#16283a}
.restored-v13 .hero-features li>span{font-size:clamp(11px,.9cqw,15px);color:#3f5361}

/* ---- ③ 灯效热区：锚点已按新主图在文末 ⑧ 重新标定（本行不再定值） ---- */

/* ---- 手机端（≤700px）：卖点条占满整行 ---- */
@media(max-width:700px){
 .restored-v13 .hero-features{grid-column:1/-1;margin-top:7px;gap:4px}
 .restored-v13 .hero-features li{padding:5px 8px;grid-template-columns:auto 1fr;gap:6px}
 .restored-v13 .hero-features li>b{font-size:12px}
 .restored-v13 .hero-features li>span{font-size:11px;line-height:1.4}
}

/* ---- PDP 图集：两大核心卖点卡 ---- */
.restored-v13 .product-features{display:grid;gap:10px;margin:16px 0 4px;padding:14px 0;border-block:1px solid #b7c7d0}
.restored-v13 .product-features-title{margin:0;font-size:17px;color:#244666}
.restored-v13 .product-feature{display:grid;gap:6px;padding:12px 14px;background:#fff;border:1px solid #cfdae1;border-left:3px solid #2561ad}
.restored-v13 .product-feature-head{display:flex;align-items:baseline;gap:9px;margin:0;flex-wrap:wrap}
.restored-v13 .product-feature-badge{flex:none;padding:2px 8px;background:#2561ad;color:#fff;font-size:12px;font-weight:700;border-radius:2px}
.restored-v13 .product-feature-head>strong{font-size:16px;font-weight:850;color:#16283a}
.restored-v13 .product-feature-desc{margin:0;font-size:14px;line-height:1.75;color:#41515e}
.restored-v13 .product-feature-jump{justify-self:start;padding:7px 12px;min-height:40px;background:none;border:1px solid #79909d;color:#244666;font-size:14px;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.restored-v13 .product-feature-jump:hover{color:#477a9b;border-color:#477a9b}
@media(max-width:700px){
 .restored-v13 .product-features{gap:8px;padding:12px 0}
 .restored-v13 .product-features-title{font-size:15px}
 .restored-v13 .product-feature{padding:10px 11px}
 .restored-v13 .product-feature-head>strong{font-size:14px}
 .restored-v13 .product-feature-desc{font-size:13px;line-height:1.7}
 .restored-v13 .product-feature-jump{min-height:44px}
}

/* ============================================================
   2026-09-23 · ④ 收尾：卖点条让文案卡变高后，逐档给出净空
   实测口径（measure_hero_geom.cjs）：三块周边与文案卡的重叠面积必须为 0
   ============================================================ */

/* 桌面 / 平板：卖点条收紧一档（手机档另有更紧的值，勿覆盖） */
@media(min-width:701px){
 .restored-v13 .hero-features{margin-top:9px;gap:5px;line-height:1.42}
 .restored-v13 .hero-features li{padding:6px 9px}
}

/* ============================================================
   2026-09-23 · ⑥ 首屏改版：新主图整张铺满，旧机甲照 + 旧背景一并移除
   · 旧：.hero-paper 挂 approved-background.webp（棚拍灰底城市）+ .mecha-photo 挂 rex-02.webp（剪影 mask）
   · 新：.mecha-photo 换 /assets/rex-hero-scene.webp（自带废墟战场、无 mask），铺满整个 hero
   关键：hero 高度必须 = 66.667cqw（= 100/1.5），正好等于新图 1920×1280 的 3:2，
        这样 object-fit:cover 既不裁也不留边，机甲全身完整；因此要撤掉之前加的平板 min-height。
   ============================================================ */

/* ① 旧背景移除（approved-background.webp 仍被 .apparel-section 使用，不能删文件） */
.restored-v13 .hero-paper{background:none}
.restored-v13 .archive-hero{background:#12161a}

/* ② 新主图铺满首屏：stage / open / photo 三层全部满幅 */
.restored-v13 .mecha-stage{position:absolute;top:0;left:0;width:100%;height:100%;aspect-ratio:auto;perspective:none;z-index:2}
.restored-v13 .mecha-parallax{position:absolute;top:-2%;left:-2%;width:104%;height:104%}
.restored-v13 .mecha-open{width:100%;height:100%;cursor:zoom-in}
.restored-v13 .mecha-photo{width:100%;height:100%;object-fit:cover;object-position:50% 50%;mask-image:none;-webkit-mask-image:none}

/* ③ REX 字标浮在画面上：深色字 + 白色柔光晕，保证任何底色都可读 */
.restored-v13 .hero-type{z-index:4;fill:#10161b;opacity:.95;filter:drop-shadow(0 1px 11px #ffffffe6)}

/* ④ 桌面 / 平板：撤掉平板 min-height，让高度恒等于 66.667cqw（严格 3:2，零裁切） */
@media(min-width:701px){
 .restored-v13 .archive-hero{min-height:0}
}

/* ⑤ 手机：竖屏下 3:2 横图铺满必然横向裁切，把 hero 定在 132cqw（≈ 3:2 的 1.98 倍高）：
     可见横向约 50%（图 x 24.8%–75.3%），机甲本体 x 20.6%–75.2% ⇒ 只削掉左武器最外侧一点点 */
@media(max-width:700px){
 .restored-v13 .archive-hero{height:132cqw;min-height:0}
 .restored-v13 .hero-type{top:3cqw;left:5cqw;width:56cqw;height:14.5cqw}
}

/* 2026-09-23 晚已撤销：原来这里是「手机端四段纵向排布（周边缩到一行）」，因猫叔要求
   周边恢复原始尺寸 + 首屏换新图，该方案整体作废。手机端的 hero 高度 / 字标改见上方 ⑥。 */

/* ============================================================
   2026-09-23 · ⑦ 换图后的三档精修
   实测问题：① 桌面 REX 字标仍是 69cqw 巨幅，整块盖住机甲上半身 → 缩到左上天空区
            ② 周边恢复原尺寸后，右下的鼠标垫重新压住文案卡 → 只调定位、不再缩尺寸
            ③ 底部导航与字标压在照片上，原深色字看不清 → 改浅色 + 投影
   ============================================================ */

/* ③ 压在照片上的文字统一给浅色 + 暗投影 */
.restored-v13 .hero-chapters{color:#eef4f8;text-shadow:0 1px 9px #05080bcc}
.restored-v13 .hero-chapters>span{opacity:.5}

/* ① 字标：桌面 / 平板缩到 44cqw 并挪到左上（x 3.33–47.3cqw），完全避开双肩火炮 */
@media(min-width:701px){
 .restored-v13 .hero-type{top:4cqw;left:3.33cqw;width:44cqw;height:11.42cqw}
 /* ② 文案卡上抬，给右下的鼠标垫让出净空（鼠标垫保持原尺寸 35cqw） */
 .restored-v13 .hero-model-actions{top:22cqw}
}
/* 平板：hero 只 66.7cqw 高，卡片再抬一档才躲得开鼠标垫 */
@media(min-width:701px) and (max-width:1100px){
 .restored-v13 .hero-model-actions{top:13cqw}
}

/* ---- 手机端（≤700px）---- */
@media(max-width:700px){
 /* ① 字标缩到 52cqw 放左上天空区 */
 .restored-v13 .hero-type{top:3cqw;left:5cqw;width:52cqw;height:13.5cqw}

 /* ② 文案卡压成三段紧凑卡（标题 / 价格+运费 / 卖点一条），高 ≈94px —— 只有把卡压矮，
      恢复原尺寸的周边才放得下（原 27cqw 的周边位置必然压住 177px 高的卡） */
 .restored-v13 .hero-model-actions{top:auto;bottom:10px;left:5cqw;width:90cqw;padding:9px 11px;
   display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
 .restored-v13 .hero-model-actions>strong{grid-column:1/-1;font-size:12px;margin:0;line-height:1.35;align-self:auto}
 .restored-v13 .model-price{grid-column:1/-1;grid-row:2;margin:1px 0 0;display:flex;align-items:baseline;gap:9px}
 .restored-v13 .model-price b{font-size:23px}
 .restored-v13 .model-price span{font-size:11px;margin:0}
 .restored-v13 .hero-features{grid-column:1/-1;grid-row:3;margin:3px 0 0;gap:0;line-height:1.3}
 .restored-v13 .hero-features li{padding:2px 0 2px 7px;border-left-width:2px;background:none;
   grid-template-columns:auto 1fr;gap:5px}
 .restored-v13 .hero-features li>b{font-size:11px}
 .restored-v13 .hero-features li>span{font-size:10.5px;line-height:1.3}

 /* ③ 周边：保持原尺寸（衣服 44cqw / 鼠标垫 38cqw / 徽章 23cqw）。
      偏移必须用「按比例」而不是固定 px —— 固定 216px 在 390 刚好，但 hero 越高占比越小，
      到 600–700 档周边会整体下沉压住已标定的热区。42% 在 390 与 216px 完全等价（216/390×1.32≈42%），
      在高档则自动上移，热区与周边互不打架。 */
 .restored-v13 .hero-assortment{bottom:42%}
 .restored-v13 .hero-insignia{bottom:42%}
}
/* 超窄屏（≤380）：hero 只有 370–500px 高，周边若沿用固定 px 偏移会被顶到机甲上半身、
   与热区抢位；改用按比例偏移，让周边整体下沉、给上方热区让出净空。 */
@media(max-width:380px){
 .restored-v13 .hero-assortment,
 .restored-v13 .hero-insignia{bottom:40%}
 /* 280–380 档：周边横贯整幅、下方紧贴文案卡，没有第 4 个热区的容身空间 */
 .restored-v13 .point-base{display:none}
}
/* 平板档（701–1100）：徽章原 bottom 5.7cqw 会让顶上 8px 钻进文案卡底衬里，下压 1.3cqw 避让 */
@media(min-width:701px) and (max-width:1100px){
 .restored-v13 .hero-insignia{bottom:4.4cqw}
}

/* ============================================================
   2026-09-23 · ⑧ 换新主图后的收口：旧背景残留 / 文案可读性 / 热区锚点
   ============================================================ */

/* ① 旧机库背景残留
   .hero-paper 已由 ⑥ 撤背景，但 .bay-frame 也挂着同一张 hero-bay-v7.webp 机库图，
   桌面/平板 z-index:9 整幅铺满 —— 实测 1440 与 768 下 hero 左右各露出一条深色机库立柱，
   与「移除旧背景」直接冲突。这里撤掉背景（元素保留：开舱动画仍以 .bay-left/.bay-right 为钩子）。
   .bay-light 只是一道柔光渐变（opacity .16 / screen），不是背景图，留着做氛围。 */
.restored-v13 .bay-frame{background:none}

/* ② 文案卡可读性
   桌面/平板原本没有底衬：`.hero-model-actions` 文字色是 #151b21（深），旧版靠浅灰棚拍底
   才成立；换成废墟战场照片后，标题与价格直接压在机体深蓝装甲上，实测几乎不可读。
   修法：给「标题」和「价格行」各自补一层浅色底 —— 用元素自身的 ::before，不碰 padding，
   因此不改变已验证过的布局盒（不会把周边顶开）。卖点条的浅底也提到 ~91% 不透明。 */
.restored-v13 .hero-features li{background:none}
@media(min-width:701px){
 .restored-v13 .hero-features li{background:#eef3f6e8}
 .restored-v13 .hero-model-actions>strong,
 .restored-v13 .hero-model-actions .model-price{position:relative}
 .restored-v13 .hero-model-actions>strong::before,
 .restored-v13 .hero-model-actions .model-price::before{content:'';position:absolute;inset:-7px -10px;background:#eef2f4;box-shadow:0 8px 22px #05080b3d;z-index:-1}
}

/* ③ 热区锚点按新主图重标
   先把「标记中心」对齐到 left/top 定位点：`.mecha-point` padding 12px 后，<i> 的中心
   距盒左上各 16.5px，用 translate(-16.5px,-16.5px) 抵消；align-items 改 flex-start
   才能让水平与垂直同时抵消（原本 center 会在纵向上留 25px 偏差）。
   锚点由像素扫描实测：绿色机舱灯 (51.0%,35.8%)、红色磁力灯 (41.9%,27.6%)、
   左臂武器 (29%,36%)、废墟地台 (54%,88%)。 */
.restored-v13 .mecha-point{align-items:flex-start;transform:translate(-16.5px,-16.5px)}
/* 桌面 / 平板：新图 3:2，hero 与图片同比例 ⇒ hero 百分比 = 图片百分比 */
.restored-v13 .point-weapon{top:36%;left:29%}
.restored-v13 .point-light{top:27.6%;left:41.9%}
.restored-v13 .point-armor{top:35.8%;left:51%}
.restored-v13 .point-base{top:88%;bottom:auto;left:54%}

/* 手机：竖屏 cover 只露图片中部（横向约 x 24.7%–74.3%），锚点需按屏幕反算；
   同时 4 个点必须全部避开放大后的周边（y 33.8%–58%）与底部文案卡（y 77.3%–98.1%）。 */
@media(max-width:700px){
 .restored-v13 .point-weapon{top:30%;left:8.4%}
 .restored-v13 .point-light{top:28.2%;left:33.9%}
 .restored-v13 .point-armor{top:30.2%;left:52%}
 .restored-v13 .point-base{top:73.5%;bottom:auto;left:57.9%}
}

/* ============================================================
   2026-09-23 晚 · ⑨ 首屏「方案 B」：机体独占右半幅，放到最大
   —— 本节取代 ⑥⑦⑧ 中所有与首屏布局有关的定位（那几节仅留作历史记录）

   【关键设计】右栏 .mecha-stage 用「高度满屏 + aspect-ratio 反推宽度」：
     stage 宽高比固定 0.9287 ⇒ 照片可见窗口占比恒为 0.9287/1.5 = 61.9%，
     不随视口宽高比漂移 ⇒ 照片百分比与热区百分比一一对应，跨档稳定。
     窗口取照片 x 7.25%–69.1%，把机体本体（x 8%–68%）完整包住、零裁切。
     （若改用「宽度写死 + cover」，窗口占比会随视口比例变化，热区必然漂移。）

   【左栏】自上而下：REX 字标 → 产品信息卡 → 周边 2×2
   【纵向】宽高比 < 3:2 或 ≤1100px：机体独占上半幅，信息与周边依次下排
   ============================================================ */

/* ---- 产品信息：一张深色毛玻璃卡，取代 ⑧② 的三块纯白底衬 ---- */
.restored-v13 .hero-model-actions{
  background:#0b1016bf;border:1px solid #ffffff26;border-radius:16px;
  box-shadow:0 20px 48px #05080bb3;
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  padding:20px 22px 18px;color:#eef4f8;
}
.restored-v13 .hero-model-actions>strong::before,
.restored-v13 .hero-model-actions .model-price::before{content:none}
.restored-v13 .hero-model-actions>strong{color:#f3f7fb}
.restored-v13 .model-price b{color:#ffd166}
.restored-v13 .model-price span{color:#b8c6d3}
.restored-v13 .hero-features li{background:#ffffff12;border-left:2px solid #6fc2e4;border-radius:0 7px 7px 0}
.restored-v13 .hero-features li>b{color:#e9f2f8}
.restored-v13 .hero-features li>span{color:#b5c3cf}
.restored-v13 .hero-type{fill:#eef4f8;opacity:.93;filter:drop-shadow(0 8px 20px #00000059);z-index:4}

/* ---- 机甲战队字标：改用透明底 WebP，撤掉旧的混合模式与反相滤镜 ----
   原图是 253KB 的「SVG 套 base64 白底 PNG」，页头靠 multiply 让白底隐形；
   一旦 header 的混合模式被改成 normal，白底就显形（本次报的问题）。
   现在直接换成去白底后的透明 WebP：页头用黑剪影版、页脚用白剪影版。
   ⚠️ archive.css 里 `.footer-partner img{filter:invert(1)!important;mix-blend-mode:screen}`
    是给「白底黑字」的老 SVG 用的（反相后黑底变透明+白字）。
    现在图本身已经是「透明底白剪影」，再 invert 就变成黑剪影 → 在 #171e24 页脚上几乎看不见。
    必须用 !important 才能压过它。 */
.restored-v13 .archive-partner,
.restored-v13 .archive-partner img,
.restored-v13 .footer-partner img{mix-blend-mode:normal!important;filter:none!important}

/* ---- ⚠️ 透明容器会拦截点击 ----
   为了让周边子项以 hero 为定位基准，两个 .hero-assortment 容器被撑成铺满整块 hero。
   它们背景透明，但**依然会吃掉下层的点击** —— 实测主图可点占比直接掉到 0%。
   所以容器层必须放行指针，只让真正的商品链接接收事件。 */
.restored-v13 .hero-assortment{pointer-events:none}
.restored-v13 .hero-assortment>a{pointer-events:auto}
.restored-v13 .hero-chapters{pointer-events:none}
.restored-v13 .hero-chapters>a{pointer-events:auto}

/* ---- 宽屏分栏（≥1101px 且宽高比 ≥ 3:2）---- */
@media(min-width:1101px) and (min-aspect-ratio:3/2){
 /* ① 机体：贴右、满屏高，宽度由 0.9287 反推 */
 .restored-v13 .mecha-stage{left:auto;right:0;top:50%;transform:translateY(-50%);
   width:auto;height:100%;aspect-ratio:0.9287}
 .restored-v13 .mecha-parallax{top:0;left:0;width:100%;height:100%}
 .restored-v13 .mecha-open{width:100%;height:100%}
 .restored-v13 .mecha-photo{width:100%;height:100%;object-fit:cover;object-position:42% 50%}
 /* ② 照片左缘融进深色左栏，去掉硬切边 */
 .restored-v13 .mecha-stage::after{content:'';position:absolute;left:0;top:0;bottom:0;width:22%;z-index:5;
   background:linear-gradient(90deg,#12161a 5%,#12161a00);pointer-events:none}
 /* ③ REX 字标：左栏顶部（左栏是深色底，字标改浅色） */
 .restored-v13 .hero-type{top:6%;left:4.5%;width:23%;height:auto}
 /* ④ 产品信息卡：左栏中部 */
 .restored-v13 .hero-model-actions{top:20.5%;left:4.5%;width:34%;z-index:7}
 /* ⑤ 周边 2×2：容器铺满 hero，子项直接按 hero 百分比落位 */
 .restored-v13 .hero-assortment{top:0;right:0;bottom:0;left:0;width:auto;height:auto;z-index:6}
 .restored-v13 .assortment-white{left:4.5%;top:55%;bottom:auto;width:17.5%;transform:rotate(-2.5deg)}
 .restored-v13 .assortment-black{left:23.5%;top:55%;bottom:auto;width:17.5%;transform:rotate(2deg)}
 .restored-v13 .assortment-pad{left:4.5%;top:77%;bottom:auto;width:17.5%;transform:rotate(-2deg)}
 .restored-v13 .hero-insignia{left:23.5%;top:77%;right:auto;bottom:auto;width:13%;z-index:6}
 .restored-v13 .hero-insignia-photo{width:100%}
 /* ⑥ 底部导航：移到右栏（照片）底部居中，浅色字压在废墟上 */
 .restored-v13 .hero-chapters{left:42%;right:0;bottom:2.2%;justify-content:center}
 /* ⑦ 热区：窗口占比恒定（61.9%），换算成 stage 坐标后全档通用
      stage% = (照片% − 16) / 61.9  —— 窗口取照片 x 16%–77.9%，左右武器均在框内 */
 .restored-v13 .point-weapon{top:36%;left:21%}
 .restored-v13 .point-light{top:27.6%;left:41.8%}
 .restored-v13 .point-armor{top:35.8%;left:56.5%}
 .restored-v13 .point-base{top:88%;bottom:auto;left:61.4%}

 /* ⑧ 页头左半现在压在深色左栏上：品牌区改浅色，字标换白剪影版
      （页头横跨整幅，左半是深色左栏、右半是照片 —— 所以只改左侧配色） */
 .restored-v13 .archive-header .archive-brand strong,
 .restored-v13 .archive-header .partner-cross{color:#eef4f8}
 .restored-v13 .archive-partner img{content:url('/assets/war-robots-zh-dark.webp')}
}

/* ---- 纵向（≤1100px 或宽高比 < 3:2）：机体独占上半幅 ---- */
@media(max-width:1100px),(max-aspect-ratio:1499/1000){
 /* ① 机体区：宽 100%、高 107.7cqw —— 与宽屏同宽高比，窗口占比同为 61.9% */
 .restored-v13 .mecha-stage{top:0;left:0;width:100%;height:107.7cqw;aspect-ratio:auto;transform:none}
 .restored-v13 .mecha-parallax{top:0;left:0;width:100%;height:100%}
 .restored-v13 .mecha-open{width:100%;height:100%}
 .restored-v13 .mecha-photo{width:100%;height:100%;object-fit:cover;object-position:42% 50%}
 /* ② REX 字标压在机体区左上 */
 .restored-v13 .hero-type{top:2.6%;left:5%;width:34%;height:auto}
 /* ③ 产品信息卡：机体区下方 */
 .restored-v13 .hero-model-actions{top:auto;bottom:auto;left:5%;width:90%;margin-top:112cqw;z-index:7}
 /* ④ 周边 2×2：从 hero 底部往上一行行排（底部锚定，不怕卡片高度波动） */
 .restored-v13 .hero-assortment{top:0;right:0;bottom:0;left:0;width:auto;height:auto;z-index:6}
 .restored-v13 .assortment-white{left:5%;top:auto;bottom:40cqw;width:42.5%;transform:rotate(-2deg)}
 .restored-v13 .assortment-black{left:52.5%;top:auto;bottom:40cqw;width:42.5%;transform:rotate(1.5deg)}
 .restored-v13 .assortment-pad{left:5%;top:auto;bottom:5cqw;width:42.5%;transform:rotate(-1.5deg)}
/* ⚠️ 徽章宽 31% → 25%：徽章盒高 = 宽 × 1.166 ≈ 36.1cqw，比鼠标垫(28.3cqw)高一截，
   放 31% 时盒顶 = heroH−44.1cqw，而黑 T 盒底 = heroH−40cqw
   → 纵向档每档都压 ~4.1cqw（1440 档 59px），宽度扫描 34 项失败全是这一类。
   收到 25% 后盒高 29.2cqw、盒顶 = heroH−37.2cqw，让开 2.8cqw。
   （注意 bottom 是「距底距离」，值越大越靠上；曾误改成 13cqw，重叠反而翻倍。）*/
 .restored-v13 .hero-insignia{left:52.5%;top:auto;right:auto;bottom:8cqw;width:25%;z-index:6}
 .restored-v13 .hero-insignia-photo{width:100%}
 .restored-v13 .hero-chapters{display:none}
 /* ⑤ 热区：与宽屏同一套（stage 宽高比一致 ⇒ 坐标一致） */
 .restored-v13 .point-weapon{top:36%;left:21%}
 .restored-v13 .point-light{top:27.6%;left:41.8%}
 .restored-v13 .point-armor{top:35.8%;left:56.5%}
 .restored-v13 .point-base{top:88%;bottom:auto;left:61.4%}
}

/* ---- 各档 hero 高度（纵向时内容顺序：机体区 → 卡片 → 周边两行）----
   ⚠️ hero 高度只能由「宽度」(cqw) 决定，不能跟视口高度挂钩 ——
      卡片高度是 px 字号撑的、周边位置是 cqw 撑的，两套单位混用，
      hero 一旦偏矮，卡片必然压到周边。
   约束推导（u = 宽度）：
      卡片 top = 1.12u（margin-top:112cqw），卡片 bottom = 1.12u + Hc
      周边首行 top = heroH − 0.74u（bottom:40cqw + 42.5% 宽 ×0.8 图高）
      要「卡片不压周边」⇒ heroH ≥ 1.86u + Hc
   按 Hc≈203px 反推：701px 档最紧，1.86×701+203 = 1507px ≈ 214cqw → 只剩 7px 余量；
   宽度扫描实测 701 档确有一处 ~11px 重叠。故提到 222cqw（余量 ~49px）。*/
@media(min-width:701px) and (max-width:1100px){
 .restored-v13 .archive-hero{height:222cqw;min-height:0}
}
/* ⚠️ 漏网区间：w ≥ 1101 但视口比 3:2 更「竖」（1280×1024、1600×1200、浏览器窗口拉高都算）。
   这类视口走纵向堆叠（分栏要求 aspect ≥ 3/2），可上面只给 ≤1100 定义了 hero 高度，
   于是它退到桌面档默认的 66.7cqw，而机体区是 107.7cqw ——
   机体区直接溢出到卡片/周边底下：实测周边全压在机体上、主图可点占比由 90% 掉到 17%。
   这是「抽 6 个视口」扫不到的档，靠宽度扫描（含 1101×1468 / 1280×1707 / 1440×1920）才暴露。*/
@media(min-width:1101px) and (max-aspect-ratio:1499/1000){
 .restored-v13 .archive-hero{height:222cqw;min-height:0}
}
@media(max-width:700px){
 .restored-v13 .archive-hero{height:238cqw;min-height:0}
 .restored-v13 .hero-model-actions{margin-top:114cqw;padding:15px 16px 14px;gap:4px}
 .restored-v13 .hero-model-actions>strong{font-size:13px}
 .restored-v13 .model-price b{font-size:26px}
 .restored-v13 .hero-type{width:38%}
}
/* 超窄档（280px = 折叠屏外屏）标题换行更多、卡片更高，242cqw 余量归零 → 提到 256cqw */
@media(max-width:380px){
 .restored-v13 .archive-hero{height:256cqw}
 .restored-v13 .point-base{display:none}
}

/* ============================================================
   首屏「周边四件」区域底色装饰（2026-09-23）
   背景：白T / 黑T / 鼠标垫 / 徽章 四件周边落在 hero 的深色底色上（≈#070a11），
        观感是一块纯黑，显得单调。要在「产品仍清晰可见」的前提下垫一层背景内容。
   做法：低对比的六层叠加 —— 承托面渐变 + 顶部微光 + 品牌双色辉光 + 地面光 +
        蓝图网格 + 角标，另加一行说明字。全部低于商品层级、且不吃指针事件。
   ⚠️ 四条硬约束（踩过就别再踩）：
     ① z-index 必须低于周边(6)与信息卡(7) ⇒ 取 4，只盖 hero 自身底色；
     ② pointer-events:none —— 否则这层会把主图与周边的点击全吃掉（同 .hero-assortment 的坑）；
     ③ 几何只能用 cqw。周边位置是 cqw/%（随宽度缩放）、信息卡高度是 px 字号撑的，
        所以「装饰层顶边」不能贴死信息卡，必须锚在「周边首行上方 1–2cqw」处；
     ④ ⚠️ 说明字是装饰层的**子元素**，所以 top/bottom 是相对「装饰层盒」而不是 hero ——
        分栏档第一版按 hero 坐标写 top:37.4cqw，实际落到 1038px 直接跑出画面（已修）。
   实测锚点（各档一致）：
     周边首行（白T）顶边距 hero 底 = 74.7cqw；鼠标垫/徽章底边距底 = 5–8cqw
     信息卡底边距 hero 底 —— 分栏档最紧只到 30.7cqw（1101×734），堆叠档最紧 81.1cqw（701×1558）
     故：纵向档说明字放 76.5cqw（白T 上方 ~1.8cqw、信息卡下方 ≥4.6cqw）。
   ⚠️ 第一版把各层 alpha 给到 .10–.18，压在 #12161a 上几乎看不见（等于没做），
      现已按「肉眼可见但不抢产品」重新配平：网格 .075 / 辉光 .20–.24 / 地面光 .16。
   ============================================================ */
/* ⚠️ 第一版把各层 alpha 给到 .10–.18，压在 #12161a 上几乎看不见（等于没做）；
      第二版把红/青辉光铺满整块面板，又差点把白 T 染成粉（实测底色仍纯白才算过关）。
      终版改为「颜色只给净空、光晕只给柔光」：辉光压回 .20–.24 并挪到面板下部，
      另加 4 束中性聚光对准四件产品（不引入色偏，只把产品从黑底上「托」起来）。 */
.restored-v13 .hero-assort-decor{
  position:absolute;left:0;right:0;bottom:0;height:80cqw;
  z-index:4;pointer-events:none;
  background:
    /* 四束中性聚光：位置按「面板百分比」定，与产品在面板里的位置一一对应
       （实测分栏与纵向两套版式下，四件产品落在面板里的百分比几乎重合：
        白T(27,28) 黑T(70,28) 鼠标垫(26,73) 徽章(64,74) ⇒ 一份坐标两档通用） */
    radial-gradient(26% 30% at 27% 28%, rgba(196,219,245,.11), transparent 72%),
    radial-gradient(26% 30% at 70% 28%, rgba(196,219,245,.11), transparent 72%),
    radial-gradient(26% 30% at 26% 73%, rgba(196,219,245,.10), transparent 72%),
    radial-gradient(26% 30% at 64% 74%, rgba(196,219,245,.10), transparent 72%),
    radial-gradient(70% 58% at 20% 84%, rgba(255,59,48,.24), transparent 70%),
    radial-gradient(64% 52% at 88% 68%, rgba(34,211,238,.20), transparent 68%),
    radial-gradient(64% 11% at 46% 99%, rgba(214,232,255,.20), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, rgba(8,11,17,.10) 0%, rgba(8,11,17,.55) 42%, rgba(4,6,10,.92) 100%);
}
/* 蓝图网格：单独一层，径向遮罩让它自然消散，避免出现硬边 */
.restored-v13 .hero-assort-decor::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:2.8cqw 2.8cqw;
  -webkit-mask-image:radial-gradient(128% 98% at 28% 90%, #000 12%, transparent 80%);
  mask-image:radial-gradient(128% 98% at 28% 90%, #000 12%, transparent 80%);
}
/* 左缘「书脊」：品牌双色的纵向光带，压在 hero 最左 3px。
   为什么放这儿 —— 周边主体从 x 4.2cqw 才开始，左缘 0–4.2cqw 是全档唯一「任何宽度都碰不到产品」的净空，
   所以饱和的颜色只给它。 */
.restored-v13 .hero-assort-decor::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg, rgba(255,59,48,.92) 0%, rgba(255,255,255,.22) 42%, rgba(34,211,238,.85) 100%);
}
.restored-v13 .hero-assort-decor-label{
  position:absolute;left:5cqw;bottom:76.5cqw;
  font:600 10px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;color:rgba(232,240,250,.68);white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* ---- 宽屏分栏：装饰层改成「左栏下半幅」的一块承托面 ----
   左栏真实可用宽度 = 100% − 机体区 61.9% = 38.1cqw，再往右是照片左缘 22% 的渐变过渡带，
   所以面板取 48cqw 并在右缘做遮罩淡出（78% 处开始消失），保证碰不到真正露出的照片。
   顶边 32cqw > 周边首行顶边 30.37cqw，留 1.6cqw 余量；
   底层 1101×734 时信息卡底边在 30.7cqw，面板顶边(32)在其上方 1.3cqw —— 被卡挡住也无妨，卡是不透明的。 */
@media(min-width:1101px) and (min-aspect-ratio:3/2){
 .restored-v13 .hero-assort-decor{
   right:auto;width:48cqw;height:32cqw;
   -webkit-mask-image:linear-gradient(90deg,#000 0 78%,transparent 100%);
   mask-image:linear-gradient(90deg,#000 0 78%,transparent 100%);
 }
 /* 分栏时周边首行顶边只比信息卡底边低 0.3–8cqw，放不下一行横排说明字
    （1101×734 净空仅 3.6px）——改竖排，落在左栏 0–4.2cqw 的空白边距里，任何宽度都不会撞。
    分栏档 hero 恒为 66.67cqw、面板恒为 32cqw ⇒ 面板顶边在 hero 的 34.67cqw 处，
    要让字顶落在 hero 37.4cqw ⇒ 面板内 top = 37.4 − 34.67 = 2.7cqw。 */
 .restored-v13 .hero-assort-decor-label{
   left:1.4cqw;bottom:auto;top:2.7cqw;
   writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.26em;
 }
}