/* ============================================================
   木绘蓝图 M·BLUEPRINT — 全站设计系统
   Apple 浅色风格 · 液态玻璃 · 版本 v1.0 (M1)
   ============================================================ */

/* 字体：改用系统自带字体（2026-09-20 决定）。
   原来引入 Inter + 思源黑体（Noto Sans SC），共 311 个 woff2、首屏要下约 1.5MB，
   而且中文字体被切成 42 个分片陆续到位，页面上的字会一批批跳换字体。
   系统字体栈则完全不下载、零延迟、不再闪动；代价是各平台略有个体差异
   （Windows 微软雅黑 / macOS 苹方 / Android 思源黑体），都是现代黑体，观感接近。
   字体文件仍保留在 assets/fonts/ 下，若要回退只需恢复这两行 @import 与 --font 首项。
   @import url('../fonts/inter.css');
   @import url('../fonts/noto.css');
*/

:root{
  --bg:#f5f5f7;
  --bg2:#fbfbfd;
  --card:#ffffff;
  --text:#1d1d1f;
  --text2:#6e6e73;
  --text3:#86868b;
  --border:rgba(0,0,0,.10);
  --border2:rgba(0,0,0,.18);
  --blue:#0066cc;
  --blue-bg:rgba(0,102,204,.08);
  --green:#1a7f37;
  --green-bg:rgba(52,168,83,.10);
  --amber:#b25000;
  --amber-bg:rgba(255,149,0,.12);
  --red:#a32d2d;
  --red-bg:rgba(163,45,45,.08);
  /* 系列调性 */
  --puhue-bg:#F3E9D8;
  --puhue-deep:#5C3D24;
  --mohui-bg:#2b2b2b;
  --mohui-paper:#F5F5F2;
  --flora-bg:#2a1b10;
  --flora-gold:#B08D57;
  --radius:18px;
  --radius-s:12px;
  --shadow:0 2px 12px rgba(0,0,0,.05);
  --shadow-hover:0 12px 32px rgba(0,0,0,.10);
  --glass:rgba(251,251,253,.72);
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100svh;min-height:var(--vp-h,100vh);display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:none}
ul{list-style:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;width:100%}
main{flex:1}

/* ---------- 液态玻璃导航 ---------- */
/* min-height 与 .hero-full 的 margin-top:-53px 对应。
   导航是由 JS 注入的，注入前 #site-header 是空 div（高 0），会让 hero 先被上顶 53px、
   等导航注入后再掉下来——标题"偏上又突然下移"就是这里。给它一个占位高度即可。 */
#site-header{position:sticky;top:0;z-index:60;min-height:53px}
.nav{background:#fff;border-bottom:0.5px solid var(--border);transition:background .3s ease,border-color .3s ease}

/* 仅首页：回到页面顶部时导航透明 + 文字/图标转浅色（配合头图） */
.nav.nav-transparent{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* 顶部透明态：导航链接白字；右侧工具按钮保持浅色玻璃底 + 深色图标（白描边图标在浅色画面上会看不见） */
.nav.nav-transparent .nav-links a,
.nav.nav-transparent .nav-links a.on{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.nav.nav-transparent .nav-search{background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(0,0,0,.10)}
.nav.nav-transparent .nav-search:hover{background:rgba(255,255,255,.82)}
.nav.nav-transparent .nav-search .ns-ic,
.nav.nav-transparent .nav-search .ns-txt,
.nav.nav-transparent .nav-cart .nc-txt{color:var(--text);text-shadow:none}
.nav.nav-transparent .nav-search-m{
  background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.85);color:var(--text);text-shadow:none;
}
.nav.nav-transparent .nav-cart{
  background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.85);
  color:var(--text);text-shadow:none;box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.nav.nav-transparent .nav-cart:hover{background:rgba(255,255,255,.82)}
.nav.nav-transparent .nav-burger{color:var(--text);background:rgba(255,255,255,.66);border-radius:8px;text-shadow:none}
/* 菜单展开时（.dd-open 会让导航变浅底），即使处于顶部透明态也恢复深色文字与原 logo */
.nav.nav-transparent.dd-open .nav-links a,
.nav.nav-transparent.dd-open .nav-links a.on{color:var(--text);text-shadow:none}
.nav.nav-transparent.dd-open .nav-search .ns-ic,
.nav.nav-transparent.dd-open .nav-search .ns-txt,
.nav.nav-transparent.dd-open .nav-search-m,
.nav.nav-transparent.dd-open .nav-cart,
.nav.nav-transparent.dd-open .nav-cart .nc-txt,
.nav.nav-transparent.dd-open .nav-burger{color:var(--text);text-shadow:none}
.nav.nav-transparent.dd-open .nav-brand img{filter:none}
.nav.nav-transparent .nav-brand img{filter:brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0,0,0,.35))}
.nav a,.nav button{transition:color .3s ease}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:52px;gap:16px}
.nav-brand{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:600;font-size:15px;letter-spacing:.2px}
.nav-brand:hover{text-decoration:none}
.nav-brand img{height:30px;width:auto}
.nav-brand small{color:var(--text2);font-weight:400}
.nav-links{display:flex;gap:24px;font-size:13px;align-items:center}
.nav-links a{color:var(--text2);padding:4px 0;transition:color .2s}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a.on{color:var(--text);font-weight:500}
/* 导航下拉（hover） */
.nav-item{position:relative}
.nav-item > a{display:inline-block;padding:4px 2px}
#ddRoot{position:fixed;top:0;left:0;width:0;height:0;z-index:80}
.dd{position:fixed;top:52px;left:0;right:0;width:100%;
  background:#fff;
  box-shadow:0 12px 36px rgba(0,0,0,.08);
  padding:32px 0 40px;opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .16s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility .16s;z-index:89}
.dd.open{opacity:1;visibility:visible;transform:translateY(0)}
/* 下拉打开时，导航栏同为纯白、去底边框，与面板连成一整层 */
.nav.dd-open{background:#fff;border-bottom-color:transparent;transition:background .16s ease,border-color .16s ease}
/* 打开下拉时，背景网页高斯模糊 */
/* 移动端菜单展开时，导航栏转纯白（覆盖 hero 顶部的透明态），保证品牌与按钮可读 */
.nav.menu-open{background:#fff;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.nav-transparent.menu-open .nav-brand img{filter:none}
.nav.nav-transparent.menu-open .nav-links a{color:var(--text2);text-shadow:none}
.nav.nav-transparent.menu-open .nav-links a.on{color:var(--text);font-weight:500}
.nav.nav-transparent.menu-open .nav-search-m,
.nav.nav-transparent.menu-open .nav-cart,
.nav.nav-transparent.menu-open .nav-cart .nc-txt,
.nav.nav-transparent.menu-open .nav-burger{color:var(--text);text-shadow:none}
.nav.nav-transparent.menu-open .nav-search-m,
.nav.nav-transparent.menu-open .nav-cart,
.nav.nav-transparent.menu-open .nav-burger{background:none;border:none;box-shadow:none;filter:none}
/* 打开下拉时，背景网页高斯模糊 */
.dd-veil{position:fixed;top:52px;left:0;right:0;bottom:0;background:rgba(255,255,255,.05);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);opacity:0;transition:opacity .18s ease;z-index:88}
.dd-veil.open{opacity:1}
.dd-cols{display:grid;gap:36px;max-width:1000px;margin:0 auto;padding:0 24px}
.dd-col-h{font-size:12px;color:var(--text3);font-weight:400;margin-bottom:14px;letter-spacing:.2px}
.dd-col-link{display:block;font-size:18px;font-weight:600;color:var(--text);padding:5px 0;line-height:1.35;transition:color .12s}
.dd-col-link:hover{color:var(--blue)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-search{display:flex;align-items:center;gap:6px;height:26px;background:rgba(255,255,255,.45);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:0.5px solid rgba(255,255,255,.65);box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(0,0,0,.05);border-radius:999px;padding:0 12px;cursor:pointer;transition:background .2s;width:auto}
.nav-search:hover{background:rgba(255,255,255,.72)}
.nav-search .ns-ic{display:flex;color:var(--text2);flex-shrink:0}
.nav-search .ns-txt{font-size:12.5px;color:var(--text2);white-space:nowrap}
.nav-search-m{display:none;align-items:center;justify-content:center;width:32px;height:32px;border:0.5px solid var(--border);background:var(--card);border-radius:50%;color:var(--text);cursor:pointer;flex-shrink:0}
.nav-burger{display:none;background:none;border:none;font-size:20px;cursor:pointer;color:var(--text);padding:4px 8px}
/* 智能搜索面板（液态玻璃） */
#searchPanelWrap{position:relative}
.search-panel{position:absolute;top:36px;left:0;right:auto;width:420px;display:none;z-index:70;padding:4px 0}
.search-panel.open{display:block;animation:pop .2s ease}
.search-panel .sp-section{margin-top:11px}
.search-panel .sp-label{font-size:11px;color:var(--text3);margin-bottom:7px;letter-spacing:.4px}
.search-panel .sp-colors{display:flex;gap:6px;flex-wrap:wrap}
.search-panel .sp-colors .dot{width:18px;height:18px;border-radius:50%;border:1px solid var(--border2);cursor:pointer;transition:all .12s}
.search-panel .sp-colors .dot.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg);transform:scale(1.12)}
.search-panel .sp-tex{display:flex;gap:5px;flex-wrap:wrap}
.search-panel .sp-tex .chip{padding:4px 12px;font-size:11.5px}
.search-panel .sp-results{margin-top:2px;max-height:264px;overflow:auto}
.sp-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;cursor:pointer;transition:background .13s}
.sp-item:hover{background:rgba(0,0,0,.05)}
.sp-item .sp-th{width:36px;height:36px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0;background-color:var(--bg2)}
.sp-item .sp-meta{flex:1;min-width:0}
.sp-item .sp-name{font-size:13px;font-weight:500}
.sp-item .sp-name em{font-style:normal;font-size:10.5px;color:var(--text3);margin-left:4px}
.sp-item .sp-sub{font-size:11px;color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-item .sp-score{font-size:11.5px;color:var(--green);font-weight:500;flex-shrink:0}
.sp-more{display:block;text-align:center;font-size:12px;color:var(--blue);padding:9px 0 1px;cursor:pointer}
.sp-empty{font-size:12.5px;color:var(--text2);text-align:center;padding:12px 0}
@media(max-width:768px){
  .nav-search{display:none}
  .nav-search-m{display:flex}
  .search-panel{top:52px;left:50%;transform:translateX(-50%);width:94vw;right:auto}
}

/* ---------- 页脚 ---------- */
#site-footer{background:#f0f0f2;border-top:0.5px solid var(--border);margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:24px;padding:48px 0 36px}
.footer-brand p{font-size:12.5px;color:var(--text2);margin-top:8px;max-width:240px}
.footer-brand .logo-img{height:40px;width:auto;margin-bottom:10px}
.footer-col h5{font-size:13px;font-weight:600;margin-bottom:12px}
.footer-col a{display:block;font-size:12.5px;color:var(--text2);padding:3px 0}
.footer-col a:hover{color:var(--text)}
.footer-bar{border-top:0.5px solid var(--border);padding:16px 0 12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--text3)}
.footer-bar .legal a{margin-right:14px;color:var(--text3)}
.footer-bar .legal a:hover{color:var(--text)}
/* 备案信息单独居中一行（管局口径：备案号应置于首页底部中间位置）
   整串不可断行 —— 否则窄屏会把「沪」字单独挤到上一行（实测 390px 会这样） */
