/* ============================================================
   CardSpicy · Protection Line hero —— v5「胶片带 / 与口号合并」
   ------------------------------------------------------------
   v4「胶片带」的运动模型保留：一条轻微倾斜、永不停走的带子，
   左边进来、中间过闸口装上保护壳、右边出去。循环是数学上的
   （位置 = (序号×间距 + 已走距离) mod 总长），没有接缝。

   ── v5 改了三件事 ────────────────────────────────────────────
   ① **与首屏口号合并成一块「展台」**（见文件末「3. 合并构成」）。
      两段在模板里是相邻兄弟（cardspicy/home-banner →
      cardspicy/protection-line），所以合并只用 CSS，不动块结构：
      给 body 挂 cs-hero-comp-a / -b / -c，由
      cs-hero-line.php 的 body_class 过滤器输出。
   ② **慢**。桌面 92 → 48 px/s（−48%）。一张卡横穿展台约 27 秒。
   ③ **丝滑**。速度不再是「跑/停」两态，而是一个每帧向目标做指数
      逼近的系数（hero.js 的 factor）：悬停缓降到 22%，移开再缓升，
      载入时从 0 缓缓提速。全程没有一次速度突变。

   🔴 改完请把 cs-hero-line.php 的 CS_HERO_LINE_VER 加一；
      asset 版本号取 filemtime()，CF 会自动绕过旧缓存。
   ============================================================ */
.cs-hero-wrap{display:block}

/* ------------------------------------------------------------
   0. 首屏横幅的副标题（归属 cs-site-chrome.php 的 home-banner）
   ------------------------------------------------------------
   v5 起：**按钮删掉了、空副标题不再输出**（红板里只剩口号一行），
   所以这里已没有需要补位的规则。这段留着只为兼容 —— 万一以后
   又把副标题填回来，空 <p> 靠它撑一行高度，填字不跳版。
   ------------------------------------------------------------ */
.cs-banner p.is-empty{min-height:1.5em}

.cspl{
  /* —— 墨 / 线 / 面 —— */
  --ink:#1d1d1f;--ink2:#4a4a4f;--muted:#86868b;
  --hair:rgba(0,0,0,.07);
  --band:#f3f4f7;              /* v4 是 #f8f8f9 —— 深两档，白色的壳/卡才浮得出来 */
  --accent:#8B1A1A;

  /* —— 卡片尺寸（三种壳的几何都从这组值派生，别乱改）—— */
  --cw:68px;--ch:95px;--mpad:12px;
  --thumb-w:calc(var(--cw) + var(--mpad) * 2);
  --thumb-h:calc(var(--ch) + var(--mpad) * 2);

  /* —— 胶片带 —— */
  --fl-tilt:-2.6deg;           /* v4 是 -3deg —— 收敛一点，读起来更稳 */
  --fl-jit:1.15deg;
  --fl-gap:52px;
  --fl-speed:50;               /* px/s（JS 读这个值驱动）—— v4 是 82
                                  🔴 2026-09-22 用户要「稍微加快」：42 → 50（+19%）。
                                  四档同比例上调，见第 5 节响应式。 */
  --fl-perf:38px;              /* 齿孔间距周期 */
  --gate-dy:0px;
  --gate-gap:18px;
  --reel-h:240px;              /* 无 JS 兜底；有 JS 时 build() 会按实测算出并覆盖 */

  --pad:20px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

.cspl *,.cspl *::before,.cspl *::after{box-sizing:border-box}
.cspl{
  position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;
  padding:clamp(26px,3.4vw,48px) var(--pad) clamp(12px,1.8vw,22px);
  background:#fff;
}
.cspl a{color:inherit;text-decoration:none}
.cspl__inner{max-width:1180px;margin:0 auto}

/* ============================================================
   1. 胶片带本体
   ============================================================ */
.cspl__reel{
  position:relative;
  margin:0 calc(-1 * var(--pad));      /* 出血到展台两边：带子要「无限长」才像胶片 */
  height:var(--reel-h);
  overflow:hidden;                      /* 只在这里裁 —— 相当于放映机的片门 */
  /* v5：两端渐隐。带子收进容器之后不能再硬切，否则展台边上会多出一条
     被切平的灰边；mask 让卡片在边缘「化开」，这是 v4 全屏出血时不需
     要、v5 收进容器后必须补的一步。 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}

.cspl__strip{
  position:absolute;left:50%;top:50%;
  width:calc(100% + 420px);             /* 运行时由 JS 按实际格数覆盖 */
  height:calc(var(--thumb-h) + 26px);
  transform:translate(-50%,-50%) rotate(var(--fl-tilt));
  background:var(--band);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;
  gap:var(--fl-gap);
}
/* 未进实时模式（减少动效 / 无 JS）：带子收窄到刚好铺满，静态卡不会挤在超长带子正中间 */
.cspl:not(.is-live) .cspl__strip{width:calc(100% + 40px);min-width:max-content}

/* 齿孔：v5 改由 JS 用 --fl-perf-x 驱动（hero.js 的 place()）。
   🔴 v4 是一条 CSS keyframes 动画，快慢只跟「名义速度」走 —— 悬停减速时
      卡片慢下来了，齿孔还照原速跑，读起来像「车慢轮快」。改成同一条
      时间轴之后，加减速天然同步。 */
.cspl__strip::before,.cspl__strip::after{
  content:"";position:absolute;left:-60px;right:-60px;height:3px;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.055) 0 5px,transparent 5px var(--fl-perf));
  background-position-x:var(--fl-perf-x,0px);
}
.cspl__strip::before{top:8px}
.cspl__strip::after{bottom:8px}

