:root{
  --bg:#eff8f1;
  --bg-2:#ffffff;
  --panel:rgba(255,255,255,.58);
  --panel-2:rgba(255,255,255,.78);
  --line:rgba(15,15,15,.08);
  --line-strong:rgba(15,15,15,.15);
  --text:#1c1b19;
  --text-soft:#3d3c38;
  --muted:#66655f;
  --muted-2:#9e9d97;
  --accent:#e8590c;
  --accent-deep:#c74a09;
  --accent-soft:rgba(232,89,12,.10);
  --wa:#17a34a;
  --wa-deep:#12833b;
  --ok:#3f9c73;
  --leaf:#4cae83;
  --leaf-deep:#378a66;
  --leaf-soft:rgba(88,180,138,.14);
  --leaf-glow:rgba(120,205,168,.14);
  --glass-border:rgba(255,255,255,.62);
  --glass-hairline:rgba(35,30,22,.07);
  --shadow-soft:0 22px 50px -22px rgba(64,55,30,.22);
  --shadow-float:0 30px 70px -28px rgba(64,55,30,.30);
  --radius:20px;
  --radius-s:12px;
  --font:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.21,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:var(--bg);
}
/* v94 性能：整页底色原来挂在 body 上用 background-attachment:fixed，
   浏览器每滚一帧都要把整屏重绘一遍。改成独立的固定图层，视觉表现完全一致，
   但它可以被单独合成，滚动时不再逐帧重绘。 */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--bg);
  background-image:
    radial-gradient(60% 45% at 12% -5%,rgba(255,255,255,.9),transparent 65%),
    radial-gradient(55% 42% at 96% 6%,rgba(141,214,179,.30),transparent 60%),
    radial-gradient(60% 45% at 88% 80%,rgba(141,214,179,.22),transparent 62%),
    linear-gradient(180deg,#f8fcf9 0%,#d6ecde 100%);
}
/* v95：区块光斑要往屏幕外延伸才没有生硬的边，但横向上会把整页撑出滚动条。
   只在 main 上裁掉横向溢出；clip 不生成滚动容器，顶栏的 sticky 不受影响。 */
main{overflow-x:clip}
.home-after{
  position:relative;isolation:isolate;
  /* v105：底色 + 每四屏一颗点缀（v103 是每两屏，再减一半）。
     背景瓦片高 800vh，里面放两颗（在 25% 和 75%，横向左右错开），
     纵向平铺后每 400vh 出一颗。大小仍参照首屏左上角那片（横向约屏宽 42%、纵向约 40vh）。 */
  background-image:
    radial-gradient(42% 5% at 16% 25%,rgba(255,142,152,.19) 0%,rgba(255,142,152,.146) 26%,rgba(255,142,152,.094) 48%,rgba(255,142,152,.051) 66%,rgba(255,142,152,.023) 80%,rgba(255,142,152,.007) 90%,rgba(255,142,152,0) 100%),
    radial-gradient(42% 5% at 72% 75%,rgba(255,164,158,.17) 0%,rgba(255,164,158,.131) 26%,rgba(255,164,158,.084) 48%,rgba(255,164,158,.046) 66%,rgba(255,164,158,.021) 80%,rgba(255,164,158,.007) 90%,rgba(255,164,158,0) 100%),
    linear-gradient(180deg,#eaf6ef 0%,#eff8f3 22%,#e9f5ef 60%,#e4f1ea 100%);
  background-size:100% 800vh,100% 800vh,100% 100%;
  background-repeat:repeat-y,repeat-y,no-repeat;
  background-position:0 0,0 0,0 0;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
::selection{background:var(--accent);color:#fff}

.container{width:min(var(--maxw),92%);margin-inline:auto}
.section{padding:clamp(72px,10vw,128px) 0;position:relative}
.section--tight{padding:clamp(48px,7vw,88px) 0}

/* v102：一个区块里只放一颗橘红点缀，大小参照首屏左上角那片；
   每颗都用多段停点把浓度平滑收到 0，所以既没有边也看不出弧度。
   首页比较特殊：它用 .home-after 的"每屏一颗"平铺背景，这里的区块层在首页整体关掉。 */
.section--band{position:relative}
.section--band::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42% 34% at 14% 34%,rgba(255,142,152,.19) 0%,rgba(255,142,152,.146) 26%,rgba(255,142,152,.094) 48%,rgba(255,142,152,.051) 66%,rgba(255,142,152,.023) 80%,rgba(255,142,152,.007) 90%,rgba(255,142,152,0) 100%);
}
/* 首页改用 .home-after 的平铺背景，区块层整体关掉（首屏自己还有三层柔光） */
body[data-page="home"] .section--band::after{display:none}
/* 方向 / 大小变体：主要是给内页 hero 换边用 */
.section--band.glow--sm::after{transform:scale(1.08)}
.section--band.glow--lg::after{transform:scale(1.16)}
.section--band.glow--a::after{transform:scale(1.12)}
.section--band.glow--b::after{transform:scaleX(-1)}
.section--band.glow--c::after{transform:scale(-1,-1)}
.section--band.glow--d::after{transform:scaleY(-1) scale(1.06)}

/* 内页 hero 用同一套做法，只换方向与比例，避免每页长得一样 */
body[data-page="products"] .page-hero.section--band::after{transform:scaleX(-1)}
body[data-page="projects"] .page-hero.section--band::after{transform:scaleX(-1) scale(1.14)}
body[data-page="quality"] .page-hero.section--band::after{transform:scale(1.16)}
body[data-page="about"] .page-hero.section--band::after{transform:scaleY(-1)}
body[data-page="contact"] .page-hero.section--band::after{transform:scale(-1,-1)}
body[data-page="product"] .page-hero.section--band::after{transform:scaleY(-1) scale(1.1)}
.grid-bg{
  background-image:none;
}
.glow::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(30% 55% at 100% -6%,var(--leaf-glow),rgba(255,255,255,0) 60%),
    radial-gradient(42% 48% at 8% -10%,rgba(255,130,100,.12),rgba(255,255,255,0) 55%);
  pointer-events:none;
}

/* Apple-style liquid glass */
.glass{
  background:linear-gradient(180deg,rgba(241,250,245,.72),rgba(224,241,232,.42));
  border:1px solid var(--glass-border);
  box-shadow:
    0 0 0 1px var(--glass-hairline),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(35,30,22,.04),
    var(--shadow-soft);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-deep);margin:0 0 20px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--accent);border-radius:2px}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.025em;font-weight:650;text-wrap:balance}
.display{font-size:clamp(2.7rem,6.4vw,5.1rem);font-weight:660;letter-spacing:-.04em}
.h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.h3{font-size:clamp(1.25rem,2vw,1.55rem)}
.lead{color:var(--text-soft);font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:640px}
.muted{color:var(--muted)}
.tiny{font-size:13px;color:var(--muted)}
.section-head{margin-bottom:clamp(36px,5vw,60px);max-width:760px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .lead{margin-inline:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;font-weight:600;font-size:15.5px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .3s,background .25s,border-color .25s,color .25s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn--primary{
  background:var(--accent);color:#fff;
  box-shadow:0 12px 28px -12px rgba(232,89,12,.55),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(199,74,9,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--ghost{
  border-color:var(--line-strong);color:var(--text);
  background:linear-gradient(180deg,rgba(243,251,247,.78),rgba(225,242,233,.42));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 24px -14px rgba(64,55,30,.25);
}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--text)}
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 12px 28px -12px rgba(23,163,74,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--wa:hover{background:var(--wa-deep);transform:translateY(-2px)}
.btn--sm{padding:10px 18px;font-size:13.5px}
.btn svg{flex:none}

.badge{
  display:inline-block;padding:5px 12px;border-radius:999px;font-size:11px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent-deep);
  border:1px solid rgba(232,89,12,.3);
  backdrop-filter:blur(8px);
}
.badge--plain{background:rgba(255,255,255,.55);color:var(--muted);border-color:var(--line)}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  /* v94 性能：顶栏横跨整个屏幕宽度又固定在顶部，玻璃模糊会让浏览器每滚一帧
     重算一次（页面里最贵的一项）。去掉模糊后半透明会让下方文字透出来成"鬼影"，
     所以同时改成不透明纯色 —— 观感更干净，滚动明显更顺。 */
  background:#f4faf6;
  /* 2026-09-23 用户："导航栏和板块一的分割不明显" —— 原来这条线是 transparent，
     只有滚动后才出现；现在首屏改成淡色照片底，顶上就更糊了。改成常驻细线 + 极淡投影，
     滚动后再加深（下面的 .header.scrolled）。 */
  border-bottom:1px solid rgba(35,30,22,.10);
  box-shadow:0 8px 26px -24px rgba(64,55,30,.30);
  transition:background .3s,box-shadow .3s,border-color .3s;
}
.header.scrolled{
  background:#fafafa;
  border-bottom-color:rgba(35,30,22,.12);
  box-shadow:0 10px 34px -22px rgba(64,55,30,.35);
}
.header__in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:750;letter-spacing:.12em;font-size:15px;color:var(--text)}
/* 品牌标是内联 SVG = A3「折痕折板」（叶绿方标 + 两片橙板 + 一道折痕，2026-09-30 定稿），
   模板在 site.js 的 BRAND_MARK_SVG。这里只定尺寸；旧的两版（两层同心方框、箱体坡屋顶）已弃用，别再加回来。
   改品牌标时三处要一起改：这里、site.js 的 BRAND_MARK_SVG、各页 <link rel="icon"> 的 favicon data URI。 */
.brand__mark{width:34px;height:34px;flex:none;display:block;overflow:visible}
.brand small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.3em;color:var(--muted-2)}
.nav{display:flex;gap:34px;align-items:center}
.nav a{font-size:14.5px;color:var(--muted);font-weight:550;position:relative;transition:color .2s}
.nav a:hover,.nav a.is-active{color:var(--text)}
.nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--accent)}
.header__cta{display:flex;align-items:center;gap:14px}
.lang-toggle{
  min-width:54px;height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(255,255,255,.62);color:var(--text);font-weight:700;font-size:13px;letter-spacing:.04em;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .25s,color .25s,background .25s,transform .25s;
}
.lang-toggle:hover{border-color:var(--accent);color:var(--accent-deep);background:#fff;transform:translateY(-1px)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:rgba(255,255,255,.5)}
.burger span{width:18px;height:1.8px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s}
body.nav-open .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(64px,7.5vw,104px) 0 0;display:flex;flex-direction:column}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero__title{font-size:clamp(2.4rem,5.2vw,4.2rem);margin:16px 0 20px}
.hero__title .line{display:block;overflow:hidden;padding:.04em 0 .12em;margin:-.04em 0 -.12em}
.hero__title .line > span{display:block;will-change:transform}
.hero__copy{color:var(--text-soft);font-size:clamp(1.05rem,1.7vw,1.25rem);max-width:560px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.hero__note{margin-top:16px;font-size:13.5px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.hero__note span{display:inline-flex;align-items:center;gap:8px}
.hero__note span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(63,156,115,.15)}
.hero__visual{position:relative}
.visual-card{
  aspect-ratio:4/3.5;border-radius:28px;overflow:hidden;position:relative;
  background:linear-gradient(165deg,#ffffff 0%,#f1f0ed 70%,#e4e3df 100%);
  box-shadow:
    0 0 0 1px var(--glass-hairline),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(35,30,22,.05),
    0 40px 90px -35px rgba(64,55,30,.4);
}
.visual-card .ph__frame{border-radius:0;border:0}
.visual-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vc-slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 55% at 20% 0%,rgba(255,255,255,.85),transparent 55%),
    linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 62%);
}
.vc-slide--plain::after{content:none}
.vc-slides{
  position:absolute;inset:0;display:flex;align-items:stretch;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.vc-slide{
  position:relative;flex:0 0 100%;width:100%;height:100%;margin:0;
}
.vc-nav{
  position:absolute;top:50%;translate:0 -50%;z-index:4;
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.6);color:#3a3833;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;box-shadow:0 10px 24px -10px rgba(50,40,20,.45),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s ease,transform .3s ease;
}
.vc-nav svg{display:block}
.vc-nav--prev{left:12px}
.vc-nav--next{right:12px}
.vc-nav:hover{background:rgba(255,255,255,.92)}
.visual-card:hover .vc-nav,.visual-card:focus-within .vc-nav{opacity:1}
@media (hover:none){
  .vc-nav{opacity:.85}
}
@media (prefers-reduced-motion:reduce){
  .vc-slides{transition:none}
}
.visual-card__label{
  /* v96：说明文字从"照片左下角"挪到"左上角"。
     原来它在左下角，正好被 hero__float--b 那张悬浮卡整个盖住（重叠 299×66）。 */
  position:absolute;left:24px;top:22px;right:24px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
}
.visual-card__label strong{font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:-.01em;display:block;color:var(--text)}
.visual-card__label span{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
/* 2026-09-28：轮播标签压在照片上怎么读得清 —— 试过两版，定第二版：
   ① 整张图盖一层白色高光罩 → 照片顶上一片白（用户："这个轮播上方怎么这么亮啊"）✗
   ② 文字加白色外发光 → 用户："这个字体发光太丑了" ✗
   ③ 定版：**黑字 + 白色垫底**（一块半透明白胶囊垫在文字下面，和右边 "Real Shot" 同一种做法）✓
   只垫文字块本身，不碰照片。 */
/* 2026-09-29 用户要求：这颗胶囊不要全透明，改成半透明。
   定版 = 半透明白底 + 一层 backdrop 模糊（磨砂），照片能透出来，字又压得住。
   想调浓淡只改 .5 这一个数：越小越透，越大越白（原来那版是 .94，接近不透明）。 */
.visual-card__label > div{
  background:rgba(255,255,255,.5);
  border-radius:9px;
  padding:4px 9px 5px;          /* 尽量小：只包住这一行名字 */
  box-shadow:0 10px 24px -16px rgba(20,20,18,.4),inset 0 0 0 1px rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.visual-card__label strong{line-height:1.3;font-size:clamp(.95rem,1.5vw,1.2rem)}
.hero__float{
  position:absolute;border-radius:18px;padding:14px 18px;
  display:flex;gap:12px;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.74));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    0 0 0 1px var(--glass-hairline),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(35,30,22,.05),
    0 26px 60px -24px rgba(64,55,30,.38);
  /* v246 性能（2026-09-30）：这张卡原来带 backdrop-filter:blur(26px) saturate(190%)，
     可它同时挂着 animation:float 7s infinite —— 等于每秒 60 次重算"背后整张照片的 26px 模糊"，
     是页面里最贵的一项，嵌入式浏览器（Codex 侧边面板那种）会被它拖死。
     照顶栏 v94 的老办法拆掉模糊，把底色补厚一点补观感；float 只动 transform，留着不花钱。
     别再往这个块里加 backdrop-filter —— 动画 + 背景模糊是性能陷阱。 */
  animation:float 7s ease-in-out infinite;
  z-index:3;
}
/* v96：两张悬浮卡错开摆，谁也不压说明文字。
   A 从"照片右上"挪到"右侧偏上"，B 留在左下但下移一档 —— 说明文字已经移到左上，三者互不重叠。 */
.hero__float--a{top:40%;right:-14px}
.hero__float--b{bottom:7%;left:-18px;animation-delay:-3.4s}
.hero__float .dot{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:var(--accent-deep);flex:none;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.45));box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(64,55,30,.4)}
.hero__float small{display:block;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.hero__float strong{font-size:14.5px;color:var(--text)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hero__stats{
  margin-top:clamp(24px,3.2vw,40px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.hero__stat{padding:18px 22px 18px 0;border-right:1px solid var(--line)}
.hero__stat+.hero__stat{padding-left:24px}
.hero__stat:last-child{border-right:0}
.hero__stat b{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:650;letter-spacing:-.03em;display:block;color:var(--text)}
.hero__stat > span{font-size:13.5px;color:var(--muted)}
.hero__stat b em{font-style:normal;color:var(--accent)}

/* ---------- Placeholder photos (light glass wells) ---------- */
.ph{
  position:relative;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(120% 120% at 80% 0%,rgba(255,255,255,.95),transparent 55%),
    linear-gradient(160deg,#fafaf9,#e8e7e3 78%);
  border:1px solid var(--glass-hairline);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(35,30,22,.05),0 14px 34px -24px rgba(64,55,30,.35);
}
.ph::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(40,34,22,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,34,22,.05) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at center,black 25%,transparent 80%);
}
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 18% 0%,rgba(255,255,255,.9),transparent 55%);
}
.ph__frame{position:absolute;inset:16%;border:1.5px solid rgba(35,30,22,.28);border-radius:14px;z-index:1}
.ph__frame::before,.ph__frame::after{content:"";position:absolute;background:var(--accent)}
.ph__frame::before{width:10px;height:2px;left:-1.5px;top:-2px;box-shadow:0 calc(100% + 0px) 0 0 var(--accent)}
.ph__frame::after{width:2px;height:10px;left:-2px;top:-1.5px;box-shadow:calc(100% + 0px) 0 0 0 var(--accent)}
.ph__tag{
  position:absolute;left:12px;bottom:12px;z-index:2;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);background:rgba(255,255,255,.72);
  padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 4px 12px -6px rgba(64,55,30,.3);
  backdrop-filter:blur(8px);
}
.ph--card{aspect-ratio:4/3}

/* ---------- Real photos (replace placeholders) ---------- */
.photo{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#efeeea,#e2e1dc);
  border-radius:var(--radius);
}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo--card{aspect-ratio:4/3;border-radius:0}
.photo--main{grid-column:1/-1;aspect-ratio:16/10;border-radius:var(--radius)}
.photo--portrait{aspect-ratio:3/4}
.photo--land{aspect-ratio:4/3}
.photo--how{aspect-ratio:16/10}

/* ---------- Cards / grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.product-card{
  display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(243,251,247,.84),rgba(224,241,232,.5));
  border:1px solid var(--glass-border);
  box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-soft);
  transition:transform .4s var(--ease),box-shadow .45s;
}
.product-card:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(35,30,22,.06),0 36px 80px -30px rgba(64,55,30,.42)}
.product-card .ph{aspect-ratio:4/3;border:0;border-radius:0}
.product-card__body{padding:24px;display:flex;flex-direction:column;flex:1}
.product-card__top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}
.product-card h3{font-size:1.3rem;margin-bottom:8px}
.product-card p{color:var(--muted);font-size:14.5px;margin:0 0 20px;flex:1}
.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:650;font-size:14.5px}
.link-arrow svg{transition:transform .25s}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 首页"两条产线各三款旗舰"的分组头（v147）----------
   用户反馈：上排 3 张标准房、下排 3 张折叠房之间没有分界。
   每排上方给一行产线头：代号 + 产线名 + 款数 + 「看这条产线」。 */
.model-group{margin:0 0 clamp(34px,4.5vw,54px)}
.model-group:last-child{margin-bottom:0}
.model-group__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 14px;
  padding-bottom:14px;margin:0 0 22px;border-bottom:1px solid var(--line-strong)}
.model-group__code{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:#fff;
  background:var(--accent-deep);padding:4px 9px;border-radius:7px;line-height:1.4}
.model-group__name{margin:0;font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:700;letter-spacing:-.01em}
.model-group__count{color:var(--muted);font-size:13.5px}
.model-group__link{margin-left:auto}
@media (max-width:640px){.model-group__link{margin-left:0}}
.product-card__actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:auto}

/* ---------- Product lines (products overview) ---------- */
.line-card h3{margin-bottom:10px}
.line-card p{flex:0 0 auto;margin-bottom:0}
.line-card__types{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;flex:1;margin:18px 0 22px}
.line-card__types .option-tag{margin:0}
.line-card .product-card__actions{border-top:0;padding-top:0}

/* ---------- Features / process ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feature{
  padding:28px;border-radius:var(--radius);position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(242,250,246,.76),rgba(224,241,232,.44));
  border:1px solid var(--glass-border);
  box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-soft);
}
.feature::after{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--accent);transition:height .45s var(--ease)}
.feature:hover::after{height:100%}
.feature .num{font-size:13px;letter-spacing:.16em;color:var(--accent-deep);font-weight:700;display:block;margin-bottom:16px}
.feature h3{font-size:1.12rem;margin-bottom:8px}
.feature p{color:var(--muted);font-size:14px;margin:0}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:step}
.step{position:relative;padding:26px 30px 26px 0;border-top:1px solid var(--line-strong)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:-13px;left:0;padding:2px 10px;
  background:var(--bg);color:var(--accent-deep);font-size:11.5px;font-weight:800;letter-spacing:.14em;
  border:1px solid var(--line);border-radius:999px;
}
.step h3{font-size:1.05rem;margin:26px 0 6px}
.step p{color:var(--muted);font-size:13.5px;margin:0}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:28px;overflow:hidden;position:relative;
  background:
    radial-gradient(90% 130% at 10% 0%,rgba(232,89,12,.10),transparent 55%),
    radial-gradient(70% 120% at 100% 100%,var(--leaf-glow),transparent 60%),
    linear-gradient(145deg,rgba(245,252,248,.92),rgba(221,239,230,.55));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    0 0 0 1px var(--glass-hairline),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(35,30,22,.04),
    var(--shadow-soft);
}
.cta-band__in{padding:clamp(40px,6vw,76px);display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative;z-index:2}
.cta-band h2{margin:6px 0 12px;font-size:clamp(1.6rem,3vw,2.5rem)}
.cta-band p{margin:0;color:var(--muted);max-width:480px}
.cta-band__actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Page hero ---------- */
.page-hero{
  padding:clamp(64px,9vw,120px) 0 clamp(36px,5vw,64px);
  border-bottom:1px solid var(--line);overflow:hidden;position:relative;isolation:isolate;
  background:
    linear-gradient(100deg,rgba(250,253,252,.96) 0%,rgba(247,251,248,.76) 44%,rgba(241,248,243,.42) 100%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 34%,rgba(255,255,255,.64));
}
.page-hero > .container{position:relative;z-index:1}