.footer-record{text-align:center;padding:0 0 26px;font-size:12px;color:var(--text3);line-height:1.9}
.footer-record a{color:var(--text3);white-space:nowrap}
.footer-record a:hover{color:var(--text)}

/* ---------- 通用区块 ---------- */
section{padding:110px 0}
.section-alt{background:var(--bg2)}
.sec-head{margin-bottom:40px;max-width:780px}
.sec-kicker{font-size:13px;color:var(--blue);font-weight:600;letter-spacing:1px}
.sec-title{font-size:34px;font-weight:700;letter-spacing:-.4px;line-height:1.15;margin-top:8px}
.sec-sub{font-size:16px;color:var(--text2);margin-top:10px}
.sec-center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--text);color:#fff;border:none;border-radius:999px;padding:11px 28px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:opacity .2s,transform .2s;text-decoration:none}
.btn:hover{opacity:.85;text-decoration:none}
.btn:active{transform:scale(.97)}
.btn-light{background:var(--card);color:var(--text);border:0.5px solid var(--border2)}
.btn-blue{background:var(--blue)}
.btn-green{background:var(--green)}
.btn-lg{padding:14px 34px;font-size:15px}
.btn-sm{padding:7px 18px;font-size:13px}
.btn-block{width:100%}

/* ---------- 标题排版 ---------- */
.hero{background:var(--bg2);text-align:center;padding:100px 0 84px}
.hero .kicker{font-size:13px;color:var(--blue);font-weight:600;letter-spacing:1.5px}
.hero h1{font-size:48px;font-weight:700;letter-spacing:-.6px;line-height:1.1;margin-top:14px}
.hero .sub{font-size:19px;color:var(--text2);margin-top:16px;max-width:640px;margin-left:auto;margin-right:auto}
.hero .cta{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- 表单 ---------- */
input[type=text],input[type=tel],input[type=email],textarea,select{
  width:100%;border:0.5px solid var(--border2);border-radius:var(--radius-s);padding:11px 14px;font-size:14px;font-family:inherit;background:var(--card);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;
}
input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
textarea{resize:vertical;min-height:90px}
label.f-label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.form-row{margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-tip{font-size:12px;color:var(--text3);margin-top:6px}
.form-done{display:none;text-align:center;padding:20px 0}
.form-done .ic{font-size:34px;margin-bottom:8px}

/* ---------- 弹窗 ---------- */
.modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.45);align-items:center;justify-content:center;padding:20px;overscroll-behavior:contain}
.modal.open{display:flex}
.modal-card{background:var(--card);border-radius:20px;max-width:560px;width:100%;max-height:88vh;max-height:88svh;max-height:calc(var(--vp-h,100vh) * 0.88);overflow:auto;padding:28px 30px;position:relative;animation:pop .25s ease;overscroll-behavior:contain}
.modal-card.wide{max-width:880px}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:22px;color:var(--text3);cursor:pointer;line-height:1}
.modal-title{font-size:18px;font-weight:600;margin-bottom:16px;padding-right:30px}

/* 弹窗自定义滚动条 */
.modal-card::-webkit-scrollbar{width:6px}
.modal-card::-webkit-scrollbar-track{background:transparent}
.modal-card::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:999px}
.modal-card::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28)}
.modal-card{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}

/* ---------- 客服微信（弹窗大码 + 页面内小码） ---------- */
.modal-card.wx-card{max-width:330px;padding:34px 30px 28px;text-align:center}
.wx-qr{width:100%;max-width:208px;margin:4px auto 0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.07)}
.wx-qr img{display:block;width:100%;height:auto}
.wx-name{font-size:14px;font-weight:600;margin-top:18px;letter-spacing:.2px}
.wx-tip{font-size:12.5px;color:var(--text3);line-height:1.6;margin-top:6px}
.wx-tel{display:inline-block;font-size:13px;color:var(--blue);margin-top:14px;text-decoration:none}
.wx-row{display:flex;align-items:center;gap:12px;margin-top:8px;background:none;border:none;padding:0;font-family:inherit;text-align:left;cursor:pointer}
.wx-row img{width:68px;height:68px;flex-shrink:0;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.06)}
.wx-row .wt{font-size:13.5px;color:var(--text);line-height:1.5}
.wx-row .ws{display:block;font-size:12px;color:var(--text3);margin-top:2px}
.wx-row:hover .wt{color:var(--blue)}