/* ---------- 闸口：卡片在这里「穿上」保护壳 ---------- */
.cspl__gate{position:absolute;inset:0;z-index:11;pointer-events:none}
.cspl__gate-line{
  position:absolute;left:50%;top:50%;
  width:1px;height:calc(var(--thumb-h) + 74px);
  transform:translate(-50%,-50%);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.085) 14%,rgba(0,0,0,.085) 86%,rgba(0,0,0,0));
}
.cspl__gate-mark{
  position:absolute;left:50%;z-index:12;
  /* 悬在带子上沿之外 —— 压在中线上会正好盖住过闸口那张卡的正面 */
  top:calc(50% - (var(--thumb-h) + 26px) / 2 - var(--gate-gap) + var(--gate-dy));
  transform:translate(-50%,-50%);
  /* v5：42 → 46px。站标是「红框黑面两只白眼睛」，42 时在缩到 30px 就糊成
     一个黑点；46 才看得出是张脸。（hero.js 的 build() 会量它的实际高度
     来算 reel 头顶空间，所以这个数字改了不用同步别处。） */
  /* 🔴 正方形，不做圆角（用户 2026-09-22）：圆形裁切会把站标四角吃掉，
     站标是「红框黑面两只白眼睛」，四角正好是红框的转角，被裁掉就残缺。 */
  width:46px;height:46px;border-radius:0;background:#fff;padding:6px;
  box-shadow:0 0 0 1px var(--hair),0 8px 20px rgba(20,25,40,.15);
}
.cspl__gate-mark img{width:100%;height:100%;display:block;border-radius:0}
.cspl__gate-mark::after{
  content:"";position:absolute;inset:-2px;border-radius:0;pointer-events:none;
  border:1.5px solid rgba(139,26,26,.4);opacity:0;
}
.cspl__gate.is-firing .cspl__gate-mark::after{animation:cs-gate .72s var(--ease-out) 1}
@keyframes cs-gate{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(2.05)}}

/* ============================================================
   2. 胶片里的一格（= 一个可点条目）
   ============================================================ */
