/* 安可集新版 · 顶栏和页脚（照 零件表 *-定稿.html 的 sitenav / bxp / cxp / foot）
 * 类名一律 v3- 前缀，不和旧样式、Tailwind 撞。变量先读 tokens.css 的 --v3-*，读不到用定稿原值兜底。
 * 旧页面过渡期：顶栏固定在顶上（旧页面自己留了 64px，新顶栏 72px，body 再补 8px）；
 * 新版内页吸顶，首页仍按原来的 fixed / 深浅色切换。 */

/* 实际总高 = 72px 内容 + 1px 底边；CSS 偏移和 JS 测高共用。 */
:root{--folio-nav-h:73px}
/* 根滚动容器负责导航避让；元素自己的 scroll-margin 只负责局部间距/章节栏。
   hidden 会产生额外滚动容器、使 sticky 失效，这里只裁横向溢出。首页不改。 */
html:has(body.v3-page:not(.v3-home)){scroll-padding-top:calc(var(--folio-nav-h) + 8px);overflow-x:clip}
body.v3-page:not(.v3-home){overflow-x:clip}

.v3-sitenav{
  --n-ink:var(--v3-ink,#1F2A37);--n-stone:var(--v3-stone,#5D6773);--n-smoke:var(--v3-smoke,#7D8792);
  --n-line:var(--v3-line,rgba(31,42,55,.08));--n-sheet:var(--v3-sheet,rgba(77,175,254,.06));--n-sheet2:var(--v3-sheet-hover,rgba(77,175,254,.11));
  --n-paper:var(--v3-paper,#fff);--n-brand:var(--v3-brand,#4DAFFE);--n-action:var(--v3-action,#1677D2);--n-action-h:var(--v3-action-hover,#1268BA);
  --n-tint:var(--v3-tint,#EEF6FF);--n-rope:var(--v3-danger,#D63A36);
  --n-float:var(--v3-float,0 12px 32px rgba(31,42,55,.10),0 2px 6px rgba(31,42,55,.05));
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--n-paper);border-bottom:1px solid var(--n-line);
  font-family:var(--v3-font,"OPPO Sans 4.0","PingFang SC","Microsoft YaHei",sans-serif);font-size:14px;line-height:1.6;color:var(--n-ink);
  -webkit-font-smoothing:antialiased;
}
body.v3-page .v3-sitenav{position:sticky;top:0}
body.v3-legacy-offset{padding-top:8px}
body.v3-page.v3-legacy-offset{padding-top:0}
.v3-sitenav,.v3-sitenav *{box-sizing:border-box;border-style:none;border-color:currentColor}
.v3-sitenav{border-bottom:1px solid var(--n-line)}
.v3-topnav{max-width:1200px;margin:0 auto;height:calc(var(--folio-nav-h) - 1px);min-width:0;gap:16px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:inherit}
.v3-brandmark{display:flex;align-items:center;gap:12px;color:var(--n-ink);text-decoration:none;flex:none}
.v3-brandmark svg{width:43px;height:30px;display:block}
.v3-brandmark span{font-size:19px;font-weight:300;letter-spacing:.2em;line-height:1}
.v3-links{display:flex;gap:clamp(18px,2.6vw,36px);font-size:15px}
.v3-links a{color:var(--n-stone);position:relative;padding:24px 0;text-decoration:none;line-height:24px}
.v3-links a:hover{color:var(--n-ink)}
.v3-links a[aria-current="page"]{color:var(--n-ink);font-weight:600}
.v3-links a svg{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:34px;height:8px;color:var(--n-brand);display:none}
.v3-links a[aria-current="page"] svg,.v3-links a:hover svg{display:block}
.v3-tools{display:flex;align-items:center;gap:20px;color:var(--n-ink);position:relative;flex:none}
.v3-lang{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--n-stone);cursor:pointer;white-space:nowrap}
.v3-lang b{font-weight:400;color:inherit}
.v3-lang:hover{color:var(--n-stone)}
.v3-ic{display:inline-block;width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.v3-ic.s{width:16px;height:16px}
.v3-icb{border:0;background:none;padding:6px;margin:-6px;border-radius:6px;cursor:pointer;color:inherit;display:inline-flex;position:relative;text-decoration:none}
.v3-icb:hover,.v3-icb[aria-expanded="true"]{background:var(--n-sheet)}
.v3-icb .v3-dot{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--n-rope);box-shadow:0 0 0 2px var(--n-paper)}
.v3-cnt{position:absolute;top:-3px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--n-action);color:#fff;font-size:10px;line-height:16px;text-align:center;font-variant-numeric:tabular-nums}
.v3-avb{border:0;background:none;padding:3px;margin:-3px;border-radius:8px;cursor:pointer;display:inline-flex}
/* 有未读私信：头像右上角一个点（私信入口在通知中心） */
.v3-avb{position:relative}
.v3-avb .v3-dot{position:absolute;top:0;right:0;width:7px;height:7px;border-radius:50%;background:var(--n-rope);box-shadow:0 0 0 2px var(--n-paper)}
body.v3-nav-dark .v3-sitenav.is-home .v3-avb .v3-dot{box-shadow:0 0 0 2px #14110F}
.v3-avb:hover,.v3-avb[aria-expanded="true"]{background:var(--n-sheet)}
.v3-av{width:30px;height:30px;border-radius:6px;object-fit:cover;display:block;flex:none}
.v3-av-tone{display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--n-ink)}
.v3-login{height:34px;padding:0 16px;border:0;border-radius:8px;background:#EAF2FB;color:var(--n-action);font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
.v3-login:hover{background:#DDEBFA}

/* 浮层（铃铛 / 小购物车 / 头像菜单）：浮层才能有阴影 */
.v3-pop{position:absolute;top:calc(100% + 12px);right:0;max-width:calc(100vw - 32px);background:var(--n-paper);border:1px solid var(--n-line);border-radius:12px;box-shadow:var(--n-float);z-index:95;text-align:left;font-size:14px;color:var(--n-ink)}
.v3-pop>header{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--n-line)}
.v3-pop>header b{font-size:15px;font-weight:600}
.v3-pop>header .sp{flex:1}
.v3-pop .lk{border:0;background:none;padding:0;font:inherit;font-size:12px;color:var(--n-action);cursor:pointer;text-decoration:none}
.v3-pop .lk:hover{color:var(--n-action-h)}
.v3-pop .lk[disabled]{color:var(--n-smoke);cursor:default}
.v3-pop .mute{font-size:12px;color:var(--n-smoke)}
.v3-pop .red{font-size:12px;color:var(--n-rope)}
.v3-pop>footer{border-top:1px solid var(--n-line);border-color:var(--n-line)!important;padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:normal;background:transparent!important;color:var(--n-ink)!important}
.v3-pop .empty{padding:28px 16px;text-align:center;color:var(--n-smoke);font-size:13px}
.v3-pop .list{display:grid;padding:4px 0;overflow:auto;scrollbar-width:none}
.v3-pop .list::-webkit-scrollbar{display:none}

.v3-bell{width:380px;right:28px}
.v3-bell .list{max-height:420px}
.v3-bell .it{display:grid;grid-template-columns:32px minmax(0,1fr) 8px;gap:10px;align-items:start;width:100%;border:0;border-radius:0;background:none;padding:10px 16px;text-align:left;cursor:pointer;font:inherit;color:var(--n-stone);text-decoration:none}
.v3-bell .it:hover{background:var(--n-sheet)}
.v3-bell .sq{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--n-tint);color:var(--n-action)}
.v3-bell .sq .v3-ic{width:16px;height:16px}
.v3-bell .tx{display:grid;gap:2px;min-width:0}
.v3-bell .tx span{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.v3-bell .it.u .tx span{color:var(--n-ink)}
.v3-bell .tx small{font-size:11px;color:var(--n-smoke)}
.v3-bell .ud{width:7px;height:7px;border-radius:50%;background:var(--n-rope);margin-top:6px}
.v3-bell .it:not(.u) .ud{visibility:hidden}
/* 铃铛定稿的 footer 是 14px 普通行盒，链接自身 12px；不能套小购物车的 12px flex 底栏。
   否则少了父行盒的 3.2px（报告 514.390625 → 511.1875）。 */
.v3-bell>footer{display:block;font-size:14px;gap:normal;text-align:center}

.v3-cart{width:360px;right:0}
.v3-cart>header b{font-weight:700}
.v3-cart>header{align-items:baseline}
.v3-cart .list{max-height:320px;padding:6px 0}
.v3-cart .ci{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 16px;color:inherit;text-decoration:none}
.v3-cart .ci:hover{background:var(--n-sheet)}
.v3-cart .cv{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--n-sheet2);display:block}
.v3-cart .ci>span{display:grid;min-width:0}
.v3-cart .ci>span b{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-cart .ci small{font-size:11px;color:var(--n-smoke);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-cart .pr{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.v3-cart>footer span{flex:1;color:var(--n-stone)}
.v3-cart>footer span b{color:var(--n-ink);font-variant-numeric:tabular-nums;font-weight:600}
.v3-cart .bt{height:32px;padding:0 12px;border-radius:6px;font-size:13px;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
.v3-cart .bt.soft{background:var(--n-tint);color:var(--n-action)}
.v3-cart .bt.soft:hover{background:#E1EEFC}
.v3-cart .bt.pri{background:var(--n-brand);color:#fff}
.v3-cart .bt.pri:hover{background:#3FA2F2}

.v3-acct{width:280px;padding:6px 0}
.v3-acct .who{display:flex;gap:12px;align-items:center;padding:12px 16px}
.v3-acct .who .v3-av{width:40px;height:40px}
.v3-acct .who b{display:block;font-size:15px;font-weight:600;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-acct .who small{display:block;font-size:12px;color:var(--n-smoke);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
/* 定稿 .amp .who .tag 还继承零件表 .tag 的 24px 高；新前缀需显式搬入，不能依赖旧全局 .tag。 */
.v3-acct .v3-acct-tag{display:inline-block;height:24px;gap:5px;white-space:nowrap;margin-left:6px;font-size:11px;color:var(--n-action);background:var(--n-tint);border-radius:4px;padding:1px 6px;vertical-align:2px;font-weight:400}
.v3-acct .nums{display:grid;grid-template-columns:repeat(4,1fr);margin:0 12px 6px;border-radius:8px;background:var(--n-sheet)}
.v3-acct .nums a{display:block;padding:10px 0;text-align:center;border-radius:8px;color:inherit;text-decoration:none}
.v3-acct .nums a:hover{background:var(--n-sheet2)}
.v3-acct .nums b{display:block;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.v3-acct .nums span{display:block;font-size:12px;color:var(--n-smoke);margin-top:2px}
.v3-acct .sep{height:1px;background:var(--n-line);margin:6px 0}
.v3-acct .mi{display:flex;align-items:center;gap:10px;height:38px;padding:0 16px;color:var(--n-ink);text-decoration:none;border:0;background:none;width:100%;font:inherit;font-size:14px;cursor:pointer;text-align:left}
.v3-acct .mi:hover{background:var(--n-sheet)}
.v3-acct .mi .v3-ic{width:18px;height:18px;color:var(--n-stone)}
.v3-acct .mi .k{margin-left:auto;font-size:12px;color:var(--n-smoke);font-variant-numeric:tabular-nums}
.v3-acct .mi .k.red{color:var(--n-rope)}
.v3-acct .mi.studio{margin:4px 12px;width:calc(100% - 24px);border-radius:8px;background:var(--n-tint);color:var(--n-action);padding:0 12px}
.v3-acct .mi.studio .v3-ic{color:var(--n-action)}
.v3-acct .mi.studio .k{color:var(--n-action)}
.v3-acct .mi.studio:hover{background:#E1EEFC}
.v3-acct .mi.out{color:var(--n-stone)}

/* 图标（路径相对本文件） */
.v3-i-bell{--i:url(icons/c-notify.svg)}
.v3-i-cart{--i:url(icons/c-cart.svg)}
.v3-i-profile{--i:url(icons/profile.svg)}
.v3-i-messages{--i:url(icons/c-messages.svg)}
.v3-i-work{--i:url(icons/work.svg)}
.v3-i-wallet{--i:url(icons/wallet.svg)}
.v3-i-persona{--i:url(icons/persona.svg)}
.v3-i-settings{--i:url(icons/settings.svg)}
.v3-i-studio{--i:url(icons/studio.svg)}
.v3-i-plus{--i:url(icons/plus.svg)}
.v3-i-chevron{--i:url(icons/chevronRight.svg)}
.v3-i-comment{--i:url(icons/comment.svg)}
.v3-i-star{--i:url(icons/star.svg)}
.v3-i-at{--i:url(icons/at.svg)}
.v3-i-summon{--i:url(icons/summon.svg)}
.v3-i-order{--i:url(icons/order.svg)}
.v3-i-follow{--i:url(icons/c-follow.svg)}
.v3-i-system{--i:url(icons/notification.svg)}

/* 页脚 */
.v3-foot{
  --n-ink:var(--v3-ink,#1F2A37);--n-stone:var(--v3-stone,#5D6773);--n-smoke:var(--v3-smoke,#7D8792);--n-line:var(--v3-line,rgba(31,42,55,.08));
  max-width:1200px;margin:40px auto 0;border-top:1px solid var(--n-line);padding:28px 24px 22px;display:grid;gap:14px;background:var(--v3-paper,#fff);
  font-family:var(--v3-font,"OPPO Sans 4.0","PingFang SC","Microsoft YaHei",sans-serif);color:var(--n-ink);box-sizing:border-box
}
.v3-foot.w1280{max-width:1280px}
.v3-foot .r1{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.v3-foot .v3-brandmark svg{width:34px;height:24px}
.v3-foot .v3-brandmark span{font-size:15px;letter-spacing:.16em}
.v3-foot .v3-brandmark small{font-size:12px;letter-spacing:.1em;color:var(--n-smoke);margin-left:6px}
.v3-foot .r1 em{font-style:normal;font-size:13px;color:var(--n-stone);letter-spacing:.06em}
.v3-foot .r2{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--n-smoke)}
.v3-foot .r2 nav{display:flex;gap:18px;flex-wrap:wrap}
.v3-foot .r2 a{color:var(--n-smoke);text-decoration:none}
.v3-foot .r2 a:hover{color:var(--n-ink)}
.v3-foot .r2 .legal{display:flex;gap:16px;flex-wrap:wrap}
.v3-footlegal{display:flex;justify-content:center;gap:8px 18px;flex-wrap:wrap;font-size:12px;color:var(--v3-smoke,#7D8792);font-family:var(--v3-font,"OPPO Sans 4.0","PingFang SC",sans-serif)}
.v3-footlegal a{color:inherit;text-decoration:none}
.v3-footlegal a:hover{color:var(--v3-ink,#1F2A37)}


/* 旧样式里有全局字距（.zh 等），顶栏和页脚里一律还原，只保留标志的字距 */
.v3-sitenav,.v3-sitenav *,.v3-foot,.v3-foot *,.v3-footlegal,.v3-footlegal *{letter-spacing:normal}
.v3-brandmark span{letter-spacing:.2em}
.v3-foot .v3-brandmark span{letter-spacing:.16em}
.v3-foot .v3-brandmark small{letter-spacing:.1em}
.v3-foot .r1 em{letter-spacing:.06em}


/* 旧样式 folio-theme.css 有一条 footer:not(.footer-issue) a:hover{color:var(--folio-seal)!important}，
   会把浮层底部那一行和新页脚里的链接悬停时染成红色。这里按新版颜色压回去。 */
.v3-pop>footer a.lk,.v3-pop>footer a.lk:hover{color:var(--n-action)!important}
.v3-pop>footer a.lk:hover{color:var(--n-action-h)!important}
.v3-cart>footer a.bt.soft,.v3-cart>footer a.bt.soft:hover{color:var(--n-action)!important}
.v3-cart>footer a.bt.pri,.v3-cart>footer a.bt.pri:hover{color:#fff!important}
.v3-foot .r2 a:hover,.v3-foot .v3-brandmark:hover,.v3-footlegal a:hover{color:var(--n-ink)!important}
.v3-foot .v3-brandmark,.v3-foot .v3-brandmark:hover{color:var(--n-ink)!important}


/* 首页顶栏（variant=home）：照首页定稿，一直固定在顶上；滚到深色段变深底白字 */
.v3-sitenav.is-home,body.v3-page .v3-sitenav.is-home{position:fixed;transition:background-color .4s ease,border-color .4s ease,color .4s ease}
body.v3-nav-dark .v3-sitenav.is-home{background:#14110F;border-color:rgba(255,255,255,.07);color:#fff}
body.v3-nav-dark .v3-sitenav.is-home .v3-brandmark,body.v3-nav-dark .v3-sitenav.is-home .v3-tools{color:#fff}
body.v3-nav-dark .v3-sitenav.is-home .v3-links a,body.v3-nav-dark .v3-sitenav.is-home .v3-lang{color:rgba(255,255,255,.6)}
body.v3-nav-dark .v3-sitenav.is-home .v3-links a:hover,body.v3-nav-dark .v3-sitenav.is-home .v3-links a[aria-current="page"],body.v3-nav-dark .v3-sitenav.is-home .v3-lang b{color:#fff}
body.v3-nav-dark .v3-sitenav.is-home .v3-login{background:rgba(182,219,254,.14);color:#D4EAFF}
body.v3-nav-dark .v3-sitenav.is-home .v3-login:hover{background:rgba(182,219,254,.24)}
body.v3-nav-dark .v3-sitenav.is-home .v3-icb:hover,body.v3-nav-dark .v3-sitenav.is-home .v3-icb[aria-expanded="true"],body.v3-nav-dark .v3-sitenav.is-home .v3-avb:hover{background:rgba(255,255,255,.08)}
body.v3-nav-dark .v3-sitenav.is-home .v3-icb .v3-dot{box-shadow:0 0 0 2px #14110F}

@media (max-width:760px){
  .v3-links{display:none}
  .v3-topnav{padding:0 16px}
  .v3-tools{gap:16px}
  .v3-bell,.v3-cart{right:0}
}
@media (max-width:420px){ .v3-brandmark span{display:none} }
/* 内页手机边界包含 768px；首页保留原 760px 断点。 */
@media (max-width:768px){
  body.v3-page:not(.v3-home) .v3-links{display:none}
  body.v3-page:not(.v3-home) .v3-topnav{padding:0 16px}
  body.v3-page:not(.v3-home) .v3-tools{gap:16px}
  body.v3-page:not(.v3-home) :is(.v3-bell,.v3-cart){right:0}
}