/* 内页首屏的背景大图（2026-09-22）：跟首页 .hero__bg 同一套做法 —— 照片铺满整屏 +
   淡白渐变压暗；右侧留一点照片纹理，左侧文案区压得最白，保证黑字可读。
   ⚠️ 图用 <img> 挂（不用 CSS background）：CSS 里的相对路径是相对 css 文件解析的，
   写成 background:url(assets/...) 会变成 assets/css/assets/... 而 404。
   只有在 data.js 给了 heroPhoto 的产线页才渲染这一层。 */
.page-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.page-hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 45%;filter:saturate(1.08) contrast(1.06);transform:scale(1.02);
  /* 照片尽量往左铺：只在最左边留一小段渐入（给标题留一点亮底），约 26% 起就是全幅。
     光已经调淡（见下面两条 opacity），所以照片压过去也不会把红晕带脏。
     ⚠️ 遮罩必须挂在 img 上、不能挂在 .page-hero__bg 上 —— 挂在外层会把 ::after
     那道"下缘收到页背景色"的渐变一起蒙掉，底部会露一条硬边。 */
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.86) 12%,#000 26%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.86) 12%,#000 26%);}
.page-hero__bg::after{
  content:"";position:absolute;inset:0;
  /* 2026-09-22 定稿（用户："上边雾气浅，下方雾气重，用来衬托我们的字体"）：
     白雾改成**竖向单独负责**——顶部几乎不加白（照片干净），
     越往下越厚（46% 起 .45、68% .72、88% .92），正好托住标题和正文那两排字；
     横向只留很轻一层（.34 → .04），免得左右两头又糊成一片。 */
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.05) 22%,rgba(252,253,252,.30) 46%,rgba(250,252,251,.55) 68%,rgba(243,249,245,.82) 88%,#eaf6ef 100%),
    /* 左上那两行小字（面包屑 + 眉标）单独垫一层柔白：它们正好压在屋顶边缘和树上，
       只靠竖向那层要等到 46% 才够白，来不及。这块垫底很柔（峰值 .42、75% 处收 0），
       只覆盖左侧文字栏，不会把整条顶边糊掉。 */
    radial-gradient(46% 30% at 8% 31%,rgba(255,255,255,.70) 0%,rgba(255,255,255,.50) 40%,rgba(255,255,255,.20) 68%,rgba(255,255,255,.04) 82%,rgba(255,255,255,0) 92%),
    linear-gradient(100deg,rgba(252,253,253,.28) 0%,rgba(252,253,253,.20) 34%,rgba(250,252,251,.10) 68%,rgba(248,251,249,.03) 100%);
}
@media (max-width:900px){
  .page-hero__bg img{object-position:center 38%}
}
/* ===== 方案 1 试验：照片从右侧渐入成块，左边留给文字 =====
   只作用于加了 page-hero__bg--split 的页面（目前只有标准拼装式），用来跟"整幅铺满"对比。
   左边不再需要大片压白，所以这一版把 ::after 简化成只剩"下缘收到页背景色"那一道。 */
.page-hero__bg--split img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 34%,rgba(0,0,0,.35) 56%,rgba(0,0,0,.80) 74%,#000 88%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 34%,rgba(0,0,0,.35) 56%,rgba(0,0,0,.80) 74%,#000 88%);
}
.page-hero__bg--split::after{
  /* 2026-09-23 用户："左侧要青中带一抹红"，随后："青色让本块和下一块的分界不明显，
     青到发蓝更合适；四个页面的那一抹红最好大小形状位置各不相同"。
     所以：①左半边的底从青绿改成**偏蓝的青**，而且下缘收在自己的浅蓝上（不再收进页面的淡绿），
     和下一块的淡绿形成明显的色阶，叠加原有的 1px 分隔线；
     ②红晕改成读 CSS 变量，每个页面在 body[data-page=…] 里各配一组形状/位置/浓度。 */
  background:
    radial-gradient(var(--halo-r,42% 40%) at var(--halo-pos,16% 34%),
      rgba(255,142,152,var(--halo-a1,.40)) 0%,
      rgba(255,142,152,var(--halo-a2,.25)) 40%,
      rgba(255,142,152,var(--halo-a3,.09)) 66%,
      rgba(255,142,152,0) 84%),
    /* 底色：只留一丝青蓝的"冷白"，不再是天空蓝 —— 颜色留给照片本身（照片里有蓝有红），
       背景只要够淡，粉红晕才会读成"光"而不是一团色斑。 */
    linear-gradient(100deg,rgba(230,241,250,.74) 0%,rgba(240,247,252,.54) 34%,rgba(248,251,254,.28) 60%,rgba(252,254,255,.08) 80%,rgba(255,255,255,0) 100%),
    /* 下缘收到比页面底色略深一档的浅绿：块与块之间靠这个色阶 + 1px 线分开。
       ⚠️ 2026-09-29：这层原来被第 ② 道遮罩压到 0.5 才显示，现在 ② 已经删掉（原因见下），
       所以 alpha 直接减半，左侧的观感和改之前保持一致。 */
    linear-gradient(180deg,rgba(255,255,255,0) 52%,rgba(236,247,241,.28) 80%,rgba(228,241,234,.5) 100%);
  /* 2026-09-23 用户口径（先是"右侧偏重，减轻 50%"，再"远远不够，继续缩减"，
     然后明确"**左侧的白要留，这样子字才能看清；右侧的为 0**"，最后"**过渡线软一点**"）。
     上面三层白（左半边冷白 + 右下渐白 + #e4f1ea 收边）横向本来是均匀的，
     但照片左侧被 img 遮罩淡掉了（透出来的是近白的页面底），白雾真正"看得见"的
     地方全在右半边，所以观感上右侧糊得重（右下角最重，实测多压 +115 级亮度）。
     这里用两道遮罩（多层 mask 默认按 source-over 叠加：
       ① 横向着色：左侧 44% 以内原样（正好罩住标题和正文那两栏，字才看得清），
          之后 54% .45 → 63% .16 → 71% .045 → 78% 收到 0 —— 收尾拉成渐隐尾巴，
          所以不再有"雾到这儿突然没了"的那条边（原来 46%→68% 线性收，末端斜率大，
          放大看能看见一道竖向的雾边）；右半幅中上部仍然**严格为 0**。
       ② 底部软收边：只在最后 22% 高度上给一点点白（92% .30 → 100% .50），
          让照片下缘融进下一块的页底色，而不是直切一刀。
          只有 .50、且只占底部一条，比原来那层不透明的 #e4f1ea 轻得多。
     ⚠️ 想回到"右侧彻底直切"就去掉第 ② 道；
        想只留原来的硬底边、不要软尾巴，把第 ① 道换回 `#000 0%,#000 46%,rgba(0,0,0,0) 68%`。 */
  /* 🔴 2026-09-29 修（用户："桌面端这4个页面的首板块，右侧的白雾又被你调出来了"）：
     这里原来有**两道**遮罩 —— ① 横向（只留左 44%、78% 收到 0）+ ② 底部软收边（整幅全宽）。
     当时的前提是"想回到右侧彻底直切就去掉第 ② 道"，但真正的问题是：
     **`mask-image` 的多层是 source-over 求并集，不是相乘**（见上面注释里"多层遮罩默认按
     source-over 叠加"那句，当时理解反了）。并集意味着：右下角 ① 是 0、② 是 0.5，
     取并之后 = **0.5**，于是最底下那 22% 高度的白雾**照样糊到了右侧**——
     而右侧底下正好是整幅照片，最显眼。
     实测（1425 宽、关掉 ::after 前后逐段比亮度）：右上角 0、右中 +4~6、
     **右下（最后 20%）+48~56**，白得最厉害的就是右下这一带。
     → 现在只留第 ① 道遮罩，上面那层底部渐变按半强补回来（alpha 已减半），
       底部软边的观感在**文字这一侧不变**，右侧从 44% 之后一路到 100% 严格为 0。
     ⚠️ 以后要在 ::after 上再加"整幅全宽"的层，别再靠第二道遮罩去压它 —— 压不住。 */
  -webkit-mask-image:
    linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.45) 54%,rgba(0,0,0,.16) 63%,rgba(0,0,0,.045) 71%,rgba(0,0,0,0) 78%,rgba(0,0,0,0) 100%);
  mask-image:
    linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.45) 54%,rgba(0,0,0,.16) 63%,rgba(0,0,0,.045) 71%,rgba(0,0,0,0) 78%,rgba(0,0,0,0) 100%);
}

/* 带照片的首屏：把分隔线压深一档，配合上面的色阶，两块的分界更明确。
   2026-09-23 用户"过渡线软一点"：这道 1px 从 .14 压淡到 .09，
   配合下面遮罩补的底部软收边，首屏和下一块之间不再是硬邦邦一条黑线。
   想回到原来的清楚分界就把 .09 改回 .14。 */
.page-hero--photo{border-bottom-color:rgba(15,15,15,.09)}

/* 四个页面的"一抹红"各不一样：大小（--halo-r）、位置（--halo-pos）、浓度（--halo-a*）。 */
/* 标准拼装式：最大最柔，压在左上角 */
body[data-page="line-modular"] .page-hero__bg--split::after{
  --halo-r:46% 44%; --halo-pos:20% 28%; --halo-a1:.38; --halo-a2:.24; --halo-a3:.08;
}
/* 折叠房：小而浓，贴左上角偏高 */
body[data-page="line-folding"] .page-hero__bg--split::after{
  --halo-r:28% 30%; --halo-pos:9% 18%; --halo-a1:.50; --halo-a2:.30; --halo-a3:.11;
}
/* 质量：扁长，横在左侧偏下 */
body[data-page="quality"] .page-hero__bg--split::after{
  --halo-r:56% 26%; --halo-pos:26% 56%; --halo-a1:.32; --halo-a2:.20; --halo-a3:.07;
}
/* 关于：瘦高，贴在左边缘 */
body[data-page="about"] .page-hero__bg--split::after{
  --halo-r:22% 48%; --halo-pos:4% 40%; --halo-a1:.46; --halo-a2:.28; --halo-a3:.10;
}

/* 🔴 2026-09-30 用户："首屏中间的到最右边，白雾太重了"，随后："剩下的页面也按各自情况调渐隐带"。
   实测（1440、每 10% 宽的亮度/彩度，工具 out\_tmp-hero-fog.js + _tmp-hero-fog.py）：
   那层"雾"几乎全是**照片自己的渐隐**造成的 —— 原渐隐带 34%→88%（54% 宽），中段 40-70%
   因此被抬 +115→+50、彩度从 84/96 抽到 15/54（半透明的照片压在近白底色上，颜色和纹理被冲淡）；
   白雾层（::after）在同一段只贡献 +11/+7/+3，不是主因。

   → 渐隐带改成**每页一条**，参数由该页文字的实测墨迹边界反推（不再一页一个数硬调）：
        fa 起渐隐 = 正文墨迹右边界 − 10%（正文那栏的尾巴照旧压着半个照片，和折叠房定稿一致）
        fb 收干净 = 标题墨迹右边界 − 2，且限制在 [fa+14, fa+30]
                    （下限防"一条硬边"，上限防长标题页把渐隐带又拖回 40% 宽的白雾）
        fm 中 = fa+45%·(fb−fa)，fn 高 = fa+80%·(fb−fa)
     每页括号里是量到的 正文/标题 右边界（中英取更长者，1440 视口）。
     量法：HERO_PAGES=... HERO_LANGS=en,zh node out\_tmp-hero-text-extents.js 1440 900
     算参数的脚本：out\_tmp-hero-fade-plan.py（改文案后重跑，把下面的数换掉即可）。

   ⚠️ 13 个项目页（projects.html + 12 个 project-*.html）的 body 全是 data-page="projects"，
     CSS 分不开，所以那批把 4 个变量写在页面里那个 .page-hero__bg--split 的 style 上；
     这里只管 data-page 唯一的 4 个（折叠房 / 标准拼装 / 质量 / 关于）。
   ⚠️ 整体只作用于 ≥641px：手机上那层更厚的白是第 ⑪ 段专门为"黑字压照片读不清"加的
     （手机上首屏只有约 280px 高，标题正好落在照片最花的一段），不要在这里抵消它。
     上面两条基础规则就是"手机 + 没写变量时的兜底"，值等于原来的 34/56/74/88 与 44/54/78。 */
@media (min-width:641px){
  .page-hero__bg--split img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) var(--fa,34%),rgba(0,0,0,.35) var(--fm,56%),rgba(0,0,0,.80) var(--fn,74%),#000 var(--fb,88%));
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) var(--fa,34%),rgba(0,0,0,.35) var(--fm,56%),rgba(0,0,0,.80) var(--fn,74%),#000 var(--fb,88%));
  }
  /* 白雾的横遮罩跟着照片那条走：照片开始露时就跟着退，照片收干净时它也已经归零。
     （calc 里的两个停点按 fa 偏移，保证 fb 变小时停点仍然单调递增，不会出现硬边） */
  .page-hero__bg--split::after{
    -webkit-mask-image:
      linear-gradient(90deg,#000 0%,#000 var(--fa,44%),rgba(0,0,0,.45) calc(var(--fa,44%) + 10%),rgba(0,0,0,0) var(--fb,78%),rgba(0,0,0,0) 100%);
    mask-image:
      linear-gradient(90deg,#000 0%,#000 var(--fa,44%),rgba(0,0,0,.45) calc(var(--fa,44%) + 10%),rgba(0,0,0,0) var(--fb,78%),rgba(0,0,0,0) 100%);
  }
  /* 折叠房 52.3 / 64.9 */
  body[data-page="line-folding"] .page-hero__bg--split{--fa:42%;--fm:51%;--fn:59%;--fb:63%}
  /* 标准拼装 51.7 / 76.5 */
  body[data-page="line-modular"] .page-hero__bg--split{--fa:42%;--fm:56%;--fn:66%;--fb:72%}
  /* 质量 51.7 / 76.4 */
  body[data-page="quality"] .page-hero__bg--split{--fa:42%;--fm:56%;--fn:66%;--fb:72%}
  /* 关于 51.7 / 85.1（中文那行标题最长） */
  body[data-page="about"] .page-hero__bg--split{--fa:42%;--fm:56%;--fn:66%;--fb:72%}
}

/* 有了照片层之后，区块自带的红晕（.section--band::after，z-index:-1）和品牌柔光
   （.glow::before）都会被照片压在下面 —— 首页是靠 .hero.glow::before{z-index:1}
   + .hero>.container{z-index:2} 解决的，这里照同一套：两层柔光提到照片之上、文字之上。 */
.page-hero--photo.glow::before{z-index:1}
.page-hero--photo.section--band::after{z-index:1}
.page-hero--photo > .container{z-index:2}
/* 光只留一部分：照片铺到左边后，原来那两片柔光全强度压上去会发浑，
   所以按比例调淡（想更亮/更淡就改这两个 opacity）。 */
/* 2026-09-22：带照片的首屏**不加任何颜色**（用户明确要求）——
   区块自带的两层柔光（品牌粉红晕 .section--band::after、暖/冷品牌柔光 .glow::before）
   在这一版里整体关掉，只靠中性白压白保证文字可读。其它页面/板块照旧。 */
.page-hero--photo.glow::before{display:none}
.page-hero--photo.section--band::after{display:none}
.page-hero .crumb{font-size:12.5px;color:var(--muted);letter-spacing:.06em;margin-bottom:22px;text-transform:uppercase}
.page-hero .crumb a:hover{color:var(--text)}
/* 面包屑整体是大写小字（设计口径），但"当前页"那一段常是型号（50mm / 20ft / 30ft flat-top），
   大写会把单位写成 50MM。只给这一段保留原大小写 —— 由 site.js 的 renderSizeDetail() 加类。 */
.page-hero .crumb .crumb-now{text-transform:none}
/* 带照片的首屏：小字压在图上看不清，按用户要求把字加深（只动这一版，其它内页不变）。
   面包屑原来是 --muted(#66655f)，提到近黑；眉标原来是 --accent-deep(#c74a09)，再压深一档。 */
.page-hero--photo .crumb{color:var(--text)}
.page-hero--photo .crumb a:hover{color:var(--accent-deep)}
.page-hero--photo .eyebrow{color:#9e3a04}

/* 2026-09-23 试过两版（①去掉白雾纯照片；②白底+照片淡化）都不行，用户定稿要白雾：
   于是 contact 首屏不再做任何覆盖，直接用上面 .page-hero__bg 那套默认做法
   —— 照片铺满 + img 左侧渐隐 + ::after 白雾压白，和首页 .hero__bg 一致。
   之前加在这里的两段覆盖（::after{display:none}、img{opacity}）已全部撤掉。 */

/* 2026-09-23 用户："除了文字底下有少量雾气，其他位置继续缩减，特别是左侧的这个白光"，
   随后："还有雾气，整张雾气全去掉" → 于是 contact 首屏的雾层**全部清零**。
   （上一轮先收成"文字底下一小块 + 面包屑垫底 + 下缘薄收边"，这一轮连那三块一起去掉。）
   所以：
   ① 照片的左侧渐隐保持关闭（照片实色铺到左边缘，见下面 img 那条）——
      这一条同时也是"左侧那道白光"的来源之一，必须保持 none 才是真的没雾；
   ② ::after 整层置空（background:none），不压任何白。
   已知且接受的代价：
   - 文字（尤其 12.5px 的面包屑）直接压在照片上，可读性完全靠照片本身；
   - 首屏底边变成照片直切 + 那 1px 分隔线，不再往下一块的淡绿过渡。 */
body[data-page="contact"] .page-hero__bg img{
  -webkit-mask-image:none;mask-image:none;
}
body[data-page="contact"] .page-hero__bg::after{
  background:none;
  /* 备用档：想加回"文字底下一小块雾"，把上面 background:none 换成下面这段。
     峰值 .34 → 想要更浓就往上调 alpha；两个半径 27% 46% 控制雾块大小。
  background:
    radial-gradient(27% 46% at 26% 50%,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.22) 40%,
      rgba(255,255,255,.08) 70%,
      rgba(255,255,255,0) 92%); */
}
/* 窄屏：原本这里有一块"更大更浓的雾"（因为手机上文字几乎铺满首屏，小椭圆罩不住）。
   2026-09-23 用户要求"整张雾气全去掉"，所以手机端同样清零 —— 保持桌面/手机一致，
   否则会出现"电脑上没雾、手机上还有"的怪现象。
   备用档：要恢复手机那块雾，把 background:none 换成下面注释里那段。 */
@media (max-width:900px){
  body[data-page="contact"] .page-hero__bg::after{
    background:none;
    /* 备用档（上一版：峰值 .58）：
    background:
      radial-gradient(108% 56% at 26% 60%,
        rgba(255,255,255,.58) 0%,
        rgba(255,255,255,.44) 40%,
        rgba(255,255,255,.22) 68%,
        rgba(255,255,255,.06) 88%,
        rgba(255,255,255,0) 100%); */
  }
}

/* 2026-09-23 用户："把字体改成白的呢？" —— 雾清零后文字直接压在照片上，
   于是把 contact 首屏的四类文字全部改成白色（**只作用于 6 个 contact 页**）。
   ⚠️ 同时加了一层很淡的深色 text-shadow：这张照片左下是亮水面、中间是白色集装箱，
   纯白字压上去会整片消失。阴影跟着笔画走（不像白雾是块状遮盖），所以不违背"整张无雾"。
   不想要阴影：把下面那条 text-shadow 删掉即可。
   注意：上面 .page-hero--photo 的通用规则（面包屑近黑、眉标深橙）是 about/quality/产线页
   共用的，这里一律用 body[data-page="contact"] 覆盖，不去改动它们。 */
body[data-page="contact"] .page-hero--photo .crumb,
body[data-page="contact"] .page-hero--photo .crumb a,
body[data-page="contact"] .page-hero--photo .eyebrow,
body[data-page="contact"] .page-hero--photo .display,
body[data-page="contact"] .page-hero--photo .lead{
  color:#fff;
  text-shadow:0 1px 2px rgba(12,18,24,.55),0 2px 14px rgba(12,18,24,.32);
}
/* 面包屑里的 "Home" 链接：悬停时维持白色，只压低一点亮度，别回到近黑（会消失在照片里）。 */
body[data-page="contact"] .page-hero--photo .crumb a:hover{color:rgba(255,255,255,.72)}

/* ---------- Generic blocks ---------- */
.panel{
  border-radius:var(--radius);padding:28px;
  background:linear-gradient(180deg,rgba(242,250,246,.76),rgba(224,241,232,.46));
  border:1px solid var(--glass-border);
  box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-soft);
}
.catalog-note{margin-top:22px;padding:clamp(26px,3.6vw,44px)}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.7);font-size:13.5px;font-weight:550;color:var(--text-soft);
  background:linear-gradient(180deg,rgba(244,251,247,.78),rgba(227,243,235,.4));
  box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px -18px rgba(64,55,30,.35);
  transition:border-color .25s,color .25s,transform .25s var(--ease),box-shadow .3s;
}
.chip:hover{border-color:rgba(232,89,12,.5);color:var(--accent-deep);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(232,89,12,.35)}
.chip small{color:var(--muted)}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}