.cspl-item{
  position:relative;flex:0 0 auto;width:var(--thumb-w);
  display:flex;flex-direction:column;align-items:center;
  background:none;border:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* 🔴 left 必须是 50%（带子中线）而不是 0 —— 用 left:0 的话基准是带子左边缘，
      而带子比屏幕宽得多 ⇒ 所有卡片会被整体推偏 half 那么远。 */
.cspl.is-live .cspl-item{position:absolute;left:50%;top:50%;will-change:transform}
.cspl-item:focus-visible{outline:none}
.cspl-item:focus-visible .cspl-thumb{box-shadow:0 0 0 3px rgba(139,26,26,.32),0 14px 30px rgba(20,25,40,.12)}

.cspl-thumb{
  position:relative;width:100%;height:var(--thumb-h);
  display:grid;place-items:center;border-radius:10px;
  transition:transform .5s var(--ease-out);   /* v5：悬停轻轻浮起 */
}
.cspl.is-live .cspl-item:hover .cspl-thumb{transform:translateY(-4px)}

/* 挂载盒：保护壳锚定它 —— 与格宽解耦，卡片被挤压也影响不到壳 */
.cspl-mount{
  position:relative;display:grid;place-items:center;
  width:calc(var(--cw) + var(--mpad) * 2);
  height:calc(var(--ch) + var(--mpad) * 2);
}
.cspl-card{
  position:relative;z-index:3;display:block;
  width:var(--cw);height:var(--ch);object-fit:cover;border-radius:5px;
  box-shadow:0 5px 14px rgba(20,25,40,.13),0 1px 3px rgba(20,25,40,.07);
  background:#fff;
}
/* 商品主图（`fit=photo`）：站上带图的商品主图是 1200×1600 的「整块评级壳」
   合成图，四周留了一圈浅灰底。直接 object-fit:cover 会让壳显得小、灰边显
   得宽；放大 12% 再居中把灰边收到最窄，同时**不切到壳本身**。 */
.cspl-photo{
  position:relative;z-index:3;display:block;
  width:var(--cw);height:var(--ch);border-radius:5px;overflow:hidden;background:#fff;
  box-shadow:0 5px 14px rgba(20,25,40,.13),0 1px 3px rgba(20,25,40,.07);
}
.cspl-photo img{position:absolute;left:50%;top:50%;width:112%;height:auto;transform:translate(-50%,-50%);display:block}

/* ============================================================
   3. 保护壳（纯 CSS 绘制 —— 站上 6 个护具商品 6/6 都没有主图）
   ============================================================ */
.cspl-case{position:absolute;inset:0;pointer-events:none}
/* ⚠️ .cspl-case 本身绝不设 z-index —— 一设就形成层叠上下文，
      里面的子元素再也压不过 .cspl-card（壳要做成「卡在里面」的观感）。*/

/* --- 3a. 磁吸展示框：四条边轨 + 四角螺钉 --- */
.cspl-case--frame .rail{
  position:absolute;z-index:2;border-radius:3px;opacity:0;
  background:linear-gradient(140deg,rgba(255,255,255,.97),rgba(203,210,221,.86) 42%,rgba(255,255,255,.99));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 3px 10px rgba(20,25,40,.13);
}
.cspl-case--frame .rail--t,.cspl-case--frame .rail--b{left:calc(var(--mpad) - 11px);right:calc(var(--mpad) - 11px);height:11px}
.cspl-case--frame .rail--l,.cspl-case--frame .rail--r{top:var(--mpad);bottom:var(--mpad);width:11px}
.cspl-case--frame .rail--t{top:calc(var(--mpad) - 11px);transform:translateY(-30px)}
.cspl-case--frame .rail--b{bottom:calc(var(--mpad) - 11px);transform:translateY(30px)}
.cspl-case--frame .rail--l{left:calc(var(--mpad) - 11px);transform:translateX(-30px)}
.cspl-case--frame .rail--r{right:calc(var(--mpad) - 11px);transform:translateX(30px)}
.cspl-case--frame .screw{
  position:absolute;z-index:5;width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(120,128,142,.5),0 1px 2px rgba(20,25,40,.24);
  opacity:0;transform:scale(.2);
}
/* 🔴 这里原来是 :nth-of-type(1..4)。展示框的 8 个零件**全是 <span>**，
      :nth-of-type 数的是「同标签名里的第几个」，于是 1–4 全落在四条边轨上、
      四颗螺钉一颗也没被定位到。改成显式类名，位置不再依赖兄弟顺序。 */
.cspl-case--frame .screw--tl{left:calc(var(--mpad) - 8px);top:calc(var(--mpad) - 8px)}
.cspl-case--frame .screw--tr{right:calc(var(--mpad) - 8px);top:calc(var(--mpad) - 8px)}
.cspl-case--frame .screw--bl{left:calc(var(--mpad) - 8px);bottom:calc(var(--mpad) - 8px)}
.cspl-case--frame .screw--br{right:calc(var(--mpad) - 8px);bottom:calc(var(--mpad) - 8px)}

/* --- 3b. 卡套：半透明套边 + 高光扫过 --- */
.cspl-case--sleeve .sleeve{
  position:absolute;z-index:2;inset:calc(var(--mpad) - 6px);border-radius:9px;
  background:linear-gradient(150deg,rgba(228,236,246,.5),rgba(199,214,233,.34) 60%,rgba(233,241,249,.52));
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.94),0 0 0 1px rgba(118,140,170,.32),0 6px 16px rgba(30,40,60,.1);
  opacity:0;transform:scale(1.13);
}
.cspl-case--sleeve .gloss-wrap{position:absolute;z-index:5;inset:calc(var(--mpad) - 6px);border-radius:9px;overflow:hidden;pointer-events:none}
.cspl-case--sleeve .gloss{
  position:absolute;inset:0;
  background:linear-gradient(103deg,transparent 30%,rgba(255,255,255,.9) 46%,transparent 62%);
  transform:translateX(-125%);
}