/* ---------- 下载密码门（苹果极简风：玻璃卡片 + 单一焦点输入） ---------- */
.modal-card.dl-gate{max-width:392px;padding:40px 34px 30px;text-align:center;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px)}
.dl-gate .lg-lock{width:54px;height:54px;margin:0 auto 20px;border-radius:16px;background:var(--blue-bg);color:var(--blue);display:flex;align-items:center;justify-content:center}
.dl-gate .lg-h{font-size:20px;font-weight:600;letter-spacing:-.3px;line-height:1.3}
.dl-gate .lg-sub{font-size:13.5px;color:var(--text2);margin-top:8px;line-height:1.55}
.dl-gate .lg-file{display:inline-block;margin-top:16px;font-size:12.5px;color:var(--text2);background:var(--bg);border-radius:999px;padding:5px 14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.dl-gate .lg-field{position:relative;margin-top:22px}
.dl-gate .lg-pwd{width:100%;box-sizing:border-box;text-align:center;font-family:inherit;font-size:15px;color:var(--text);letter-spacing:2px;padding:13px 46px;border-radius:12px;background:var(--bg);border:1px solid transparent;box-shadow:none;outline:none;transition:background .2s,border-color .2s,box-shadow .2s}
.dl-gate .lg-pwd::placeholder{letter-spacing:0;font-size:14px;color:var(--text3)}
.dl-gate .lg-pwd:focus{background:var(--card);border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-bg)}
.dl-gate .lg-pwd.bad,.dl-gate .lg-pwd.bad:focus{border-color:#d70015;box-shadow:0 0 0 4px rgba(215,0,21,.07)}
.dl-gate .lg-eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:var(--text3);cursor:pointer;border-radius:8px;transition:color .15s}
.dl-gate .lg-eye:hover{color:var(--text)}
.dl-gate .lg-err{font-size:12.5px;color:#d70015;margin-top:10px;height:17px;opacity:0;transition:opacity .18s}
.dl-gate .lg-err.on{opacity:1}
.dl-gate .btn{width:100%;margin-top:4px;border-radius:12px;padding:13px 0;font-size:14.5px}
.dl-gate .lg-cancel{display:block;width:100%;margin-top:10px;background:none;border:none;padding:6px 0;font-family:inherit;font-size:13px;color:var(--text3);cursor:pointer;transition:color .15s}
.dl-gate .lg-cancel:hover{color:var(--text2)}
.dl-gate .lg-note{font-size:11.5px;color:var(--text3);margin-top:16px;line-height:1.6}
.dl-gate.shake{animation:lgShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes lgShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}

/* 板材详情选配下单 */
.order-box{margin-top:22px;border-top:0.5px solid var(--border);padding-top:18px}
.ob-label{font-size:12.5px;color:var(--text3);margin-bottom:8px;font-weight:600}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ob-chip{border:0.5px solid var(--border2);background:var(--card);border-radius:999px;padding:6px 14px;font-size:12.5px;cursor:pointer;font-family:inherit;color:var(--text);transition:all .15s}
.ob-chip:hover{background:var(--bg2)}
.ob-chip.on{background:var(--text);color:#fff;border-color:var(--text)}
/* 数量步进器：苹果极简 —— 一体胶囊、浅灰填充、无边框分段 */
.ob-qty-row{display:flex;align-items:center;margin-bottom:14px}
.ob-qty{display:inline-flex;align-items:center;height:42px;padding:0 5px;background:#F5F5F7;border-radius:999px;transition:background .2s ease,box-shadow .2s ease}
.ob-qty .ob-btn{width:34px;height:34px;border:none;background:transparent;border-radius:50%;font-size:17px;line-height:1;cursor:pointer;color:var(--text);font-family:inherit;display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .1s ease}
.ob-qty .ob-btn:hover{background:rgba(0,0,0,.06)}
.ob-qty .ob-btn:active{background:rgba(0,0,0,.1);transform:scale(.92)}
.ob-qty input{width:56px;height:100%;border:none;background:transparent;text-align:center;font-size:16px;font-weight:600;font-family:inherit;color:var(--text);outline:none;padding:0}
.ob-qty .ob-unit{margin-left:10px;font-size:13px;color:var(--text3)}
/* 数量校验：未填时整枚胶囊转红 + 红字（提示只在出错时占位，不影响正常排版） */
.ob-qty.bad{background:var(--red-bg);box-shadow:inset 0 0 0 1.5px #d70015}
.ob-qty.bad .ob-btn,.ob-qty.bad input{color:#d70015}
.ob-qty-err{font-size:12.5px;color:#d70015;line-height:17px;max-height:0;opacity:0;overflow:hidden;transition:max-height .2s ease,opacity .2s ease,margin .2s ease}
.ob-qty-err.on{max-height:34px;opacity:1;margin:0 0 12px}
.ob-code{font-size:14.5px;font-weight:600;letter-spacing:.3px;background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;cursor:pointer;user-select:all;word-break:break-all}

/* 选配下单：按钮行 + 下单成功 */
.ob-status{margin-bottom:8px;display:flex}
.stock-note{font-size:11.5px;color:var(--text3);line-height:1.5;margin-bottom:16px}
.ob-badge{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 11px;border-radius:999px;letter-spacing:.3px}
.ob-badge.ok{background:rgba(45,164,78,.12);color:#2da44e}
.ob-badge.cust{background:rgba(245,158,11,.16);color:#b86e00}
.ob-btns,.od-btns{display:flex;gap:10px}
.ob-btns .btn,.od-btns .btn,.od-btns a.btn{flex:1}
.order-done{text-align:center;padding:8px 0 4px}
.od-icon{width:52px;height:52px;border-radius:50%;background:#2da44e;color:#fff;font-size:24px;font-weight:600;display:flex;align-items:center;justify-content:center;margin:4px auto 14px}
.od-title{font-size:19px;font-weight:600;margin-bottom:6px;letter-spacing:-.2px}
.od-tip{font-size:13px;color:var(--text2);margin-bottom:14px}
.od-summary{border-top:0.5px solid rgba(0,0,0,.06);margin:0 0 16px;padding-top:4px;text-align:left}
.os-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:0.5px solid rgba(0,0,0,.06);font-size:13px}
.os-row span{color:var(--text3)}
.os-row b{font-weight:500;text-align:right}

/* 导航购物车按钮 + 角标 */
.nav-cart{position:relative;display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;width:auto;background:rgba(255,255,255,.45);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:0.5px solid rgba(255,255,255,.65);box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(0,0,0,.05);border-radius:999px;color:var(--text);text-decoration:none;flex-shrink:0;transition:background .2s}
.nav-cart:hover{background:rgba(255,255,255,.72)}
.nav-cart .nc-txt{font-size:12.5px;color:var(--text2);white-space:nowrap}
.nav-cart .nc-ic{display:none;align-items:center;justify-content:center}
.cart-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;font-weight:600;align-items:center;justify-content:center;padding:0 5px;line-height:1;letter-spacing:0}

/* 购物车页 */
.cart-item .ci{width:80px;height:80px;border-radius:10px;background-size:cover;background-position:center;flex-shrink:0;border:0.5px solid rgba(0,0,0,.05)}
.os-orders{margin:6px 0 20px;text-align:left}
.oc-code{font-size:32px;font-weight:800;letter-spacing:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center;background:var(--bg2);border:0.5px solid var(--border);border-radius:14px;padding:16px 12px;margin-bottom:16px}
.oc-list{text-align:left}
.os-order{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:0.5px solid var(--border);border-radius:12px;margin-bottom:8px;background:var(--card)}
.oo-info{min-width:0}
.oo-info b{font-size:14px;font-weight:600}
.oo-id{font-size:11px;color:var(--text3);margin-left:6px;text-transform:uppercase}
.oo-sub{font-size:12px;color:var(--text2);margin-top:3px}
.oo-code{font-size:20px;font-weight:700;letter-spacing:2px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text);white-space:nowrap}

/* 色卡详情弹窗：苹果极简（左图右信息） */
.modal-card.sw-card{padding:24px 26px}
.as-body{display:flex;gap:24px;align-items:stretch}
.as-img{flex:0 0 44%;min-width:0;display:flex}
.as-img > img,.as-img > div{width:100%;height:100%;object-fit:cover}
.as-info{flex:1;min-width:0;display:flex;flex-direction:column}
.as-head{margin-bottom:2px}
.as-name{font-size:20px;font-weight:600;letter-spacing:-.2px}
.as-en{font-size:11px;color:var(--text3);margin-top:2px;letter-spacing:1px;text-transform:uppercase}
.as-specs{flex:1;border-top:0.5px solid rgba(0,0,0,.06);margin-top:12px;padding-top:2px}
.as-spec{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:0.5px solid rgba(0,0,0,.06);font-size:13px}
.as-spec span{color:var(--text3);white-space:nowrap;margin-right:10px}
.as-spec b{font-weight:500;text-align:right}
.as-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
@media(max-width:520px){
  .as-body{flex-direction:column;gap:16px}
  .as-img{flex:none}
}

/* ---------- toast ---------- */
#toast-wrap{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(29,29,31,.92);color:#fff;font-size:13px;padding:11px 22px;border-radius:999px;box-shadow:var(--shadow-hover);animation:pop .25s ease;max-width:80vw}

/* ---------- 浮动元素 ---------- */
.fab-wrap{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab{display:flex;align-items:center;gap:8px;background:var(--card);border:0.5px solid var(--border2);border-radius:999px;padding:10px 18px;font-size:13px;font-weight:500;cursor:pointer;box-shadow:var(--shadow);font-family:inherit;color:var(--text)}
.fab:hover{box-shadow:var(--shadow-hover)}
.fab.fab-primary{background:var(--text);color:#fff;border:none}
.fab-top{opacity:0;pointer-events:none;transition:opacity .3s}
.fab-top.show{opacity:1;pointer-events:auto}

/* ---------- 滚动动效（纯 CSS 兜底，内容永不失隐） ---------- */
.reveal{animation:rise .7s ease both}
.reveal-d1{animation-delay:.08s}.reveal-d2{animation-delay:.16s}.reveal-d3{animation-delay:.24s}.reveal-d4{animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- 首页 ---------- */
/* 上提 53px，让头图延伸到导航栏之下（导航为毛玻璃，可透出图片） */
.hero-full{position:relative;min-height:100vh;min-height:100svh;min-height:var(--vp-h,100vh);margin-top:-53px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg2);overflow:hidden}
.hero-full .bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:1}
/* 首页头图：去掉浅色遮罩，图片满色显示；文字与按钮改浅色系 */
/* 内容整体下移 10%（相对视口高度），让画面上方的留白更舒展 */
.hero-full .in{position:relative;z-index:2;padding:0 24px;width:100%;max-width:880px;margin:0 auto}
.hero-full h1,.hero-full .sub{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-full h1{font-size:80px;font-weight:700;letter-spacing:-1.6px;color:#fff}
.hero-full .sub{font-size:21px;color:rgba(255,255,255,.9);margin-top:16px}
.hero-full .cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* hero 按钮：浅透底 + 细描边 + 内高光，无背景模糊 */
.hero-full .cta .btn{
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.5);
}
.hero-full .cta .btn:hover{background:rgba(255,255,255,.24);opacity:1}
.hero-full .cta .btn-light{
  background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.hero-full .cta .btn-light:hover{background:rgba(255,255,255,.16);opacity:1}

/* ---------- 首页 hero 两幕加载动画 ----------
   第一幕（图未就绪）：浅底 + 黑标题，副标题与按钮占位但不可见
   第二幕（图就绪）：图片整张淡入、标题转白、副标题与按钮错峰上浮
   仅当 <head> 极早期脚本给 html 挂上 .hero-anim 时生效。
   该脚本若未执行（JS 被禁或报错），本区块整体失效，页面退化为原来的静态 hero，
   不会出现"图片永久不显示"的故障。 */
/* 缓动曲线定义在 html 上而非 .hero-full —— #site-header 不是它的后代，
   定义在 .hero-full 上会让 #site-header 的 var(--he) 解析失败，整条 transition 被丢弃。 */
html.hero-anim{--he:cubic-bezier(.28,.11,.32,1)}

/* --- 第一幕：初始态 --- */
html.hero-anim .hero-full .bg{opacity:0;transition:opacity .7s var(--he)}
/* 标题两行结构（替代原来的 <br>）：无条件 block，保证 JS 失效时仍是两行 */
.hero-full h1 .hl1,.hero-full h1 .hl2{display:block}
html.hero-anim .hero-full h1{
  color:#1d1d1f;text-shadow:none;
  transition:color .5s var(--he) .12s,text-shadow .5s var(--he) .12s;
}
/* 方案 3「两行依次」（用户 2026-09-20 选定）：上一行、下一行先后浮现，差 0.16s */
html.hero-anim .hero-full h1 .hl1{animation:heroLineIn .55s var(--he) both}
html.hero-anim .hero-full h1 .hl2{animation:heroLineIn .55s var(--he) .16s both}
/* 副标题与按钮必须"占位但透明"。不可用 display:none —— .in 是垂直居中容器，
   一旦变矮，标题会从屏幕正中跳到偏上（约 55px），整个入场就崩了。 */
html.hero-anim .hero-full .sub,
html.hero-anim .hero-full .cta{
  opacity:0;pointer-events:none;transform:translateY(24px);color:#6e6e73;
  transition:opacity .55s var(--he),transform .55s var(--he),color .55s var(--he);
}

/* --- 第二幕（已提速：整体约 0.85s 收尾，原为 1.5s）--- */
html.hero-anim .hero-full.imgon .bg{opacity:1}
html.hero-anim .hero-full.imgon h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
html.hero-anim .hero-full.imgon .sub{color:rgba(255,255,255,.9)}
html.hero-anim .hero-full.stage2 .sub{opacity:1;transform:translateY(0);transition-delay:.2s}
html.hero-anim .hero-full.stage2 .cta{opacity:1;transform:translateY(0);transition-delay:.3s}

/* --- 导航：第一幕整体隐藏，随第二幕一起浮现 ---
   .hero-stage2 由计时触发（总会触发，含超时兜底），保证导航不会永久隐藏；
   .hero-img 只在图片真就绪时加，用来决定导航文字是白还是深。
   淡入延迟 .4s：等图片淡入过半，白字才落到足够深的画面上。 */
html.hero-anim #site-header{transition:opacity .45s var(--he) .25s}
html.hero-anim body:not(.hero-stage2) #site-header{opacity:0;pointer-events:none}
html.hero-anim .nav.nav-transparent .nav-brand img{transition:filter .5s var(--he)}
html.hero-anim .nav.nav-transparent .nav-links a{transition:color .5s var(--he)}
/* 图片未能就绪时（浅底）导航保持深色，否则白字近白底会看不见 */
html.hero-anim body.hero-stage2:not(.hero-img) .nav.nav-transparent .nav-links a,
html.hero-anim body.hero-stage2:not(.hero-img) .nav.nav-transparent .nav-links a.on{color:var(--text);text-shadow:none}
html.hero-anim body.hero-stage2:not(.hero-img) .nav.nav-transparent .nav-brand img{filter:none}

/* --- 老访客且图片缓存失效时的兜底 ---
   不挂 hero-anim 就没有两幕动画；此时若图片还要重新下载，
   白字会落在浅底上看不见，先把文字/按钮/导航转深（图片一到 JS 会移除本类）。 */
html.hero-nofade .hero-full h1{color:#1d1d1f;text-shadow:none}
html.hero-nofade .hero-full .sub{color:#6e6e73}
html.hero-nofade .hero-full h1,
html.hero-nofade .hero-full .sub{transition:color .45s ease,text-shadow .45s ease}
html.hero-nofade .hero-full .cta .btn{background:rgba(29,29,31,.06);color:#1d1d1f;border-color:rgba(29,29,31,.2);box-shadow:none}
html.hero-nofade .hero-full .cta .btn-light{background:transparent;color:#1d1d1f;border-color:rgba(29,29,31,.2);box-shadow:none}
html.hero-nofade .nav.nav-transparent .nav-links a{color:var(--text);text-shadow:none}
html.hero-nofade .nav.nav-transparent .nav-brand img{filter:none}

@keyframes heroLineIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- 缓存命中：完全跳过动画，瞬间到位 ---
   图片已在浏览器缓存里时（JS 判定 img.complete），再播两幕就是给人添堵。
   JS 给 html 加 .hero-skip，这里把所有过渡与动画全部关掉，一帧到位。 */
html.hero-anim.hero-skip .hero-full,
html.hero-anim.hero-skip .hero-full .bg,
html.hero-anim.hero-skip .hero-full h1,
html.hero-anim.hero-skip .hero-full h1 .hl1,
html.hero-anim.hero-skip .hero-full h1 .hl2,
html.hero-anim.hero-skip .hero-full .sub,
html.hero-anim.hero-skip .hero-full .cta,
html.hero-anim.hero-skip #site-header,
html.hero-anim.hero-skip .nav.nav-transparent .nav-brand img,
html.hero-anim.hero-skip .nav.nav-transparent .nav-links a{
  transition:none !important;animation:none !important;
}

/* 卡片悬停动效统一放在文件末尾的 @media (hover:hover) 块里 ——
   必须排在各自的基础规则之后，否则会被 .series-card 等基础 transition 覆盖。 */

.series-card{overflow:hidden;transition:transform .35s ease,box-shadow .35s ease;cursor:pointer;display:block;color:var(--text)}
.series-card:hover{text-decoration:none}
.series-card .sv{height:260px;position:relative;overflow:hidden}
/* 卡片配图铺满容器、居中裁切。
   ⚠ 不要改回 left:50% + transform:translateX(-50%) 的居中写法：
   parallax 的 scale:1.14 是独立变换属性、作用在 transform 外层，会把那条 -50% 位移
   一起放大成 -57%，整张图因此左移约 36px、左右留白不等（实测三张卡都中招）。
   用 object-fit 铺满 + object-position 居中后，scale 只围绕元素自身中心放大，不会再偏。 */
.series-card .sv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.series-card .sv span{font-size:22px;font-weight:600;letter-spacing:1px;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.series-card.puhue .sv{background:linear-gradient(135deg,#E8D8BC,#C9A97C)}
.series-card.puhue .sv span{color:#5C3D24;text-shadow:none}
.series-card.mohui .sv{background:linear-gradient(135deg,#3a3a3a,#141414)}.series-card.mohui .sv span{color:#E8E6E0}
.series-card.flora .sv{background:linear-gradient(135deg,#3a2615,#140b04)}
.series-card.flora .sv span{color:#D9BC8C}
.series-card .sb{padding:24px 26px}
.series-card .sb h3{font-size:19px;font-weight:600}
.series-card .sb .en{font-size:11.5px;color:var(--text3);letter-spacing:1.2px;margin-top:2px}
.series-card .sb .pos{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;color:var(--blue);background:var(--blue-bg);border-radius:999px;padding:3px 12px}
.sc-strip{display:flex;gap:6px;margin-top:14px}
.sc-strip img,.sc-strip i{width:40px;height:40px;border-radius:8px;object-fit:cover;border:0.5px solid rgba(0,0,0,.06);flex-shrink:0}
.series-card .sb p{font-size:13.5px;color:var(--text2);margin-top:12px}

/* 数字条 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{text-align:center;padding:28px 16px;background:rgba(255,255,255,.45);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:0.5px solid rgba(255,255,255,.65);box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.5),0 12px 32px rgba(0,0,0,.06)}
.stat .n{font-size:34px;font-weight:700;letter-spacing:-.5px}
.stat .n em{font-style:normal;font-size:18px;margin-left:2px}
.stat .l{font-size:13px;color:var(--text2);margin-top:4px}
.quick-grid .card{background:rgba(255,255,255,.45);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:0.5px solid rgba(255,255,255,.65);box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.5),0 12px 32px rgba(0,0,0,.06)}

/* 色块 */
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.swatch-card{overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}
/* .swatch-card 的悬停放大统一放在文末的 @media (hover:hover) 块里，
   避免触屏设备点按后 hover 态"粘住"。 */
.swatch-card .img{aspect-ratio:1/1;background:var(--bg2);background-size:cover;background-position:center;position:relative}
.swatch-card .badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;border-radius:999px;padding:3px 10px;background:rgba(255,255,255,.85);color:var(--text)}
.swatch-card .badge.new{background:var(--red);color:#fff}
.swatch-card .info{padding:12px 14px}
.swatch-card .info .nm{font-size:14px;font-weight:500}
.swatch-card .info .nm .code{font-size:10.5px;font-weight:400;color:var(--text3);margin-left:5px;letter-spacing:.3px;vertical-align:1px;text-transform:uppercase}
.swatch-card .info .en{font-size:11px;color:var(--text3);margin-top:1px}
.swatch-card .info .meta{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.swatch-card .info .meta i{font-style:normal;font-size:11px;color:var(--text2);border:0.5px solid var(--border2);border-radius:999px;padding:2px 8px}

/* 筛选条 */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 0;margin-bottom:22px;border-bottom:0.5px solid var(--border)}
.filter-bar .f-label{font-size:12.5px;color:var(--text3);margin-right:2px}
.chip{border:0.5px solid var(--border2);background:var(--card);border-radius:999px;padding:6px 16px;font-size:12.5px;cursor:pointer;font-family:inherit;color:var(--text);transition:all .15s}
.chip:hover{background:var(--bg2)}
.chip.on{background:var(--text);color:#fff;border-color:var(--text)}

/* 高清图弹窗 */
.lightbox{display:none;position:fixed;inset:0;z-index:150;background:rgba(8,8,10,.88);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);align-items:center;justify-content:center;padding:40px;flex-direction:column;animation:lbFade .28s ease}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:78vh;max-height:78svh;max-height:calc(var(--vp-h,100vh) * 0.78);border-radius:22px;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:lbZoom .34s cubic-bezier(.2,.8,.25,1)}
.lightbox .lb-info{color:rgba(255,255,255,.72);font-size:14px;letter-spacing:.3px;margin-top:18px}
.lightbox .lb-acts{display:flex;gap:10px;margin-top:16px}
.lightbox .lb-close{position:absolute;top:22px;right:24px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
.lightbox .lb-close:hover{background:rgba(255,255,255,.28);transform:scale(1.06)}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbZoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

/* 对比栏 */
.compare-bar{position:fixed;bottom:0;left:0;right:0;z-index:95;background:rgba(251,251,253,.92);backdrop-filter:blur(20px);border-top:0.5px solid var(--border);display:none;padding:14px 24px}
.compare-bar.open{display:block}
.compare-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px}
.compare-items{display:flex;gap:10px;flex:1;overflow-x:auto}
.compare-item{width:74px;flex-shrink:0;text-align:center}
.compare-item .cimg{height:56px;border-radius:8px;background-size:cover;background-position:center;border:0.5px solid var(--border)}
.compare-item .cnm{font-size:10.5px;color:var(--text2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compare-item .x{font-size:10px;color:var(--red);cursor:pointer}
.compare-acts{display:flex;gap:10px;align-items:center;flex-shrink:0}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius-s);overflow:hidden;font-size:13.5px}
.tbl th{background:#f0f0f4;text-align:left;padding:12px 16px;font-weight:600;font-size:12.5px;color:var(--text2)}
.tbl td{padding:12px 16px;border-top:0.5px solid var(--border)}

/* FAQ */
.faq-item{border-bottom:0.5px solid var(--border)}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:18px 4px;font-size:15px;font-weight:500;cursor:pointer;font-family:inherit;color:var(--text);display:flex;justify-content:space-between;align-items:center}
.faq-q .arr{transition:transform .25s;font-size:13px;color:var(--text3)}
.faq-item.open .arr{transform:rotate(45deg)}
.faq-a{display:none;padding:0 4px 18px;font-size:14px;color:var(--text2);max-width:760px}
.faq-item.open .faq-a{display:block}

/* 找板 */
.finder-step{margin-bottom:18px}
.finder-step h4{font-size:14px;font-weight:600;margin-bottom:10px}
.color-opts{display:flex;flex-wrap:wrap;gap:10px}
.color-opt{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;width:64px}
.color-opt .dot{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);transition:all .15s}
.color-opt.on .dot{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
.color-opt .cn{font-size:11px;color:var(--text2)}
.texture-opts{display:flex;flex-wrap:wrap;gap:8px}
.finder-result .f-item{display:flex;align-items:center;gap:14px;padding:12px;border-bottom:0.5px solid var(--border)}
.finder-result .f-item:last-child{border-bottom:none}
.finder-result .f-item .fi{width:64px;height:64px;border-radius:10px;background-size:cover;background-position:center;flex-shrink:0}
.finder-result .f-item .fi .st{font-size:10px;color:var(--text3);text-align:center;line-height:64px}
.finder-result .f-item .fn{font-size:14px;font-weight:500}
.finder-result .f-item .fe{font-size:11.5px;color:var(--text3)}
.finder-result .f-item .fm{font-size:12px;color:var(--green);font-weight:500;margin-left:auto;flex-shrink:0}

/* 找板弹窗：排版 + 液态玻璃 */
.finder-color{display:flex;flex-wrap:wrap;gap:10px}
.finder-texture{display:flex;flex-wrap:wrap;gap:8px}
.modal-card.glass{background:rgba(255,255,255,.55);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:0.5px solid rgba(255,255,255,.7);box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.6),0 24px 60px rgba(0,0,0,.25)}
.finder-texture .chip{background:rgba(255,255,255,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(255,255,255,.5)}
.finder-texture .chip:hover{background:rgba(255,255,255,.72)}
.finder-texture .chip.on{background:var(--text);color:#fff;border-color:var(--text)}

/* 效果图联动 */
.effect-picker{display:flex;gap:8px;flex-wrap:wrap}
.effect-pick{border:0.5px solid var(--border2);background:var(--card);border-radius:999px;padding:7px 16px;font-size:13px;cursor:pointer;font-family:inherit;color:var(--text);transition:all .15s;display:flex;align-items:center;gap:8px}
.effect-pick .pd{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.effect-pick.on{background:var(--text);color:#fff;border-color:var(--text)}
.effect-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:18px}
.effect-card{border-radius:var(--radius-s);overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s;background:var(--card);border:0.5px solid var(--border)}
/* .effect-card 的悬停放大同样在文末 @media (hover:hover) 块里 */
.effect-card .ei{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--bg2)}
.effect-card .ei .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text3)}
.effect-card .eb{padding:10px 14px;display:flex;justify-content:space-between;align-items:center}
.effect-card .eb .en{font-size:13px;font-weight:500}
.effect-card .eb .eg{font-size:11.5px;color:var(--text3)}

/* 配置区（苹果式） */
.config-wrap{background:var(--bg2);border-bottom:0.5px solid var(--border)}
.config-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:stretch;padding:56px 24px}
.config-img{border-radius:var(--radius);overflow:hidden;cursor:zoom-in;position:relative;height:100%}
.config-img img{width:100%;height:100%;display:block;object-fit:cover}
.config-img .zoom-hint{position:absolute;bottom:12px;right:12px;background:rgba(255,255,255,.85);border-radius:999px;font-size:11.5px;padding:4px 12px;color:var(--text)}
.config-body .kicker{font-size:12px;color:var(--blue);font-weight:600;letter-spacing:1.2px}
.config-body h1{font-size:34px;font-weight:700;letter-spacing:-.4px;margin-top:6px}
.config-body h1 .cfg-id{font-size:14px;font-weight:500;color:var(--text3);letter-spacing:1.5px;vertical-align:middle;margin-left:9px;text-transform:uppercase}
.config-body .en{font-size:12.5px;color:var(--text3);letter-spacing:1.2px;margin-top:2px}
.config-body .desc{font-size:14px;color:var(--text2);margin-top:14px}
.spec-list{margin-top:16px;border:0.5px solid var(--border);border-radius:var(--radius-s);overflow:hidden}
.spec-row{display:flex;justify-content:space-between;padding:9px 14px;font-size:13px;border-bottom:0.5px solid var(--border)}
.spec-row:last-child{border-bottom:none}
.spec-row .k{color:var(--text3)}
.spec-row .v{font-weight:500}
.config-acts{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.config-acts .row{display:flex;gap:10px}
.config-acts .btn{flex:1}
.config-tip{font-size:12px;color:var(--text3);margin-top:12px;text-align:center}

/* 花色切换点 */
.swatch-switch{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.swatch-switch .ss{width:34px;height:34px;border-radius:50%;background-size:cover;background-position:center;border:2px solid var(--border);cursor:pointer;transition:all .15s}
.swatch-switch .ss.on{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}

/* 面包屑 */
.crumbs{font-size:12.5px;color:var(--text3);padding:14px 24px}
.crumbs a{color:var(--text3)}
.crumbs a:hover{color:var(--blue)}
.crumbs .sep{margin:0 7px}

/* 时间线 */
.timeline{position:relative;padding-left:28px}
.timeline:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;border-left:1.5px dashed #d2d2d7}
.tl-item{position:relative;padding-bottom:30px}
.tl-dot{position:absolute;left:-28px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--card);border:2.5px solid var(--blue)}
.tl-item .yr{font-size:12px;font-weight:600;color:var(--blue)}
.tl-item h4{font-size:15px;font-weight:600;margin-top:2px}
.tl-item p{font-size:13.5px;color:var(--text2);margin-top:4px}

/* 新闻/案例卡片 */
.post-card{overflow:hidden;transition:transform .3s,box-shadow .3s;cursor:pointer;display:block;color:var(--text)}
.post-card:hover{text-decoration:none}
.post-card .pi{aspect-ratio:16/10;background:var(--bg2);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px}
.post-card .pb{padding:16px 18px}
.post-card .pb .cat{font-size:11px;color:var(--blue);font-weight:600}
.post-card .pb h3{font-size:16px;font-weight:600;margin-top:6px;line-height:1.4}
.post-card .pb .date{font-size:12px;color:var(--text3);margin-top:8px}

/* 视频播放按钮（深色液态玻璃） */
.video-play{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:0.5px solid rgba(255,255,255,.4);background:rgba(20,20,20,.55);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.25),0 8px 24px rgba(0,0,0,.18);transition:transform .2s,background .2s;font-family:inherit}
.video-play:hover{background:rgba(255,255,255,.85);color:#1d1d1f;transform:scale(1.06)}

/* 页面头 */
.page-hero{background:var(--bg2);padding:72px 0 56px;text-align:center}
.page-hero h1{font-size:40px;font-weight:700;letter-spacing:-.5px}
.page-hero .sub{font-size:16px;color:var(--text2);margin-top:12px;max-width:620px;margin-left:auto;margin-right:auto}

/* 文章排版 */
.article{background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);padding:40px 44px;font-size:15px;line-height:1.9;color:var(--text)}
.article h2{font-size:22px;margin:28px 0 12px}
.article h3{font-size:18px;margin:22px 0 10px}
.article p{margin-bottom:14px}
.article img{border-radius:var(--radius-s);margin:16px 0}
.article ul{margin:0 0 14px 22px;list-style:disc}
.article .lead{font-size:16.5px;color:var(--text2)}

/* 法务 */
.legal-body{max-width:760px;margin:0 auto}
.legal-body h1{font-size:28px;margin-bottom:8px}
.legal-body .updated{font-size:12.5px;color:var(--text3);margin-bottom:26px}
.legal-body h2{font-size:18px;margin:26px 0 10px}
.legal-body p{font-size:14px;color:var(--text2);margin-bottom:12px}

/* 占位标记 */
.ph-mark{display:inline-block;font-size:10.5px;color:var(--amber);background:var(--amber-bg);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
/* 法律页底部说明框 */
.legal-body .note{font-size:12.5px;color:var(--text3);background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--radius-s);padding:14px 16px;margin-top:30px;line-height:1.7}
.placeholder-block{display:flex;align-items:center;justify-content:center;background:var(--bg2);border:0.5px dashed var(--border2);border-radius:var(--radius-s);color:var(--text3);font-size:13px;min-height:120px}

/* 经销商/搜索结果 */
.result-card{display:flex;gap:16px;align-items:center;padding:16px;border-bottom:0.5px solid var(--border)}
.result-card:last-child{border-bottom:none}
.result-card .ri{width:88px;height:88px;border-radius:var(--radius-s);background-size:cover;background-position:center;background-color:var(--bg2);flex-shrink:0}
.result-card .rb .rt{font-size:15px;font-weight:600}
.result-card .rb .rd{font-size:13px;color:var(--text2);margin-top:4px}

/* 响应式 */
@media(max-width:768px){
  #ddRoot{display:none}
  /* —— 移动端导航：仿 PC 样式竖排（纯白面板，与 PC 下拉一致） —— */
  .nav-links{position:fixed;top:52px;left:0;right:0;flex-direction:column;gap:0;padding:12px 24px 24px;display:none;overflow-y:auto;max-height:calc(100vh - 52px);max-height:calc(100svh - 52px);max-height:calc(var(--vp-h,100vh) - 52px);background:#fff;border-bottom:0.5px solid var(--border);box-shadow:0 12px 36px rgba(0,0,0,.08)}
  .nav-links.open{display:flex;animation:navDrop .28s cubic-bezier(.22,1,.36,1)}
  @keyframes navDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
  .nav-item{width:100%}
  .nav-item + .nav-item > a{border-top:0.5px solid rgba(0,0,0,.05)}
  .nav-item > a{display:flex;justify-content:space-between;align-items:center;padding:14px 2px;width:100%;font-size:16px;color:var(--text)}
  .nav-item > a:hover{color:var(--text)}
  .nav-item.no-dd > a:after{content:none}
  .nav-item > a:after{content:"+";color:var(--text2);font-size:17px;font-weight:300}
  .nav-item.open > a:after{content:"−"}
  .nav-item.open > a{color:var(--text);font-weight:600}
  .nav-links a.on{color:var(--text);font-weight:600}
  /* 展开的二级：与 PC 下拉完全同规格（12px 栏目题 + 18px/600 链接，悬停蓝） */
  .dd{position:static;transform:none;background:transparent;backdrop-filter:none;border:none;box-shadow:none;padding:0 0 12px;opacity:1;visibility:hidden;display:none;transition:none}
  .nav-item.open .dd{display:block;visibility:visible;transform:none;animation:navFade .2s ease}
  @keyframes navFade{from{opacity:0}to{opacity:1}}
  .dd-cols{grid-template-columns:1fr !important;gap:18px;padding:0}
  .dd-col-h{font-size:14px;color:var(--text2);font-weight:400;margin-bottom:14px;letter-spacing:.2px}
  .dd-col-link{font-size:19px;font-weight:600;color:var(--text);padding:5px 0;line-height:1.35}
  .dd-col-link:hover{color:var(--blue)}
  /* —— 右侧工具按钮：苹果极简裸图标（无底、无边框、统一点击区） —— */
  .nav-search-m{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;background:none;box-shadow:none;color:var(--text);cursor:pointer;flex-shrink:0}
  .nav-cart{width:34px;height:34px;padding:0;justify-content:center;gap:0;background:none;border:none;box-shadow:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-cart:hover{background:none}
  .nav-cart:active,.nav-search-m:active,.nav-burger:active{opacity:.5}
  .nav-cart .nc-txt{display:none}
  .nav-cart .nc-ic{display:flex;align-items:center;justify-content:center}
  .cart-badge{top:-2px;right:-2px}
  .nav-burger{display:flex;width:34px;height:34px;align-items:center;justify-content:center;background:none;border:none;padding:0;color:var(--text);cursor:pointer}
  .nav-burger line{transition:transform .25s ease;transform-origin:12px 12px}
  .nav.menu-open .nav-burger line:nth-of-type(1){transform:translateY(3px) rotate(45deg)}
  .nav.menu-open .nav-burger line:nth-of-type(2){transform:translateY(-3px) rotate(-45deg)}
  /* hero 顶部透明态：图标变白 + 轻投影保证可见（不再用玻璃底胶囊） */
  .nav.nav-transparent .nav-search-m,
  .nav.nav-transparent .nav-cart,
  .nav.nav-transparent .nav-burger{background:none;border:none;box-shadow:none;color:#fff;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
  .nav.nav-transparent .nav-cart:hover{background:none}
  .nav-search{display:none}
  .nav-brand img{height:32px}
  /* 案例视频板块：移动端只保留前 3 个 */
  #homeVideos .grid > .card:nth-child(n+4){display:none}
  .g2,.g3,.g4{grid-template-columns:1fr}
  section{padding:56px 0}
  .sec-title{font-size:26px}
  .hero h1{font-size:34px}
  .hero-full h1{font-size:38px}
  .config-grid{grid-template-columns:1fr;gap:28px;padding:40px 24px}
  .config-body h1{font-size:26px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .article{padding:24px 20px}
  .hero{padding:72px 0 56px}
  /* 首页 hero 铺满整屏：先扣除被 margin-top:-53px 拉上去的高度，内容 flex 居中随之自然下移 */
  .hero-full{min-height:calc(100vh + 53px);min-height:calc(100svh + 53px);min-height:calc(var(--vp-h,100vh) + 53px)}
}

/* ---------- 美学志 ---------- */
.j-card .pi{width:100%;height:auto;aspect-ratio:16/10}   /* 容器固定 16:10；不可写 height:300px —— 那会让 aspect-ratio 反推宽度=480px 而溢出卡片 */
.j-img{max-width:430px;margin:0 auto 44px}
.j-img img{width:100%;border-radius:16px;cursor:zoom-in;box-shadow:0 10px 30px rgba(0,0,0,.1);display:block}
.j-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:120;display:none;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}
.j-lightbox.open{display:flex}
.j-lightbox img{max-width:100%;max-height:94vh;max-height:94svh;max-height:calc(var(--vp-h,100vh) * 0.94);border-radius:8px}
/* 移动端：图片左右基本填满（保留 .wrap 的 24px 边距，不再受桌面 430px 限制） */
@media(max-width:900px){.j-img{max-width:none;margin:0 0 28px}}
@media(max-width:768px){.j-img{margin-bottom:28px}}   /* 移动端不再给 .j-card .pi 写死 height —— 一旦 width/height 都有确定值，aspect-ratio 就会失效，卡片比例又变成自适应 */

/* ============ 文章页排版（苹果风格：大留白 / 克制层级 / 长文易读） ============ */
.article{max-width:780px;margin:0 auto;background:var(--card);border:0.5px solid var(--border);border-radius:20px;padding:56px 64px 48px;font-size:16.5px;line-height:1.9;color:var(--text);letter-spacing:.1px}
.article .a-cat{font-size:12px;color:var(--blue);font-weight:600;letter-spacing:1.6px}
.article h1{font-size:34px;font-weight:700;letter-spacing:-.6px;line-height:1.28;margin:10px 0 14px}
.article .a-meta{font-size:13px;color:var(--text3);letter-spacing:.2px;padding-bottom:22px;border-bottom:0.5px solid var(--border)}
.article img.hero{width:100%;border-radius:16px;margin:26px 0 6px;cursor:zoom-in}
.article .lead{font-size:18px;line-height:1.85;color:var(--text2);font-weight:300;margin:24px 0 6px}
.article h2{font-size:21px;font-weight:600;letter-spacing:-.2px;line-height:1.45;margin:46px 0 16px}
.article p{margin:0 0 18px}
.article strong{font-weight:600;color:var(--text)}
.article ul{list-style:none;margin:0 0 22px;padding:0}
.article ul li{position:relative;padding-left:22px;margin-bottom:14px}
.article ul li:before{content:"";position:absolute;left:3px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.85}
.article .a-foot{margin-top:34px;padding-top:26px;border-top:0.5px solid var(--border)}
/* 文末备注：脚注风格 —— 细分隔线 + 小号灰字 + 手写编号（非浏览器默认序号样式） */
.article .a-notes{margin-top:30px;padding-top:16px;border-top:0.5px solid var(--border)}
.article .a-notes-t{font-size:12px;font-weight:600;color:var(--text2);letter-spacing:1px;margin-bottom:8px}
.article .a-notes ol{list-style:none;counter-reset:note;padding:0;margin:0}
.article .a-notes li{position:relative;counter-increment:note;padding-left:20px;font-size:12px;color:var(--text3);line-height:1.8;margin:5px 0}
.article .a-notes li:before{content:counter(note) ".";position:absolute;left:0;color:var(--text3)}
@media (max-width:640px){
  .article{padding:30px 22px 26px;border-radius:16px;font-size:16px}
  .article h1{font-size:25px}
  .article h2{font-size:19px;margin-top:34px}
  .article .lead{font-size:16.5px}
}

/* ============================================================
   动画系统
   三条原则：
   1) 「初始隐藏」全部挂在 html.anim-ready 下 —— 这个类只在 IntersectionObserver
      可用、且用户未开启「减弱动态效果」时由 JS 添加。条件不满足就不加，
      内容保持可见，不会出现「动画没跑、内容也不见了」。
   2) 一律使用 translate / scale 这两个「独立变换属性」，不用 transform。
      transform 是单一属性，动画一旦占用它，就会盖掉元素自身的 hover 位移
      （.series-card:hover / .post-card:hover / .sw-cell:hover 等，它们的特异性
      低于带 html.anim-ready 前缀的规则）；而 translate / scale 与 transform 叠加，
      两者互不干扰。
   3) 只动 transform / translate / scale / opacity（走 GPU 合成），不碰 top/left/width。
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 顶部导航：滚动后玻璃加深（不依赖动画能力，独立生效）---------- */
.nav{
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,
             backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease;
}
.nav.nav-scrolled{
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:rgba(30,20,10,.07);
  box-shadow:0 1px 22px rgba(30,20,10,.07);
}
/* 首页顶部透明态(阈值 10px)与滚动态(阈值 8px)会在 8~10px 短暂并存，
   背景改纯白后那一瞬会变成白底白字/白 logo，仅在两者并存时纠正为深色文字与原始 logo */
.nav.nav-transparent.nav-scrolled .nav-links a,
.nav.nav-transparent.nav-scrolled .nav-links a.on{color:var(--text2);text-shadow:none}
.nav.nav-transparent.nav-scrolled .nav-links a.on{color:var(--text)}
.nav.nav-transparent.nav-scrolled .nav-brand img{filter:none}

/* translate / scale 这两个独立变换属性从 Chrome 104 / Safari 14.1 起可用。
   不支持时整块跳过：不设「初始隐藏」，内容直接可见，
   只保留第 362 行 .reveal 的纯 CSS 淡入作为兜底。 */
@supports (translate: 0 0){

  /* ---------- 滚动驱动：JS 只写 --p，动画表现全部在 CSS 层完成 ---------- */

  /* 首屏主视觉：下滚时缓慢推进（镜头感），文字层以更快节奏上浮淡出 */
  html.anim-ready [data-anim="hero"] .bg{
    scale:calc(1 + var(--p,0) * .075);
    transform-origin:50% 42%;
    will-change:scale;
  }
  html.anim-ready [data-anim="hero"] .in{
    translate:0 calc(var(--p,0) * -72px);
    opacity:calc(1 - var(--p,0) * 1.3);
    will-change:translate,opacity;
  }

  /* 媒体容器：刚进视口时放大 4.5%，完全露出后回到原尺寸 */
  html.anim-ready [data-anim="zoom"]{
    scale:calc(1.045 - var(--p,0) * .045);
  }

  /* 视差：--p 为像素位移，由 JS 按「元素中心相对视口中心的偏移 × data-speed」写入。
     translate 独立属性与元素自身的 transform 相互叠加、互不覆盖；
     纵向位移的余量由下面的 scale 提供。
     ⚠ 但独立 scale 作用在 transform 之外，会把 transform 里的位移一并放大 1.14 倍 ——
     所以 .series-card .sv img 不能用 transform:translateX(-50%) 居中，
     已改为 object-fit:cover + object-position:center（见该规则处的说明）。 */
  html.anim-ready [data-anim="parallax"]{
    translate:0 calc(var(--p,0) * 1px);
  }
  html.anim-ready .series-card .sv img[data-anim="parallax"]{
    scale:1.14;
  }

  /* ---------- 标题逐行浮现（kicker → 标题 → 副标题 依次出现）---------- */
  html.anim-ready .sec-head > *{
    opacity:0;
    translate:0 16px;
    transition:opacity .68s var(--ease-out),translate .68s var(--ease-out);
  }
  html.anim-ready .sec-head.in > *{opacity:1;translate:0 0}
  html.anim-ready .sec-head.in > *:nth-child(2){transition-delay:.07s}
  html.anim-ready .sec-head.in > *:nth-child(3){transition-delay:.14s}
  html.anim-ready .sec-head.in > *:nth-child(4){transition-delay:.21s}
  html.anim-ready .sec-head.in > *:nth-child(5){transition-delay:.28s}

  /* ---------- 卡片逐张错峰 ----------
     用 nth-child 而不是 JS 写 --i：色卡中心/案例/新闻的卡片是脚本异步渲染的，
     nth-child 对后插入的节点同样生效，不依赖渲染时机。
     注意：容器加了 .stagger 后，子元素就不要再挂 .reveal，两套隐藏规则会互相打架。 */
  /* 入场改用 animation 而不是 transition。
     原因：同一元素上的 transition 只能有一套，卡片的悬停过渡会被这里的入场
     transition 覆盖（这一直是卡片 hover "瞬间跳变、很生硬"的根源）。
     animation 与 transition 互不干扰，两者可以并存。 */
  html.anim-ready .stagger > *{
    opacity:0;
    translate:0 22px;
  }
  html.anim-ready .stagger.in > *{
    animation:staggerIn .7s var(--ease-out) both;
  }
  html.anim-ready .stagger.in > *:nth-child(1){animation-delay:0s}
  html.anim-ready .stagger.in > *:nth-child(2){animation-delay:.06s}
  html.anim-ready .stagger.in > *:nth-child(3){animation-delay:.12s}
  html.anim-ready .stagger.in > *:nth-child(4){animation-delay:.18s}
  html.anim-ready .stagger.in > *:nth-child(5){animation-delay:.24s}
  html.anim-ready .stagger.in > *:nth-child(6){animation-delay:.30s}
  html.anim-ready .stagger.in > *:nth-child(7){animation-delay:.36s}
  html.anim-ready .stagger.in > *:nth-child(8){animation-delay:.42s}
  html.anim-ready .stagger.in > *:nth-child(9){animation-delay:.48s}
  html.anim-ready .stagger.in > *:nth-child(n+10){animation-delay:.54s}
  @keyframes staggerIn{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

  /* ---------- .reveal 改为真正「进视口才触发」----------
     原来 .reveal 是 animation:rise 在页面加载时立刻播放，首屏以下的元素在用户滚到
     之前动画早就跑完了，等于没做。这里改成由 IntersectionObserver 加 .in 触发。
     第 362 行的纯 CSS animation 保留，作为无 JS / 不支持 IO / 不支持独立变换时的兜底。 */
  html.anim-ready .reveal{
    animation:none;
    opacity:0;
    translate:0 20px;
    transition:opacity .72s var(--ease-out),translate .72s var(--ease-out);
  }
  html.anim-ready .reveal.in{opacity:1;translate:0 0}
  html.anim-ready .reveal-d1{transition-delay:.09s}
  html.anim-ready .reveal-d2{transition-delay:.18s}
  html.anim-ready .reveal-d3{transition-delay:.27s}
  html.anim-ready .reveal-d4{transition-delay:.36s}

  /* ---------- 子页面页头：加载时逐行浮起（页头就在首屏，不走滚动触发）---------- */
  html.anim-ready .page-hero .wrap > *{
    animation:rise .72s var(--ease-out) both;
  }
  html.anim-ready .page-hero .wrap > *:nth-child(2){animation-delay:.08s}
  html.anim-ready .page-hero .wrap > *:nth-child(3){animation-delay:.16s}
  html.anim-ready .page-hero .wrap > *:nth-child(4){animation-delay:.24s}
}

/* ---------- 无障碍降级：系统开启「减弱动态效果」时全部静态 ---------- */
@media (prefers-reduced-motion: reduce){
  [data-anim="hero"] .bg,
  [data-anim="hero"] .in,
  [data-anim="zoom"],
  [data-anim="parallax"],
  .series-card .sv img[data-anim="parallax"]{
    translate:none !important;
    scale:none !important;
    opacity:1 !important;
    will-change:auto;
  }
  .sec-head > *,
  .stagger > *,
  .reveal,
  .page-hero .wrap > *{
    opacity:1 !important;
    translate:none !important;
    transition:none !important;
    animation:none !important;
  }
  .reveal-d1,.reveal-d2,.reveal-d3,.reveal-d4{
    transition-delay:0s !important;
    animation-delay:0s !important;
  }
  html{scroll-behavior:auto}
}

/* ---------- 卡片悬停：轻微放大（苹果式柔和过渡）----------
   ⚠ 必须放在文件末尾：与 .series-card 等基础 transition 特异性相同，靠源顺序胜出；
     放到基础规则之前会被反过来覆盖（踩过这个坑）。
   曲线 cubic-bezier(.28,.11,.32,1) 是苹果官网常用的一条：起手轻快、中段平缓、
   收尾极慢 —— 就是那种"柔柔地停住"的手感。**刻意不用带回弹过冲的曲线**
   （曾用 cubic-bezier(.34,1.45,.64,1)，落定时会冲过目标再弹回来，观感生硬）。
   时长 .5s：比常见的 .3s 长，慢下来才从容。
   放大仅 1.02：幅度克制，靠阴影加深补足"浮起"的存在感，不做夸张缩放。
   限定「有精确指针 + 未要求减少动效」，避免触屏点按后 hover 态"粘住"。 */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .series-card,.swatch-card,.effect-card,.post-card{
    transition:transform .5s cubic-bezier(.28,.11,.32,1),box-shadow .5s cubic-bezier(.28,.11,.32,1);
  }
  .series-card:hover,.swatch-card:hover,.effect-card:hover,.post-card:hover{
    transform:scale(1.02);box-shadow:var(--shadow-hover);
  }
}

/* ---------- 五大季入口卡（首页 + 美学志页共用） ---------- */
.se-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.se-item{display:block;color:var(--text)}
.se-item .cv{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--bg2);box-shadow:0 6px 18px rgba(30,20,10,.10);transition:transform .5s cubic-bezier(.28,.11,.32,1),box-shadow .5s cubic-bezier(.28,.11,.32,1)}
@media (hover:hover) and (prefers-reduced-motion: no-preference){.se-item:hover .cv{transform:scale(1.02);box-shadow:var(--shadow-hover)}}
.se-item .cv img{width:100%;height:100%;object-fit:cover;display:block}
.se-item h4{font-size:14.5px;font-weight:600;margin:10px 0 0}
.se-item .en{font-size:10.5px;color:var(--text3);letter-spacing:.6px;margin-top:3px}
.se-item .ct{font-size:11.5px;color:var(--text3);margin-top:5px}
@media(max-width:1000px){.se-list{display:flex;overflow-x:auto;gap:12px;padding-bottom:10px}.se-item{flex:0 0 168px}}

/* ================= 全站观感统一（2026-09-21） =================
   ① 页面过渡：站内跳转时 main 淡入 + 轻微上浮，消除硬切的白闪。
      由 <head> 极早期脚本在同源 referrer 时挂 html.page-in，
      因此不会出现"先显示再淡出"的反向闪烁。
   ② 图片加载淡入（.imgfade）
   ③ 卡片悬停：容器不动、内部图片微放大（苹果做法）
   ④ 列表/筛选切换淡入（.swap-in）
   ⑤ 回到顶部按钮
   以下规则放在文件末尾，用于覆盖前面各卡片自带的容器缩放。 */

@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* page-prep：先保持不可见（避免"先显示再淡出"）；
   page-in：DOMContentLoaded 后由脚本挂上，动画统一从这一刻起跑——
   否则各页解析速度不同，有的页动画在可见之前就播完了（朴绘页就是这种情况）。 */
html.page-prep main{opacity:0}
html.page-in main{animation:pageIn .45s cubic-bezier(.28,.11,.32,1) both}

/* 图片淡入：只对"尚未加载完"的图生效，已缓存的图直接可见，不会闪 */
.imgfade{opacity:0;transition:opacity .5s ease}
.imgfade.on{opacity:1}

@keyframes swapIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 权重写成 html .swap-in：否则会被上面 html.anim-ready .reveal{animation:none} 压掉
   （自动补齐入场时会给列表容器也挂上 .reveal） */
html.anim-ready .swap-in{animation:swapIn .24s cubic-bezier(.28,.11,.32,1) both}

/* 卡片悬停：容器只加阴影，图片内部放大 1.045 —— 容器不动，观感更稳 */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .series-card .sv img,
  .swatch-card img,
  .se-item .cv img,
  .issue-card .cv img,
  .effect-card .ei,
  .post-card .pi{transition:transform .6s cubic-bezier(.28,.11,.32,1)}
  .series-card:hover .sv img,
  .swatch-card:hover img,
  .se-item:hover .cv img,
  .issue-card:hover .cv img,
  .effect-card:hover .ei,
  .post-card:hover .pi{transform:scale(1.045)}
  /* 覆盖前面「整卡缩放」的旧规则 */
  .series-card:hover,.swatch-card:hover,.effect-card:hover,.post-card:hover{transform:none}
  .se-item:hover .cv,.issue-card:hover .cv{transform:none}
}

/* 回到顶部 */
#toTop{
  position:fixed;right:22px;bottom:26px;z-index:80;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(0,0,0,.07);box-shadow:0 4px 18px rgba(30,20,10,.14);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text2);opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .35s var(--he),transform .35s var(--he);
}
#toTop.on{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{color:var(--blue);box-shadow:0 6px 22px rgba(30,20,10,.2)}
@media(max-width:768px){#toTop{right:14px;bottom:16px;width:40px;height:40px}}

/* ================= 换行观感：消灭「孤字换行」 =================
   问题：标题宽度卡在临界点时，最后一个字被挤到第二行（不同机型换行位置还不一样）。
   ① text-wrap:balance —— 让浏览器均衡各行长度，标题两行时不会一个字独占。
      浏览器只对数行以内的短文本生效，对长正文会自动忽略，所以只加给标题。
   ② text-wrap:pretty —— 避免正文/副标题的最后一行只剩一两个字（孤行）。
   两者都是渐进增强：Chrome 114+ / Safari 17.4+ / 新版微信 XWEB 支持，
   老浏览器不认识这行就跳过，退回现在的样子，不会更糟。 */
h1,h2,h3,h4,
.sec-title,.hero-full h1,.hero h1,.page-hero h1,.season-hero h1,.config-body h1,
.card h3,.issue-card .bd h3,.se-item h4,.swatch-card .nm,.j-kicker{
  text-wrap:balance;          /* 均衡各行长度，杜绝末行孤字 */
  word-break:keep-all;        /* 优先在标点处断行，不把词组拆散（如「看得见的效果」不被切成「看/得见的效果」）*/
  overflow-wrap:anywhere;     /* 兜底：整句无标点时仍可强行断行，绝不会撑破屏幕 */
}
p,.sec-sub,.lead,.j-body p,.issue-card .bd .ld,.se-item .ct,.date{
  text-wrap:pretty;
}

/* ================= 系列页 hero 开场（与页面过渡同步起跑） =================
   三个系列页原本各写各的：墨绘的标识会自己淡入，朴绘的却直接出现，观感不齐。
   这里统一：页面过渡开始后，标识 → 定位语 → 描述 → 按钮 依次上浮淡入。
   挂在 html.page-in 上，保证动画在「页面就绪」那一刻才起跑，不会被提前播掉。 */
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.page-in .series-hero .hero-inner > *,
html.page-in .series-hero > .hero-inner > *{animation:heroRise .72s cubic-bezier(.28,.11,.32,1) both}
html.page-in .series-hero .hero-inner > *:nth-child(1){animation-delay:.06s}
html.page-in .series-hero .hero-inner > *:nth-child(2){animation-delay:.16s}
html.page-in .series-hero .hero-inner > *:nth-child(3){animation-delay:.26s}
html.page-in .series-hero .hero-inner > *:nth-child(4){animation-delay:.36s}
html.page-in .series-hero .hero-inner > *:nth-child(n+5){animation-delay:.44s}

/* ================= 标题标点：移动端隐藏，PC 保留 =================
   · 中间的逗号/顿号/句号等（.t-punc-mid，如「设计思路，看得见的效果」里的逗号）
     → 移动端替换为换行（标点本身不可见）：display:block 把前后文字分成两行，
       height:0 + overflow:hidden + visibility:hidden 让标点不占空间、不可见。
       不能只 display:none——那会把「两句话」拼成一句（2026-09-22 用户否决）。
   · 末尾标点（.t-punc，如「想亲眼看看我们的工厂？」的「？」）
     → 移动端仅在标题真的折成两行及以上时才隐藏（360px 下实测会独占一整行）。
   .tp-fit / .tp-hide / .t-punc / .t-punc-mid 均由 main.js 运行时添加，HTML 不写死。 */
@media(max-width:768px){
  .tp-fit > .t-punc-mid{display:block;height:0;overflow:hidden;visibility:hidden}
  .tp-fit.tp-hide > .t-punc{display:none}
}

/* 括号短语整体不拆行：由 main.js 的 nbWrap() 给「…」/『…』打上 .nb 标记。
   短语比容器还宽时脚本会改成 white-space:normal 放行，避免撑破布局。 */
.nb{white-space:nowrap}