.check-list li{padding:8px 0 8px 34px;position:relative;color:var(--text-soft)}
.check-list li::before{
  content:"";position:absolute;left:2px;top:15px;width:18px;height:10px;
  border-left:2.5px solid var(--leaf-deep);border-bottom:2.5px solid var(--leaf-deep);transform:rotate(-45deg);
  border-radius:1px;
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split--start{align-items:start}
.split--rev .split__media{order:2}
.kicker-label{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--muted-2);text-transform:uppercase;display:block;margin-bottom:18px}

/* ---------- Tables ---------- */
.spec-table{width:100%;border-collapse:collapse;font-size:15px}
.spec-table th,.spec-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table th{color:var(--muted);font-weight:550;width:38%;font-size:13.5px;letter-spacing:.04em}
.spec-table tr:last-child td,.spec-table tr:last-child th{border-bottom:0}
.spec-table td{color:var(--text-soft)}

/* ---------- Detail page ---------- */
.detail-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.detail-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.detail-gallery > .dgallery{grid-column:1/-1}
.detail-gallery .ph--main{grid-column:1/-1;aspect-ratio:16/10}
.detail-gallery .ph--thumb{aspect-ratio:1/1;border-radius:var(--radius-s)}
/* 首屏左栏 / 右栏的内容分配（2026-09-30 晚）：
   左栏 = 主图 + 动作按钮 + 可选项 + 交期；右栏 = 标题 + 导语 + 规格 + 备注。
   原来左边只有一张图，右边一大坨文字，"作图右文"一头沉。 */
.detail-left{display:flex;flex-direction:column;gap:22px;min-width:0}
.detail-left__act{display:flex;gap:12px;flex-wrap:wrap}
.detail-left__block{display:flex;flex-direction:column}
.detail-left__block .kicker-label{margin-bottom:10px}
.detail-left__tags{display:flex;flex-wrap:wrap;gap:8px}
.detail-left__tags .option-tag{margin:0}
/* 详情页的"交期与运输"：一句话带过（2026-09-30 晚用户嫌四条清单占行） */
.detail-brief{margin:24px 0 0;max-width:56ch;font-size:12.5px;line-height:1.65;color:var(--muted)}
/* 手机/平板（≤900px）首屏只有一栏：把左栏拆开当独立网格项，用 order 排成
   "主图 → 标题与规格 → 动作/可选项/交期"，别让按钮跑到标题前面去。 */
@media (max-width:900px){
  .detail-left{display:contents}
  .detail-gallery{order:1}
  .detail-meta{order:2}
  .detail-left__act{order:3;margin-top:4px}
  .detail-left__block{order:4}
}
.dgallery{display:block}
.dgallery__main{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:linear-gradient(160deg,#efeeea,#e2e1dc);border:1px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-soft)}
.dgallery__main img{width:100%;height:100%;object-fit:cover;display:block}
/* 尺寸详情页「平面图 + 尺寸表」一行两栏（2026-09-28 用户："底下最好一行
   左边是 svg 右边是尺寸表"）。
   两栏等宽 + align-items:stretch：图与表高度互相对齐，不再"左重右轻"；
   平面图按 viewBox 自己定比例，只设上限高度，卡片里居中。 */
.size-detail__split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3.2vw,44px);align-items:stretch;
}
.size-detail__plan{
  /* 2026-09-29：平面图 SVG 的纸底改成透明了（用户选第 3 版配色：绿窗 + 纸底透明），
     所以这张卡也不能再是纯白 —— 换成站点 .panel 那套薄荷渐变，图纸直接"长"在页面上。
     原值：background:#fff。
     同日追加（用户："我希望我的鼠标悬停在上面时，能够变成白色"）：
     鼠标悬停时这张卡淡入成**白纸**，方便贴着屏幕读图纸；移开又回到薄荷底。
     做法用 ::before 铺一层白再过渡 opacity —— 渐变色之间没法直接 transition，
     换 background 只会硬切。 */
  position:relative;
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(243,251,247,.92),rgba(226,241,233,.78));
  border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(12px,2vw,24px);
}
.size-detail__plan::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:#fff;opacity:0;transition:opacity .28s var(--ease);pointer-events:none;
}
.size-detail__plan:hover::before{opacity:1}
/* 折叠箱房那 4 款厚墙板：详情页**一行摆 4 张尺寸图**、不配表格 ——
   2026-09-29 用户："你这个是一坨啊，右边的表格完全重复了…一行摆这4个尺寸图就行了，表格扔掉"。
   四张图内容比例差很大（立面 1.8:1、端面接近 1:1），所以给每张一个**等大的画框**、
   图用 object-fit:contain 居中塞进去：格子一样高、图也不变形。
   图（SVG）是照画册尺寸自己重画的，不是扫描件 —— 见 data.js 里那段的注释。 */
.size-detail__drawings{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
}
.size-detail__drawings figure{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:12px 12px 9px;display:flex;flex-direction:column;
}
.size-detail__drawings img{
  display:block;width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff;
}
.size-detail__drawings figcaption{
  margin-top:auto;padding-top:8px;font-size:12px;color:var(--muted);text-align:center;
}
@media (max-width:640px){
  /* 手机上 4 列每格只有 ~80px 宽，图上的尺寸数字就糊了 → 降成 2 列 */
  .size-detail__drawings{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.size-detail__plan img{display:block;width:auto;max-width:100%;max-height:min(62vh,620px);height:auto}
.size-detail__spec{display:flex;flex-direction:column;justify-content:center}
.size-detail__spec .spec-table th,.size-detail__spec .spec-table td{padding:20px 22px}
@media (max-width:820px){.size-detail__split{grid-template-columns:minmax(0,1fr)}}
/* 详情页 hero（2026-09-28 用户："两个板块都是左重右轻"）：
   照片从 1:1 改 4:3 别那么抢，右栏内容纵向居中，再配一排尺寸胶囊把右栏填实。 */
.detail-hero__grid--size{align-items:center}
.detail-hero__grid--size .dgallery__main{aspect-ratio:4/3}
.size-picker{margin:0 0 22px}
.size-picker__label{display:block;margin-bottom:10px;font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.size-picker__row{display:flex;flex-wrap:wrap;gap:8px}
.size-chip{
  display:inline-block;padding:7px 13px;border-radius:999px;font-size:13px;line-height:1.3;
  border:1px solid var(--line);background:#fff;color:var(--text-soft);text-decoration:none;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.size-chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.size-chip.is-current{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
/* 详情页标题下面那枚顶型标签（坡顶＝主色点，平顶＝绿点，和尺寸图分组时同一套配色） */
.detail-roof{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 6px;padding:5px 12px;
  border-radius:999px;font-size:12.5px;letter-spacing:.04em;
  color:var(--accent-deep);background:rgba(232,89,12,.09);border:1px solid rgba(232,89,12,.22);
}
.detail-roof::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--accent);flex:none}
.detail-roof.is-flat::before{background:var(--ok)}
.dgallery__thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:12px;margin-top:14px}

/* 型号页首屏右栏的关键参数（v144）：让右栏高度跟左边的图廊咬合，补掉右下角那块空白 */
.hero-specs{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0}
.hero-specs li{display:flex;gap:14px;align-items:baseline;font-size:13.5px;line-height:1.5;
  padding:9px 0;border-bottom:1px solid rgba(30,25,15,.08)}
.hero-specs li span{flex:none;min-width:104px;color:var(--muted)}
.hero-specs li strong{font-weight:600;color:var(--text)}
.dgallery__thumb{position:relative;padding:0;border:2px solid transparent;border-radius:var(--radius-s);overflow:hidden;cursor:pointer;background:#eceae4;aspect-ratio:1/1;transition:border-color .25s,transform .3s var(--ease)}
.dgallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dgallery__thumb:hover{transform:translateY(-2px)}
.dgallery__thumb.is-active{border-color:var(--accent-deep)}
@media (max-width:560px){.dgallery__thumbs{grid-template-columns:repeat(4,1fr);gap:8px}}
.detail-meta .h1{font-size:clamp(2rem,4vw,3.2rem);margin:10px 0 16px}
.option-tag{
  display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  font-size:12.5px;color:var(--muted);margin:0 8px 8px 0;background:rgba(255,255,255,.4);
}

/* ---------- Certificate albums ---------- */
.album-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.cert-album{
  display:flex;flex-direction:column;width:100%;padding:0;text-align:left;cursor:pointer;
  border-radius:22px;overflow:hidden;color:var(--text);
  background:linear-gradient(180deg,#f4faf6,#e9f3ec);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(15,15,15,.06),inset 0 1px 0 #ffffff,0 26px 60px -32px rgba(15,15,15,.16);
  transition:transform .4s var(--ease),box-shadow .45s;
}
.cert-album:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(15,15,15,.08),0 34px 70px -34px rgba(15,15,15,.22)}
.cert-album__cover{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  background:
    radial-gradient(44% 42% at 98% -6%,rgba(110,195,156,.16),rgba(255,255,255,0) 52%),
    radial-gradient(48% 46% at 6% -10%,rgba(255,150,120,.14),rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#ffffff 0%,#fffefd 100%);
}
.cert-stack{position:relative;display:block;width:100%;height:100%}
.cert-stack__layer{
  position:absolute;top:12%;left:12%;width:76%;height:76%;border-radius:12px;
  overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(232,89,12,.05),0 14px 32px -18px rgba(140,80,50,.12);
  transition:transform .55s var(--ease),opacity .4s,box-shadow .4s;
}
.cert-stack__layer img{
  display:block;width:100%;height:100%;object-fit:contain;
  padding:10px;background:#fff;
}
.cert-stack__layer--back{transform:translate(7%,7%);opacity:.55;z-index:1}
.cert-stack__layer--mid{transform:translate(3.5%,3.5%);opacity:.85;z-index:2}
.cert-stack__layer--front{transform:none;opacity:1;z-index:3;box-shadow:0 0 0 1px rgba(232,89,12,.04),0 30px 60px -28px rgba(140,80,50,.18)}
.cert-album:hover .cert-stack__layer--front{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(232,89,12,.04),0 38px 70px -30px rgba(140,80,50,.22)}
.cert-album__head{
  display:flex;flex-direction:column;gap:6px;padding:22px 24px 24px;
  background:linear-gradient(180deg,#fcfefd 0%,#eaf4ee 100%);
  border-bottom:1px solid rgba(15,15,15,.06);
}
.cert-album__count{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.cert-album__title{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:650;letter-spacing:-.02em}
.cert-album__hint{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  font-size:14px;font-weight:600;color:var(--muted);
}
.cert-album__hint svg{transition:transform .25s}
.cert-album:hover .cert-album__hint{color:var(--text)}
.cert-album:hover .cert-album__hint svg{transform:translateX(4px)}

/* ---------- Certificate lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility .35s;
}
.lightbox.open{visibility:visible;opacity:1}
.lightbox__backdrop{
  position:absolute;inset:0;background:rgba(28,25,20,.55);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.lightbox__panel{
  position:relative;z-index:2;width:min(1040px,94vw);max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,250,249,.9));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(35,30,22,.08),inset 0 1px 0 #fff,0 60px 140px -40px rgba(20,16,8,.6);
  transform:translateY(16px) scale(.98);transition:transform .4s var(--ease);
}
.lightbox.open .lightbox__panel{transform:none}
.lightbox__top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px 14px 22px;border-bottom:1px solid var(--line);
}
.lightbox__heading{display:flex;flex-direction:column;gap:2px;min-width:0}
.lightbox__heading strong{font-size:16px;font-weight:650;letter-spacing:-.01em}
.lightbox__heading span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.lightbox__close{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6));
  border:1px solid var(--line-strong);color:var(--text);
  box-shadow:inset 0 1px 0 #fff,0 8px 20px -10px rgba(20,16,8,.35);
  transition:transform .2s,background .2s;
}
.lightbox__close:hover{transform:scale(1.06);background:#fff}
.lightbox__stage{position:relative;flex:1;overflow:hidden;min-height:0}
.lightbox__track{display:flex;height:100%;transition:transform .5s var(--ease);will-change:transform}
.lightbox__slide{
  flex:0 0 100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vw,34px);
}
.lightbox__slide img{
  max-width:100%;max-height:calc(92vh - 110px);object-fit:contain;
  background:#fff;border-radius:12px;
  box-shadow:0 14px 40px -16px rgba(20,16,8,.35),inset 0 0 0 1px rgba(35,30,22,.06);
}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.72));
  border:1px solid rgba(255,255,255,.9);color:var(--text);
  box-shadow:0 0 0 1px rgba(35,30,22,.06),inset 0 1px 0 #fff,0 12px 30px -12px rgba(20,16,8,.4);
  transition:transform .2s,opacity .2s;
}
.lightbox__nav:hover:not(:disabled){transform:translateY(-50%) scale(1.08)}
.lightbox__nav:disabled{opacity:.3;cursor:default}
.lightbox__nav--prev{left:14px}
.lightbox__nav--next{right:14px}

body.no-scroll{overflow:hidden}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:650}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.62);border:1px solid var(--line-strong);border-radius:12px;
  color:var(--text);padding:13px 16px;font:inherit;font-size:15px;outline:none;
  transition:border-color .2s,box-shadow .25s,background .25s;
  box-shadow:inset 0 1px 2px rgba(35,30,22,.04);
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(232,89,12,.55);background:rgba(255,255,255,.85);box-shadow:0 0 0 4px rgba(232,89,12,.10),inset 0 1px 2px rgba(35,30,22,.03)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:start}
.contact-method{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.contact-method:last-child{border-bottom:0}
.contact-method .ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5));color:var(--accent-deep);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 #fff,0 10px 24px -14px rgba(64,55,30,.35);
}
.contact-method .ico--wa{color:var(--wa-deep)}
.contact-method small{display:block;color:var(--muted);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.contact-method a,.contact-method span{font-weight:650;font-size:16px;color:var(--text)}
.contact-method p{margin:4px 0 0;color:var(--muted);font-size:13.5px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid rgba(35,30,22,.07);margin-top:40px;background:rgba(255,255,255,.35)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding:clamp(48px,6vw,80px) 0}
.footer__brand .brand{display:flex;align-items:center;gap:18px;padding:0;color:var(--text)}
.footer__brand .brand small{color:var(--muted-2)}
.footer__brand a.btn{font-size:15.5px;padding:15px 26px}
.footer .f-row{display:flex;align-items:flex-start;gap:10px}
.footer .f-row a{display:inline-flex;align-items:center;gap:10px;padding:4px 0}
.footer .f-contact-line{display:inline-flex;align-items:flex-start;gap:10px;color:var(--muted);padding:4px 0}
.footer .f-icon{display:inline-flex;flex:none;color:var(--accent-deep);margin-top:1px}
.footer .f-icon svg{display:block}
.footer h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-bottom:18px}
.footer a{color:var(--muted);font-size:14.5px;display:inline-block;padding:4px 0;transition:color .2s}
.footer a:hover{color:var(--accent-deep)}
/* 2026-09-23 修 bug：上面 `.footer a`（0,1,1）比 `.btn--wa`（0,1,0）更具体，
   把页脚那个 WhatsApp 按钮的字色从白压成了灰（绿底灰字，糊成一团）。
   这里按同样具体度补回来，hover 也保住白字。 */
.footer a.btn--wa,
.footer a.btn--wa:hover{color:#fff}
.footer__brand p{color:var(--muted);font-size:14px;max-width:300px;margin:16px 0 22px}
.footer__bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted-2)}

/* ---------- 页脚底部两个按钮 + 社媒条（2026-09-23 新增，当天改过一版排版）----------
   2026-09-23 用户定稿口径："左右两个按钮，大小相等；Follow us 弹出的社媒图标
   放在下面，别放在右边"。所以：
     · .footer__cta 是这两个按钮的容器（flex + align-items:stretch），
       WhatsApp 主按钮和 Follow us 次按钮**等宽等高**；
     · 社媒图标从 Follow us **下方**弹出（原来在右边，会伸到 Explore 那一栏去）。
   图标依次回弹弹出，展开后每个图标做 3.6s 的"呼吸"浮动。
   结构在 site.js 的 footerCta/socialDockHTML，链接在 data.js 的 S.social。 */
.footer__cta{display:flex;align-items:stretch;gap:10px;margin-top:2px}
/* ⚠️ 这里不能用 `flex:1 1 0` 等分：flex-basis:0 只算内容盒，
   padding / 边框是额外加上的，于是内边距大的那个按钮会自己变宽（实测 174 vs 140）。
   直接按百分比定宽才是真等宽。 */
.footer__cta > *{flex:0 0 auto;width:calc(50% - 5px);min-width:0}
/* 高度也定死，两个按钮在"并排"和"窄屏竖排"两种排法下都一样高
   （否则主按钮多一个 1px 边框 + 图标行高，会高 3px）。 */
.footer__cta > *{height:44px}
/* 主按钮在这个容器里要跟次按钮同宽，所以字号/内边距比站内其它 .btn 收一档，
   保证 "Chat on WhatsApp" 一行放得下不折行。 */
.footer a.btn--wa{font-size:13.5px;padding:12px 10px;gap:6px;justify-content:center;white-space:nowrap}
.footer a.btn--wa svg{width:14px;height:14px}
.social-dock{position:relative;display:flex;align-items:stretch}
.social-dock__trigger{
  position:relative;z-index:3;width:100%;justify-content:center;
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 10px;border-radius:999px;cursor:pointer;
  /* 2026-09-24 用户："底下的这个关注我们气泡不好看，我想要橘色的那种" →
     第一版做成实心橘，用户："颜色太重了，最好边缘是橙色，然后鼠标悬浮时再把橙色填满"。
     所以定稿是**描边款**：平时白底 + 橘色边缘 + 橘色字，hover / 键盘聚焦时填满橘色、字转白。
     边框固定在 1px 不换粗细，hover 只换颜色，按钮尺寸不跳（.footer__cta 里 Height 锁 44px）。 */
  border:1px solid var(--accent);color:var(--accent-deep);
  font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.66));
  box-shadow:inset 0 1px 0 #fff;
  transition:background .25s,border-color .25s,color .25s,transform .3s var(--ease),box-shadow .3s;
}
.social-dock__trigger:hover,
.social-dock__trigger:focus-visible{
  border-color:var(--accent);color:#fff;
  background:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(199,74,9,.5),inset 0 1px 0 rgba(255,255,255,.35);
}
.social-dock__trigger:focus-visible{outline:2px solid rgba(232,89,12,.45);outline-offset:2px}
/* 提示用的呼吸小圆点：一直在轻轻起伏，暗示"这里有东西可以展开"。
   平时是橘点（白底上看得见），hover 填满橘底后自动换成白点，否则橘点落在橘底上会消失。
   颜色与光晕都走自定义属性，这样同一组 @keyframes 在两种状态下都能用。 */
.social-dock__dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--dot,var(--accent));
  box-shadow:0 0 0 0 var(--dot-halo,rgba(232,89,12,.35));
  animation:social-dot 2.6s ease-in-out infinite;
}
@keyframes social-dot{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 var(--dot-halo,rgba(232,89,12,.35))}
  50%{transform:scale(1.25);box-shadow:0 0 0 6px transparent}
}
.social-dock__trigger:hover .social-dock__dot,
.social-dock__trigger:focus-visible .social-dock__dot{
  --dot:#fff;--dot-halo:rgba(255,255,255,.55);
}
.social-dock__list{
  /* 2026-09-23 用户："社媒图标没放在气泡中央啊" —— 图标行比按钮宽，
     原来按按钮左边缘对齐，看上去就歪。改成相对按钮水平居中。 */
  position:absolute;left:50%;top:100%;z-index:4;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;margin:9px 0 0;padding:0;list-style:none;
}
.social-dock__item{
  visibility:hidden;
  opacity:0;transform:translateY(-10px) scale(.5);
  transition:opacity .3s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .5s;
  transition-delay:var(--sd,0s),var(--sd,0s),.5s;
}
.social-dock__btn{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.85);color:var(--accent-deep);padding:0;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(239,248,243,.7));
  box-shadow:0 14px 26px -20px rgba(64,55,30,.6),inset 0 1px 0 #fff;
  transition:background .25s,color .25s,border-color .25s,box-shadow .3s;
}
/* 2026-09-23 用户："图标在圆形中，你不觉得偏上了吗" —— 量出来整排偏上 3px。
   原因跟页脚 WhatsApp 按钮的字色是同一类：`.footer a`（0,1,1）比 `.social-dock__btn`
   （0,1,0）更具体，把 `display:grid` 顶成 `inline-block`、还塞进 `padding:4px 0`，
   于是 16px 的字形被顶到圆的上半部（32px 圆里偏上 3px）。
   这里用同等具体度写回来，居中与内边距都锁死。 */