/* --- 3c. 卡册：活页页 + 环孔 + 卡袋压边 --- */
.cspl-case--binder .page{
  position:absolute;z-index:2;inset:calc(var(--mpad) - 14px);border-radius:10px;overflow:hidden;
  background:linear-gradient(165deg,#ffffff,#f4f5f7 55%,#edeff2);
  box-shadow:inset 0 0 0 1px rgba(158,166,178,.36),0 7px 20px rgba(20,25,40,.13);
  opacity:0;transform:scale(.9);
}
.cspl-case--binder .page::after{
  content:"";position:absolute;top:9%;bottom:9%;right:9px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(158,166,178,.55),transparent);
}
.cspl-case--binder .pocket{
  position:absolute;z-index:2;top:calc(var(--mpad) - 6px);bottom:calc(var(--mpad) - 6px);left:50%;
  transform:translateX(-50%);width:calc(var(--cw) + 8px);border-radius:7px;
  background:linear-gradient(160deg,rgba(237,243,251,.66),rgba(212,225,241,.46));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.88),0 0 0 1px rgba(118,140,170,.22);
  opacity:0;
}
.cspl-case--binder .hole{
  position:absolute;z-index:5;left:calc(var(--mpad) - 12px);width:7px;height:7px;border-radius:50%;
  background:#fbfbfc;box-shadow:inset 0 0 0 1.5px rgba(148,156,168,.62),inset 0 1px 2px rgba(20,25,40,.15);
  opacity:0;transform:scale(.3);
}
/* 🔴 位置必须用显式类名，不能用 :nth-of-type —— 零件全是 <span>，会整体错一格 */
.cspl-case--binder .hole--t{top:22%}
.cspl-case--binder .hole--m{top:calc(50% - 3.5px)}
.cspl-case--binder .hole--b{bottom:22%}

/* --- 3d. 组装：卡片过闸口的那一下（.is-built）---
   v5：时长整体 ×1.3。速度砍半之后卡片在视野里待得更久，装配如果还按
   v4 的节拍，会变成「啪一下装好然后干等」。放慢之后才像慢慢合上。 */
.cspl-item.is-built .cspl-case--frame .rail{opacity:1;transform:none;transition:opacity .4s var(--ease-out),transform .68s var(--ease-out)}
.cspl-item.is-built .cspl-case--frame .rail--l{transition-delay:.13s}
.cspl-item.is-built .cspl-case--frame .rail--r{transition-delay:.13s}
.cspl-item.is-built .cspl-case--frame .rail--b{transition-delay:.25s}
.cspl-item.is-built .cspl-case--frame .screw{opacity:1;transform:none;transition:opacity .33s,transform .52s var(--ease-out)}
.cspl-item.is-built .cspl-case--frame .screw--tl{transition-delay:.40s}
.cspl-item.is-built .cspl-case--frame .screw--tr{transition-delay:.47s}
.cspl-item.is-built .cspl-case--frame .screw--bl{transition-delay:.54s}
.cspl-item.is-built .cspl-case--frame .screw--br{transition-delay:.61s}

.cspl-item.is-built .cspl-case--sleeve .sleeve{opacity:1;transform:scale(1);transition:opacity .45s var(--ease-out),transform .66s var(--ease-out)}
.cspl-item.is-built .cspl-case--sleeve .gloss{transform:translateX(125%);transition:transform 1s var(--ease) .3s}

