html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.mobile-tabbar{height:calc(64px + env(safe-area-inset-bottom))!important;min-height:calc(64px + env(safe-area-inset-bottom))!important;max-height:calc(64px + env(safe-area-inset-bottom))!important;padding-bottom:env(safe-area-inset-bottom)!important}
.tabbar-item{font-size:10px!important}
.tabbar-item span{font-size:10px!important;line-height:14px!important}
.tabbar-item svg{width:22px!important;height:22px!important;flex:0 0 22px!important}
.tabbar-badge{min-width:16px!important;height:16px!important;font-size:10px!important}
:root{--font-display:'Playfair Display','Noto Serif SC',Georgia,serif;--font-sans:'Inter','Noto Serif SC',-apple-system,sans-serif;--text-on-dark:#fff;--text-on-dark-soft:rgba(255,255,255,.75);--text-on-dark-muted:rgba(255,255,255,.5);--gold-500:#D4B978;--gold-400:#E0CB96}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 48px;height:92px;min-height:92px;max-height:92px;display:flex;align-items:center;justify-content:space-between;transition:background-color .3s ease,border-color .3s ease,backdrop-filter .3s ease;background:transparent;pointer-events:none}.nav a,.nav button{pointer-events:auto}.nav.scrolled{background:rgba(6,14,28,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);height:76px;border-bottom:1px solid rgba(201,169,98,.12)}.nav-logo{line-height:1.8;font-family:var(--font-display,Georgia,'Noto Serif SC',serif);font-size:28px;font-weight:700;letter-spacing:.25em;color:var(--text-on-dark,var(--text,#fff));display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-decoration:none}.nav-logo span{line-height:1.8;font-family:var(--font-sans,Inter,'Noto Sans SC',sans-serif);font-size:9px;font-weight:400;letter-spacing:.4em;color:var(--gold-400,var(--gold,#e0cb96));text-transform:uppercase}.nav-links{display:flex;align-items:center;gap:48px;list-style:none;margin:0;padding:0}.nav-links a{font-family:var(--font-sans,Inter,sans-serif);font-size:12px;color:var(--text-on-dark-soft,rgba(255,255,255,.65));text-decoration:none}.nav-cta{font-family:var(--font-sans,Inter,sans-serif);font-size:11px;font-weight:500;letter-spacing:.15em;padding:14px 32px;border:1px solid var(--gold-500,var(--gold,#e0cb96));color:var(--gold-400,var(--gold,#e0cb96));border-radius:1px;text-decoration:none}.nav-version-toggle{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--font-sans,Inter,sans-serif);letter-spacing:.08em;padding:12px 20px;color:var(--gold-400,var(--gold,#e0cb96));background:rgba(201,169,98,.08);border:1px solid rgba(201,169,98,.3);border-radius:24px;margin-left:12px;text-decoration:none}.nav-version-toggle svg{width:14px;height:14px}.nav-lang-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;margin-left:8px;border:1px solid rgba(201,169,98,.3);border-radius:50%;color:var(--gold-400,var(--gold,#e0cb96));background:rgba(201,169,98,.08);font:600 11px var(--font-sans,Inter,sans-serif);cursor:pointer}.mobile-tabbar{display:none}
@media(max-width:768px){.nav{padding:0 24px;height:64px!important;min-height:64px!important;max-height:64px!important}.nav.scrolled{height:64px}.nav-logo{font-size:20px;line-height:1.8;letter-spacing:.2em}.nav-logo span{font-size:7px;line-height:1.8;letter-spacing:.3em}.nav-links,.nav-cta{display:none}.nav-version-toggle{margin-left:8px;padding:8px 12px;font-size:10px}.nav-version-toggle span.label-text{display:none}.nav-version-toggle svg{width:16px;height:16px}.nav-lang-toggle{width:32px;height:32px;font-size:10px;margin-left:6px}.mobile-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;height:calc(64px + env(safe-area-inset-bottom));background:rgba(6,14,28,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(201,169,98,.15);z-index:200;padding-bottom:env(safe-area-inset-bottom)}.tabbar-item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-on-dark-muted,rgba(255,255,255,.5));font-family:var(--font-sans,Inter,'Noto Sans SC',sans-serif);font-size:10px;text-decoration:none;cursor:pointer}.tabbar-item svg{width:22px;height:22px}.tabbar-item--active{color:var(--gold-400,var(--gold,#e0cb96))}.tabbar-badge{position:absolute;top:8px;right:calc(50% - 18px);min-width:16px;height:16px;background:#e54b4b;color:#fff;font:600 10px/16px var(--font-sans,Inter,sans-serif);border-radius:8px;display:flex;visibility:hidden;align-items:center;justify-content:center;padding:0 4px}.tabbar-badge:not(:empty){visibility:visible}body{padding-bottom:64px}}
body.bright .nav.scrolled{background:rgba(255,255,255,.95);border-bottom-color:rgba(0,87,184,.12)}body.bright .nav-logo{color:#0057b8}body.bright .nav-logo span{color:#2e7d32}body.bright .mobile-tabbar{background:rgba(255,255,255,.97);border-top-color:rgba(0,87,184,.12)}body.bright .tabbar-item{color:#78909c}body.bright .tabbar-item--active{color:#0057b8}
.nav,.mobile-tabbar,.tabbar-item,.tabbar-item svg{box-sizing:border-box}
@media(max-width:768px){.nav,.mobile-tabbar{height:64px;min-height:64px;max-height:64px}.tabbar-item{min-width:0}.tabbar-item svg{flex:0 0 22px}}
.mobile-tabbar,.tabbar-item,.tabbar-item svg,.tabbar-badge{transition:none!important;transform:none!important;animation:none!important}

.nav,.nav-logo,.nav-logo span,.nav-lang-toggle,.nav-version-toggle{transition:none!important;transform:none!important;animation:none!important}
.nav{transition:background-color .3s ease,border-color .3s ease!important}
body.bright-hero .nav:not(.scrolled) .nav-logo{color:#fff}body.bright-hero .nav:not(.scrolled) .nav-logo span{color:#e0cb96}
/* ==== bright palette alignment (mockup bright) ==== */
body.bright{--bright-ink:#1a2b3d;--bright-deep:#0a4d8c;--bright-blue:#0057b8;--bright-link:#0066cc;--bright-muted:#78909c;--bright-soft:#37474f;--bright-line:rgba(0,87,184,.12);--bright-sans:Manrope,Inter,-apple-system,'Noto Sans SC',sans-serif;font-family:var(--bright-sans)}
body.bright .cart-header,body.bright .msg-header,body.bright .cart-item,body.bright .msg-item,body.bright .cart-footer,body.bright .msg-tabs,body.bright .cart-promo,body.bright .qty-stepper{border-color:var(--bright-line)}
body.bright .cart-header h1,body.bright .msg-header h1,body.bright .cart-item-name,body.bright .msg-item-title,body.bright .profile-card-head,body.bright .cart-edit,body.bright .msg-read-all{font-family:var(--bright-sans);color:var(--bright-deep);font-weight:700}
body.bright .cart-edit,body.bright .msg-read-all{color:var(--bright-link);font-weight:600;font-size:13px}
body.bright .cart-item-price,body.bright .cart-total-price,body.bright .profile-stat-num{font-family:var(--bright-sans);font-weight:800;background-image:linear-gradient(90deg,#0066cc,#388e3c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.bright .cart-checkout-btn{background:linear-gradient(135deg,#ffb300,#ff8f00);color:#0d3b66;font-family:var(--bright-sans);font-weight:500}
body.bright .cart-item-check--checked{background:linear-gradient(135deg,#1976d2,#388e3c);border-color:transparent}
body.bright .cart-item-check--checked::after{border-left-color:#fff;border-bottom-color:#fff}
body.bright .qty-stepper{background:#fff;border-color:rgba(0,87,184,.16)}
body.bright .qty-btn{color:var(--bright-link);font-weight:600}
body.bright .qty-num{color:var(--bright-deep);font-family:var(--bright-sans);font-weight:600;border-left-color:rgba(0,87,184,.1);border-right-color:rgba(0,87,184,.1)}
body.bright .cart-item-spec,body.bright .msg-item-time,body.bright .profile-stat-label{font-family:var(--bright-sans);color:var(--bright-muted)}
body.bright .msg-item-text,body.bright .cart-total-label{font-family:var(--bright-sans);color:var(--bright-soft)}
body.bright .msg-item-icon{background:linear-gradient(135deg,rgba(30,136,229,.12),rgba(76,175,80,.12));color:var(--bright-link)}
body.bright .msg-tabs{background:#fff}
body.bright .msg-tab{font-family:var(--bright-sans);color:var(--bright-muted);font-weight:600}
body.bright .msg-tab.active{color:var(--bright-blue)}
body.bright .msg-tab-badge{background:#e54b4b}
body.bright .cart-promo{background:linear-gradient(90deg,#e8f5e9,#e3f2fd);border-color:rgba(0,87,184,.16);color:var(--bright-blue);font-family:var(--bright-sans)}
body.bright .cart-item-img{background:#eef2f7}
body.bright .cart-footer{background:#fff;border-top-color:rgba(0,87,184,.1)}
body.bright .profile-header{background:linear-gradient(135deg,#0057b8 0%,#1976d2 50%,#388e3c 100%)}
body.bright .profile-info h2{color:#fff;font-family:var(--bright-sans);font-weight:700}
body.bright .profile-info p{color:rgba(255,255,255,.85);font-family:var(--bright-sans)}
body.bright .profile-vip{background:linear-gradient(135deg,#ffd54f,#ffc107);color:#0d3b66;font-family:var(--bright-sans);font-weight:700}
body.bright .profile-stats,body.bright .profile-card{background:#fff;border-color:var(--bright-line)}
body.bright .profile-stat-label,body.bright .tool-item,body.bright .order-icon-item{font-family:var(--bright-sans)}
body.bright .order-icon-wrap,body.bright .tool-icon{color:var(--bright-link)}
body.bright .tool-icon{background:linear-gradient(135deg,rgba(30,136,229,.1),rgba(76,175,80,.1))}
body.bright .order-icon-wrap{background:transparent}
body.bright .profile-logout{background:#fff;border-color:rgba(0,87,184,.16);color:#37474f;font-family:var(--bright-sans);font-weight:500}
body.bright .mobile-tabbar{background:rgba(255,255,255,.9);border-top-color:rgba(0,87,184,.1)}
body.bright .tabbar-item{color:#607d8b}
body.bright .tabbar-item--active{color:var(--bright-blue);font-weight:600;background:linear-gradient(180deg,transparent,rgba(25,118,210,.12))}
body.bright:not(.bright-hero):not(.nav-on-color) .nav:not(.scrolled){background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body.bright .cart-header{background:rgba(255,255,255,.92)}
body.bright .msg-page{background:#fff}
body.bright .cart-list{background:#fff}
body.bright .msg-tab.active:after{width:24px;height:3px;border-radius:2px;background:linear-gradient(90deg,#1976d2,#388e3c)}
body.bright .cart-promo strong{color:#1b5e20;font-weight:600}
body.bright .profile-avatar{border-color:#ffd54f}
body.bright .profile-stats,body.bright .profile-card{box-shadow:0 4px 16px rgba(0,102,179,.06)}
body.bright .tool-item[href*="app=h5distribution"] .tool-icon,body.bright .tool-item[href*="act=help"] .tool-icon,body.bright .tool-item[href*="act=settings"] .tool-icon{color:#388e3c}
body.bright.nav-on-color .nav:not(.scrolled) .nav-logo{color:#fff}body.bright.nav-on-color .nav:not(.scrolled) .nav-logo span{color:#e0cb96}

/* 首页头部「菜单」下拉：三组入口（产品系列 / 关于我们 / 联系方式），清单由服务端读库下发。 */
.nav-menu-wrap{position:relative}
.nav-menu-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;margin-right:10px;border:1px solid rgba(201,169,98,.3);border-radius:18px;color:#e0cb96;background:rgba(201,169,98,.08);font:600 11px Inter,"Noto Sans SC",sans-serif;letter-spacing:.08em;cursor:pointer}
.nav-menu-btn svg{width:12px;height:12px;transition:transform .2s}
.nav-menu-wrap.is-open .nav-menu-btn svg{transform:rotate(180deg)}
.nav-menu-panel{display:none;position:absolute;top:calc(100% + 12px);right:0;z-index:60;pointer-events:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;min-width:620px;padding:22px 26px;background:rgba(6,14,28,.97);backdrop-filter:blur(18px);border:1px solid rgba(201,169,98,.18);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.45)}
.nav-menu-wrap.is-open .nav-menu-panel{display:grid}
.nav-menu-group-title{margin:0 0 12px;color:#e0cb96;font:600 10px/1.4 Inter,"Noto Sans SC",sans-serif;letter-spacing:.2em;text-transform:uppercase}
.nav-menu-list{margin:0;padding:0;list-style:none}
.nav-menu-list li+li{margin-top:9px}
.nav-menu-list a{color:rgba(255,255,255,.72);font:400 13px/1.5 Inter,"Noto Sans SC",sans-serif;text-decoration:none;transition:color .2s}
.nav-menu-list a:hover{color:#e0cb96}
@media(max-width:768px){
  .nav-menu-btn{height:32px;padding:0 11px;margin-right:8px;font-size:10px}
  /* 窄屏下按钮离左边缘太近，面板继续按按钮定位会从左边溢出被裁；改成贴视口左右留边。
     三组保持并排三列：单列会把 16 条拉成一屏多，手机上要滚好几次；字号与间距相应压小。 */
  .nav-menu-panel{position:fixed;top:70px;left:12px;right:12px;width:auto;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0;max-height:calc(100vh - 150px);overflow-y:auto;padding:14px 10px}
  .nav-menu-group-title{margin-bottom:8px;font-size:9px;letter-spacing:.06em}
  .nav-menu-list li+li{margin-top:7px}
  .nav-menu-list a{font-size:11px;line-height:1.35}
}
body.bright .nav-menu-btn{border-color:rgba(0,87,184,.22);color:#0057b8;background:rgba(0,87,184,.06)}
body.bright .nav-menu-panel{background:rgba(255,255,255,.98);border-color:rgba(0,87,184,.12);box-shadow:0 18px 48px rgba(0,87,184,.14)}
body.bright .nav-menu-group-title{color:#0057b8}
body.bright .nav-menu-list a{color:#607d8b}
body.bright .nav-menu-list a:hover{color:#0057b8}
body.bright.nav-on-color .nav:not(.scrolled) .nav-menu-btn{color:#e0cb96;border-color:rgba(201,169,98,.3);background:rgba(201,169,98,.08)}

/* 首页各区块右上角的「查看完整内容」：把页内锚点与种子页连成闭环（锚点仍滚到区块，点这条进文章页）。 */
.section-more{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:2px 0 10px;color:var(--gold,#e0cb96);font:500 12px/1.4 Inter,"Noto Sans SC",sans-serif;letter-spacing:.08em;text-decoration:none}
.section-more svg{width:14px;height:14px;flex:0 0 14px}
.section-more:hover{text-decoration:underline}
/* 明亮版各区块底色不一（#story 浅底、#values 蓝底），写死任一种颜色都会在另一半区块消失：跟随区块自身文字色。 */
body.bright .section-more{color:inherit;opacity:.82}
body.bright .section-more:hover{opacity:1}

/* ---------- 桌面（>768px）专用规则：整段都在 min-width 里，移动端一条都不生效 ----------
   站内桌面布局的既有事实是：内容列 720 居中（购物车/详情/分类等 18 个页都是），底部 tab 故意隐藏。
   缺的是顶部那条没跟着列走，以及内页在桌面上没有任何跨页导航。 */
.nav-inner-links{display:none}
/* 桌面首页顶部的账号入口：缺省不显示，只在 >768 那一档出现 —— 手机端底部 tab 一切照旧。 */
.nav-account{display:none}
@media(min-width:769px){
  /* 导航条与内容列同宽同左（.nav.nav--inner 的特异性高于各页自带的 .nav 规则，不受引入顺序影响） */
  /* 列宽走 --h5-col：各页在桌面媒体查询里覆写自己那一档，顶部条才与内容列同宽。
     ⚠ 填的必须是**用户看得见那一列**的宽度，不是最外层壳：「我的」外层 .profile-page 是 820 空壳、
     真正排版的是内层 .page-inner(720)，当初填 820 让导航比所有卡片各探出 50px。
     居中不用 transform —— 各页自带的 .nav 规则会把它盖掉，实测购物车就是同宽过了、同左没过。 */
  /* 内边距 24 与手机端同值（`.nav{padding:0 24px}` 在 max-width:768 那档）：
     盒子与内容列同宽 720，但文字要往里让出位置 —— 填 0 时 logo 与最后一个链接正好压在列的左右边缘，
     而卡片各内缩 16，看上去就是"导航贴边、内容缩进"。box-sizing:border-box（本文件第 11 行）保证加了内边距盒子不变。 */
  .nav.nav--inner{left:calc((100% - var(--h5-col,720px))/2);right:auto;width:var(--h5-col,720px);padding:0 24px}
  .nav.nav--inner .nav-links{gap:28px}
  .nav.nav--inner .nav-inner-links{display:flex}
  .nav.nav--inner .nav-inner-links a{color:var(--gold-400,#e0cb96);font-size:13px;letter-spacing:.04em}
  body.bright .nav.nav--inner .nav-inner-links a{color:#0057b8}
  .nav-account{display:flex;align-items:center;gap:20px;margin-right:16px;flex:0 0 auto}
  .nav-account-item{position:relative;display:inline-flex;align-items:center;height:36px;white-space:nowrap;font-family:var(--font-sans,Inter,sans-serif);font-size:13px;letter-spacing:.04em;color:var(--text-on-dark,#fff);text-decoration:none}
  /* hover 只在深色版提亮成金色；明亮版不做 hover 变色 —— 与旁边栏目链接保持一致（栏目链接本来就没有 hover 态），
     否则白底滚动条上 hover 变金会看不见 */
  body:not(.bright) .nav-account-item:hover{color:var(--gold-400,#e0cb96)}
  .nav-account-badge{position:absolute;top:0;right:-13px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e54b4b;color:#fff;font:600 10px/16px Inter,"Noto Sans SC",sans-serif;text-align:center;display:none}
  .nav-account-badge:not(:empty){display:block}
  /* 明亮版：入口与栏目链接取同一个变量，蓝底首屏上两者同色（原来写死的深灰在蓝底上比栏目链接更弱） */
  body.bright .nav-account-item{color:var(--text-on-dark-soft,rgba(255,255,255,.75))}
}
/* 明亮版滚动后导航底色变白（body.bright .nav.scrolled 是 rgba(255,255,255,.95)），
   而栏目链接一直是白字 ⇒ 那五个栏目在白底导航条上根本看不见（本轮用户点名一起修）。
   两种状态下「入口色 == 栏目链接色」由下面的同选择器保证，颜色取明亮版主色 #0057b8。 */
body.bright .nav.scrolled .nav-links a,body.bright .nav.scrolled .nav-account-item{color:#0057b8}
/* 中文两字标签没有 nowrap 时，flex 一压就竖着折成两行（实测 1032 档栏目 17px→46px 行高） */
.nav-links a,.nav-cta{white-space:nowrap}
/* 窄桌面档（769–999）：五个栏目链接 + 账号入口 + 加入我们 + 主题/语言切换放不进同一行。
   实测临界：强行显示栏目链接时 900 视口下语言切换右边走到 881（可用只到 852＝被挤出），
   940 正好到边（892＝892），1180 才是整行零余量 —— 所以 999 以下收起栏目锚点。
   栏目是页内锚点（滚动即到），数据驱动的入口仍在「菜单」下拉里。 */
@media(min-width:769px) and (max-width:999px){
  .nav-links{display:none}
}
/* 中间档（1000–1179）：栏目锚点保住，靠三件事腾出宽度 —— 间距 48→20、字号 12→11、
   收起「加入我们」CTA（117px，这一档里价值最低的一项）。
   1032 实测需要约 851px < 可用 936px；≥1180 恢复原样。 */
@media(min-width:1000px) and (max-width:1179px){
  .nav-links{gap:20px}
  .nav-links a{font-size:11px}
  .nav-cta{display:none}
}