.footer a.social-dock__btn{display:grid;place-items:center;padding:0}
.social-dock__btn svg{width:16px;height:16px;display:block}
/* 展开后：图标逐个回弹到位，然后每个图标带着错开的延迟做"呼吸"浮动。
   浮动挂在内层 <a> 上，和外层的弹出位移分开，互不打架。 */
.social-dock:hover .social-dock__item,
.social-dock:focus-within .social-dock__item,
.social-dock.is-open .social-dock__item{
  visibility:visible;opacity:1;transform:none;
  transition-delay:var(--sd,0s),var(--sd,0s),0s;
}
.social-dock:hover .social-dock__btn,
.social-dock:focus-within .social-dock__btn,
.social-dock.is-open .social-dock__btn{animation:social-breathe 3.6s ease-in-out infinite;animation-delay:calc(var(--sd,0s) + .12s)}
/* 呼吸＝**只缩放、不上下位移**：位移会让图标在圆里看起来"没坐正"，
   缩放同样有呼吸感，而且每个图标始终钉在圆心。 */
@keyframes social-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
.social-dock:hover .social-dock__btn:hover{
  animation-play-state:paused;transform:translateY(-2px) scale(1.08);
  background:var(--sb,var(--accent));color:#fff;border-color:transparent;
  box-shadow:0 18px 30px -16px rgba(64,55,30,.5);
}
/* 交错节奏：越靠右越慢一点（同时作用于弹出延迟和呼吸延迟） */
.social-dock__item:nth-child(1){--sd:0s}
.social-dock__item:nth-child(2){--sd:.07s}
.social-dock__item:nth-child(3){--sd:.14s}
.social-dock__item:nth-child(4){--sd:.21s}
.social-dock__item:nth-child(5){--sd:.28s}
/* 各平台的品牌色，只在鼠标停到那个图标上时出现（平时保持站内的橘红调子） */
.social-dock__item--facebook{--sb:#1877f2}
.social-dock__item--tiktok{--sb:#111}
.social-dock__item--instagram{--sb:#c837ab}
.social-dock__item--youtube{--sb:#e8342a}
@media (prefers-reduced-motion:reduce){
  .social-dock__dot{animation:none}
  .social-dock__item,.social-dock__btn{transition:none;animation:none!important}
  .social-dock__item{transform:none}
}

/* ---------- Reveal ---------- */
/* 2026-09-29：入场动画只剩 motion.js（GSAP）那一条路，纯 CSS 降级那条已删。
   所以这里**不能再有** [data-reveal]{opacity:0…} 这种"默认隐藏、等 JS 来放"的规则 ——
   它和那条降级 JS 是配套的，JS 一走，留着它就等于"GSAP 一旦没加载，整页永远空白"。
   现在 CSS 只负责一句兜底：GSAP 在场时把 opacity/transform/transition 让给它（行内样式会盖过这条），
   没注册到 GSAP 的 [data-reveal] 也不会被 CSS 藏起来。
   （data-delay 的 transition-delay 一并删了：它只服务于那条降级路径，
     而且选择器太宽，会顺带给带 data-delay 的元素上的 hover 过渡加延迟。） */
html.gsap [data-reveal]{opacity:1;transform:none;transition:none}

/* ---------- Notice ---------- */
.notice{
  border:1px dashed rgba(232,89,12,.5);background:rgba(232,89,12,.07);border-radius:14px;
  padding:16px 18px;font-size:13.5px;color:#9c4007;display:flex;gap:12px;align-items:flex-start;
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr);gap:34px 0}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .hero__visual{max-width:560px}
  .hero__float--a{right:0}
  .hero__float--b{left:0}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* v246 性能（2026-09-30）：手机版菜单是"整屏"遮罩，原来挂了 backdrop-filter:blur(30px)，
     开合时那 0.45s 过渡每一帧都要重算整屏模糊 —— 这就是侧边面板卡死那一帧看到的画面。
     跟顶栏 v94 一个道理：拆掉模糊、改成不透明纯色（半透明会透出下方文字成"鬼影"）。
     同一类坑顶栏 v94 已经踩过一次（见 .header 上面那段注释），这里是漏掉的一处。 */
  .nav{position:fixed;inset:0;background:#fafafa;flex-direction:column;justify-content:center;gap:26px;transform:translateY(-100%);transition:transform .45s var(--ease);z-index:50}
  body.nav-open .nav{transform:none}
  .nav a{font-size:24px;font-weight:650;color:var(--text)}
  .header__cta .btn{display:none}
  .burger{display:flex;position:relative;z-index:60}
  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .contact-grid,.detail-hero__grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hero__stats{grid-template-columns:1fr 1fr}
  .hero__stat{padding:20px 0 20px 0}
  .hero__stat+.hero__stat{padding-left:18px}
  .hero__stat:nth-child(2){border-right:0}
  .hero__stat:nth-child(1),.hero__stat:nth-child(2){border-bottom:1px solid var(--line)}
  .grid-3,.grid-2,.feature-grid{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:34px}
  /* 页脚两个按钮在窄屏竖排（仍然等宽＝满栏），社媒图标往下弹出，
     所以给社媒条底部留出图标的高度，免得盖住下一栏标题。 */
  .footer__cta{flex-direction:column}
  .social-dock{margin-bottom:46px}
  .cta-band__in{flex-direction:column;align-items:flex-start}
  .detail-gallery{grid-template-columns:repeat(2,1fr)}
  .album-grid{grid-template-columns:1fr}
}
@media (min-width:721px) and (max-width:1080px){
  .album-grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ===== Homepage expansion blocks (families / applications / customization / promises) ===== */
.grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.family-grid,.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.app-card{
  position:relative;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(239,247,242,.7));
  border:1px solid var(--glass-border);
  box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-soft);
  transition:transform .35s var(--ease),box-shadow .4s,border-color .3s;
}
.app-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(35,30,22,.05),0 30px 70px -28px rgba(64,55,30,.4)}
.app-scene{
  position:relative;height:236px;flex:none;overflow:hidden;
  background:
    radial-gradient(70% 90% at 12% 0%,rgba(232,89,12,.05),transparent 60%),
    linear-gradient(180deg,rgba(235,247,241,.72),rgba(235,247,241,.1));
}
.app-scene svg,.app-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .55s var(--ease)}
.app-scene--emergency svg,.app-scene--emergency img{object-position:50% 12%}
.app-card:hover .app-scene svg,.app-card:hover .app-scene img{transform:translateY(-5px) scale(1.03)}
.app-scene__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:40px 26px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(248,251,249,.55) 46%,rgba(255,255,255,.97) 100%);
  pointer-events:none;
}
.app-scene__cap .eyebrow{margin-bottom:6px}
.app-scene__cap h3{margin:0;color:var(--text)}
.app-card__body{
  padding:20px 26px 26px;
  display:flex;flex-direction:column;flex:1;
}
.app-card__body .chip-row{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px}.app-card__body .chip{padding:9px 11px;font-size:12px;gap:6px;white-space:nowrap}
.app-card .eyebrow{margin-bottom:10px}
.app-card h3{font-size:1.28rem;margin:0 0 10px}
.app-card p{font-size:14px;color:var(--muted);margin:0 0 18px}
.custom-band{
  border-radius:28px;overflow:hidden;position:relative;padding:clamp(30px,5vw,60px);
  background:
    radial-gradient(90% 130% at 10% 0%,rgba(232,89,12,.08),transparent 55%),
    radial-gradient(70% 120% at 100% 100%,var(--leaf-glow),transparent 60%),
    linear-gradient(145deg,rgba(245,252,248,.92),rgba(221,239,230,.6));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(35,30,22,.04),var(--shadow-soft);
}
.custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.custom-item{
  padding:18px 20px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.62);
}
.custom-item b{display:block;font-size:15px;letter-spacing:-.01em;margin-bottom:5px}
.custom-item p{font-size:13.5px;color:var(--muted);margin:0}
@media (max-width:1080px){.family-grid,.app-grid,.grid-6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.custom-grid{grid-template-columns:1fr}}
@media (max-width:720px){.family-grid,.app-grid,.grid-6{grid-template-columns:1fr}}

/* ===== Home hero image backdrop (A-scheme background board) ===== */
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__bg::before{
  content:"";position:absolute;inset:-2%;
  background:url("../images/factory-hero-bg.jpg") center 60%/cover no-repeat;
  /* v80: no blur, no brightness lift, so the photo keeps its texture */
  opacity:1;filter:saturate(1.08) contrast(1.04);
  transform:scale(1.02);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 46%,rgba(247,251,248,.60) 78%,rgba(234,246,239,.90) 93%,#eaf6ef 100%),
    radial-gradient(46% 36% at 5% 4%,rgba(255,160,130,.16),rgba(255,160,130,0) 70%),
    radial-gradient(42% 50% at 100% 0%,rgba(130,215,178,.20),rgba(130,215,178,0) 72%),
    radial-gradient(64% 48% at 100% 100%,rgba(250,253,251,.45),rgba(250,253,251,0) 72%),
  /* v85: veil lifted again (v80 was .72/.44/.16/0) so the photo reads fainter; still fades out to the right */
    linear-gradient(100deg,rgba(251,253,252,.83) 0%,rgba(250,253,251,.60) 42%,rgba(247,251,248,.32) 70%,rgba(246,251,248,.12) 100%);
}
.hero.glow::before{z-index:1}
.hero > .container{position:relative;z-index:2}
@media (max-width:900px){
  .hero__bg::before{background-position:center 55%}
}

/* Product-card thumbnail strip (listing page) */
.product-card__tags{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;flex-shrink:0;min-width:0}
.pc-thumbs{display:flex;flex-wrap:nowrap;gap:6px;margin:0 0 0 auto;flex-shrink:1;min-width:0}
.pc-thumb{width:43px;height:43px;min-width:30px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:#eceae4;transition:border-color .25s,transform .3s var(--ease)}
.pc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pc-thumb:hover{transform:translateY(-2px)}
.pc-thumb.is-active{border-color:var(--accent-deep)}

/* 详情页「室内」板块（v136）：客厅 / 厨房 / 卫生间 / 卧室 四张实拍 + 图注 */
.interior-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.interior-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.interior-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.interior-card{margin:0;display:flex;flex-direction:column;gap:10px}
.interior-card .photo{aspect-ratio:4/3;border-radius:var(--radius)}
.interior-card figcaption{font-size:15px;line-height:1.55;color:var(--muted)}

/* 产线页「全尺寸简介图」板块（2026-09-23）：一行 4 个、两行共 8 个。
   占位态走 .size-card__ph（做法同心形墙 .heart-wall__ph）；data.js 里把
   item.img 一填上，占位框自动换成图片，版式不变。 */
.size-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 18px}
.size-card{margin:0;display:flex;flex-direction:column;gap:10px;position:relative}
.size-card__photo{aspect-ratio:4/3;border-radius:var(--radius)}
.size-card__photo.is-empty{border:1px dashed rgba(30,25,15,.20)}
.size-card__ph{display:grid;place-items:center;width:100%;height:100%;color:#c3cec7}
.size-card__icon{width:40px;height:40px}
.size-card figcaption{display:flex;flex-direction:column;gap:3px}
.size-card figcaption strong{font-size:15px;font-weight:650;color:var(--text);line-height:1.4}
.size-card figcaption span{font-size:13px;color:var(--muted);letter-spacing:.03em}
@media (max-width:900px){.size-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.size-gallery{grid-template-columns:1fr}}
/* 尺寸卡片整块可点（2026-09-23）：figcaption 必须是 figure 的直接子元素，
   所以链接只能做成覆盖层撑满卡片；悬停反馈沿用 .line-band__hit 那套
   「正中弹出白色圆章」的做法，跟站里其他入口保持一致。 */
.size-card.is-linked{cursor:pointer}
.size-card__hit{position:absolute;inset:0;z-index:4;border-radius:var(--radius)}
.size-card__hit:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.size-card__go{
  position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:#fff;color:var(--accent);box-shadow:0 14px 34px -14px rgba(70,24,0,.55);
  opacity:0;transform:translate(-50%,-50%) scale(.82);
  transition:opacity .28s var(--ease),transform .42s var(--ease);
}
.size-card__go svg{width:24px;height:24px}
.size-card.is-linked:hover .size-card__go,
.size-card.is-linked:focus-within .size-card__go{opacity:1;transform:translate(-50%,-50%) scale(1)}
.size-card__photo img{transition:transform .55s var(--ease)}
.size-card.is-linked:hover .size-card__photo img{transform:scale(1.04)}
/* 触屏没有 hover，圆章常驻，否则用户看不出能点 */
@media (hover:none){.size-card__go{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .size-card__go,.size-card__photo img{transition:none}
  .size-card.is-linked:hover .size-card__photo img{transform:none}
}

/* 尺寸详情页的图纸容器（2026-09-23）：平面图与尺寸表都是「图纸」不是照片，
   白底 + 细边框 + 完整显示（不裁切），跟整站照片的 cover 圆角处理区分开。 */
.size-detail__drawing{
  background:#fff;border:1px solid rgba(30,25,15,.10);border-radius:var(--radius);
  padding:clamp(14px,2vw,28px);display:flex;justify-content:center;align-items:flex-start;
}
.size-detail__drawing img{display:block;width:100%;height:auto}
/* 平面图是竖幅居多，撑满 1200 会显得空，收到 860 居中 */
.size-detail__drawing--plan img{max-width:860px}


/* 详情页「可定制选项」板块（v137）：chip 跳转 + 类目图带（色卡 / 长条 / 竖版实拍）。
   色卡尺寸都卡在源图原生大小以内（外墙板 230px、SPC 224px、门/卫生间 520px），不放大。 */
.opt-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.opt-chip{font:inherit;font-size:13px;padding:8px 15px;border-radius:999px;cursor:pointer;color:var(--muted);
  border:1px solid rgba(30,25,15,.14);background:rgba(255,255,255,.55);transition:border-color .25s,color .25s,background .25s}
.opt-chip:hover{border-color:var(--accent-deep);color:var(--accent-deep)}
.opt-chip.is-active{border-color:var(--accent-deep);color:#fff;background:var(--accent-deep)}
/* 6 类定制入口：一行一个类目（缩略图 + 名称 + 数量 + 箭头），两列排列 */
.opt-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:0 0 34px}
.opt-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:12px 18px 12px 12px;text-decoration:none;color:inherit;
  border:1px solid rgba(30,25,15,.13);border-radius:var(--radius);background:rgba(255,255,255,.55);
  transition:border-color .25s,background .25s,transform .3s var(--ease)}
.opt-row:hover{border-color:rgba(30,25,15,.28);transform:translateY(-2px)}
.opt-row.is-active{border-color:var(--accent-deep);background:rgba(255,244,236,.75)}
.opt-row__thumb{display:block;width:88px;height:88px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#efeeea,#e2e1dc)}
.opt-row__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.opt-row__thumb.is-tall img{object-fit:contain}
.opt-row__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.opt-row__body strong{font-size:15px;font-weight:650;color:var(--text);line-height:1.35}
.opt-row__body em{font-size:12.5px;font-style:normal;color:var(--muted);letter-spacing:.04em}
.opt-row__go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--accent-deep);white-space:nowrap}
@media (max-width:900px){.opt-rows{grid-template-columns:1fr}}
.opt-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.opt-lead-meta{font-weight:650;color:var(--text)}
.opt-lead-text{display:block;margin-top:6px}
@media (max-width:900px){.opt-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.opt-cards{grid-template-columns:1fr}}
/* 分页签只在本段生效；没有 JS 时 .is-tabbed 不会被挂上，所有类目照常铺开 */
.is-tabbed .opt-group{display:none}
.is-tabbed .opt-group.is-active{display:block}
.opt-head{display:flex;align-items:baseline;gap:12px;margin:0 0 18px}
.opt-head h3{font-size:18px;margin:0;color:var(--text)}
.opt-head span{font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.opt-head--sub{margin-top:38px;padding-top:26px;border-top:1px solid rgba(30,25,15,.08)}
.opt-grid{display:grid;gap:14px 16px}
.opt-grid--swatch{grid-template-columns:repeat(4,minmax(0,1fr))}
.opt-grid--photo{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}
.opt-grid--strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.opt-grid--band{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 18px}
.opt-item{margin:0;display:flex;flex-direction:column;gap:8px}
.photo--opt{aspect-ratio:3/2;max-width:240px;border-radius:var(--radius-s)}
.photo--band{aspect-ratio:335/132;border-radius:var(--radius-s)}
.opt-grid--photo .photo--opt{aspect-ratio:4/5;max-width:300px}
.photo--strip{aspect-ratio:1032/132;border-radius:var(--radius-s)}
.opt-item figcaption{font-size:14px;color:var(--muted);letter-spacing:.03em}
@media (max-width:900px){
  .opt-grid--swatch{grid-template-columns:repeat(3,minmax(0,1fr))}
  .opt-grid--photo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opt-grid--strip{grid-template-columns:1fr}
}
@media (max-width:560px){
  .opt-grid--swatch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo--opt{max-width:none}
}
@media (max-width:900px){
  .interior-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .interior-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Header nav — one flat row (v88)
   Products + the two product lines sit flat side by side.
   No dropdown, no product-chooser page.
   ========================================================================== */
.nav__top{display:inline-flex;align-items:center}
@media (max-width:1180px){
  .nav{gap:22px}
  .nav a{font-size:14px}
}
@media (max-width:1060px){
  .nav{gap:16px}
  .nav a{font-size:13.5px}
  .header__cta .btn{display:none}
}

/* ==========================================================================
   Product-line page (v86) — fact strip, tag row, size table
   ========================================================================== */
.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.fact{padding:18px 20px;border-radius:var(--radius-s);background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.fact__k{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2)}
.fact__v{font-size:15px;font-weight:600;color:var(--text);line-height:1.45}
.tag-row{display:flex;flex-wrap:wrap;gap:8px}
.tag-row .option-tag{margin:0}
.size-table th{width:auto}
.size-table thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;border-bottom:1px solid var(--line-strong)}
.size-table tbody td{white-space:nowrap}
.size-table tbody td:first-child{font-weight:600;color:var(--text)}
/* 2026-09-24 尺寸板块改成分组多表（坡顶 / 平顶 / 拼接 / 整箱对折）：
   组标题、组间距离、表下注解，以及"7 列太宽"时的横向滚动兜底。 */
.size-group+.size-group{margin-top:38px}
.size-group__title{font-size:16px;font-weight:650;letter-spacing:-.01em;color:var(--text);margin:0 0 14px}
.size-group__note{margin:12px 2px 0;font-size:13px;line-height:1.6;color:var(--muted)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 不用写死 min-width：表里单元格已经是 nowrap，窄屏自然撑宽后由上面这层横向滚动接管。 */

/* 2026-09-25 折叠房页「两个系列」结构（用户口径：双翼拓展式 / 折叠箱房）。
   入口 = 一行两张 **4:3 的卡**：照片铺满整卡当背景，文字压在下方（用户 2026-09-25：
   "太宽了，要两个 4:3 的条并列一行"）。
   演变记录（别再来回改，四版都试过了）：
     ① 两张无图小卡 → 用户"加背景图"；② 照片整铺小卡 → 用户"块太小、字太密"；
     ③ 整幅长条（左图右文、两条上下叠）→ 用户"太宽了，换回一行两个"；
     ④ 本版：一行两个 + 卡本身 4:3 + 照片当背景。
   4:3 的框在 589px 宽时高 442px，正好放得下"眉标 + 标题 + 两行正文 + 两枚参数"（约 320px）。
   ≤900px 收成一列（此时一张卡铺满容器、仍然 4:3）；≤560px 取消 4:3 改最小高度，
   否则 360px 宽时 4:3 只有 270px 高，字会顶出去。
   锚点跳转要躲开固定顶栏，所以给分节加 scroll-margin-top。 */
.series-bands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.series-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;gap:15px;
  /* 4:3 是主尺寸；min-height 是"字放不下时别把内容裁掉"的兜底 ——
     901–1000px 这段窗口下每张只有 ~420px 宽，4:3 就是 315px 高，
     而这段文案要 ~320px，光靠 aspect-ratio 会从卡底裁掉一行。
     所以窄到一定程度就让卡比 4:3 高一点，宁可比例不是整数，也不能丢字。 */
  aspect-ratio:4/3;min-height:340px;padding:clamp(24px,2.6vw,32px);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(243,251,247,.84),rgba(224,241,232,.5));
  border:1px solid var(--glass-border);
  box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-soft);
  transition:transform .35s var(--ease),box-shadow .4s var(--ease);
}
.series-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-float)}
.series-card:hover .series-card__name{color:var(--accent-deep)}
.series-card__bg{position:absolute;inset:0;z-index:-1;background:#e9f1ea}
.series-card__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 52%}
/* 白雾曲线照首屏那条：0–16% 基本不加白、照片干净，30% 起明显加白，62% 之后托住文字。
   文字从 28% 左右开始往下排，所以下面再垫一层柔白径向，保证正文压得住深色箱体。 */