.cspl-item.is-built .cspl-case--binder .page{opacity:1;transform:none;transition:opacity .42s var(--ease-out),transform .68s var(--ease-out)}
.cspl-item.is-built .cspl-case--binder .pocket{opacity:1;transition:opacity .4s var(--ease-out) .26s}
.cspl-item.is-built .cspl-case--binder .hole{opacity:1;transform:none;transition:opacity .3s,transform .55s var(--ease-out)}
.cspl-item.is-built .cspl-case--binder .hole--t{transition-delay:.21s}
.cspl-item.is-built .cspl-case--binder .hole--m{transition-delay:.31s}
.cspl-item.is-built .cspl-case--binder .hole--b{transition-delay:.41s}

/* 首帧不许有过渡 —— 否则服务端渲染的「已装壳」会当着人面褪成裸卡 */
.cspl.is-jump .cspl-case *{transition-duration:.01ms!important;transition-delay:0s!important}

/* ============================================================
   4.（已移除）暂停键 —— 用户 2026-09-22 要求去掉右下角的暂停/开始按钮。
   ------------------------------------------------------------
   无障碍说明：WCAG 2.2.2 要求的「暂停能力」仍由另外三条兜住 ——
     ① 系统级 prefers-reduced-motion ⇒ hero.js 直接不进实时模式（完全静止）
     ② 鼠标悬停单张 ⇒ 降到 22% 速度（KEEP）
     ③ 键盘聚焦单张 ⇒ 完全停住（focused）
   ============================================================ */

/* ============================================================
   5. 响应式
   ------------------------------------------------------------
   桌面两档 + 手机两档；每档都验算过「倾斜后的带子会不会溢出」，
   并且 --reel-h 的兜底值 = strip 高 + max(倾斜抬升, 标记高+2×gap) + 10。
   ============================================================ */
@media (min-width:1000px){ .cspl{--cw:76px;--ch:106px;--mpad:14px;--fl-gap:64px;--fl-speed:54;--reel-h:254px} }
@media (min-width:1216px){ .cspl{--cw:96px;--ch:134px;--mpad:20px;--fl-gap:76px;--fl-speed:58;--reel-h:294px} }

@media (max-width:880px){
  .cspl{--cw:70px;--ch:98px;--mpad:13px;--fl-gap:36px;--fl-speed:41;--fl-tilt:-2.1deg;--fl-jit:.95deg;--gate-gap:14px;--reel-h:222px}
  .cspl__strip{height:calc(var(--thumb-h) + 22px)}
  .cspl__gate-mark{width:36px;height:36px;padding:5px}
}
@media (max-width:420px){
  .cspl{--cw:62px;--ch:87px;--mpad:11px;--fl-gap:30px;--fl-speed:36;--reel-h:205px;--pad:12px}
  .cspl__strip{height:calc(var(--thumb-h) + 20px)}
}

/* ============================================================
   6. 动效降级
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .cspl-item,.cspl-item.is-built .cspl-case *{transition-duration:.01ms!important;transition-delay:0s!important}
}

/* ============================================================
   7. 合并构成 —— 红口号板 + 白胶片板 = 一个物体
   ------------------------------------------------------------
   两个块在模板里是相邻兄弟（home-banner → protection-line），
   所以合并是纯 CSS 的事：给 body 挂 cs-hero-comp-a / -b / -c。

   🔴 选择器一律带 `body.home.cs-hero-comp-X` 前缀 ⇒ 权重 (0,3,n)，
      稳压 Header 42 那批 (0,1,n) 的老横幅规则。这一点很重要：
      Header 42 的 <style> 在**正文里**输出（模板部件的一部分），
      而 hero.css 在 wp_head 里 —— 文档顺序上 Header 42 更靠后，
      同权重的话老规则会反杀。靠前缀拉权重才是稳的。

   🔴 白底口径：页面与白板都是纯白，红只留在口号那一块里。
      三边一条 rgba(0,0,0,.07) 发丝线；**两块之间那道接缝不画线** ——
      所以看不出是两块。
   ============================================================ */