.series-card__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 16%,rgba(252,253,252,.36) 30%,rgba(250,252,251,.74) 46%,rgba(246,251,248,.90) 62%,rgba(243,249,245,.96) 78%,rgba(241,248,243,.98) 100%),
    radial-gradient(62% 46% at 12% 82%,rgba(255,255,255,.76) 0%,rgba(255,255,255,.52) 46%,rgba(255,255,255,.16) 80%,rgba(255,255,255,0) 94%);
}
.series-card__name{font-size:clamp(1.3rem,1.7vw,1.55rem);line-height:1.25;letter-spacing:-.01em;margin:0;color:var(--text);transition:color .22s}
.series-card__short{margin:0;color:var(--text-soft);font-size:15px;line-height:1.7}
.series-card__facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.series-card__facts .fact{padding:14px 16px;gap:5px;background:rgba(255,255,255,.72)}
.series-card__facts .fact__v{font-size:14px}
/* 文字这一段单独包一层：桌面端它撑满卡片底部，手机端（见下面的手机版块）它变成"左图右字"的第二列。 */
.series-card__body{display:flex;flex-direction:column;gap:15px}
@media (max-width:900px){
  .series-bands{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .series-card{aspect-ratio:auto;min-height:360px}
  .series-card__facts{grid-template-columns:1fr}
}
.series-section{scroll-margin-top:104px}
/* 尺寸简介图嵌在「系列一」里时，跟上面的表拉开一段。 */
.size-gallery-block{margin-top:clamp(40px,5vw,64px)}
/* 表底那句"左右滑动"的提示：只有手机版显示（见手机版块）。 */
.size-group__hint{display:none;margin:10px 2px 0;font-size:12.5px;color:var(--muted-2)}

/* ==========================================================================
   折叠房产线页 · 手机版定稿（2026-09-25，用户："手机上是在做减法"）
   --------------------------------------------------------------------------
   实测（375×844 iPhone 视口）：改之前整页 12277px = 14.5 屏，第一屏里
   根本看不到"两个系列"（它们从 y≈1093 才开始）。这一块只做减法：
     ① 顺序：两个系列提到导语前面，进第一屏
     ② 系列入口压成"图 + 名字 + 数字"的紧凑索引（正文那行手机上不显示，
        同样的内容在下面每个系列的导语里还有一份，信息不丢）
     ③ 尺寸图 / 外观图：竖排 5–9 张改成一行横滑
     ④ 尺寸表：字号收小、首列吸住、加一行"左右滑动"提示
     ⑤ 页尾型号卡：去掉每张卡下面 5 个小缩略图（懒加载，不显示就不会下载）
   桌面版（>900px）一律不受影响；641–900px 仍是原来的单列大卡。
   ========================================================================== */
@media (max-width:640px){
  /* ① 排序：hero → 两个系列 → 导语 → 系列一二 → 规格 → 型号卡 → 询问条 */
  #line-detail{display:flex;flex-direction:column}
  #line-detail > section{order:5}
  #line-detail > .page-hero{order:1}
  #line-detail > .section--line-range{order:2}
  #line-detail > .section--line-intro{order:3}
  #line-detail > .series-section{order:4}
  #line-detail > .section--line-spec{order:6}
  /* 2026-09-29 用户："标准栓房页的旗舰房板块，手机端的也应该像折叠房一样调上去"。
     这条原来是 order:7 —— 手机上「旗舰型号」被压到「技术规格」下面、倒数第二块，
     而桌面端它是**紧跟导语的第一块**（DOM 顺序里排在最前）。手机跟桌面不一致，
     用户要的就是把这个差补上。改成 4：跟在导语(order:3)之后、尺寸表(order:5 默认)之前，
     于是手机读下来是 导语 → 旗舰型号 → 尺寸 → 规格，和桌面同一顺序。
     ⚠️ 折叠房不受影响：它的旗舰卡走 modelsPosition:"in-series" 塞进各系列里，
        页面上根本没有 .section--line-models 这个 section。 */
  #line-detail > .section--line-models{order:4}
  #line-detail > .cta-section{order:8}
  /* 面包屑在手机上被顶栏挤成两行、又和顶栏重复，去掉省一段高度 */
  .page-hero .crumb{display:none}
  .page-hero{padding-top:clamp(26px,7vw,40px);padding-bottom:clamp(30px,8vw,44px)}
  /* 板块导语在手机上收窄留白，把高度让给内容 */
  .section--line-range .section-head{margin-bottom:20px}
  .section--line-range .section-head .lead{display:none}
  /* 2026-09-29：「本线两个系列」这个头并进了导语那一节（独立的 .section--line-range 没有了），
     手机上"把这句 lead 收掉"的做法照旧，换个类名接着生效。上面两条留着不删 ——
     万一哪天这个头又独立成节，它们自动又管用。 */
  .line-range__head{margin-bottom:20px}
  .line-range__head .lead{display:none}
  .section--tight{padding:clamp(34px,8vw,52px) 0}

  /* ② 系列入口：两列紧凑索引（图 4:3 + 名字 + 两枚数字） */
  .series-bands{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .series-card{
    display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;
    aspect-ratio:auto;min-height:0;padding:0;gap:0;justify-content:flex-start;
  }
  .series-card__bg{position:relative;aspect-ratio:4/3}
  .series-card__bg::after{display:none}
  .series-card__body{gap:6px;padding:11px 12px 13px}
  .series-card__short{display:none}
  .series-card__name{font-size:1.05rem;line-height:1.3}
  .series-card .eyebrow{font-size:11px}
  .series-card__facts{grid-template-columns:1fr 1fr;gap:4px}
  .series-card__facts .fact{padding:7px 8px;gap:2px;background:transparent;border:0}
  .series-card__facts .fact__k{font-size:10px;letter-spacing:.04em}
  .series-card__facts .fact__v{font-size:12.5px;font-weight:650;line-height:1.35}

  /* ③ 尺寸图 / 外观图：竖排改成一行横滑，一张露 2 个多一点，暗示还能往右划 */
  .size-gallery{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    gap:12px;padding:2px 2px 12px;margin:0 -2px;
  }
  .size-card{scroll-snap-align:start}
  .size-gallery-block{margin-top:30px}

  /* ④ 尺寸表：字号收小争取多露两列，首列吸住不跟着划走 */
  .size-table{font-size:13px}
  .size-table th,.size-table td{padding:10px 12px}
  .size-table thead th{font-size:11px;letter-spacing:.04em}
  .size-table tbody td:first-child{
    position:sticky;left:0;z-index:2;background:#f4faf6;
    box-shadow:1px 0 0 var(--line);
  }
  /* 详情页那张表首列是 <th scope="row">（行标题），一起吸住 */
  .size-table tbody th:first-child{
    position:sticky;left:0;z-index:2;background:#f4faf6;
    box-shadow:1px 0 0 var(--line);
  }
  .size-group+.size-group{margin-top:26px}
  .size-group__hint{display:block}

  /* ⑤ 页尾型号卡：去掉缩略图带（懒加载，不显示就不会下载那 15 张），卡片改横滑 */
  .pc-thumbs{display:none}
  #line-detail .grid-3{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    gap:14px;padding:2px 2px 12px;margin:0 -2px;
  }
  #line-detail .grid-3 > *{scroll-snap-align:start}

  /* ⑥ 技术规格：表格行距、选配胶囊、运费清单一起收紧（内容不删，只压留白） */
  .section--line-spec .split{gap:26px}
  .section--line-spec .spec-table{font-size:13.5px}
  .section--line-spec .spec-table th,
  .section--line-spec .spec-table td{padding:11px 14px}
  .section--line-spec .kicker-label{margin-bottom:12px}
  .section--line-spec .option-tag{padding:9px 13px;font-size:12.5px}
  .section--line-spec .check-list li{padding:6px 0 6px 30px}
  .section--line-spec .notice{margin-top:20px;padding:14px 16px;font-size:13px}
}

/* 尺寸详情页：同一尺寸的两种顶型左右分栏（2026-09-24 用户：
   "点击去对应的 20ft，我们在详情页左右分为平顶和非平顶"）。
   左栏＝非平顶（坡顶），右栏＝平顶；每栏从上到下是 主图 / 平面图 / 尺寸表。
   只有一种顶型的尺寸（10ft、20ft 小宽）自动退化成单栏。 */
.roof-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.roof-split--single{grid-template-columns:minmax(0,1fr)}
.roof-col{display:flex;flex-direction:column;gap:14px}
.roof-col__title{
  margin:0;font-size:15px;font-weight:650;letter-spacing:.02em;color:var(--text);
  display:flex;align-items:center;gap:9px;
}
.roof-col__title::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--accent);flex:none}
.roof-col--flat .roof-col__title::before{background:var(--ok)}
.roof-col__sub{font-size:12.5px;color:var(--muted);letter-spacing:.04em;margin:-6px 0 0}
.roof-col .size-detail__drawing{margin:0}
@media (max-width:820px){
  .roof-split{grid-template-columns:minmax(0,1fr)}
}
/* 「全尺寸」板块按顶型分组（2026-09-28 用户："这个全尺寸，得把平顶坡顶的拿出来，
   别放在一起了"）。小圆点沿用尺寸详情页顶型栏的配色：坡顶＝主色，平顶＝绿色。
   （原「坡顶 / 平顶两种」角标 .size-card__roof 随拆卡一起删掉了。） */
.size-roof-group + .size-roof-group{margin-top:clamp(26px,3.4vw,40px)}
.size-roof-group__title{
  margin:0 0 14px;font-size:15px;font-weight:650;letter-spacing:.02em;color:var(--text);
  display:flex;align-items:center;gap:9px;
}
.size-roof-group__title::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--accent);flex:none}
.size-roof-group--flat .size-roof-group__title::before{background:var(--ok)}
@media (max-width:560px){.size-roof-group__title{margin-bottom:10px;font-size:14px}}
@media (max-width:560px){
  .size-table{font-size:13px}
  .size-table th,.size-table td{padding:11px 12px}
}

/* Mobile nav: full-screen list (v88) */
@media (max-width:900px){
  .nav{justify-content:flex-start;padding:96px 0 48px;overflow-y:auto;gap:22px}
  .fact-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Unified catalog + How we work (v88)
   Catalog = every model on one page with a family filter, so a buyer can
   compare side by side. "How we work" = who produces, who is accountable.
   ========================================================================== */
.catalog-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 20px}
.filter-chip{
  padding:11px 17px;border-radius:999px;cursor:pointer;font-family:var(--font);
  font-size:13.5px;font-weight:550;color:var(--text-soft);
  background:rgba(255,255,255,.72);border:1px solid var(--line-strong);
  transition:color .22s,border-color .22s,background .22s,transform .22s var(--ease);
}
.filter-chip:hover{border-color:rgba(232,89,12,.5);color:var(--accent-deep)}
.filter-chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.catalog-count{margin:0 0 24px;font-size:13px;color:var(--muted);letter-spacing:.02em}
.catalog-count strong{font-size:15px;font-weight:650;color:var(--text)}

/* v123：四步「2 行 × 2 列」，每格内部左图右字。整块占满容器宽度 ——
   不要给这块加 max-width 收窄居中，会和上下板块的左边缘不齐（试过，被否）。 */
/* 方案乙（2026-09-19）：编号 + 标题压在图片左下角，正文在图下方。
   图占满整格宽（约 582×364）。标题用一层从下往上的深色渐变 + 轻微投影保证可读。 */