/* ---- A：一块展台（默认）------------------------------------------
   红板在上（只有上角是圆的），白板在下（下角是圆的）。 */
body.home.cs-hero-comp-a .cs-banner-wrap{
  width:min(1180px, 100% - var(--gut) * 2);
  margin:clamp(18px,2.2vw,30px) auto 0;
  position:relative;
}
body.home.cs-hero-comp-a .cs-banner{
  border-radius:26px 26px 0 0;
  padding:clamp(46px,4.8vw,70px) clamp(22px,3.4vw,48px) clamp(38px,3.8vw,54px);
}
body.home.cs-hero-comp-a .cs-hero-wrap{
  width:min(1180px, 100% - var(--gut) * 2);
  margin:0 auto clamp(18px,2.6vw,34px);
}
body.home.cs-hero-comp-a .cspl{
  border:1px solid var(--hairline);
  border-top:0;
  border-radius:0 0 26px 26px;
  /* overflow:hidden + padding-bottom ≥ 圆角半径 —— 带子是出血到展台左右边的，
     底部若离圆角太近，带子那条灰边会在圆角处冒出来一个小方角。 */
  overflow:hidden;
  padding:clamp(18px,2.2vw,30px) var(--pad) clamp(20px,2vw,28px);
}

/* ---- B：白板上钉一块红铭牌 ---------------------------------------
   白板四角全圆、四边发丝线；红色口号缩成居中铭牌，压在白板上沿上。 */
body.home.cs-hero-comp-b .cs-banner-wrap{
  position:relative;z-index:3;
  width:min(1180px, 100% - var(--gut) * 2);
  margin:clamp(26px,3vw,46px) auto -32px;
  text-align:center;
}
body.home.cs-hero-comp-b .cs-banner{
  display:inline-block;text-align:center;
  border-radius:20px;
  padding:clamp(20px,2vw,28px) clamp(26px,3.2vw,50px);
  box-shadow:0 16px 36px rgba(139,26,26,.2);
}
body.home.cs-hero-comp-b .cs-banner h1{
  font-size:clamp(23px,2.5vw,34px);
  letter-spacing:-1.1px;margin:0;max-width:none;
}
body.home.cs-hero-comp-b .cs-hero-wrap{
  position:relative;z-index:1;
  width:min(1180px, 100% - var(--gut) * 2);
  margin:0 auto clamp(18px,2.6vw,34px);
}
body.home.cs-hero-comp-b .cspl{
  border:1px solid var(--hairline);
  border-radius:26px;
  overflow:hidden;
  /* 上内边距要大过「铭牌压进来的 32px + 一点呼吸」 */
  padding:clamp(56px,5.4vw,76px) var(--pad) clamp(20px,2vw,28px);
}

/* ---- C：满宽、不说圆角（最接近改造前的保守版）--------------------- */
body.home.cs-hero-comp-c .cs-banner{
  padding:clamp(46px,5vw,72px) clamp(22px,3.4vw,48px) clamp(26px,2.6vw,40px);
}
body.home.cs-hero-comp-c .cspl{
  padding:clamp(14px,1.6vw,22px) var(--pad) clamp(12px,1.4vw,20px);
}

/* ---- 合并构成共同用到的两个变量（只有首页会挂 cs-hero-comp-*）---- */
body.home.cs-hero-comp-a,
body.home.cs-hero-comp-b,
body.home.cs-hero-comp-c{ --gut:clamp(12px,2.4vw,28px); --hairline:rgba(0,0,0,.07); }

/* ---- 合并构成共同的：h1 底部那 20px 要让出来 -------------------
   Header 42 给 `.cs-banner h1` 定了 `margin: 0 auto 20px`，那是为**原来的
   按钮**留的间距。按钮删掉之后这 20px 变成红板底部的一块死白 —— 一条只有
   一行字的红板，多一点都是多余。副标题（若哪天填了）改成自己带上间距。 */
body.home.cs-hero-comp-a .cs-banner h1,
body.home.cs-hero-comp-b .cs-banner h1,
body.home.cs-hero-comp-c .cs-banner h1{ margin-bottom:0; }
body.home.cs-hero-comp-a .cs-banner p,
body.home.cs-hero-comp-b .cs-banner p,
body.home.cs-hero-comp-c .cs-banner p{ margin:14px auto 0; }