/* 列间距固定 50px（2026-09-19 按用户指定；90 → 75 → 50），两列各占剩余宽度，整排仍从最左顶到最右。 */
.how-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:50px;row-gap:40px}
.how-card{display:flex;flex-direction:column;gap:12px}
.how-card__head{display:flex;align-items:baseline;gap:10px}
.how-2col .how-card h3{font-size:19px}
/* 图再矮一点：16:10 → 16:9（高度 -10%），裁切时往上偏一点，避免切到人物头顶 */
.how-2col .photo--how{aspect-ratio:16/9}
.how-2col .photo--how img{object-position:50% 42%}
.photo--how .how-card__head{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:46px 18px 15px;
  background:linear-gradient(to top,rgba(18,14,9,.84) 0%,rgba(18,14,9,.58) 40%,rgba(18,14,9,.2) 72%,rgba(18,14,9,0) 100%);
}
.photo--how .how-card__head h3{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.photo--how .how-card__head .num{color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.how-card h3{font-size:17px;margin:0;color:var(--text)}
.how-card p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.how-card .num{font-size:12px;font-weight:650;letter-spacing:.14em;color:var(--accent)}
.ph--how{aspect-ratio:16/10}
@media (max-width:900px){
  .how-2col{grid-template-columns:100%;column-gap:0;row-gap:34px}
}
@media (max-width:640px){
  .how-2col{grid-template-columns:1fr;gap:30px}
  .how-card h3{font-size:16px}
}

/* ==========================================================================
   Product-line bands —— 产品线入口长条带（v89）
   一个系列铺满一整条：桌面端左图右文、两条上下叠；≤900px 转为图在上。
   l.slender 的系列（L3 专用产品）压成窄条，排在两条主线之后。
   ========================================================================== */
.line-bands{display:flex;flex-direction:column;gap:22px}
.line-band{
  display:grid;grid-template-columns:360px minmax(0,1fr);
  border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(243,251,247,.84),rgba(224,241,232,.5));
  border:1px solid var(--glass-border);
  box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-soft);
  transition:transform .4s var(--ease),box-shadow .45s var(--ease);
}
.line-band:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-float)}
.line-band__media{display:block;position:relative;min-height:300px}
.line-band__media .ph{position:absolute;inset:0;height:100%;border-radius:0;border:0;border-right:1px solid var(--line);box-shadow:none}
.line-band__media .ph__frame{inset:24% 20%}
.line-band__body{display:flex;flex-direction:column;gap:16px;padding:34px 38px 30px}
.line-band__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.line-band__count{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.line-band__count b{font-size:15px;font-weight:700;color:var(--text);margin-right:5px}
.line-band__title{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2;letter-spacing:-.01em;margin:0}
.line-band__title a{color:var(--text);transition:color .22s}
.line-band__title a:hover{color:var(--accent-deep)}
.line-band__lead{margin:0;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:64ch}
.line-band__types{margin:2px 0 0}
.line-band__facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.line-band__facts .fact{padding:14px 16px;gap:5px}
.line-band__facts .fact__v{font-size:14px}
.line-band__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.line-band__foot .btn{margin-left:auto}

/* 窄条：专用产品（L3）不在入口区做整幅带 */
.line-band--slender{grid-template-columns:minmax(0,1fr)}
.line-band--slender .line-band__body{flex-direction:row;align-items:center;gap:34px;padding:24px 32px}
.line-band--slender .line-band__col{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.line-band--slender .line-band__count{margin-left:0}
.line-band--slender .line-band__title{font-size:1.15rem}
.line-band--slender .line-band__lead{font-size:14.5px;max-width:90ch}
.line-band--slender .line-band__side{flex:0 0 auto}

@media (max-width:900px){
  .line-band{grid-template-columns:minmax(0,1fr)}
  .line-band__media{min-height:0;aspect-ratio:16/9}
  .line-band__media .ph{border-right:0;border-bottom:1px solid var(--line)}
  .line-band__body{padding:26px 24px 24px;gap:14px}
  .line-band__facts{grid-template-columns:1fr 1fr}
  .line-band--slender .line-band__body{flex-direction:column;align-items:stretch;gap:16px}
  .line-band--slender .line-band__side{width:100%}
}
@media (max-width:560px){
  .line-band__facts{grid-template-columns:1fr}
  .line-band__count{margin-left:0}
  .line-band__foot .btn{margin-left:0}
}

/* ==========================================================================
   Platform-grouped catalog（products 页，v90）
   一个平台 = 平台头（.range-group__head，复用 .line-band）+ 该平台的配置卡。
   ① 平台头比首页入口长条带矮一档（图位 360→280、内距收紧），避免"一屏两张空图"；
   ② 卡片上露出 2–3 个硬参数 —— 贸易商不公开板厚 / 尺寸 / 装柜数；
   ③ 专用产品（4 款）作为一个完整的组进目录，不再压成窄条。
   移动端沿用 ≤900px 的"图在上"规则，所以平台头的收窄只写在 ≥901px。
   ========================================================================== */
.range-groups{display:flex;flex-direction:column;gap:42px}
.range-group{display:flex;flex-direction:column;gap:20px}
.range-group__cards{align-items:stretch}

@media (min-width:901px){
  .range-group__head{grid-template-columns:280px minmax(0,1fr)}
  .range-group__head .line-band__media{min-height:226px}
  .range-group__head .line-band__media .ph__frame{inset:30% 24%}
  .range-group__head .line-band__body{padding:26px 30px 24px;gap:13px}
  .range-group__head .line-band__title{font-size:clamp(1.25rem,2.1vw,1.6rem)}
  .range-group__head .line-band__lead{font-size:15px}
  .range-group__head .line-band__facts .fact{padding:12px 14px}
  .range-group__head .line-band__foot{padding-top:16px}
}
/* 4 款配置的组铺满一行，不留一张孤卡 */
@media (min-width:1081px){
  .range-group__cards[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.pc-params{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.pc-params span{
  font-size:11.5px;font-weight:600;letter-spacing:.01em;line-height:1.3;
  color:var(--accent-deep);background:rgba(232,89,12,.07);
  border:1px solid rgba(232,89,12,.18);border-radius:7px;padding:5px 9px;
}

/* 首页平台入口（v92）—— 用户要的"两行紧凑条"：桌面上一条 ≈130px，不再是整幅长条带。
   完整形态（导语 / 种类标签 / 4 项硬指标卡）留在产品页的 .range-group__head。
   布局：左边一个小图位，右边三行 —— 徽标行 / 平台名 / 内联硬指标；CTA 竖排在右端。 */
/* ⚠️ 下面这一小段是 v92 的"两行紧凑条"，现在只剩 L3（.line-band--slender）在用；
   L1 / L2 两条主线已改成下面那段 v95 照片卡。 */
.line-bands{gap:14px}
.line-bands .line-band{grid-template-columns:150px minmax(0,1fr)}
.line-bands .line-band__media{min-height:118px}
.line-bands .line-band__media .ph__frame{inset:26% 20%}
.line-bands .line-band__body{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:24px;row-gap:8px;padding:18px 24px;
}
.line-bands .line-band__head{grid-column:1;gap:9px}
.line-bands .line-band__count{margin-left:0}
.line-bands .line-band__title{grid-column:1;font-size:clamp(1.15rem,1.9vw,1.45rem);margin:0}
.line-bands .lb-facts{grid-column:1;display:flex;flex-wrap:wrap;gap:5px 20px;font-size:12.5px;color:var(--muted)}
.line-bands .lb-fact b{
  font-weight:650;color:var(--text-soft);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;margin-right:7px;
}
.line-bands .lb-fact b::after{content:"·";margin-left:7px;color:var(--line-strong)}
.line-bands .line-band__foot{
  grid-column:2;grid-row:1 / span 3;
  flex-direction:column;align-items:flex-end;gap:12px;
  padding:0;border-top:0;margin:0;
}
.line-bands .line-band__foot .btn{margin-left:0}
.line-bands .line-band--slender{grid-template-columns:minmax(0,1fr)}
/* L3 窄条也标「Product range / 产品系列」——它同样是产品线，只是压成了窄条。
   kind 单独占第一行，其余三块顺次下移，CTA 仍竖跨整块。 */
.line-bands .line-band--slender .line-band__kind{
  grid-column:1;grid-row:1;margin:0 0 8px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-deep);
}
.line-bands .line-band--slender .line-band__head{grid-row:2}
.line-bands .line-band--slender .line-band__title{grid-row:3}
.line-bands .line-band--slender .lb-facts{grid-row:4}
.line-bands .line-band--slender .line-band__foot{grid-row:1 / span 4}
@media (max-width:900px){
  .line-bands .line-band{grid-template-columns:minmax(0,1fr)}
  .line-bands .line-band__media{min-height:0;aspect-ratio:16/6}
  .line-bands .line-band__body{grid-template-columns:minmax(0,1fr);padding:18px 20px;row-gap:9px}
  .line-bands .line-band__foot{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;gap:16px;justify-content:flex-start}
}

/* ===== 首页平台入口（v95）—— 整幅照片卡 =====
   L1 / L2 两条主线：照片铺满整张卡，左侧压一层深色渐变，文字压在照片上。
   卡片只是"入口"，卡面上只放四样：编号徽标 / 平台名 / 3 个硬指标 / 两个按钮。
   导语不放在首页卡面上（它在产品页的平台头 .range-group__head 里）。
   铺满整栏（桌面约 1164 宽）、比例 3:1（约 388 高）—— 跟参考站一致的一条"扁"入口带，
   不做成整幅大图。L3（.line-band--slender）不铺照片，沿用上面那段窄条。 */
.line-bands{gap:22px}
.line-bands .line-band--row:not(.line-band--slender){
  position:relative;display:block;aspect-ratio:3/1;
  background:#12140f;border-color:rgba(255,255,255,.12);
  box-shadow:0 26px 60px -34px rgba(20,20,18,.5);
}
.line-bands .line-band--row:not(.line-band--slender):hover{box-shadow:0 34px 72px -34px rgba(20,20,18,.58)}
.line-bands .line-band--row:not(.line-band--slender) .line-band__media{position:absolute;inset:0;min-height:0}
.line-bands .line-band--row:not(.line-band--slender) .line-band__media img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);
}
.line-bands .line-band--row:not(.line-band--slender):hover .line-band__media img{transform:scale(1.035)}
.line-bands .line-band--row:not(.line-band--slender) .line-band__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(10,12,10,.94) 0%,rgba(10,12,10,.8) 32%,rgba(10,12,10,.36) 60%,rgba(10,12,10,.04) 100%);
}
.line-bands .line-band--row:not(.line-band--slender) .line-band__body{
  position:relative;z-index:1;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;gap:0;
  /* 700 这个宽度是按"三条硬指标能在同一行排下"定的（L1 三条最长约 570px + 左右内边距）。 */
  height:100%;max-width:min(700px,72%);
  padding:clamp(26px,2.6vw,38px) clamp(26px,3.2vw,48px);
}
.line-bands .line-band--row:not(.line-band--slender) .line-band__head{grid-column:auto;gap:9px;margin-bottom:14px}
.line-bands .line-band--row:not(.line-band--slender) .line-band__kind{
  margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
.line-bands .line-band--row:not(.line-band--slender) .badge{
  background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4);
}
.line-bands .line-band--row:not(.line-band--slender) .badge--plain{
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.24);
}
.line-bands .line-band--row:not(.line-band--slender) .line-band__count{color:rgba(255,255,255,.74)}
.line-bands .line-band--row:not(.line-band--slender) .line-band__count b{color:#fff}
.line-bands .line-band--row:not(.line-band--slender) .line-band__title,
.line-bands .line-band--row:not(.line-band--slender) .line-band__title a{color:#fff}
.line-bands .line-band--row:not(.line-band--slender) .line-band__title{
  grid-column:auto;margin:0;
  font-size:clamp(1.6rem,2.7vw,2.2rem);line-height:1.12;letter-spacing:-.018em;
}
.line-bands .line-band--row:not(.line-band--slender) .line-band__title a:hover{
  color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
}
.line-bands .line-band--row:not(.line-band--slender) .line-band__lead{
  margin:0 0 18px;max-width:48ch;
  color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.62;
}
.line-bands .line-band--row:not(.line-band--slender) .lb-facts{
  grid-column:auto;display:flex;flex-wrap:wrap;gap:14px 44px;
  margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
  color:#fff;
}
.line-bands .line-band--row:not(.line-band--slender) .lb-fact{
  display:flex;flex-direction:column;gap:5px;
  font-size:16px;font-weight:600;line-height:1.3;
}
.line-bands .line-band--row:not(.line-band--slender) .lb-fact b{
  margin:0;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.52);
}
.line-bands .line-band--row:not(.line-band--slender) .lb-fact b::after{content:"";margin:0}
.line-bands .line-band--row:not(.line-band--slender) .line-band__foot{
  grid-column:auto;grid-row:auto;
  flex-direction:row;align-items:center;justify-content:flex-start;
  gap:24px;padding:20px 0 0;margin:0;border-top:0;
}
.line-bands .line-band--row:not(.line-band--slender) .link-arrow,
.line-bands .line-band--row:not(.line-band--slender) .link-arrow:hover{color:#fff}
.line-bands .line-band--row:not(.line-band--slender) .link-arrow{font-size:15px}
.line-bands .line-band--row:not(.line-band--slender) .btn--ghost{
  border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.1);
  box-shadow:none;font-weight:600;
}
.line-bands .line-band--row:not(.line-band--slender) .btn--ghost:hover{
  background:rgba(255,255,255,.22);border-color:#fff;transform:translateY(-2px);
}
@media (max-width:900px){
  .line-bands .line-band--row:not(.line-band--slender){aspect-ratio:auto}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__media{aspect-ratio:auto}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__body{
    height:auto;min-height:clamp(370px,74vw,470px);max-width:100%;
    justify-content:flex-end;padding:28px 22px 26px;
  }
  .line-bands .line-band--row:not(.line-band--slender) .line-band__media::after{
    background:linear-gradient(180deg,rgba(10,12,10,.5) 0%,rgba(10,12,10,.68) 42%,rgba(10,12,10,.94) 100%);
  }
  .line-bands .line-band--row:not(.line-band--slender) .line-band__head{margin-bottom:14px}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__title{margin-bottom:12px}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__lead{
    max-width:none;font-size:14.5px;margin-bottom:22px;
  }
  .line-bands .line-band--row:not(.line-band--slender) .lb-facts{gap:12px 30px;padding-top:16px}
  .line-bands .line-band--row:not(.line-band--slender) .lb-fact{font-size:15px}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__foot{gap:18px;padding-top:22px}
}

@media (max-width:560px){
  .range-groups{gap:32px}
  .pc-params span{font-size:11px}
}

/* ==========================================================================
   产线入口卡的"可点击"提示（v119）
   产品页删掉后，首页的产线卡就是通往各产品线的唯一入口。
   悬停 = 整卡铺满品牌橙 + 正中弹出一枚白色圆形"链接"图标，卡面文字压暗退到后面。
   ========================================================================== */
.line-bands .line-band--row{
  cursor:pointer;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.line-bands .line-band--row:not(.line-band--slender):hover{
  transform:translateY(-4px);box-shadow:0 40px 80px -34px rgba(120,50,0,.5);
}
/* 橙色覆盖：照片卡走 media 的遮罩层，窄条走一整层伪元素 */
.line-bands .line-band--row:not(.line-band--slender):hover .line-band__media::after{
  background:linear-gradient(96deg,rgba(176,58,10,.88) 0%,rgba(232,89,12,.74) 48%,rgba(242,132,62,.58) 100%);
}
.line-bands .line-band--slender{position:relative}
.line-bands .line-band--slender::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(196,72,12,.86),rgba(242,132,62,.66));
  opacity:0;transition:opacity .35s var(--ease);
}
.line-bands .line-band--slender:hover::before{opacity:1}
/* 卡面文字压暗退后，免得正中的图标压住标题和指标 */
.line-bands .line-band--row:hover .line-band__body{opacity:.78;transition:opacity .35s var(--ease)}
.line-bands .line-band--slender:hover .line-band__body{opacity:.66}
/* 正中的"链接"图标 */
.line-bands .line-band__hit{
  position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;
  display:grid;place-items:center;width:78px;height:78px;border-radius:50%;
  background:#fff;color:var(--accent);box-shadow:0 20px 46px -18px rgba(70,24,0,.62);
  opacity:0;transform:translate(-50%,-50%) scale(.8);
  transition:opacity .3s var(--ease),transform .45s var(--ease);
}
.line-bands .line-band__hit svg{width:36px;height:36px}
.line-bands .line-band--row:hover .line-band__hit{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* 整卡可点：标题链接铺满文字区（右侧照片区本来就是链接），按钮提到最上层 */
.line-bands .line-band--row:not(.line-band--slender) .line-band__title a::after{content:"";position:absolute;inset:0;z-index:2}
.line-bands .line-band--row:not(.line-band--slender) .line-band__foot{position:relative;z-index:3;display:flex}
.line-bands .line-band--slender .line-band__body{position:relative;z-index:2}
.line-bands .line-band--slender .line-band__title a::after{content:"";position:absolute;inset:0;z-index:2}
.line-bands .line-band--slender .line-band__foot{position:relative;z-index:6}
@media (prefers-reduced-motion:reduce){
  .line-bands .line-band--row,.line-bands .line-band__hit{transition:none}
  .line-bands .line-band--row:hover,.line-bands .line-band--row:hover .line-band__hit{transform:none}
  .line-bands .line-band__hit{transform:translate(-50%,-50%)}
}   /* ← 2026-09-23 补上：这里原本少一个 }，@media (prefers-reduced-motion)
       一直没闭合，会把随后追加的任何规则都吃进这个 media query 里。 */

/* ==========================================================================
   客户来访 · 心形照片墙（about 页，2026-09-23 由原「How we work」四卡板块整段替换）
   排布**照用户给的参考图**（宣传册「客户合影」跨页对开：左页 11 张 + 右页 12 张，合掉书脊中缝；2026-09-23 晚整体缩小 20%、并在中轴重开 6% 的缝把两半分开）：位置/宽度/宽高比由
   site.js 的 HEART_SPOTS 写成内联 --x / --y / --w / --r，这里只负责「一张照片框长什么样」和容器。
   容器 = 参考图里 23 张照片的外接框，比例 4094/2393 ≈ 1.711；照片贴住容器四边，零溢出。
   尺寸：桌面 768 宽（平板 560 / 手机 368），高度由比例自动算。
   要调大小 → 改下面几条 max-width；要调排布 → 改 site.js 的 HEART_SPOTS，别在这里动。
   ========================================================================== */
.heart-wall{
  position:relative;
  width:100%;
  max-width:768px;
  aspect-ratio:4094 / 2393;
  margin:clamp(10px,2.4vw,26px) auto 0;
}
/* 一张照片：以自身中心定位到 (--x, --y)，宽取 --w，高度由 --r（参考图里那张照片的比例）决定 */
.heart-wall__cell{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  aspect-ratio:var(--r);
  transform:translate(-50%,-50%);
  border-radius:5px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 3px 9px -7px rgba(64,55,30,.40),inset 0 0 0 1px rgba(35,30,22,.07);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease);
}
/* 真照片按框填满（比例不一致时会裁一点，所以合影建议主体居中） */
.heart-wall__cell img{display:block;width:100%;height:100%;object-fit:cover}
/* 占位块：照片还没到位时的白卡片 + 淡图标 */
.heart-wall__ph{display:grid;place-items:center;width:100%;height:100%;background:#fff;color:#c6d2cb}
.heart-wall__icon{width:30%;max-width:46px;height:auto;aspect-ratio:1 / 1}
/* hover：只放大这一张。translate 必须留着，否则会跳位 */
.heart-wall__cell:hover{
  transform:translate(-50%,-50%) scale(1.1);
  z-index:3;
  box-shadow:0 12px 26px -12px rgba(64,55,30,.55),inset 0 0 0 1px rgba(35,30,22,.07);
}
/* 入场：滚到这一块时，照片按 --i 一张张浮出来（只做 opacity，transform 留给 hover） */
.heart-wall.is-in .heart-wall__cell{animation:hwFade .6s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes hwFade{from{opacity:0}to{opacity:1}}
@media (max-width:1060px){
  .heart-wall{max-width:560px}
}
@media (max-width:680px){
  .heart-wall{max-width:368px}
}
@media (prefers-reduced-motion:reduce){
  .heart-wall.is-in .heart-wall__cell{animation:none}
  .heart-wall__cell{transition:none}
}

/* ==========================================================================
   全站手机版（iPhone）· 首页与通用板块（2026-09-28）
   --------------------------------------------------------------------------
   怎么量的：tools/mobile-audit.js（Edge headless + CDP，375×844 手机视口）
   ＋ tools/probe.js（看某一块的高度是怎么堆出来的）。
   改前实测（375×844，整页几屏）：
     首页 15.7 屏 ｜ 折叠房产线页 9.7 ｜ 标准拼装产线页 7.3
     质量 6.3 ｜ 关于 5.2 ｜ 案例 4.3 ｜ 联系 3.8
   三处"全站都在漏高度"的地方：
     ① .section 上下各 72px 留白（375 宽时 clamp 已经取到最小值），首页 6 个板块
        光留白就是 864px；
     ② 页脚 1108px ＝ 1.3 屏，而且**每一页**都拖着它；
     ③ 首页 #configs 4460px ＝ 6 张型号卡竖着摞（两组各 2000px）。
   手法沿用折叠页那一版：手机上能横滑的就横滑、能收的留白就收，内容不删。
   桌面（>640px）一律不受影响 —— 断点之外一个字都不改。
   ========================================================================== */
@media (max-width:640px){
  /* ① 板块留白：72 → 40（内容不动，把留白让给内容） */
  .section{padding:40px 0}
  .section--tight{padding:34px 0}
  .section-head{margin-bottom:22px}
  .h2{font-size:1.6rem;line-height:1.25}
  .lead{font-size:15px;line-height:1.6}

  /* ② 首页首屏：1263px → 约 620px。
     预算：iPhone 390×844 减掉刘海 59 + home 条 34 + 顶栏 75 ≈ 690px 可用，
     hero 必须整个装进第一屏，下一块的标题才露得出来。 */
  .hero{padding-top:16px}
  /* 首屏顺序：文字 → 四个数字 → 照片。
     这样第一屏能整块装下；溢出到屏幕外的是照片的下缘（自然，像"下面还有"），
     而不是把四个数字切一半（那看着像页面没做完）。
     display:contents 把 .hero__grid 这层网格去掉，让文字列 / 数字 / 照片
     直接成为 .container 的弹性子项，order 才好用。 */
  .hero > .container{display:flex;flex-direction:column;gap:16px}
  .hero__grid{display:contents}
  .hero__grid > div:first-child{order:1}
  .hero__stats{order:2;margin-top:0}
  .hero__visual{order:3}
  .hero__title{font-size:clamp(1.75rem,8.2vw,2.25rem);margin:6px 0 8px}
  .hero__copy{font-size:13px;line-height:1.5}
  .hero__actions{gap:10px;margin-top:12px}
  .hero__actions .btn{flex:1 1 0;justify-content:center;padding:13px 12px;font-size:14px}
  .hero__note{margin-top:8px;gap:6px 12px;font-size:11.5px}
  .hero__visual{max-width:none}
  .visual-card{aspect-ratio:2/1;border-radius:16px}
  .visual-card__label{left:16px;top:14px;right:16px}
  .visual-card__label strong{font-size:1.05rem}
  /* 两张悬浮卡在手机上会盖住照片，内容又和下面四个数字 / 一行小字重复，去掉 */
  .hero__float{display:none}
  .hero__stat{padding:8px 12px 8px 0}
  .hero__stat:nth-child(odd){padding-left:0}
  .hero__stat:nth-child(even){padding-left:16px;border-right:0}
  .hero__stat:nth-child(1),.hero__stat:nth-child(2){border-bottom:1px solid var(--line)}
  .hero__stat b{font-size:1.3rem}
  .hero__stat > span{display:block;margin-top:2px;font-size:11.5px;line-height:1.4}

  /* ②b 首页三条平台入口卡（整幅照片卡）：370 → 约 300，照片仍留在文字上方 */
  .line-bands .line-band--row:not(.line-band--slender) .line-band__body{
    min-height:300px;padding:22px 18px 20px;
  }
  .line-bands .line-band--row:not(.line-band--slender) .line-band__kind{display:none}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__head{margin-bottom:10px}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__title{margin-bottom:8px}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__lead{
    font-size:13.5px;line-height:1.5;margin-bottom:14px;
  }
  .line-bands .line-band--row:not(.line-band--slender) .lb-facts{gap:8px 22px;padding-top:12px}
  .line-bands .line-band--row:not(.line-band--slender) .lb-fact{font-size:13.5px;gap:3px}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__foot{gap:14px;padding-top:14px}

  /* ③ 型号卡：3 张竖摞 → 一行横滑（首页 #configs 省下约 3000px） */
  .model-group{margin-bottom:26px}
  .model-group__head{padding-bottom:10px;margin-bottom:14px;gap:6px 10px}
  .model-group__name{font-size:1.05rem}
  .model-group__count{font-size:12px}
  .model-group__link{margin-left:0}
  .model-group .grid-3{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    gap:12px;padding:2px 2px 12px;margin:0 -2px;
  }
  .model-group .grid-3 > *{scroll-snap-align:start}
  /* 每张卡下面那 5 个小缩略图是 lazy 的；手机上不显示就不会下载 */
  .pc-thumbs{display:none}
  .product-card__body{padding:16px 16px 18px}
  .product-card__top{margin-bottom:8px}
  .product-card h3{font-size:1.05rem;margin-bottom:6px}
  .product-card p{font-size:13.5px;line-height:1.55;margin-bottom:14px}
  .product-card__actions{padding-top:14px}

  /* ④ 应用场景 / 工序：三张、四张竖摞 → 各一行横滑 */
  .app-grid,.how-2col{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    row-gap:0;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;padding:2px 2px 12px;margin:0 -2px;
  }
  .app-grid > *,.how-2col > *{scroll-snap-align:start}
  .app-scene{height:176px}
  .app-card__body{padding:16px 18px 18px}
  .how-2col .how-card{gap:8px}
  .how-card p{font-size:13.5px;line-height:1.55}

  /* ⑤ 定制区：四张选项卡回到两列（≤900px 那版把它们压成了一列） */
  .custom-band{border-radius:20px;padding:22px 18px}
  .custom-grid{grid-template-columns:1fr 1fr;gap:10px}
  .custom-item{padding:13px 14px;border-radius:13px}
  .custom-item b{font-size:13.5px;margin-bottom:3px}
  .custom-item p{font-size:12.5px;line-height:1.5}
  .check-list li{font-size:13.5px}

  /* ⑥ 页脚：1108 → 约 700（每一页都受益）。
     排法＝品牌整行 + 探索/产品并排 + 联系整行 + 底部一栏。 */
  .footer{margin-top:24px}
  .footer__top{grid-template-columns:1fr 1fr;gap:22px 18px;padding:30px 0 26px}
  .footer__brand{grid-column:1/-1}
  .footer__brand p{font-size:13.5px;max-width:none;margin:12px 0 14px}
  .footer__top > div:nth-child(4){grid-column:1/-1}
  .footer h4{font-size:12px;margin-bottom:10px}
  .footer a{font-size:13.5px;padding:3px 0}
  .footer .f-row a,.footer .f-contact-line{font-size:13px}
  /* ≤720px 那版把两个按钮竖排了；手机上并排才省一屏高，也符合"随手点" */
  .footer__cta{flex-direction:row}
  .social-dock{margin-bottom:36px}
  .footer__bottom{padding:16px 0;font-size:12px;gap:6px}

  /* ⑦ 室内实拍（型号详情页与产线页共用 .interior-grid）：≤560 那版是一列竖摞，
     改一行横滑 —— 型号页的"室内与配置实拍"四张图能省约 700px。 */
  .interior-grid{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    gap:12px;padding:2px 2px 12px;margin:0 -2px;
  }
  .interior-grid > *{scroll-snap-align:start}
  .interior-card figcaption{font-size:13.5px}

  /* ⑨ 产线页的「导语 + 四项硬指标」：手机上硬指标从一列改两列。
     实测（375）：标准拼装产线页这一整块 628px，其中**四项硬指标一列就占 406px** ——
     客户是来扫参数的，参数块比产品卡还高说不过去。导语也一起收一档。 */
  .fact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fact{padding:10px 11px;gap:3px}
  .fact__k{font-size:10.5px;letter-spacing:.06em}
  .fact__v{font-size:12.5px;line-height:1.4}
  .section--line-intro .split{gap:18px}
  .section--line-intro .lead{font-size:14.5px;line-height:1.55;margin-bottom:10px}

  /* ⑩ 内页首屏（关于 / 质量 / 案例 / 联系 / 产线页）：标题和导语收一档。
     ⚠️ 这几个 h1 是**行内** style="font-size:clamp(2.3rem,5vw,4rem)"：
     375 宽时 5vw=18.75px，clamp 取到下限 2.3rem（36.8px），
     "Built with our production partners…" 要占 3 行、162px —— 半屏给了标题。
     行内样式只能靠 !important 压，这是本文件里唯一一处 !important，原因写在这儿。 */
  .page-hero{padding-top:clamp(18px,4.5vw,28px);padding-bottom:clamp(20px,5vw,30px)}
  .page-hero h1.display{font-size:clamp(1.6rem,6.6vw,2rem)!important;line-height:1.2}
  .page-hero .lead{font-size:14.5px;line-height:1.55}
  .page-hero .eyebrow{margin-bottom:6px}

  /* ⑪ 内页照片首屏：手机上"黑字压照片"读不清。
     原因是那套白雾是给桌面调的 —— 桌面上标题在下方、照片主要露在右上，
     所以白雾做成"顶部几乎不加白、46% 才到 .30"；可手机上整块只有约 280px 高，
     标题正好落在照片最花的那一段（关于页实测：正文直接压在厂房和树上了）。
     ⚠️ 选择器要写到 (0,3,2)：各页那套 `body[data-page="…"] .page-hero__bg--split::after`
     是 (0,2,3)，不写到这么具体压不住（split 那版是"左青底 + 一抹红"的定制皮肤，
     手机上它同样不够白）。照片仍在，只是退成底纹。 */
  body[data-page] .page-hero--photo .page-hero__bg::after{
    background:
      linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.80) 38%,rgba(250,252,251,.90) 68%,#eaf6ef 100%),
      linear-gradient(100deg,rgba(252,253,253,.34) 0%,rgba(250,252,251,.18) 60%,rgba(248,251,249,.04) 100%);
  }
  body[data-page] .page-hero--photo .page-hero__bg img{object-position:center 30%}

  /* ⑪b **contact 页是例外**（2026-09-29 用户："手机上 contact 页面这个是啥情况，背景这么白？"）。
     那页首屏的口径本来就是"照片整幅铺满、不加任何白雾 + 白字 + 深色描边"
      （见文件前面 body[data-page="contact"] 那两段，权重都是 (0,2,2)），
     可上面 ⑪ 写的是 body[data-page]（(0,3,2)）——比它更具体，对 contact 一样生效、直接把它盖掉：
     手机上一压白雾，照片没了、白字也没了对比，整块只剩一片白。
     → 这里给 contact 换成**深色压边**：照片照旧全幅可见，白字反而更清楚。
     ⚠️ 选择器写到 `.page-hero.page-hero--photo`（(0,4,2)）稳压 ⑪；移动这条规则必须留在 ⑪ 之后。 */
  body[data-page="contact"] .page-hero.page-hero--photo .page-hero__bg::after{
    background:linear-gradient(180deg,rgba(8,14,20,.40) 0%,rgba(8,14,20,.50) 52%,rgba(8,14,20,.64) 100%);
  }

  /* ⑫ 首页那三条"产品入口"的整幅照片卡（.line-band--row）：手机上改成
     **照片带 + 白底文字**，不再把照片当背景铺满。
     原因（2026-09-28 用户指出）：原图是按桌面 3:1 做的，手机卡片接近方形，
     `object-fit:cover` 只保留约 38% 的宽度 —— 实测标准房那张正好把**门窗那一面**
     切掉，只剩一片平墙。现在照片按自己的比例铺满整宽、高度自适应（配 data.js 的
     photoMobile，用 <picture> 只在手机上换一版按主体重裁的图），整栋房子完整可见；
     文字落到白底上，顺带解决了"字压照片看不清"。
     桌面（>640px）一点没动，仍是照片铺满的整幅卡。 */
  .line-bands .line-band--row:not(.line-band--slender){
    display:flex;flex-direction:column;background:#fff;border-color:var(--line-strong);
  }
  .line-bands .line-band--row:not(.line-band--slender) .line-band__media{
    position:relative;inset:auto;order:-1;min-height:0;
  }
  .line-bands .line-band--row:not(.line-band--slender) .line-band__media img{
    position:static;width:100%;height:auto;object-fit:contain;transform:none;
  }
  .line-bands .line-band--row:not(.line-band--slender) .line-band__media::after{display:none}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__body{
    min-height:0;max-width:none;padding:15px 16px 17px;
    background:linear-gradient(180deg,#fff,rgba(244,250,247,.92));
  }
  /* 文字从"压照片的白字"翻回深色：上面那套 .badge / .link-arrow / .lb-fact 的颜色
     都是为深色底写的，不翻过来手机上会白字白底。 */
  .line-bands .line-band--row:not(.line-band--slender) .badge{
    background:var(--accent);color:#fff;border-color:var(--accent);
  }
  .line-bands .line-band--row:not(.line-band--slender) .badge--plain{
    background:rgba(232,89,12,.09);color:var(--accent-deep);border-color:rgba(232,89,12,.22);
  }
  .line-bands .line-band--row:not(.line-band--slender) .line-band__count{color:var(--muted)}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__count b{color:var(--text)}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__title,
  .line-bands .line-band--row:not(.line-band--slender) .line-band__title a{color:var(--text)}
  .line-bands .line-band--row:not(.line-band--slender) .line-band__lead{color:var(--muted)}
  .line-bands .line-band--row:not(.line-band--slender) .lb-facts{border-top-color:var(--line);color:var(--text)}
  .line-bands .line-band--row:not(.line-band--slender) .lb-fact b{color:var(--muted-2)}
  .line-bands .line-band--row:not(.line-band--slender) .link-arrow,
  .line-bands .line-band--row:not(.line-band--slender) .link-arrow:hover{color:var(--accent-deep)}
  .line-bands .line-band--row:not(.line-band--slender) .btn--ghost{
    border-color:var(--line-strong);color:var(--text);background:#fff;
  }
}

/* --------------------------------------------------------------------------
   修一个一直存在的手机版 bug：首页 L3 窄条（.line-band--slender）文字重叠
   --------------------------------------------------------------------------
   首页三条入口卡的 `.line-band__body` 是 CSS grid（桌面两列：文字在 1 列、
   CTA 竖跨 4 行放在 2 列），窄条自己还写死了 kind/head/title/lb-facts 的 grid-row
   和 `.line-band__foot{grid-row:1 / span 4}`。
   到了 ≤900px，上面那条 `.line-bands .line-band__body{grid-template-columns:1fr}`
   把它压成单列，同时 `.line-bands .line-band__foot{grid-row:auto}` 想让它回到自动排，
   **但压不住** —— 窄条那条是 3 个类（0,3,0），窄屏那条只有 2 个类（0,2,0），
   于是 CTA 仍跨 1–4 行，和标题、参数叠在一起（实测：按钮压住"特殊产品"四个字）。
   单列时这五行全部退回 auto 即可；桌面两列版一点不受影响。 */
@media (max-width:900px){
  .line-bands .line-band--slender .line-band__kind,
  .line-bands .line-band--slender .line-band__head,
  .line-bands .line-band--slender .line-band__title,
  .line-bands .line-band--slender .lb-facts,
  .line-bands .line-band--slender .line-band__foot{grid-row:auto}
}

/* --------------------------------------------------------------------------
   ⑬ 手机上把"每张卡一个的询价按钮"收掉（2026-09-28 用户）
   --------------------------------------------------------------------------
   用户原话："手机上加这个 quote 简直是多此一举，我正在和顾客在 WhatsApp 上聊天呢，
   我把网页给他，他一旦误触，就有跳转回来了。"
   → 他正在聊的那个人，就在这台手机上；页面是给顾客"看货"的，
     每张卡再挂一个 WhatsApp 深链，只是增加误触概率。
   所以手机（≤640）只收掉**重复出现在列表项里的**那几个（都是 .btn--sm.btn--ghost.wa）：
     · 首页三条产品入口卡         .line-band__foot .wa
     · 型号卡                     .product-card__actions .wa
     · 产品线整幅卡（产品页/目录）  .line-band__foot .wa
   留下来的（每页只有一个，是"有人回话"的信号，不重复）：
     首屏 "Chat on WhatsApp"、页脚那条、页尾询问条（.cta-section）、
     型号详情页的 "Get spec sheet on WhatsApp" / "Video call"。
   桌面（>640）一律不变 —— 电脑前的访客多数不在 WhatsApp 里，按钮仍然有用。 */
@media (max-width:640px){
  .product-card__actions .wa,
  .line-band__foot .wa{display:none}
}

/* --------------------------------------------------------------------------
   ⑭ 手机版的型号卡太长（2026-09-28 用户："手机上，这些橙字描述都得去掉，
   整个卡片过于冗长"）
   --------------------------------------------------------------------------
   卡片在手机上只有 ~254px 宽（首页是横滑一行、每张占 74%），
   原来一张卡里塞了：简介 4 行 + 三枚橙框硬参数（还要各占一行）。
   现在手机上只留：图 / 角标 / 名字 / **两行简介** / 看型号。
   · `.pc-params` 三枚硬参数直接去掉 —— 手机上它撑高最多，而且顾客真正比参数是
     点进型号页之后的事（那里有完整规格表）。
   · 简介收两行，够看出是什么房，多的留给详情页。
   桌面不变：横向空间够，硬参数正是客户横向比较的依据（见交接文档 §4.3）。 */
@media (max-width:640px){
  .pc-params{display:none}
  .product-card__body > p{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    margin-bottom:12px;
  }
}

/* --------------------------------------------------------------------------
   ⑮ 横滑区的"能滑"提示（2026-09-28 用户："手机上没有底下这个滑动条，
   用户不知道左右滑动能看到东西，必须加上适合手机端用户的滑动指引"）
   --------------------------------------------------------------------------
   手机浏览器默认不显示滚动条（iOS/Android 都是），所以"右边还有"这件事
   必须由页面自己说。这里按购物站那套"最明显的几件"叠着上（2026-09-28 用户：
   "不够啊，有没有更明显的提示呢，购物网站是如何指引你右滑的？"）：
     · 右边缘圆钮 `.swipe-next` —— 点一下滚一张。淘宝 / 亚马逊 / IKEA 都有这一颗；
       它是最明显的一条，而且**不会滑的人也能用**（它是真按钮，不是暗示）。
     · 右侧渐隐 56px（mask）—— "右边还有内容"的持续暗示，滑到最右自动撤掉。
     · 提示行 `Swipe for more` + **"第几张 / 共几张"**（`2 / 3`，滚动时实时变）。
     · 箭头轻推三下（一次性引导，不常驻；prefers-reduced-motion 下不动）。
   DOM 由 site.js 的 initSwipeHints() 生成（还会套一层 .swipe-wrap 做定位容器）。
   断点 640：桌面完全不做任何变化。 */
/* ⚠️ 2026-09-28：所有横滑行的 `scroll-snap-type` 从 `x mandatory` 改成 **`x proximity`**。
   mandatory 要求每次都精确停在吸附点，手机上惯性甩动时浏览器会跟惯性"较劲"，
   在卡片只有 74% 宽（一屏露出 1.35 张）的行上容易看成抖/闪。
   改成 proximity 后，只有"落点本来就靠近"才吸附 —— 手感仍在，较劲没了。 */
.swipe-hint{display:none}
.swipe-next{display:none}
@media (max-width:640px){
  .swipe-wrap{position:relative}
  .swipe-hint{
    display:flex;align-items:center;gap:7px;margin:4px 2px 0;
    font-size:12.5px;color:var(--muted);
  }
  /* 箭头跟着文案走（不是跟着右边的计数） */
  .swipe-hint span::after{
    content:"→";margin-left:7px;font-weight:700;color:var(--accent-deep);
    display:inline-block;animation:swipeNudge 1.5s ease-in-out 3;
  }
  /* ⚠️ 滑到底时**不能把提示行从布局里拿掉**（2026-09-28 用户实测：
     "从右向左滑的时候，急促的闪烁"）。
     原来这里是 `display:none` —— 提示行一消失，它下面整块内容立刻上移约 20px；
     而到横滑末端时滚动位置会反复越过判定阈值，于是"显示/隐藏"来回切、
     下方内容跟着来回跳，就是那阵急促的闪烁。
     改成 visibility：仍然占位，零布局位移。 */
  .swipe-hint.is-done{visibility:hidden}
  /* "第几张 / 共几张"：滚的时候实时变，告诉顾客还剩多少 */
  .swipe-hint__n{
    margin-left:auto;font-size:12px;font-weight:650;color:var(--text-soft);
    font-variant-numeric:tabular-nums;letter-spacing:.02em;
  }
  /* 右边缘那颗圆钮：只在"右边还有"的时候出现（.swipe-wrap:not(.is-end)）。
     用 opacity 而不是 display —— display 切换会触发重绘，滚动中容易看出闪。 */
  .swipe-wrap .swipe-next{
    display:grid;place-items:center;position:absolute;right:2px;top:50%;
    transform:translateY(-50%);z-index:3;
    width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;
    border:1px solid var(--line-strong);background:rgba(255,255,255,.94);
    color:var(--accent-deep);box-shadow:0 10px 22px -12px rgba(45,40,28,.55);
    opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
  }
  .swipe-wrap:not(.is-end) .swipe-next{opacity:1;pointer-events:auto}
  /* ⚠️ 2026-09-28：右边缘那道 56px 渐隐（mask）**撤掉了**。
     它是这一段里唯一会逼浏览器在滚动时重新栅格化的东西（mask 会让滚动容器
     退出"快速滚动"路径），安卓上本身就可能闪；而"能滑"的引导已经有三条
     （下一张露一角 + 右边缘圆钮 + `1 / 3` 计数），不缺这一条。
     等确认闪烁彻底消失后，要再加回来只需要恢复 `.can-scroll:not(.is-end)` 的
     mask-image 两行。 */
}
@keyframes swipeNudge{
  0%,100%{transform:translateX(0);opacity:.5}
  50%{transform:translateX(5px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .swipe-hint span::after{animation:none;opacity:1}
}

/* --------------------------------------------------------------------------
   ⑯ 折叠房产线页：两个系列改成"卡片介绍 + 全尺寸"两条（2026-09-29 用户）
   --------------------------------------------------------------------------
   用户原话："这个架构整体不好看，也不协调，应该先是一条双翼折叠卡片介绍，再是全尺寸。
   然后再是一条折叠箱房卡片介绍，再是全尺寸"。
   改前：页首「两个系列」那一节挂两张 4:3 索引卡（点了跳锚点），下面每个系列又各起一个
   同名的标题 + 导语 —— 同一件事在上下两处各说一遍。
   改后（见 site.js 的 rangeBlock）：页首只留总介绍；两张卡各自挪进自己那一节，
   桌面从"4:3 竖卡"变成整幅"一条"—— **左图右字，照片按自己的 4:3 完整显示、不再裁切、
   也不再压白雾**（白雾是为了让文字压在照片上还能读，字挪到右边就不需要它了）；
   卡片下面紧跟本系列的尺寸。
   ⚠️ 只在 ≥901px 生效：手机上卡片本来就有自己那套（见上面"② 系列入口"那段 @media，
   照片在上、字在下），加了 --wide 不能把它带偏。 */
.series-intro{margin-bottom:20px}
.series-section__lead{max-width:62ch;margin:0 0 4px;color:var(--text-soft)}
/* 页首那节现在只剩一句总介绍，标题下不需要再留"等卡片"的那段间距
   （原来 36–60px 的空档 + 两个 section 各 88px 的 padding 叠在一起，看着是一大片空白）。 */
.section--line-range .section-head{margin-bottom:0}
@media (min-width:901px){
  .series-card--wide{
    aspect-ratio:auto;min-height:0;padding:0;gap:0;
    display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
    align-items:stretch;justify-content:stretch;
  }
  /* ⚠️ 2026-09-29：宽卡右栏补了第二段文案之后，这一栏被 align-items:stretch 拉高，
     而 aspect-ratio:4/3 会反过来拿**高度**去算宽度 —— 445×4/3≈590，
     比它自己的栅格列（1200 宽卡片里是 503）宽出 87px，照片直接压到右栏文字上。
     这里改成"宽度和高度都由栅格给"：width/height 100% + aspect-ratio:auto，
     照片交给 object-fit:cover 填满左栏，永远不会再越界。 */
  .series-card--wide .series-card__bg{position:relative;inset:auto;aspect-ratio:auto;width:100%;height:100%}
  .series-card--wide .series-card__bg::after{display:none}
  .series-card--wide .series-card__body{
    padding:clamp(26px,2.8vw,38px);gap:16px;justify-content:center;
  }
  .series-card--wide .series-card__short{max-width:54ch;line-height:1.68}
  /* 这条卡不再是链接（它就在本节里，跳自己没意义）：取消悬停抬升与标题变色，
     免得鼠标划过时像能点。 */
  .series-card--wide:hover{transform:none;
    box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-soft)}
  .series-card--wide:hover .series-card__name{color:var(--text)}
}

/* --------------------------------------------------------------------------
   ⑰（已撤）折叠房产线页：旗舰型号卡的位置
   --------------------------------------------------------------------------
   中间试过一版"旗舰卡单独成块、插在两个系列板块之间"（靠这里的两条 order 规则
   把它和系列板块拉平）。用户 2026-09-29 澄清："我要放在双翼拓展式和双翼拓展的
   全尺寸图之间" —— 也就是**进到系列内部**。现在的做法是 DOM 里就插在系列那一节
   （site.js 的 rangeBlock 第二个参数），不再需要任何 order 调整，所以这两条规则删掉。
   手机上由 `#line-detail .grid-3`（见上面 ⑤）负责横滑，跟别的型号卡行一致。 */

/* --------------------------------------------------------------------------
   ⑱ 折叠房产线页：系列门头（橘色）+ 三个板块之间的呼吸 + 块间小标签统一（2026-09-29 用户）
   --------------------------------------------------------------------------
   用户原话（两次）："既然这3个板块都是双翼拓展房，是第一个系列，你就用橘色字体，
   写上大大的系列一呀。你干嘛3个板块之间那么挤，没有留出写点稍微大字的字体的空间呢？"
   → 第二句跟得很快："逆天，你这也太大了，而且我说的字小不协调主要是板块间的这些"。

   所以正式口径是**两件事**：
   ① 门头要"看得见"但不是大字报：橘色 + 中等字号（比块间小标签大一档、比 .h2 小一档）。
      文字取自系列卡上的 tag（"Series 1"），中英自动跟着走；卡片上那枚同名小眉标已删。
   ② 块与块之间的小标签（"系列一 · 旗舰型号  3 款型号"、"系列一 · 尺寸"）要**互相协调**：
      · 眉标原来只有 11.5px，太小 —— 系列内部抬到 13px；
      · 旗舰那一行的"3 款型号"原来是 21.6px 粗体，和旁边的 11.5px 眉标一大一小
        （用户指的"字小不协调"就是这个）—— 现在压到同一档 13px，只靠颜色区分。
   ③ 三块（系列卡 / 旗舰型号 / 全尺寸）之间的间距整体放大一档，手机按 clamp 自动收小。 */
.series-head{margin:0 0 clamp(14px,1.8vw,20px)}
.series-head__no{
  margin:0;color:var(--accent);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.1;
}
/* 块间标签统一：系列内部**只用这一种**标签 —— 橘色、16.5px、同一个字距、同一段下边距。
   旗舰那一块 = 「旗舰型号」，尺寸那一块 = 「全尺寸一览」，两块因此长得一模一样；
   原来旗舰那行是"11.5px 眉标 + 21.6px 粗体款数"两种规格挤在一行，那才是真正的不协调。
   ⚠️ 字号取到 16.5px（和导语 17–19px 同档）：比它小就成了"注释"，会被上面的导语压住；
   靠橘色 + 700 字重 + 字距区分"标签"和"正文"，而不是靠缩小字号。 */
.series-section .eyebrow{font-size:16.5px;letter-spacing:.12em;margin-bottom:14px}
.series-section .series-intro{margin-bottom:clamp(24px,3vw,34px)}
.series-section .series-section__lead{margin:0 0 clamp(30px,3.4vw,42px)}
.series-section .model-group{margin-bottom:clamp(46px,5vw,64px)}
.series-section .size-gallery-block{margin-top:clamp(30px,3.6vw,46px)}

/* --------------------------------------------------------------------------
   ⑲ 质量页「怎么检查」：三阶段实拍墙（2026-09-29）
   --------------------------------------------------------------------------
   从"四步纯文字时间轴"换成三个阶段 + 每个检验项一张车间实拍。
   源图是画册重切件，只有 150–450px 宽，所以**故意排得密**（桌面 7 列、约 160px 一格）：
   格子开大就等于把低分辨率图硬放大。7 列还有个好处 —— 第一个阶段正好 7 项，排满一行。
   ⚠️ 改列数前先看源图尺寸（assets/images/qc-*.jpg），别让格子超过图片本身。 */
.qc-stage{margin-top:clamp(32px,3.6vw,46px)}
.qc-stage__head{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 12px;
  padding-bottom:12px;border-bottom:1px solid var(--line-strong);
}
.qc-stage__no{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--accent-deep)}
.qc-stage__name{margin:0;font-size:clamp(1.12rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-.01em}
/* "7 项检验 · 19 张实拍"整组右对齐（两段数字单独成文本节点，中文靠节点匹配翻译）。 */
.qc-stage__meta{
  margin-left:auto;display:flex;align-items:baseline;gap:9px;
  color:var(--muted);font-size:13.5px;white-space:nowrap;
}
.qc-stage__meta b{color:var(--text)}
.qc-stage__dot{color:var(--line-strong)}
.qc-stage__lead{margin:14px 0 0;max-width:72ch;color:var(--text-soft);font-size:15px;line-height:1.7}
/* 一行一条（2026-09-29 用户："中间的这个这么长两行了都，干脆改成一行轮播得了"）：
   每个阶段**只排一行**，装不下的横向滑。这里接的是站上那套横滑引导
   （site.js 的 SWIPE_ROWS 认得 .qc-grid：露一角 + 右边缘圆钮 + "1/3" 计数）。 */
.qc-grid{
  display:flex;gap:16px 12px;margin-top:20px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding:2px 2px 14px;margin-inline:-2px;
}
/* min-width:0 必须写：flex 子项默认 min-width:auto，标题/图会把格子顶宽，
   于是"刚好 7 格"那一行也会溢出几个像素、右边缘那颗圆钮就误报"右边还有"。 */
.qc-card{margin:0;min-width:0;flex:0 0 calc((100% - 6 * 12px) / 7);scroll-snap-align:start}
.qc-card__ph{
  border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;
  box-shadow:0 6px 18px -12px rgba(30,40,35,.45);
}
.qc-card__ph img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.qc-card figcaption{margin-top:7px;font-size:12px;line-height:1.45;color:var(--muted)}
@media (max-width:900px){
  .qc-card{flex-basis:calc((100% - 3 * 12px) / 4)}
}
@media (max-width:560px){
  .qc-grid{gap:12px 8px}
  .qc-card{flex-basis:42%}
  .qc-card figcaption{font-size:11px}
  .qc-stage__meta{margin-left:0;width:100%;justify-content:flex-start}
}
/* ⚠️ 站上那套"能滑"引导（右边缘圆钮 + `1 / 2` 计数）只在 ≤640px 出现 ——
   因为其它横滑行在桌面都排得下、不会溢出。**质量页这三行在桌面同样溢出**
   （11 项那一行一屏放 7 格），鼠标用户没法像触屏那样滑，所以给它们补桌面这一档：
   site.js 见到 data-swipe-always="1" 会给外层加 .swipe-wrap--always，
   下面这几条就把圆钮和计数在桌面放出来（样式与手机那套一致）。 */
@media (min-width:641px){
  .swipe-wrap--always{position:relative}
  /* ⚠️ 提示行是**圆钮外层的兄弟节点**（site.js 把 <p class="swipe-hint"> 插在 .swipe-wrap
     之后），所以这里必须是相邻兄弟选择器，写成后代选择器一辈子选不中。 */
  .swipe-wrap--always + .swipe-hint{
    display:flex;align-items:center;gap:7px;margin:2px 2px 0;
    font-size:12.5px;color:var(--muted);
  }
  .swipe-wrap--always + .swipe-hint span::after{
    content:"→";margin-left:7px;font-weight:700;color:var(--accent-deep);
  }
  .swipe-wrap--always + .swipe-hint.is-done{visibility:hidden}
  .swipe-wrap--always .swipe-next{
    display:grid;place-items:center;position:absolute;right:2px;top:42%;
    transform:translateY(-50%);z-index:3;
    width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;
    border:1px solid var(--line-strong);background:rgba(255,255,255,.94);
    color:var(--accent-deep);box-shadow:0 10px 22px -12px rgba(45,40,28,.55);
    opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
  }
  .swipe-wrap--always:not(.is-end) .swipe-next{opacity:1;pointer-events:auto}
}

/* --------------------------------------------------------------------------
   ⑳ about 页「我们是谁」：图列改横版 + 补一条数字带（2026-09-29 用户）
   --------------------------------------------------------------------------
   用户原话："这个 about 页面板块，实在是太丑了，这个图这么长，参考一下人家的页面"
   （参考页把"文字 + 横版媒体 + 一排数字"排在一起）。原来是 3:4 竖图配三段长文案，
   一高一矮两头不落地；现在图改 4:3 横版，下面用两枚已有的数字把这一栏撑到和文案齐平。
   ⚠️ 数字用的是站上**已经写过**的两条（首页首屏那排），不是新承诺，别在这里编新数。

   2026-09-30 用户："右边字那么多？"—— 量下来右栏 904px、左栏 524px，差 380px。文案压到一段后
   右栏约 600px，左栏靠"数字带改三格"补到同高（第三格"6 框架专利"取自 index.html 首个 features
   板块的 Six patented technologies，原先只在被删掉的第三段里出现过，属于把已有说法挪个位置）。
   560px 以下仍排三格：字号与内边距各降一档，中英文都按两行换行留够高度。 */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.stat-strip__item{
  display:flex;flex-direction:column;gap:5px;
  padding:16px;border-radius:16px;
  background:rgba(255,255,255,.66);border:1px solid var(--line);
}
.stat-strip__item b{
  font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1;font-weight:750;
  letter-spacing:-.02em;color:var(--text);
}
.stat-strip__item b em{font-style:normal;font-size:.6em;margin-left:1px;color:var(--accent-deep)}
.stat-strip__item span{font-size:12px;line-height:1.45;color:var(--muted)}
@media (max-width:560px){
  .stat-strip{gap:10px}
  .stat-strip__item{padding:12px 11px;border-radius:14px}
  .stat-strip__item span{font-size:11.5px}
}

/* ==========================================================================
   About 页「安装教程」板块（2026-09-30 新增）
   两族分栏（双翼拓展 / 折叠房）默认是**上下铺开**的：只有 JS 把 .is-tabbed
   挂到 .install 上之后才切成页签 —— 没 JS 时不会只剩一族，同心形墙/分页签那套降级。
   步骤条直接复用 .timeline / .step（4 → 2 → 1 列的断点也在那边）。
   ========================================================================== */
.install__tabs{display:none;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3vw,40px)}
.install.is-tabbed .install__tabs{display:flex}
.install__tab{
  appearance:none;-webkit-appearance:none;font:inherit;font-size:14.5px;font-weight:650;
  padding:10px 20px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--text-soft);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.install__tab:hover{border-color:var(--accent);color:var(--text)}
.install__tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.install__tab.is-active{background:var(--accent);border-color:var(--accent);color:#fff}

.install__panel+.install__panel{margin-top:clamp(40px,5vw,64px)}
.install.is-tabbed .install__panel{display:none}
.install.is-tabbed .install__panel.is-active{display:block}

.install__figure{margin:clamp(26px,3vw,38px) 0 0}
.install__figure img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius-s);border:1px solid var(--glass-hairline);
}
.install__shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(26px,3vw,38px)}
.install__shot{margin:0}
.install__shot img{
  display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover;
  border-radius:var(--radius-s);border:1px solid var(--glass-hairline);
}
.install__figure figcaption,.install__shot figcaption{color:var(--muted);font-size:13px;margin-top:10px}

.install__note{color:var(--muted);font-size:13.5px;margin:22px 0 0}
.install__link{
  color:var(--accent-deep);font-weight:650;text-decoration:none;
  border-bottom:1px solid currentColor;transition:color .25s var(--ease);
}
.install__link:hover{color:var(--accent)}

@media (max-width:900px){
  .install__shots{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .install__shots{gap:10px}
  .install__shot figcaption{font-size:12px}
}

/* ==========================================================================
   ⑬ 项目实录（2026-09-30 新增）
   列表页 = 地区筛选 chips + 3 列案例卡；详情页 = 正文 + 右侧项目信息。
   卡片沿用 .panel 那套玻璃质感，只是把内边距让给图片。
   ========================================================================== */
.case-filters{margin-bottom:26px}
/* 数据条不放在照片上（2026-09-30：压在亮天空上读不清），改到首屏下面单独一行 */
.case-stats{margin-top:0}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.case-card{
  border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(242,250,246,.76),rgba(224,241,232,.46));
  border:1px solid var(--glass-border);
  box-shadow:0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-soft);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.case-card:hover{transform:translateY(-4px);box-shadow:0 30px 56px -30px rgba(64,55,30,.42),0 0 0 1px var(--glass-hairline),inset 0 1px 0 rgba(255,255,255,.95)}
.case-card__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.case-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e7e6e1}
.case-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.case-card:hover .case-card__media img{transform:scale(1.045)}
.case-card__tags{position:absolute;left:14px;top:14px;display:flex;gap:8px;flex-wrap:wrap}
.case-card__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.case-card__body h3{margin:0;font-size:1.06rem;line-height:1.4;letter-spacing:-.01em}
.case-card__body p{margin:0;font-size:14px;line-height:1.62;color:var(--muted)}
.case-card__foot{
  margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--muted-2);letter-spacing:.04em;
}
.case-card__foot .link-arrow{font-size:13.5px;color:var(--accent-deep)}
.case-more{margin:36px 0 0;text-align:center}
.case-more .btn{gap:8px}

/* 详情页：正文在左、项目信息在右 */
.case-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,58px);align-items:start}
.case-body{max-width:760px}
.case-body p{color:var(--text-soft);line-height:1.78;margin:0 0 6px}
.case-body .case-h{
  font-size:clamp(1.22rem,2.1vw,1.6rem);letter-spacing:-.02em;
  margin:clamp(32px,4vw,50px) 0 14px;
}
.case-body .case-h:first-child{margin-top:0}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:38px 0 0}
.case-gallery figure{margin:0;border-radius:var(--radius-s);overflow:hidden;background:#e7e6e1}
.case-gallery img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.case-gallery figure.is-wide{grid-column:1/-1}
.case-gallery figure.is-wide img{aspect-ratio:16/9}
.case-aside{position:sticky;top:96px}
.case-facts{font-size:14px;margin-top:4px}
.case-facts th,.case-facts td{padding:11px 0;font-size:13.5px}
.case-facts th{width:44%}
.case-ask{margin-top:22px;width:100%;justify-content:center}
.case-nav{
  display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:26px;
}
.case-nav__link{
  flex:1 1 240px;min-width:0;text-decoration:none;color:inherit;
  border:1px solid var(--line-strong);border-radius:var(--radius-s);
  padding:16px 18px;background:rgba(255,255,255,.55);
  transition:border-color .25s,transform .25s var(--ease),background .25s;
}
.case-nav__link:hover{border-color:rgba(232,89,12,.45);transform:translateY(-2px);background:rgba(255,255,255,.8)}
.case-nav__link span{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.case-nav__link b{display:block;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--text)}
.case-nav__link--next{text-align:right}
.case-nav__link--all{flex:0 0 auto;display:flex;align-items:center;justify-content:center;text-align:center}
.case-nav__link--all span{margin:0;color:var(--accent-deep);letter-spacing:.08em}

@media (max-width:1080px){
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .case-layout{grid-template-columns:minmax(0,1fr)}
  .case-aside{position:static}
}
@media (max-width:720px){
  .case-grid{grid-template-columns:1fr}
  .case-gallery{grid-template-columns:1fr}
  .case-nav__link--next{text-align:left}
  .case-nav__link--all{flex:1 1 100%}
}

/* ==========================================================================
   产线页「全款式一览」（2026-09-30 标准房产线新增）
   方图网格：图 + 尺寸 + 文案（价格不上站）。
   ⚠️ 产线页默认只显示前 8 张 = 4 列 × 2 排（2026-09-30 用户："3 行有点多了，改成 2 行"）——
      这个口径就写在下面那条 nth-child 上。要看全部 40 款去独立页 modular-styles.html，
      那边给网格加 .is-open，40 张全出来。
   图是 loading="lazy" + display:none，没进独立页之前浏览器不会去下后面那些。
   ========================================================================== */
.style-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
}
.style-grid__item{margin:0}
/* 第 9 张起默认不显示（4 列 × 2 排 = 8 张）；独立页 .is-open 之后全部出来 */
.style-grid__item:nth-child(n+9){display:none}
.style-grid.is-open .style-grid__item{display:block}
.style-grid__item img{
  display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover;
  border-radius:var(--radius-s);border:1px solid var(--glass-hairline);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.style-grid__item:hover img{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
/* 2026-09-30 晚：40 款定稿后每格下面加一行——尺寸（<b>）+ 文案。价格不上站。 */
.style-grid__item figcaption{
  color:var(--muted);font-size:12.5px;line-height:1.5;
  margin-top:10px;padding-right:4px;
}
.style-grid__item figcaption b{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--accent-deep);margin-bottom:4px;
}
.style-grid__more{margin-top:clamp(24px,3vw,34px);text-align:center}

@media (max-width:900px){
  .style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   全站放大 110% —— 🚫 已撤销（2026-09-30 晚）
   白天曾这么做（用户原话："整个网页放大到原来的 110%，看起来更舒服"）：给 html 加 zoom:1.1，
   只在 min-width:1101px 生效，一次把字号/间距/图片/容器宽度等比放大，不用逐个改 px。
   撤销原因：**在用户这台电脑上，110% 让顶栏导航变得太挤**（导航项之间的余量被吃掉），
   用户要求改回原尺寸 —— 所以现在**不再输出 html{zoom:1.1}**，全站 100%（浏览器默认缩放下的原大小）。
   ⚠️ 以后若还想"整站看起来大一点"，别再用 html{zoom}：
      zoom 会参与媒体查询计算，手机/平板的 CSS 视口会被算窄（390px 的 iPhone 会按 ~355px 算），
      容易误触专门调过的断点；要放大就改具体尺寸，或者要求的人在浏览器里自己按 110%。
   ========================================================================== */

/* ==========================================================================
   「全款式一览」页（modular-styles.html）改成"购物站目录"板式（2026-09-30 晚）
   用户："详情页的这个布局，太过拥挤了，我记得之前提到过购物站的形式，
   实际上这个页面就很适合做成购物站"。
   口径照 `交接-板式方向与手机版-20260925.md` §2.1 / §3.5：借"目录感"——
   筛选 chips + 结果行 + 统一解剖的卡片 + 手机两列；**不做购物车**（§3.5），
   每张卡的动作是"把这个款式发到 WhatsApp"。
   ⚠️ 全部收在 .style-shop / .scard 里，产线页那 12 张用的 .style-grid 一个字没动。
   ========================================================================== */
.style-shop{padding-top:0}
.style-shop__bar{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
.style-shop .chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;margin:0 -2px}
.style-shop .chips::-webkit-scrollbar{display:none}
.style-shop .chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--text-soft);background:rgba(255,255,255,.8);
  border:1px solid var(--line-strong);cursor:pointer;white-space:nowrap;transition:.2s;
}
.style-shop .chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.style-shop .chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.style-shop .chip i{font-style:normal;font-size:11.5px;opacity:.6}
.style-shop .chip.is-on i{opacity:.85}
.style-shop__meta{margin:0;font-size:13px;color:var(--muted)}
.style-shop__meta b{font-size:15px;color:var(--text)}
.style-shop__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.style-shop__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1000px){.style-shop__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.scard{
  display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:var(--radius-s);overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.scard:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
/* ⚠️ 必须显式写：.scard 是 display:flex，会把 [hidden] 自带的 display:none 盖掉，
   那样"筛选"点了没反应（卡片还在，只是被标了 hidden）。 */
.scard[hidden]{display:none}
.scard__shot{position:relative;margin:0}
.scard__shot img{display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover}
.scard__no{
  position:absolute;left:8px;top:8px;margin:0;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--accent-deep);font-size:10px;font-weight:700;letter-spacing:.06em;
}
.scard__body{display:flex;flex-direction:column;flex:1;gap:6px;padding:10px 11px 12px}
.scard__size{margin:0;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--text)}
/* 说明限两行 —— 这是"不拥挤"的关键。原文照旧躺在 data.js 里，只是不再整段铺在页面上。 */
.scard__cap{
  margin:0;font-size:12px;line-height:1.45;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.scard__act{margin-top:auto;padding-top:8px}
.scard__act .btn{width:100%;justify-content:center;padding:8px 6px;font-size:11.5px;white-space:nowrap}

/* ==========================================================================
   购物站列表页（PLP）：modular-styles.html 第二版（2026-09-30 晚）
   用户否掉了第一版"目录感"："不要这个购物站…参考海外比较火的购物站重新排版吧"。
   照海外电商 PLP 的常规解剖：工具栏（结果数 / 排序 / Filters）+ 左侧筛选栏 +
   商品卡（图 / 角标 / 名称两行 / 规格 chips / 价格位 / 两个动作）+ 询价单抽屉 + 常驻条 + 信任条。
   ⚠️ 手机先定稿：≥1000px 才出左侧筛选栏，桌面的常驻条变成右下角胶囊。
   ========================================================================== */
.shop{padding-top:0}
.shop-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;
  padding:6px 0 14px;border-bottom:1px solid var(--line)}
.shop-count{margin:0;font-size:13px;color:var(--muted)}
.shop-count b{font-size:16px;color:var(--text)}
.shop-tools{display:flex;align-items:center;gap:10px}
.shop-btn--filter{
  display:inline-flex;align-items:center;padding:8px 13px;border-radius:9px;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--text);background:#fff;border:1px solid var(--line-strong);cursor:pointer;
}
.shop-sort{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.shop-sort select{padding:7px 9px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;
  font:inherit;font-size:12.5px;color:var(--text)}
.shop-body{display:grid;grid-template-columns:1fr;gap:22px;padding-top:18px}
.shop-rail{display:none}
.shop-rail.is-open{display:block}
.shop-main{min-width:0}
.pgroup{padding:0 0 15px;margin:0 0 15px;border-bottom:1px solid var(--line)}
.pgroup__t{margin:0 0 9px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-deep)}
.popt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;color:var(--text-soft);cursor:pointer}
.popt input{width:15px;height:15px;accent-color:var(--accent);flex:none}
.popt span{flex:1;min-width:0}
.popt i{font-style:normal;font-size:11.5px;color:var(--muted)}
.shop-clear{margin-top:2px;border:0;background:none;color:var(--accent-deep);font:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-strong);
  border-radius:14px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pcard[hidden]{display:none}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.pcard.is-picked{border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,89,12,.16)}
.pcard__shot{position:relative;margin:0}
.pcard__shot img{display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover}
.pcard__no{position:absolute;left:9px;top:9px;margin:0;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.93);color:var(--accent-deep);font-size:10px;font-weight:700;letter-spacing:.06em}
.pcard__add{
  position:absolute;right:9px;bottom:9px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.94);color:var(--accent-deep);
  font-size:20px;line-height:1;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -10px rgba(45,40,28,.5);transition:.2s;
}
.pcard__add:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.pcard.is-picked .pcard__add{background:var(--accent);color:#fff;border-color:var(--accent)}
.pcard__body{display:flex;flex-direction:column;flex:1;gap:8px;padding:12px 12px 13px}
.pcard__name{margin:0;font-size:13.5px;line-height:1.4;font-weight:650;color:var(--text);min-height:38px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__meta{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.pchip{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent-deep);font-size:10.5px;font-weight:600;white-space:nowrap}
.pchip--size{background:rgba(15,15,15,.05);color:var(--text-soft)}
.pcard__price{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:auto 0 0;
  padding-top:8px;border-top:1px dashed var(--line-strong);font-size:12px;font-weight:650;color:var(--text)}
.pcard__price i{font-style:normal;font-weight:500;font-size:10.5px;color:var(--accent-deep)}
.pcard__act{display:flex;gap:6px}
.pcard__act .btn{flex:1;justify-content:center;padding:8px 6px;font-size:11.5px;white-space:nowrap}
.shop-empty{grid-column:1 / -1;margin:24px 0;font-size:13px;color:var(--muted)}
.shop-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:32px 0 0;padding:18px 0 0;
  border-top:1px solid var(--line);list-style:none}
.shop-trust li{position:relative;padding-left:18px;font-size:12.5px;color:var(--text-soft)}
.shop-trust li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;
  background:var(--accent)}
.shop-drawer{position:fixed;inset:0;z-index:90;display:flex;justify-content:flex-end;
  background:rgba(20,18,14,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.shop-drawer[hidden]{display:none}
.shop-drawer__panel{width:min(420px,92vw);height:100%;background:#fff;display:flex;flex-direction:column;
  box-shadow:-30px 0 60px -30px rgba(20,18,14,.5)}
.shop-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--line)}
.shop-drawer__head h3{margin:0;font-size:16px}
.shop-drawer__x{border:0;background:none;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer}
.shop-drawer__list{flex:1;overflow:auto;padding:12px 18px}
.shop-line{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.shop-line img{width:54px;height:54px;object-fit:cover;border-radius:9px;flex:none}
.shop-line > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.shop-line b{font-size:12.5px}
.shop-line span{font-size:11.5px;color:var(--muted)}
.shop-line button{border:0;background:none;font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.shop-drawer__foot{display:flex;flex-direction:column;gap:8px;padding:14px 18px 18px;border-top:1px solid var(--line)}
.shop-drawer__foot .btn{width:100%;justify-content:center}
.shop-drawer__clear{border:0;background:none;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;
  text-decoration:underline}
.shop-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
  border-top:1px solid var(--line-strong);box-shadow:0 -12px 30px -22px rgba(45,40,28,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.shop-bar[hidden]{display:none}
.shop-bar__txt{font-size:12.5px;color:var(--text-soft)}
.shop-bar__txt b{color:var(--text)}
.shop-bar .btn{margin-left:auto}

@media (min-width:760px){
  .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .shop-trust{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1000px){
  .shop-body{grid-template-columns:232px 1fr;gap:28px;align-items:start}
  .shop-rail{display:block;position:sticky;top:92px}
  .shop-rail.is-open{display:block}
  .shop-btn--filter{display:none}
  .shop-bar{left:auto;right:24px;bottom:24px;border-radius:999px;border:1px solid var(--line-strong);
    padding:10px 14px;box-shadow:0 18px 40px -22px rgba(20,18,14,.5)}
}
@media (min-width:1320px){
  .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}