/* =========================================================================
   Vanby Global
   设计令牌取自生产站（wanbiao.ljjclaw.top）编译产物
   ========================================================================= */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+2180, U+FEFF, U+FFFD;
}

:root {
	--brand: #9e211b;
	--brand-strong: #761713;
	--bg: #f4f3ef;
	--surface: #fff;
	--border: #d8d5cf;
	--text: #17191b;
	--muted: #666863;
	--danger: #b3402a;
	--ok: #2f7a4d;
	--warn-bg: #fdf6e3;
	--warn-border: #e8d9ab;
	--hero-bg: #070909;
	--hero-muted: #ffffffad;
	--hero-line: #ffffff2e;

	--font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
		"Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
	--font-serif: "Cormorant Garamond", "Songti SC", "Noto Serif SC", "STSong",
		"SimSun", Georgia, serif;
	--font-latin: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	/*
	 * 价格专用数字字体（2026-10-29）。
	 *
	 * 价格原先跟标题共用 Cormorant Garamond —— 那是高对比度的展示衬线，
	 * 笔画细、字重轻，数字在缩略卡上（20px）会显得发虚，"8,149" 的 8 与 9
	 * 在浅色底上尤其糊。价格是买家最先扫的一行，它需要的不是优雅而是清楚。
	 *
	 * 改用无衬线（黑体）系统字体：笔画粗细均匀、x 高度大，配合 tabular-nums
	 * 让数字等宽对齐，价格列表纵向扫下来不会左右跳。
	 * 不引外链字体 —— 系统自带的 Helvetica / Segoe UI / Roboto 已经够用，
	 * 少一个网络请求，也不会出现字体加载前后跳动。
	 */
	--font-num: "Helvetica Neue", Helvetica, "Segoe UI", Arial, "PingFang SC",
		"Noto Sans SC", sans-serif;

	--container: 960px;
	/* 端内工作台专用版心：数据密集型界面（多列宽表 + 筛选栏），
	   960px 会把表格压成竖排换行。仅 vb-body--workbench 使用。 */
	--container-wide: 1728px;
	--radius: 8px;
	--radius-sm: 6px;

	--shadow-sm: 0 1px 2px rgba(23, 25, 27, .04);
	--shadow-md: 0 8px 24px rgba(31, 27, 24, .1);
	--shadow-lg: 0 16px 48px rgba(31, 27, 24, .16);
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.vb-body {
	margin: 0;
	/* 页面底色纯白（2026-10-29 陈总定稿）。
	   --bg 仍是暖灰 #f4f3ef，但只用于导航/hover/标签等「浅填充」，
	   不再当页面底色 —— 大面积底色泛黄会让白卡片看起来发脏。 */
	background: #fff;
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.vb-skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--brand); color: #fff; padding: 8px 14px; z-index: 999;
}
.vb-skip:focus { left: 8px; top: 8px; }

.vb-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 16px;
}

.vb-main { padding: 20px 0 64px; }
.vb-main--flush { padding-top: 0; }

/* ---------- 顶栏 ---------- */
.vb-topbar {
	position: sticky; top: 0; z-index: 60;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

/* ---------- 首页覆盖层导航（透明 → 白底滚动过渡） ---------- */
/* 白色 logo 仅在首页透明态显示；其它页面永远白底，用原色 logo。 */
.vb-brand__logo--invert { display: none; }

.vb-topbar--overlay {
	position: fixed; top: 0; left: 0; right: 0;
	background: transparent;
	border-bottom-color: transparent;
	transition: background .5s cubic-bezier(.16, 1, .3, 1),
		border-color .5s cubic-bezier(.16, 1, .3, 1),
		box-shadow .5s cubic-bezier(.16, 1, .3, 1);
}
.vb-topbar--overlay .vb-brand__logo--invert { display: block; }
.vb-topbar--overlay .vb-brand__logo:not(.vb-brand__logo--invert) { display: none; }
.vb-topbar--overlay .vb-nav__link { color: rgba(255, 255, 255, .82); }
.vb-topbar--overlay .vb-nav__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.vb-topbar--overlay .vb-nav__link.is-active { color: #fff; background: rgba(255, 255, 255, .12); }
.vb-topbar--overlay .vb-langs { border-color: rgba(255, 255, 255, .24); background: transparent; }
.vb-topbar--overlay .vb-langs__item { color: rgba(255, 255, 255, .82); }
.vb-topbar--overlay .vb-langs__item:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.vb-topbar--overlay .vb-langs__item.is-active { background: #d94b3f; color: #fff; }
.vb-topbar--overlay .vb-langs__item.is-active:hover { background: #e55b4f; color: #fff; }
.vb-topbar--overlay .vb-currency { background: rgba(255, 255, 255, .14); color: #e8d6b0; }
.vb-topbar--overlay .vb-userchip { border-color: rgba(255, 255, 255, .24); background: transparent; }
.vb-topbar--overlay .vb-userchip__role { color: #e8b4ae; border-color: rgba(255, 255, 255, .24); }
.vb-topbar--overlay .vb-userchip__name { color: #fff; }
.vb-topbar--overlay .vb-userchip__link { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .82); }
.vb-topbar--overlay .vb-userchip__link:hover { background: #d94b3f; color: #fff; }

.vb-topbar--overlay.is-scrolled {
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: var(--border);
	box-shadow: 0 1px 0 var(--border), 0 10px 34px -20px rgba(23, 25, 27, .28);
}
.vb-topbar--overlay.is-scrolled .vb-brand__logo--invert { display: none; }
.vb-topbar--overlay.is-scrolled .vb-brand__logo:not(.vb-brand__logo--invert) { display: block; }
.vb-topbar--overlay.is-scrolled .vb-nav__link { color: var(--muted); }
.vb-topbar--overlay.is-scrolled .vb-nav__link:hover { color: var(--text); background: var(--bg); }
.vb-topbar--overlay.is-scrolled .vb-nav__link.is-active { color: var(--brand); background: #faf3f2; }
.vb-topbar--overlay.is-scrolled .vb-langs { border-color: var(--border); background: var(--surface); }
.vb-topbar--overlay.is-scrolled .vb-langs__item { color: var(--muted); }
.vb-topbar--overlay.is-scrolled .vb-langs__item:hover { color: var(--text); background: var(--bg); }
.vb-topbar--overlay.is-scrolled .vb-langs__item.is-active { background: var(--brand); color: #fff; }
.vb-topbar--overlay.is-scrolled .vb-langs__item.is-active:hover { background: var(--brand-strong); color: #fff; }
.vb-topbar--overlay.is-scrolled .vb-currency { background: #f4f0e8; color: #624819; }
.vb-topbar--overlay.is-scrolled .vb-userchip { border-color: var(--border); background: var(--surface); }
.vb-topbar--overlay.is-scrolled .vb-userchip__role { color: var(--brand); border-color: var(--border); }
.vb-topbar--overlay.is-scrolled .vb-userchip__name { color: var(--text); }
.vb-topbar--overlay.is-scrolled .vb-userchip__link { background: var(--bg); color: var(--muted); }
.vb-topbar--overlay.is-scrolled .vb-userchip__link:hover { background: var(--brand); color: #fff; }

.vb-topbar__inner {
	max-width: var(--container); margin: 0 auto;
	padding: 10px 16px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.vb-brand { display: flex; align-items: center; gap: 10px; flex: none; }
/* 品牌位只用 logo：本站 logo 长宽比约 3.8:1，按高度定尺才能看清字。 */
.vb-brand__logo { width: auto; height: 30px; max-width: 160px; object-fit: contain; }
.vb-brand__tag {
	display: inline-flex; align-items: center;
	padding: 2px 7px; border-radius: 6px;
	background: var(--bg); border: 1px solid var(--border);
	color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em;
}

.vb-nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; flex-wrap: wrap; }
.vb-nav__link {
	padding: 6px 11px; border-radius: var(--radius-sm);
	color: var(--muted); font-size: 13px; transition: all .15s;
}
.vb-nav__link:hover { color: var(--text); background: var(--bg); }
.vb-nav__link.is-active { color: var(--brand); font-weight: 600; background: #faf3f2; }

.vb-topbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* 导航条：桌面端把主导航 + 右侧操作区排成一行；移动端折叠进汉堡抽屉。 */
.vb-navbar { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; }

/* 汉堡按钮：默认隐藏，仅移动端显示。 */
.vb-burger {
	display: none; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin-left: auto; flex: none;
	background: transparent; border: 0; cursor: pointer;
	color: var(--text); border-radius: 8px;
}
.vb-burger__box { display: flex; flex-direction: column; gap: 5px; }
.vb-burger__line {
	display: block; width: 20px; height: 2px; border-radius: 2px;
	background: currentColor; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.vb-topbar--overlay:not(.is-scrolled) .vb-burger { color: #fff; }

.vb-currency {
	display: inline-flex; align-items: center;
	background: #f4f0e8; color: #624819;
	border-radius: 6px; padding: 3px 8px;
	font-size: 11px; font-weight: 700; letter-spacing: .06em;
}

/* 语言切换：分段控件形态，当前语言实心反白。 */
.vb-langs {
	display: inline-flex; align-items: center; gap: 2px;
	border: 1px solid var(--border); border-radius: 999px;
	padding: 2px; background: var(--surface);
}
.vb-langs__item {
	padding: 2px 9px; border-radius: 999px;
	font-size: 11px; letter-spacing: .04em; color: var(--muted);
	transition: background .15s, color .15s;
}
.vb-langs__item:hover { color: var(--text); background: var(--bg); }
.vb-langs__item.is-active { background: var(--brand); color: #fff; font-weight: 600; }
.vb-langs__item.is-active:hover { background: var(--brand-strong); color: #fff; }

.vb-userchip {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid var(--border); border-radius: 999px;
	padding: 4px 6px 4px 12px; background: var(--surface);
}
.vb-userchip__role {
	font-size: 11px; color: var(--brand); font-weight: 600;
	border-right: 1px solid var(--border); padding-right: 8px;
}
.vb-userchip__name { font-size: 12px; color: var(--text); max-width: 130px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-userchip__link {
	background: var(--bg); border-radius: 999px; padding: 3px 10px;
	font-size: 11px; color: var(--muted);
}
.vb-userchip__link:hover { background: var(--brand); color: #fff; }

/* ---------- 按钮 ---------- */
.vb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 40px; padding: 8px 20px;
	border: 1px solid var(--brand); background: var(--brand); color: #fff;
	border-radius: var(--radius-sm); cursor: pointer;
	letter-spacing: .045em; font-size: 13px;
	transition: background .16s, border-color .16s, transform .1s;
}
.vb-btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.vb-btn:active { transform: translateY(1px); }
.vb-btn--lg { min-height: 46px; padding: 10px 28px; font-size: 14px; }
.vb-btn--sm { min-height: 32px; padding: 4px 12px; font-size: 12px; }
.vb-btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.vb-btn--ghost:hover { background: var(--bg); border-color: var(--text); color: var(--text); }
.vb-btn--light { background: #fff; color: var(--hero-bg); border-color: #fff; }
.vb-btn--light:hover { background: #efece5; border-color: #efece5; }
.vb-btn--ghost-on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.vb-btn--ghost-on-dark:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }
.vb-btn--hero { background: #d94b3f; border-color: #d94b3f; color: #fff; }
.vb-btn--hero:hover { background: #e55b4f; border-color: #e55b4f; transform: translateY(-2px); }
.vb-btn--danger { background: var(--danger); border-color: var(--danger); }
.vb-btn--danger:hover { background: #8f3220; border-color: #8f3220; }
.vb-btn--block { width: 100%; }
.vb-btn[disabled], .vb-btn.is-disabled {
	background: #dedbd5; border-color: #dedbd5; color: #8d8981; cursor: not-allowed;
}
.vb-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 卡片 / 区块 ---------- */
.vb-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	margin-bottom: 12px;
}
.vb-card--flush { padding: 0; overflow: hidden; }
.vb-card__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-bottom: 12px; flex-wrap: wrap;
}
.vb-card__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.vb-card__desc { margin: 2px 0 0; font-size: 12px; color: var(--muted); }

.vb-section { margin: 28px 0; }
.vb-section__head { margin-bottom: 14px; }
.vb-section__eyebrow {
	font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--brand); font-weight: 700;
}
.vb-section__title { margin: 4px 0 0; font-size: 24px; font-weight: 500; letter-spacing: .01em; font-family: var(--font-serif); }
.vb-section__desc { margin: 6px 0 0; color: var(--muted); max-width: 640px; }

.vb-grid { display: grid; gap: 12px; }
.vb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- 徽标 / 标签 ---------- */
.vb-badge {
	display: inline-block; border: 1px solid var(--border); background: var(--bg);
	color: var(--muted); border-radius: 999px; padding: 0 8px;
	font-size: 12px; line-height: 20px; white-space: nowrap;
}
.vb-badge.is-ok { color: var(--ok); border-color: #c6ded0; background: #f2f8f4; }
.vb-badge.is-warn { color: #8a6d1f; border-color: var(--warn-border); background: var(--warn-bg); }
.vb-badge.is-danger { color: var(--danger); border-color: #e8c8bd; background: #fdf1ed; }
.vb-badge.is-info { color: #31586f; border-color: #c9dbe6; background: #f2f7fa; }
.vb-badge.is-muted { color: var(--muted); }

.vb-tag {
	display: inline-block; border: 1px solid var(--border); background: var(--bg);
	color: var(--muted); border-radius: 999px; padding: 0 8px;
	font-size: 12px; line-height: 20px;
}

/* 人气排序下的浏览量标签：是「为什么这条排在前面」的唯一证据，给一点点强调色。 */
.vb-tag--views { border-color: #e8d3d0; background: #faf3f2; color: var(--brand); }

.vb-notice {
	background: var(--warn-bg); border: 1px solid var(--warn-border);
	border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 12px;
	font-size: 13px;
}
.vb-notice.is-success { background: #f2f8f4; border-color: #c6ded0; color: #245c3a; }
.vb-notice.is-error { background: #fdf1ed; border-color: #e8c8bd; color: #8f3220; }
.vb-notice.is-info { background: #f2f7fa; border-color: #c9dbe6; color: #31586f; }

/* ---------- Hero ---------- */
.vb-hero {
	/*
	 * 2026-10-29：底边必须和下面的三卡色带同色收口。
	 *
	 * 原来这里是写死的 #0b0606（偏暖的深棕黑），紧接着的 .vb-pillars 是
	 * --hero-bg #070909（偏冷），两段之间存在一条淡淡的横向色差线；
	 * 更明显的是 hero 右下角那层红色径向光晕，正好压在交界处被硬切掉，
	 * 交界线上会出现一块比周围亮、边缘笔直的长方形 —— 就是那一块"过渡不好"。
	 *
	 * 改成竖向三段渐变：中段保留原来的暖黑，末尾落到 --hero-bg，
	 * 到边界的颜色与下一段完全一致，接缝消失。
	 */
	background: linear-gradient(180deg, #0b0606 0%, #0a0808 56%, var(--hero-bg) 100%);
	color: #f4ede8;
	min-height: 100vh;
	display: grid; place-items: center; text-align: center;
	padding: 96px 20px;
	position: relative; overflow: hidden;
}
.vb-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background:
		/* 底部遮罩：把两层光晕在最后 38% 里逐渐收掉，到边界时已经等于
		   --hero-bg，红色不会在交界线上被一刀切断。起点写 rgba(7,9,9,0)
		   而不是 transparent —— 后者等价于透明黑，渐变中途会把红色压灰。 */
		linear-gradient(180deg, rgba(7, 9, 9, 0) 62%, var(--hero-bg) 100%),
		radial-gradient(58rem 40rem at 50% -14%, rgba(217,75,63,.20), transparent 62%),
		radial-gradient(40rem 32rem at 92% 88%, rgba(158,33,27,.14), transparent 55%);
	pointer-events: none;
}
.vb-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 0; opacity: .045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	/* 噪点也在底部淡出：下面 .vb-pillars 是纯色没有颗粒，
	   噪点若一直铺到边界，衔接处会有一条隐约的质感差异。 */
	-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
	pointer-events: none;
}
.vb-hero__inner {
	position: relative; z-index: 1;
	/* 760 会把「让每一次腕表交易，」挤成「…腕表交 / 易」——中文最忌一个词
	   被拆到两行。放到 840 后 9 个字刚好一行，断点落在逗号上。 */
	max-width: 840px; margin: 0 auto;
}
/* .vb-hero__eyebrow / .vb-hero__desc 已于 2026-10-29 随文案一并删除：
   首屏只留主标题与两个动作，标题上下的解释性文字不再需要。 */
.vb-hero__title {
	margin: 0; font-size: clamp(40px, 6.4vw, 84px); line-height: 1.1; font-weight: 500; letter-spacing: .01em;
	font-family: var(--font-serif);
	max-width: none;
}
.vb-hero__title em { font-style: italic; color: #d94b3f; white-space: nowrap; }
/* 删掉解释段后，标题与按钮之间就是首屏唯一的留白 —— 从 44 提到 56，
   让满屏深色里「一句话 + 两个动作」站得松一些，不贴着标题。 */
.vb-hero__actions { margin-top: 56px; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.vb-hero__scroll {
	position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 1;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	color: #8f857e; font-size: 10px; letter-spacing: .3em;
	animation: vb-bob 2.4s ease-in-out infinite;
}
.vb-hero__scroll::after {
	content: ""; width: 1px; height: 52px;
	background: linear-gradient(#d94b3f, transparent);
}
@keyframes vb-bob {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(9px); }
}
.vb-hero__meta {
	margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--hero-line);
	display: flex; flex-wrap: wrap; gap: 24px; font-size: 12px; color: var(--hero-muted);
}
.vb-hero__meta strong { color: #fff; font-size: 18px; display: block; font-family: var(--font-latin); }

/* ---------- 商品卡片 ---------- */
.vb-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

/* 商品区下方「更多表款」居中按钮 */
.vb-more { display: flex; justify-content: center; margin-top: 28px; }

.vb-pcard {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow .18s, transform .18s, border-color .18s;
}
.vb-pcard:hover {
	box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #c8c4bd;
}
.vb-pcard__media { position: relative; background: #f4f2ef; }
.vb-pcard__body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vb-pcard__brand {
	font-family: var(--font-latin); font-size: 12px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--text); font-weight: 600;
}
.vb-pcard__model { font-size: 13px; line-height: 1.5; color: var(--muted); font-family: var(--font-sans); }
.vb-pcard__price { margin-top: auto; padding-top: 10px; }
.vb-pcard__amount {
	font-family: var(--font-num); font-size: 20px; font-weight: 500;
	color: var(--brand); font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: .005em;
}
.vb-pcard__cert {
	display: flex; align-items: center; gap: 6px;
	font-size: 11px; color: var(--muted); line-height: 1.4;
	padding-top: 10px; border-top: 1px solid #ebe8e2;
}
.vb-pcard__check { width: 12px; height: 12px; color: var(--brand); flex: none; }
.vb-pcard__views { font-size: 10px; color: var(--muted); }

/* ---------- 首页精选上新（居中标题 + 红色分隔线 + 三列） ---------- */
.vb-featured__head { text-align: center; margin-bottom: 24px; }
/* 标题层级调换：短词做大标题、描述句做副标题（精选上新 / 分类导览 / 内容资讯） */
.vb-featured__head .vb-section__title,
.vb-section__head--center .vb-section__title { font-size: 30px; color: var(--brand); }
.vb-featured__head .vb-section__desc,
.vb-section__head--center .vb-section__desc { font-size: 14px; margin: 8px auto 0; }
.vb-featured__rule { width: 40px; height: 1px; margin: 18px auto 0; background: var(--brand); }
.vb-products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 线框「更多表款」按钮（直角、白底红边） */
.vb-btn--outline {
	background: var(--surface); color: var(--text);
	border: 1px solid var(--brand); border-radius: 0;
}
.vb-btn--outline:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.vb-more__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
.vb-btn--outline:hover .vb-more__arrow { transform: translateX(3px); }

/* 居中 section 头（分类导览 / 内容资讯共用） */
.vb-section__head--center { text-align: center; }
.vb-section__head--center .vb-section__desc { margin-left: auto; margin-right: auto; }

/* ---------- 分类导览（男款 / 女款） ---------- */
.vb-catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vb-cat {
	display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); overflow: hidden;
	transition: box-shadow .2s, transform .2s, border-color .2s;
}
.vb-cat:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #c8c4bd; }
.vb-cat__media {
	position: relative; height: 180px;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(120% 130% at 50% 0%, rgba(255, 255, 255, .09), transparent 60%),
		var(--hero-bg);
}
.vb-cat--women .vb-cat__media {
	background:
		radial-gradient(120% 130% at 50% 0%, rgba(255, 255, 255, .12), transparent 60%),
		#1a1113;
}
.vb-cat__mono {
	font-family: var(--font-latin); font-size: 34px; letter-spacing: .3em; padding-left: .3em;
	color: rgba(255, 255, 255, .85); font-weight: 500; text-transform: uppercase;
}
.vb-cat__label { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.vb-cat__name { font-size: 17px; font-weight: 600; letter-spacing: .02em; color: var(--text); }
.vb-cat__sub { font-size: 12px; color: var(--muted); }

/* ---------- 内容资讯入口 ---------- */
.vb-journal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vb-jcard {
	display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); overflow: hidden;
	transition: box-shadow .2s, transform .2s, border-color .2s;
}
.vb-jcard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #c8c4bd; }
.vb-jcard__cover {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 16 / 10;
	color: #e8b4ae;
}
.vb-jcard__cover svg { width: 30px; height: 30px; }
.vb-jcard__cover--auth { background: radial-gradient(120% 120% at 50% 0%, rgba(232, 180, 174, .16), transparent 62%), #1a1113; }
.vb-jcard__cover--story { background: radial-gradient(120% 120% at 50% 0%, rgba(180, 206, 196, .16), transparent 62%), #131a18; }
.vb-jcard__cover--guide { background: radial-gradient(120% 120% at 50% 0%, rgba(180, 196, 214, .16), transparent 62%), #14181c; }
.vb-jcard__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.vb-jcard__tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.vb-jcard__title { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.45; font-family: var(--font-serif); color: var(--text); }

.vb-cur { font-size: 10px; color: var(--muted); font-family: var(--font-num); letter-spacing: .06em; }

.vb-thumb {
	position: relative; width: 100%;
	background: linear-gradient(135deg, #efece5, #dcd8cd);
	display: grid; place-items: center; overflow: hidden;
}
.vb-thumb.r34 { aspect-ratio: 3 / 4; }
.vb-thumb.r43 { aspect-ratio: 4 / 3; }
.vb-thumb.r11 { aspect-ratio: 1 / 1; }
.vb-thumb.r32 { aspect-ratio: 3 / 2; }
.vb-thumb.is-empty span {
	font-size: 12px; color: var(--muted); letter-spacing: .08em;
}
.vb-thumb__img { width: 100%; height: 100%; object-fit: cover; }

/*
 * 卡片封面与详情页大图（.vb-gallery__img）取同一口径：3:4 竖版 + contain。
 *
 * 为什么不能用 4:3 横版 + cover：商品图有三个来源，比例互不相同 ——
 *   · 货主实拍 1440×1920（3:4 竖构图），占绝大多数；
 *   · 万表同步过来的 828×828 方图；
 *   · 老批次的 1200×900 示意卡，左上角带 "ILLUSTRATIVE ONLY"、
 *     底部带 REF / 年份 / 成色文字。
 * 拿一个横版容器配 cover 去套这三类，竖构图被上下各裁掉 22%（表盘常常只剩一半），
 * 示意卡则直接把文字切掉 —— 而买家在列表页往往只看卡片这一眼。
 * 统一容器下只有「不裁」能同时兜住三类来源：3:4 正好铺满，其余比例两侧留白。
 * 留白只是不够好看，切掉的信息是找不回来的。
 */
.vb-thumb.is-contain { background: #f4f2ef; }
.vb-thumb.is-contain .vb-thumb__img { object-fit: contain; }

/* ---------- 列表 / 表格 ---------- */
.vb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vb-table th {
	text-align: left; font-weight: 600; font-size: 12px; color: var(--muted);
	padding: 10px 12px; border-bottom: 1px solid var(--border);
	background: #faf9f7; white-space: nowrap;
}
.vb-table td {
	padding: 11px 12px; border-bottom: 1px solid #ebe8e2; vertical-align: middle;
}
.vb-table tr:last-child td { border-bottom: 0; }
.vb-table tbody tr:hover { background: #fbfaf8; }
.vb-table .num { font-family: var(--font-num); text-align: right; font-variant-numeric: tabular-nums; }
.vb-table .vb-btn { white-space: nowrap; }
.vb-table form { margin: 0; }
.vb-table__wrap { overflow-x: auto; }

.vb-empty {
	text-align: center; padding: 44px 20px; color: var(--muted);
	border: 1px dashed var(--border); border-radius: var(--radius); background: #fbfaf8;
}
.vb-empty strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; }
/* 404 / 整页兜底：给足留白，别让一个空盒子显得像页面坏了 */
.vb-empty--tall { padding: 68px 20px; }
.vb-empty--tall strong { font-size: 18px; }
.vb-empty--tall p { margin: 0; font-size: 13px; }

/* ---------- 统计块 ---------- */
.vb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vb-stat {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 14px 16px;
}
.vb-stat__label { font-size: 12px; color: var(--muted); }
.vb-stat__value {
	font-family: var(--font-num); font-size: 24px; font-weight: 500;
	line-height: 1.25; margin-top: 4px; font-variant-numeric: lining-nums tabular-nums;
}
.vb-stat__value small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.vb-stat__hint { font-size: 11px; color: var(--muted); margin-top: 2px; }
.vb-stat.is-accent { border-color: #e8c8bd; background: #fdf7f5; }
.vb-stat.is-accent .vb-stat__value { color: var(--brand); }

/* ---------- 表单 ---------- */
.vb-field { margin-bottom: 14px; }
.vb-field > label {
	display: block; font-size: 12px; color: var(--muted);
	margin-bottom: 6px; letter-spacing: .02em;
}
.vb-field .req { color: var(--brand); }
.vb-input, .vb-select, .vb-textarea {
	width: 100%; min-width: 0;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius-sm); padding: 9px 12px;
	transition: border-color .16s, box-shadow .16s;
}
.vb-textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.vb-input:focus, .vb-select:focus, .vb-textarea:focus {
	outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(158,33,27,.12);
}
.vb-field__hint { font-size: 11px; color: var(--muted); margin-top: 5px; }
/* 提示行里的链接要能看出是链接 —— 游客咨询页底部那个「注册一个账号」
   不带上色时与正文同色，等于把唯一的转化入口藏了起来。 */
.vb-field__hint a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/*
 * 蜜罐字段（防表单机器人）—— 正常用户看不见。
 *
 * 用「移出视口」而不是 display:none：部分机器人会主动跳过 display:none 的字段，
 * 但对「存在却不可见」的字段照样会填。配合 tabindex="-1" 与 aria-hidden，
 * 键盘用户与读屏用户也不会碰到它。
 */
.vb-honeypot {
	position: absolute; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.vb-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.vb-formgrid .vb-field--full { grid-column: 1 / -1; }

/* 登录 / 注册卡片 */
.vb-auth { max-width: 460px; margin: 40px auto; }
.vb-auth__head { text-align: center; margin-bottom: 20px; }
/* 品牌位：方块 + 角色缩写（内部三端用 OWN / SLS / ADM） */
.vb-auth__mark {
	width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 12px;
	background: var(--brand); color: #fff; display: grid; place-items: center;
	font-family: var(--font-latin); font-weight: 500; font-size: 18px; letter-spacing: .02em;
}
/* 买家端放 logo：不要底色方块，横长图按高度定尺（同顶栏 logo 的坑） */
.vb-auth__mark--logo {
	width: auto; height: auto; background: none; border-radius: 0;
	display: flex; justify-content: center;
}
.vb-auth__mark--logo img { height: 44px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.vb-auth__title { margin: 0; font-size: 20px; font-weight: 600; }
.vb-auth__desc { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.vb-auth__foot { margin-top: 16px; text-align: center; font-size: 12px; color: var(--muted); }
.vb-auth__foot a { color: var(--brand); }
.vb-auth__switch {
	display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border);
	border-radius: var(--radius-sm); padding: 3px; margin-bottom: 18px;
}
.vb-auth__switch a {
	flex: 1; text-align: center; padding: 6px 8px; border-radius: 4px;
	font-size: 12px; color: var(--muted);
}
.vb-auth__switch a.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ---------- 筛选栏 ---------- */
.vb-filters {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 12px; margin-bottom: 14px;
}
.vb-filters .vb-field { margin: 0; flex: 1 1 180px; }
.vb-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.vb-chip {
	border: 1px solid var(--border); background: var(--surface);
	border-radius: 999px; padding: 3px 12px; font-size: 12px; color: var(--muted);
	cursor: pointer;
}
.vb-chip:hover { border-color: var(--brand); color: var(--brand); }
.vb-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* ---------- 排序条 ---------- */
.vb-sortbar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	margin: 0 0 14px;
}
.vb-sortbar__label { font-size: 12px; color: var(--muted); }
.vb-chip--sort { display: inline-flex; align-items: center; gap: 4px; }
/* 双向箭头：未激活时两支都在（提示「可排序」），激活后 CSS 只留当前方向那一支。 */
.vb-chip__caret {
	width: 7px; height: 10px; flex: 0 0 auto;
	fill: none; stroke: currentColor; stroke-width: 1.6;
	stroke-linecap: round; stroke-linejoin: round;
	opacity: .55;
}
.vb-chip.is-active .vb-chip__caret { opacity: 1; }
.vb-chip--sort.is-asc .vb-caret-dn,
.vb-chip--sort.is-desc .vb-caret-up { display: none; }

/* ---------- 分页 ---------- */
.vb-pager {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	margin: 24px 0 8px;
}
.vb-pager__btn {
	border: 1px solid var(--border); background: var(--surface);
	border-radius: var(--radius-sm); padding: 7px 16px; font-size: 13px;
}
.vb-pager__btn:hover { border-color: var(--brand); color: var(--brand); }
.vb-pager__info { font-size: 12px; color: var(--muted); }

/* ---------- 商品详情 ---------- */
.vb-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
.vb-breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.vb-breadcrumb a:hover { color: var(--brand); }
.vb-breadcrumb span { margin: 0 6px; color: #b9b5ae; }

.vb-detail__brand {
	font-family: var(--font-latin); font-size: 12px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--muted);
}
.vb-detail__title { margin: 6px 0 0; font-size: 30px; font-weight: 500; line-height: 1.25; font-family: var(--font-serif); }
.vb-detail__pricerow {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	margin: 16px 0 6px;
}
.vb-detail__price { font-family: var(--font-num); font-size: 34px; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.vb-detail__pricenote { font-size: 12px; color: var(--muted); }

.vb-specs {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px; background: var(--border);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	overflow: hidden; margin: 18px 0;
}
.vb-spec { background: var(--surface); padding: 11px 13px; }
.vb-spec__k { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.vb-spec__v { font-size: 14px; margin-top: 2px; }

/* ---------- 商品画廊 ---------- */
.vb-gallery { display: grid; gap: 10px; }

.vb-gallery__stage {
	position: relative;
	border: 1px solid #e1ddd8; border-radius: var(--radius-sm);
	overflow: hidden; background: #f4f2ef;
}
/*
 * 实拍图是**竖构图**：75 张里 58 张是 828×1104（正好 3:4），另有少数
 * 828×1431 的全身照。原来固定 4/3 的横容器配 object-fit:cover，
 * 等于把表壳上下各裁掉一大截 —— 二手表最该看清的地方反而没了。
 *
 * 两个决定：
 *   1) 容器改成 3:4 —— 多数图天然吻合，零裁切；
 *   2) 用 contain 而不是 cover —— 少见的全身照宁可两侧留白，也不裁。
 *      商家拍图是为了如实交代成色，裁掉的部分可能正是瑕疵所在；
 *      买家收到实物与图不符，比留两条白边严重得多。
 */
.vb-gallery__stage .vb-thumb { aspect-ratio: 3 / 4; }
.vb-gallery__img {
	display: block; width: 100%; aspect-ratio: 3 / 4;
	object-fit: contain; background: #f4f2ef;
}

.vb-gallery__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px; padding: 0;
	display: grid; place-items: center;
	border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(255, 255, 255, .88); color: var(--text);
	box-shadow: var(--shadow-sm);
	opacity: 0; transition: opacity .18s ease, background .18s ease;
}
.vb-gallery__nav svg { width: 17px; height: 17px; }
.vb-gallery__nav--prev { left: 10px; }
.vb-gallery__nav--next { right: 10px; }
.vb-gallery__stage:hover .vb-gallery__nav,
.vb-gallery__nav:focus-visible { opacity: 1; }
.vb-gallery__nav:hover { background: #fff; }
/* 触屏没有 hover，按钮常显 —— 否则翻页功能在手机上等于不存在 */
@media (hover: none) {
	.vb-gallery__nav { opacity: 1; }
}

.vb-gallery__count {
	position: absolute; right: 10px; bottom: 10px;
	background: rgba(23, 25, 27, .62); color: #fff;
	font-family: var(--font-latin); font-size: 11px; letter-spacing: .06em;
	padding: 3px 8px; border-radius: 999px; pointer-events: none;
}

.vb-gallery__thumbs {
	display: grid; gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
}
.vb-gallery__thumb {
	padding: 0; aspect-ratio: 1 / 1; cursor: pointer;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: #fff; overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.vb-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vb-gallery__thumb:hover { border-color: #b9b5ae; }
.vb-gallery__thumb.is-active {
	border-color: var(--brand); box-shadow: 0 0 0 2px rgba(158, 33, 27, .16);
}
.vb-gallery__thumb:focus-visible {
	outline: 2px solid var(--brand); outline-offset: 2px;
}

.vb-gate {
	background: var(--warn-bg); border: 1px solid var(--warn-border);
	border-radius: var(--radius-sm); padding: 12px 14px; margin: 16px 0;
	font-size: 13px; line-height: 1.6;
}
.vb-gate strong { color: #8a6d1f; }

/* ---------- 端内工作台布局 ---------- */

/*
 * 工作台宽版式。
 *
 * 全站版心 960px 是给商城前台定的：商品网格与正文一行 70~90 字符最好读。
 * 但工作台是**数据密集型**界面 —— 后台订单表有 8 列，960px 下实测
 * 「Blancpain Fifty Fathoms」被压成三行、买家/货主列也各自折行，
 * 一屏只看得到六行订单，右侧还空掉近三分之一窗口。
 *
 * 所以按端区分：商城前台维持 960px，四端工作台放宽到 --container-wide，
 * 顶栏与页脚一并放宽，三者的左右边界才对得齐。
 * 判定类 vb-body--workbench 由 functions.php 的 vanby_is_workbench() 输出。
 */
.vb-body--workbench .vb-container,
.vb-body--workbench .vb-topbar__inner {
	max-width: var(--container-wide);
}

/* 宽屏下侧栏略加宽、两栏间距拉开，避免菜单与内容糊成一片 */
@media (min-width: 1200px) {
	.vb-body--workbench .vb-shell {
		grid-template-columns: 232px minmax(0, 1fr);
		gap: 24px;
	}
	.vb-body--workbench .vb-aside__link { font-size: 13.5px; padding: 9px 12px; }
	/* 页面标题随版心一起放大，否则全宽下会显得像个脚注 */
	.vb-body--workbench .vb-pagehead__title { font-size: 25px; }
	.vb-body--workbench .vb-pagehead { margin-bottom: 18px; }
}

/*
 * 宽表：给一个最小宽度，宁可横向滚动，也不让单元格把型号压成竖排。
 * 只在宽屏生效 —— 窄屏本来就要滚，这里不添乱。
 */
@media (min-width: 1100px) {
	.vb-body--workbench .vb-table { min-width: 940px; }
	.vb-body--workbench .vb-table th { padding: 11px 14px; }
	.vb-body--workbench .vb-table td { padding: 13px 14px; }
}

.vb-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; }
.vb-aside {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 12px; position: sticky; top: 68px;
}
.vb-aside__title {
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--muted); padding: 4px 8px 10px;
}
.vb-aside__link {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 8px 10px; border-radius: var(--radius-sm);
	font-size: 13px; color: var(--muted);
}
.vb-aside__link:hover { background: var(--bg); color: var(--text); }
.vb-aside__link.is-active { background: #faf3f2; color: var(--brand); font-weight: 600; }
.vb-aside__count {
	font-family: var(--font-latin); font-size: 11px; background: var(--bg);
	border-radius: 999px; padding: 0 7px; color: var(--muted);
}
.vb-aside__link.is-active .vb-aside__count { background: var(--brand); color: #fff; }

.vb-pagehead { margin-bottom: 16px; }
.vb-pagehead__title { margin: 0; font-size: 21px; font-weight: 600; }
.vb-pagehead__desc { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- 工作台：分页 / 待办卡片 / 分享链接 ---------- */

/*
 * 分页条。
 *
 * 贴在卡片底部、与表格同一张纸上（所以底色比表格的 #faf9f7 略浅、
 * 靠一条上边框分隔），不另起一张卡片 —— 分页是表格的一部分，不是新板块。
 */
.vb-pager {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 10px; padding: 12px 16px;
	border-top: 1px solid #ebe8e2; background: #fcfbf9;
}
.vb-pager__info { font-size: 12px; color: var(--muted); }
.vb-pager__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vb-pager__btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; height: 30px; padding: 0 9px;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--surface); color: var(--text);
	font-size: 12px; line-height: 1;
}
a.vb-pager__btn:hover { border-color: var(--brand); color: var(--brand); }
.vb-pager__btn.is-active {
	background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
.vb-pager__btn.is-disabled { color: #b6b2aa; background: var(--bg); cursor: not-allowed; }
.vb-pager__gap { padding: 0 2px; color: var(--muted); font-size: 12px; }

/*
 * 可点的统计卡。
 *
 * 总览那几张卡原先全是静态 div —— 运营看到「待处理售后 1」还得自己回忆
 * 该去哪个菜单找。做成链接后这一屏才是「今天的活」。
 * 注意 .vb-stat 原本是 div（block），换成 a 之后必须显式给 display:block，
 * 否则四张卡会挤成一行。
 */
a.vb-stat, a.vb-card--link {
	display: block; color: inherit; text-decoration: none;
	transition: border-color .15s, box-shadow .15s, transform .1s;
}
a.vb-stat:hover, a.vb-card--link:hover {
	border-color: var(--brand);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}
a.vb-stat:hover .vb-stat__label, a.vb-card--link:hover .vb-stat__label { color: var(--brand); }
a.vb-stat:active, a.vb-card--link:active { transform: translateY(0); }

/*
 * 分享链接单元格：完整链接 + 复制按钮。
 * 链接本身在窄屏会很长，交给它自己省略，按钮始终留在原地。
 */
.vb-share { display: flex; align-items: center; gap: 6px; }
.vb-share code {
	flex: 1 1 auto; min-width: 0; max-width: 280px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px; color: var(--muted); white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
}
.vb-share .vb-btn { flex: none; }

/* 售后原因：完整显示。这一列是判赔依据，不参与「省地方」。 */
.vb-reason { max-width: 460px; white-space: normal; line-height: 1.55; }

/* ---------- 订单 / 明细行 ---------- */
.vb-order {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
}
.vb-order__head {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	padding: 11px 14px; background: #faf9f7; border-bottom: 1px solid var(--border);
	font-size: 12px; color: var(--muted);
}
.vb-order__no { font-family: var(--font-latin); color: var(--text); font-weight: 500; letter-spacing: .02em; }
.vb-order__body { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px; align-items: center; }
.vb-order__media { width: 76px; flex: none; }
.vb-order__info { flex: 1 1 200px; min-width: 0; }
.vb-order__name { font-size: 14px; font-weight: 600; }
.vb-order__sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.vb-order__amount {
	font-family: var(--font-num); font-size: 17px; font-weight: 500;
	text-align: right; flex: none; font-variant-numeric: lining-nums tabular-nums;
}
.vb-order__actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none; }
.vb-order__actions form { margin: 0; }

.vb-kv { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.vb-kv b { color: var(--text); font-weight: 600; }

.vb-linkbox {
	display: flex; gap: 8px; align-items: center;
	background: #faf9f7; border: 1px solid var(--border);
	border-radius: var(--radius-sm); padding: 7px 10px; margin-top: 8px;
}
.vb-linkbox code {
	flex: 1 1 auto; min-width: 0; font-size: 11px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: var(--muted);
}

/* ---------- 空态 / 提示 ---------- */
.vb-muted { color: var(--muted); }
.vb-small { font-size: 12px; }
.vb-mono { font-family: var(--font-latin); letter-spacing: .02em; }
.vb-right { text-align: right; }
.vb-nowrap { white-space: nowrap; }
.vb-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.vb-tab {
	padding: 6px 13px; border-radius: var(--radius-sm); font-size: 12px;
	color: var(--muted); border: 1px solid transparent;
}
.vb-tab:hover { background: var(--surface); border-color: var(--border); }
.vb-tab.is-active { background: var(--surface); border-color: var(--border); color: var(--brand); font-weight: 600; }

/* ---------- 页脚 ---------- */
.vb-footer {
	background: var(--surface); border-top: 1px solid var(--border);
	padding: 32px 0 26px; margin-top: 40px;
}
.vb-footer__grid {
	display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px;
}
.vb-footer__brand { font-family: var(--font-latin); font-size: 15px; font-weight: 500; letter-spacing: .04em; }
/* 页脚品牌位改用 logo 图：横长图按高度定尺，line-height 归零去掉图片下方的行盒间隙 */
.vb-footer__brand--logo { line-height: 0; }
.vb-footer__brand--logo img { height: 26px; width: auto; max-width: 190px; object-fit: contain; display: block; }
/* .vb-footer__desc 已于 2026-10-29 删除：页脚品牌位只留 logo。 */
.vb-footer__coltitle { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.vb-footer__link { display: block; font-size: 12px; color: var(--muted); padding: 3px 0; }
.vb-footer__link:hover { color: var(--brand); }
.vb-footer__bottom {
	margin-top: 26px; padding-top: 16px; border-top: 1px solid #ebe8e2;
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
	font-size: 11px; color: var(--muted);
}

/* ---------- 端口入口卡（首页） ---------- */
.vb-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vb-entry {
	display: block; background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 16px;
	transition: border-color .16s, box-shadow .16s, transform .16s;
}
.vb-entry:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.vb-entry__tag {
	display: inline-block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--brand); border: 1px solid #e8c8bd; background: #fdf7f5;
	border-radius: 6px; padding: 1px 6px;
}
.vb-entry__title { margin: 9px 0 0; font-size: 16px; font-weight: 600; }
.vb-entry__desc { margin: 5px 0 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.vb-entry__foot {
	margin-top: 12px; padding-top: 10px; border-top: 1px solid #ebe8e2;
	font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px;
}
.vb-entry__foot code { font-family: ui-monospace, Menlo, monospace; color: var(--text); }

/* ---------- 服务与保障（首页信任背书） ---------- */
/* 独立栅格类：不复用 .vb-grid--4，免得被「手机上单列」的通用规则压掉 */
.vb-assure-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vb-assure {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 16px;
	display: flex; flex-direction: column; gap: 8px;
}
/* 用汉字做「印记」而不是图标字体：本品类里方块字比通用图标更贴气质，
   也省掉一个图标依赖。纯装饰，已 aria-hidden。 */
.vb-assure__mark {
	width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
	display: grid; place-items: center;
	background: #fdf7f5; border: 1px solid #e8c8bd; color: var(--brand);
	font-size: 16px; font-weight: 600; line-height: 1;
}
.vb-assure__title { margin: 0; font-size: 15px; font-weight: 600; }
.vb-assure__desc { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* 印记与图形左右分列（印在左、图形在右）。
   这条是结构性的，别挂在任何方案前缀下 —— 否则换视口/换上下文时会退化成上下堆叠。 */
.vb-assure__top { display: flex; align-items: center; justify-content: space-between; }

/*
 * 线描图形的公共笔法。
 * fill:none + stroke:currentColor 不能省 —— SVG 默认 fill 是黑色实心，
 * <use> 引用 <symbol> 时也一样：不显式关掉填充，线描图形会被填成一坨色块
 * （放大镜变圆点、档案变方块、盾牌被填满）。
 */
.vb-assure__art {
	width: 30px; height: 30px; flex: 0 0 auto;
	color: var(--brand); opacity: .62;
	fill: none; stroke: currentColor; stroke-width: 1.5;
	stroke-linecap: round; stroke-linejoin: round;
}

/*
 * 流程轴：01 → 04。
 * 这是一条「横线 + 四个等距圆点」，用 grid 的四列对齐下面的四张卡；
 * 圆点用 justify-self:center 落在每列中央，横线左右各留 12.5%
 * （= 半个列宽）从第一个圆点连到最后一个圆点，两端不溢出。
 */
.vb-flowline {
	position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px; margin: 0 0 10px;
}
.vb-flowline::before {
	content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 9px;
	height: 1px; background: #e0b6a8;
}
.vb-flowline b {
	position: relative; z-index: 1; justify-self: center;
	width: 19px; height: 19px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--surface); border: 1px solid #e0b6a8; color: var(--brand);
	font-family: var(--font-latin);
	font-size: 9.5px; font-weight: 700; letter-spacing: 0;
}
.vb-flowline b.is-end { background: var(--brand); border-color: var(--brand); color: #fff; }

.vb-assure__foot {
	margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center;
}
.vb-assure__foot a { color: var(--brand); }

/* 商品详情页的保障条 */
.vb-assure-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.vb-assure-list li {
	font-size: 12.5px; color: var(--muted); line-height: 1.6;
	padding-left: 14px; position: relative;
}
.vb-assure-list li::before {
	content: ''; position: absolute; left: 0; top: 7px;
	width: 5px; height: 5px; border-radius: 50%; background: #e0b6a8;
}
.vb-assure-list b { color: var(--text); font-weight: 600; margin-right: 4px; }

/* 首页收口区 —— 替代原「专业…」三张功能卡（那三张里两张与首屏重复、一张是新客死路） */
.vb-close {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 22px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
}
.vb-close__body { flex: 1 1 320px; min-width: 0; }
.vb-close__actions { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
	.vb-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vb-grid--4, .vb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vb-assure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vb-close { padding: 18px; gap: 14px; }
	.vb-shell { grid-template-columns: minmax(0, 1fr); }
	.vb-aside { position: static; }
	.vb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vb-detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	body.vb-body { font-size: 13px; }
	.vb-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vb-grid--3, .vb-grid--4, .vb-stats { grid-template-columns: minmax(0, 1fr); }
	.vb-formgrid { grid-template-columns: minmax(0, 1fr); }
	/* 竖向内边距留这里，横向交给 .vb-container 的 16px —— 原来 Hero 自己还有 20px，
	   和容器叠加后手机端左右各 36px，比别处宽一倍，白丢了 32px 的可用宽度。 */
	.vb-hero { padding: 90px 0 64px; }
	/* 标题用 clamp 跟着屏宽走，而不是钉一个 px 值。
	   首行「让每一次腕表交易，」是 9 个全角字，宽度需求 = 字号 × 9.2（含字距），
	   9.2vw 在 320–640px 区间都留得住这 9 个字，断点稳定落在逗号上。
	   钉 40px 时 320–390px 的机器会把「交易」拆到两行，钉 37px 又会在 320px 上偏大。 */
	.vb-hero__title { font-size: clamp(28px, 9.2vw, 44px); }
	.vb-section__title { font-size: 19px; }
	.vb-detail__title { font-size: 22px; }
	.vb-detail__price { font-size: 26px; }
	.vb-specs { grid-template-columns: minmax(0, 1fr); }
	/* 移动端导航：折叠成汉堡抽屉 */
	.vb-burger { display: inline-flex; }
	.vb-navbar {
		flex: 1 1 100%; order: 10;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #fff; max-height: 0; overflow: hidden;
		opacity: 0; transform: translateY(-8px);
		transition: max-height .5s cubic-bezier(.16, 1, .3, 1),
			opacity .4s cubic-bezier(.16, 1, .3, 1),
			transform .4s cubic-bezier(.16, 1, .3, 1);
	}
	.vb-topbar.is-open .vb-navbar {
		max-height: calc(100vh - 56px); overflow-y: auto;
		border-top: 1px solid var(--border);
		opacity: 1; transform: translateY(0);
	}
	/* 首页透明导航展开菜单时切回白底深字，logo / 汉堡跟着换色 */
	.vb-topbar--overlay.is-open { background: #fff; border-bottom-color: var(--border); }
	.vb-topbar--overlay.is-open .vb-brand__logo--invert { display: none; }
	.vb-topbar--overlay.is-open .vb-brand__logo:not(.vb-brand__logo--invert) { display: block; }
	.vb-topbar--overlay.is-open .vb-burger { color: var(--text); }
	.vb-topbar--overlay.is-open .vb-nav__link { color: var(--muted); }
	.vb-topbar--overlay.is-open .vb-nav__link:hover { color: var(--text); background: var(--bg); }
	.vb-topbar--overlay.is-open .vb-nav__link.is-active { color: var(--brand); background: #faf3f2; }
	.vb-topbar--overlay.is-open .vb-langs { border-color: var(--border); background: var(--surface); }
	.vb-topbar--overlay.is-open .vb-langs__item { color: var(--muted); }
	.vb-topbar--overlay.is-open .vb-langs__item.is-active { background: var(--brand); color: #fff; }
	.vb-topbar--overlay.is-open .vb-currency { background: #f4f0e8; color: #624819; }
	/* 汉堡三线 → X 动画 */
	.vb-topbar.is-open .vb-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.vb-topbar.is-open .vb-burger__line:nth-child(2) { opacity: 0; }
	.vb-topbar.is-open .vb-burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.vb-nav { flex: none; flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
	.vb-nav__link { display: block; padding: 13px 18px; border-radius: 0; white-space: normal; font-size: 15px; }
	.vb-topbar__right {
		flex-direction: column; align-items: stretch; gap: 10px;
		width: 100%; margin-left: 0; padding: 16px 18px;
		border-top: 1px solid var(--border);
	}
	.vb-topbar__right .vb-btn { width: 100%; }
	.vb-currency { display: none; }
	.vb-langs { justify-content: center; }
	.vb-langs__item { padding: 3px 11px; }
	.vb-entries { grid-template-columns: minmax(0, 1fr); }
	/* 保障条目短，手机上保持两列更好扫读，也少掉一屏滚动 */
	.vb-assure { padding: 13px; gap: 6px; }
	.vb-assure__mark { width: 28px; height: 28px; border-radius: 7px; font-size: 14px; }
	.vb-assure__art { width: 24px; height: 24px; opacity: .55; }
	.vb-assure__title { font-size: 14px; }
	.vb-assure__desc { font-size: 12px; }
	/* 流程轴在手机上必须撤掉：四卡折成两行两列，01→04 的横线会被折断，
	   保留反而让人以为「流程断了」—— 比没有轴更糟。 */
	.vb-flowline { display: none; }
	/* 收口区在手机上按钮要占满整行，别留出半截空白 */
	.vb-close { padding: 16px; }
	.vb-close__actions { width: 100%; }
	/*
	 * 分类导览：手机上一左一右（男左女右），竖版大卡（2026-10-29 陈总圈图放大）。
	 *
	 * 原来 media 只有 92px 高，配 14px 的标题，读起来像两枚「标签」而不是
	 * 通往两个品类的大门。改成竖构图（2:3）后，卡片在 360 屏上约 159×320，
	 * 与「男左女右」的并列关系一起构成一块有分量的导览区。
	 *
	 * 用 aspect-ratio 而不是写死 height：卡片宽度由网格决定，
	 * 屏宽变了高度跟着走，任何手机上都保持同一个构图，不会在某档屏宽上被压扁。
	 * MEN / WOMEN 的字母同步放大 —— 在 248px 高的深色块里，
	 * 20px 的字会缩成一个小标签，白白浪费这块面积。
	 */
	.vb-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.vb-cat__media { aspect-ratio: 2 / 3; height: auto; }
	.vb-cat__mono { font-size: 27px; letter-spacing: .2em; padding-left: .2em; }
	.vb-cat__label { padding: 17px 15px 19px; gap: 5px; }
	.vb-cat__name { font-size: 16px; }
	.vb-cat__sub { font-size: 11.5px; }
	/*
	 * 内容资讯：手机上改为左右翻页的卡片轨道，不再竖排堆叠。
	 *
	 * 三张卡竖排要占掉两屏（每张约 400px），而资讯本身是「顺带看一眼」的内容，
	 * 不该把首页正文推下去。横滑后整块只剩一张卡的高度。
	 *
	 * 破边：.vb-container 有 16px 内边距，负 margin 抵消后轨道贴到屏幕两侧，
	 * 首尾卡再用 padding-inline 推回正文左缘，滑动时卡片能滑进屏幕边缘，
	 * 不会在半截处突然消失。
	 */
	.vb-journal__grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		margin-inline: -16px;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.vb-journal__grid::-webkit-scrollbar { display: none; }
	/* 78% 宽：一张半入画的宽度，右边永远露出下一张的一角 ——
	   这就是「还能往左滑」的提示，不需要额外的箭头或圆点。 */
	.vb-journal__grid > .vb-jcard {
		flex: 0 0 clamp(240px, 78%, 420px);
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	/*
	 * 封面从 16:9 改成 1:1（2026-10-29 陈总圈图放大）。
	 *
	 * 16:9 配 71% 的卡宽，在 360 屏上封面只有 144px 高 —— 加上下面两行字，
	 * 整张卡读起来是「一条横幅 + 一句说明」，不像一篇文章的入口。
	 * 陈总圈的框约为 71%×140% 屏宽，方形封面 + 文字区落在 1:1.4，
	 * 既跟上了手绘框的体量，又不至于让「顺带看一眼」的资讯吃掉大半屏。
	 *
	 * 封面面积变大后图标同步放到 40px，否则会在正中缩成一个点。
	 */
	.vb-jcard__cover { aspect-ratio: 1 / 1; }
	.vb-jcard__cover svg { width: 40px; height: 40px; }
	.vb-jcard__body { padding: 17px 18px 19px; gap: 7px; }
	.vb-jcard__tag { font-size: 10.5px; }
	.vb-jcard__title { font-size: 17px; }
	/* 标题层级调换：手机上主标题缩到 22px */
	.vb-featured__head .vb-section__title,
	.vb-section__head--center .vb-section__title { font-size: 22px; }
	.vb-order__amount { text-align: left; }
	.vb-order__actions { justify-content: flex-start; width: 100%; }
	.vb-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 法律与合规页 ---------- */
/*
 * 正文列宽刻意收窄。法务文本的价值在「读得进去」，
 * 而全站版心（960px）铺满一行会是 90+ 字符，读三段就会跳行。
 * 收在 760px 左右接近 70 字符的可读区间，右侧留白反而让页面显得更正式。
 */
.vb-legal { max-width: 760px; }
.vb-legal__head { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.vb-legal__title { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 6px 0 0; }
.vb-legal__summary {
	font-size: 14px; color: var(--muted); line-height: 1.7;
	margin: 10px 0 0; max-width: 640px;
}
.vb-legal__stamp {
	display: flex; flex-wrap: wrap; gap: 8px 18px;
	margin-top: 14px; font-size: 12px; color: var(--muted);
}
.vb-legal__stamp b { color: var(--text); font-weight: 600; }

/* 待完善提示：与站点其它提示同色系（警示黄），不新造一套视觉语言 */
.vb-legal__pending {
	background: var(--warn-bg); border: 1px solid var(--warn-border);
	border-radius: var(--radius-sm); padding: 12px 14px; margin: 20px 0 0;
	font-size: 13px; color: #6b5218;
}
.vb-legal__pending strong { display: block; font-size: 13px; margin-bottom: 4px; }
.vb-legal__pending p { margin: 0; line-height: 1.65; color: #7a5f1d; }
.vb-legal__pending ul {
	margin: 8px 0 0; padding-left: 18px;
	display: flex; flex-wrap: wrap; gap: 2px 16px; list-style: disc;
}
.vb-legal__pending li { font-size: 12px; }

.vb-legal__body { margin-top: 24px; }
.vb-legal__block { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid #ebe8e2; }
.vb-legal__block:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.vb-legal__block h2 {
	font-size: 15px; font-weight: 600; margin: 0 0 10px;
	color: var(--text); letter-spacing: -.005em;
}
.vb-legal__block p { font-size: 13px; line-height: 1.85; color: #3a3d40; margin: 0 0 10px; }
.vb-legal__block p:last-child { margin-bottom: 0; }
.vb-legal__block ul { margin: 0 0 10px; padding-left: 20px; }
.vb-legal__block li { font-size: 13px; line-height: 1.85; color: #3a3d40; margin-bottom: 6px; }
.vb-legal__block li::marker { color: var(--brand); }
.vb-legal__cta { margin-top: 12px; }

.vb-legal__entity { margin-top: 26px; }
.vb-legal__entity .vb-kv { flex-direction: column; gap: 8px; font-size: 13px; }
.vb-legal__entity .vb-kv > span { display: flex; gap: 10px; }
.vb-legal__entity .vb-kv > span::before { content: ""; }
/* 待确认值用红色标出，避免它被当成已生效的正式条款读过去 */
.vb-legal__entity .is-pending { color: var(--danger); }

.vb-legal__more {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
	margin: 22px 0 8px; padding-top: 16px; border-top: 1px solid var(--border);
	font-size: 12px; color: var(--muted);
}
.vb-legal__more a { color: var(--brand); }
.vb-legal__more a:hover { text-decoration: underline; }

/* 页脚法务链接行：横向一行，放在版权行上方 */
.vb-footer__legal {
	display: flex; flex-wrap: wrap; gap: 6px 18px;
	margin-top: 26px; padding-top: 16px; border-top: 1px solid #ebe8e2;
}
.vb-footer__legal .vb-footer__link { display: inline; padding: 0; }

@media (max-width: 640px) {
	.vb-legal__title { font-size: 22px; }
	.vb-legal__block h2 { font-size: 14px; }
	.vb-footer__legal { gap: 8px 14px; }
}

/* ---------- 顶栏通知铃铛 ---------- */
.vb-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vb-bell {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	color: var(--muted); transition: color .16s, background .16s;
}
.vb-bell:hover { color: var(--brand); background: #f6f4f1; }
.vb-bell__ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vb-bell__count {
	position: absolute; top: -1px; right: -1px;
	min-width: 15px; height: 15px; padding: 0 3px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--brand); color: #fff; font-size: 10px; font-weight: 600;
	line-height: 1; border-radius: 8px; font-family: var(--font-latin);
}

/* ---------- 收藏通知列表 ---------- */
.vb-notifies { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.vb-notify {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 12px 14px; border-radius: var(--radius-sm);
	border-left: 3px solid transparent;
	transition: background .14s, border-color .14s;
}
.vb-notify:hover { background: #faf9f7; }
/* 未读：左侧色条 + 名字加粗。不用背景色，否则一屏都是未读时整页发花 */
.vb-notify.is-unread { border-left-color: var(--brand); background: #fdfcfb; }
.vb-notify.is-unread .vb-notify__name { font-weight: 600; }
.vb-notify__media { flex: 0 0 auto; width: 60px; }
.vb-notify__media img, .vb-notify__media .vb-thumb { width: 60px; border-radius: var(--radius-sm); display: block; }
.vb-notify__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vb-notify__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vb-notify__type {
	font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px;
	background: #f2f1ee; color: var(--muted);
}
.vb-notify__type.is-price_drop { background: #faf3f2; color: var(--brand); }
.vb-notify__type.is-restock    { background: #f2f8f4; color: #2f7a4d; }
.vb-notify__type.is-new_listing{ background: #f2f7fa; color: #31586f; }
.vb-notify__type.is-sold       { background: #f2f1ee; color: #6a6a66; }
.vb-notify__time { font-size: 11px; color: var(--muted); }
.vb-notify__name { font-size: 13px; color: var(--text); }
.vb-notify__detail { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.vb-notify__old { text-decoration: line-through; }
.vb-notify__new { color: var(--brand); font-weight: 600; }

@media (max-width: 640px) {
	.vb-bell { width: 26px; height: 26px; }
	.vb-notify { padding: 10px 12px; }
	.vb-notify__media, .vb-notify__media img, .vb-notify__media .vb-thumb { width: 48px; }
}

/* ---------------------------------------------------------------------------
 * 价格框：含费到手价 + 费用明细
 *
 * 挂牌价之外还有客户端服务费，如果把服务费藏到结算页才出现，
 * 买家会觉得被加价。这里把它和挂牌价一起摊开，付款方式切换时总额实时跟着变。
 * ------------------------------------------------------------------------ */
.vb-pricebox {
	margin: 16px 0 6px;
	padding: 14px 16px;
	background: #faf9f7;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.vb-pricebox__head { display: flex; align-items: center; gap: 10px; }
.vb-pricebox__label { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.vb-pricebox__total {
	font-family: var(--font-num);
	font-size: 34px;
	/* 无衬线比衬线"看起来更重"，700 会压过页面标题，降到 600 保持层级。 */
	font-weight: 600;
	line-height: 1.15;
	margin: 4px 0 10px;
}
/*
 * 说明（2026-10-13）：价格框原先逐项列出「腕表价格 / 检测与售后服务费 /
 * 信用卡通道费」，现按裁决收敛为「只给一个到手总价」，费用构成移入
 * 《购买须知》。故 __lines / __line 相关样式一并撤除；提示行改用虚线
 * 分隔承接原有视觉节奏，避免总价下方显得空。
 *
 * 另：历史上这里踩过一个坑 —— UA 的 [hidden]{display:none} 优先级低于
 * 作者写的 display:flex，不清掉的话「切到电汇时」信用卡通道费那一行
 * 会一直挂在页面上。元素虽已移除，将来若恢复明细行必须同时补回兜底。
 */
.vb-pricebox__note {
	font-size: 12px;
	color: var(--muted);
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px dashed var(--border);
	line-height: 1.6;
}
.vb-pricebox__note a { color: var(--brand-strong); font-weight: 600; }

/* ---------------------------------------------------------------------------
 * 付款方式选择：电汇免附加费、信用卡按卡组织跨境成本加收
 * ------------------------------------------------------------------------ */
.vb-paymethod { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.vb-paymethod__opt {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	cursor: pointer;
	font-size: 13px;
}
.vb-paymethod__opt:has(input:checked) {
	border-color: var(--brand);
	box-shadow: inset 0 0 0 1px var(--brand);
}
.vb-paymethod__hint { font-size: 11px; color: var(--muted); }
.vb-paymethod--sm { margin: 0; gap: 6px; }
.vb-paymethod--sm .vb-paymethod__opt { padding: 5px 9px; font-size: 12px; }

/* 订单卡费用明细：总额下面摊开腕表价格 / 服务费 / 刷卡附加 */
.vb-order__total { font-family: var(--font-num); font-size: 17px; font-weight: 500; }
.vb-order__fee {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	justify-content: flex-end;
	font-size: 11px;
	color: var(--muted);
	margin-top: 3px;
}

@media (max-width: 640px) {
	.vb-pricebox { padding: 12px 13px; }
	.vb-pricebox__total { font-size: 26px; }
	.vb-order__fee { justify-content: flex-start; }
}

/* 支付前的服务费确认：勾选才允许提交（后端还会再校验一次，前端只是提示）。 */
.vb-consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 10px 0 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
}
.vb-consent input { margin-top: 2px; flex: 0 0 auto; }
.vb-consent b { color: var(--text); }

/* =========================================================================
   首页「交易保障」—— 鉴定工序 / 交易流程 / 物流保障 三卡片
   色带深色接首屏，三张卡片平铺展示，不做弹窗；底部「更多关于我们」入口。
   ========================================================================= */

.vb-pillars {
	/* 2026-10-29：三卡在深色里"看不清"，问题不在文字而在卡片本身。
	   浅色字放在 rgba(255,255,255,.035) 的卡上，卡片几乎与底色同色，
	   只剩一圈 13% 的细边在撑轮廓，读起来像页面的一段空隙而不是三张卡。
	   这里把描边提到 20%、强调色提亮一档，卡片先有实体，字才立得住。 */
	--pv-accent: #f0c6c0;
	--pv-line: rgba(255, 255, 255, .2);
	background: var(--hero-bg);
	color: #fff;
	position: relative;
}

.vb-pillars__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	padding: 48px 0 6px;
}

.vb-trustcard {
	display: flex;
	flex-direction: column;
	padding: 26px 24px 24px;
	/* 自上而下微渐变，模拟深色界面里"被顶起来"的面板；
	   平涂一层半透明白在 #0b0606 上会和底色糊在一起。 */
	background: linear-gradient(180deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .045));
	border: 1px solid var(--pv-line);
	/* 顶边一道内高光：渐变不够时这一步给出清晰的"卡口"。 */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	border-radius: 12px;
	transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.vb-trustcard:hover {
	border-color: rgba(240, 198, 192, .55);
	background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .07));
	transform: translateY(-3px);
}

/* 序号仅手机端显示（桌面三张横排，数字是多余的） */
.vb-trustcard__no { display: none; }

.vb-trustcard__tag {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pv-accent);
}
.vb-trustcard__title {
	margin: 12px 0 0;
	font-size: 23px;
	font-weight: 500;
	line-height: 1.3;
	font-family: var(--font-serif);
	letter-spacing: .01em;
}
.vb-trustcard__sub {
	margin: 9px 0 0;
	font-size: 13px;
	line-height: 1.6;
	/* .6 在深底上偏灰，13px 的小字读起来发虚；提到 .74 接近正文可读线。 */
	color: rgba(255, 255, 255, .74);
}

/* 更多关于我们入口 */
.vb-pillars__more {
	display: flex;
	justify-content: center;
	padding: 24px 0 46px;
}
.vb-pillars__more a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 28px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 999px;
	color: rgba(255, 255, 255, .92);
	font-size: 13px;
	letter-spacing: .04em;
	transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.vb-pillars__more a:hover {
	border-color: var(--pv-accent);
	color: #fff;
	background: rgba(255, 255, 255, .06);
}
.vb-pillars__more svg { width: 14px; height: 14px; }

/* ---------- 断点 ---------- */
@media (max-width: 900px) {
	.vb-pillars__row { gap: 12px; }
	.vb-trustcard { padding: 22px 18px 20px; }
	.vb-trustcard__title { font-size: 20px; }
}

@media (max-width: 640px) {
	/*
	 * 交易保障三卡：手机上改为竖排三张紧凑卡（2026-10-29 陈总要求「一屏看完三点」）。
	 *
	 * 原来是横向翻页轨道，一张卡占 76% 宽 —— 屏幕上永远只能看到一张半，
	 * 另外两张要靠左右滑才知道存在。可「三道防线」的价值恰恰在于三件同时成立；
	 * 翻页把它们拆成了先后次序，读的人看完第一张就以为讲完了。
	 *
	 * 改成竖排后三张同屏可见。代价是多占约 150px 高度，换来的是整块能被一眼读完 ——
	 * 这类「我们凭什么可信」的内容，被读完整比被压缩重要。
	 *
	 * 单张从「竖排三层」压成「左侧序号 + 右侧三层」：
	 * 用 grid 把序号钉在第 1 列、跨 3 行，标签/标题/副标题占第 2 列自然成列，
	 * 卡片高度从约 160 降到约 97，三张加间距刚好一屏。
	 */
	.vb-pillars__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 9px;
		margin-inline: 0;
		padding: 22px 0 2px;
		overflow: visible;
	}
	.vb-trustcard {
		display: grid;
		/* 序号列 auto（约 15px），正文列吃掉剩余宽度 */
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 13px;
		row-gap: 0;
		align-items: start;
		padding: 15px 16px 16px;
		border-radius: 10px;
	}
	.vb-trustcard__no {
		display: block;
		grid-column: 1;
		/* 跨满三行，让序号在左侧呈一条竖列，而不是夹在标签前面 */
		grid-row: 1 / span 3;
		font-family: var(--font-num);
		font-size: 10.5px;
		line-height: 1.3;
		letter-spacing: .06em;
		/* 与右侧标签首行视觉基线对齐 */
		padding-top: 2px;
		color: var(--pv-accent);
		opacity: .72;
	}
	.vb-trustcard__tag { grid-column: 2; font-size: 10.5px; letter-spacing: .1em; }
	.vb-trustcard__title {
		grid-column: 2;
		margin: 4px 0 0;
		font-size: 18px;
		line-height: 1.3;
	}
	.vb-trustcard__sub {
		grid-column: 2;
		margin: 4px 0 0;
		font-size: 12px;
		line-height: 1.55;
	}
	.vb-pillars__more { padding: 20px 0 30px; }
}

@media (prefers-reduced-motion: reduce) {
	.vb-trustcard { transition: none; }
}

/* ---------- 滚动渐入动效（html.js 下才隐藏，防内容不可见） ---------- */
html.js .vb-reveal,
html.js .vb-stagger > * {
	opacity: 0;
	transform: translateY(28px);
	filter: blur(6px);
	transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
		transform .7s cubic-bezier(.16, 1, .3, 1),
		filter .7s cubic-bezier(.16, 1, .3, 1);
}
html.js .vb-reveal.in,
html.js .vb-stagger.in > * {
	opacity: 1;
	transform: none;
	filter: blur(0);
}
html.js .vb-stagger.in > *:nth-child(1) { transition-delay: .05s; }
html.js .vb-stagger.in > *:nth-child(2) { transition-delay: .12s; }
html.js .vb-stagger.in > *:nth-child(3) { transition-delay: .19s; }
html.js .vb-stagger.in > *:nth-child(4) { transition-delay: .26s; }
html.js .vb-stagger.in > *:nth-child(5) { transition-delay: .33s; }
html.js .vb-stagger.in > *:nth-child(6) { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
	html.js .vb-reveal,
	html.js .vb-stagger > * {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}

/* =========================================================================
   关于我们（templates/about.php）—— 交易信任体系
   深色 Hero 对齐首页 + 去 AI 痕迹的编辑排版；复用全站 .vb-reveal/.vb-stagger 渐入。
   ========================================================================= */

/* ── Hero ── */
.vb-about-hero {
	position: relative;
	background: #0b0606;
	color: #f4ede8;
	overflow: hidden;
	padding: 56px 0 64px;
}
.vb-about-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(58rem 40rem at 82% -18%, rgba(217, 75, 63, .22), transparent 62%),
		radial-gradient(40rem 32rem at 8% 110%, rgba(158, 33, 27, .16), transparent 55%);
	pointer-events: none;
}
.vb-about-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	pointer-events: none;
}
.vb-about-hero .vb-container { position: relative; z-index: 1; }

.vb-about-hero__crumb { margin-bottom: 40px; color: #9a938b; }
.vb-about-hero__crumb a { color: #c8beb7; }
.vb-about-hero__crumb a:hover { color: #d94b3f; }
.vb-about-hero__crumb span { color: #6b645e; }

/* .vb-about-hero__eyebrow 已于 2026-10-29 删除：
   与首页首屏同一处理，品牌名不再在标题上方重复一次。 */
.vb-about-hero__title {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	/* 标题现在是一整段机制陈述（中文 70 字，三个分句），不是一句口号。
	   原来 66px / 1.14 是按 12 字短句定的，套到 70 字上会变成四面墙。
	   36px 是按「最长的分句（25 字）要放得进一行」反推的上限：
	   25 × 36 ≈ 900px，版心约 934px，再大就得在分句内部折行。 */
	font-size: clamp(22px, 2.6vw, 36px);
	/* 分句之间已经用 br 断行，行高太松会变成三段独立的段落，
	   1.55 让它们仍读作一整句话。 */
	line-height: 1.55;
	letter-spacing: .012em;
	color: #f7f2ee;
	/* 26em 而非 px：版心随字号缩放，保证最长的分句在任何屏宽下都不会
	   被二次折断（26 > 第二分句 25 字）。 */
	max-width: 26em;
}
/* 英文不分句、用空格折行，字面也更长（约 240 字符），单独收小一档。 */
html[lang="en"] .vb-about-hero__title {
	max-width: 34em;
	font-size: clamp(19px, 2vw, 27px);
	line-height: 1.5;
}
.vb-about-hero__title em {
	font-style: italic;
	color: #d94b3f;
	white-space: nowrap;
}
/* .vb-about-hero__lead 已于 2026-10-29 删除：这段话升为标题本身，
   留着就是同一段文字在首屏出现两次。 */
.vb-about-hero__stats {
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid var(--hero-line);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.vb-about-hero__stat b {
	display: block;
	font-family: var(--font-latin);
	font-size: 38px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: .01em;
}
.vb-about-hero__stat b span {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 500;
	color: #d94b3f;
	margin-left: 2px;
}
/* 「万」是全角字，15px 就有分量；英文单位只有一个字母（K），同字号会像掉字。
   按 38px 数字的 0.7 倍给到 26px，K 才站得住、不像下标。 */
html[lang="en"] .vb-about-hero__stat b span { font-size: 26px; }
.vb-about-hero__stat > span {
	display: block;
	margin-top: 12px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--hero-muted);
	/* 220px 会把「全流程无损检测覆盖」挤出一个孤字，放宽到 260px 走单行 */
	max-width: 260px;
}

/* ── 正文容器 ──
   直接占满 .vb-container（960 居中）的版心，与 Hero 内容左缘对齐；
   标题/导语靠 .vb-about__leadin 的 max-width 收窄，不再套一层 880 居中。 */
.vb-about { }

/* ── 通用区块（kicker + 标题 + 导语） ── */
.vb-about__block {
	padding: 64px 0 0;
}
.vb-about__block + .vb-about__block { margin-top: 8px; }
.vb-about__leadin { max-width: 720px; }
.vb-about__kicker {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--brand);
	font-weight: 700;
	margin-bottom: 16px;
}
.vb-about__kicker--on-dark { color: #d94b3f; }
.vb-about__leadin h2 {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(27px, 3.6vw, 36px);
	line-height: 1.28;
	letter-spacing: .01em;
	color: var(--text);
	/* 英文长句在 <br> 之后的段落里再折行时，均分两行比一长一短更好看 */
	text-wrap: balance;
}
.vb-about__sub {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 2;
	color: var(--muted);
}

/* ── 痛点：编辑式列表（去卡片堆砌） ── */
.vb-about__pains {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	border-top: 1px solid var(--border);
}
.vb-about__pains li {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 4px 18px;
	padding: 26px 0;
	border-bottom: 1px solid var(--border);
}
.vb-about__pains li::before {
	content: "";
	grid-row: 1;
	align-self: start;
	width: 14px;
	height: 2px;
	margin-top: 10px;
	background: var(--brand);
	transition: width .4s cubic-bezier(.16, 1, .3, 1);
}
/* 悬停时短语线拉长，标题转品牌红——轻交互，不弹层不位移 */
.vb-about__pains li:hover::before { width: 30px; }
.vb-about__pains h3 {
	/* 显式锁定列位：::before 占列 1，标题与正文都必须在列 2，
	   否则自动放置会把 <p> 塞进 44px 的序号列，导致逐字换行。 */
	grid-column: 2;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
	letter-spacing: .01em;
	transition: color .22s;
}
.vb-about__pains li:hover h3 { color: var(--brand); }
.vb-about__pains p {
	grid-column: 2;
	margin: 7px 0 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--muted);
	max-width: 640px;
}

/* ── 专业鉴定体系：深色视觉带 + 表盘线稿 ── */
.vb-about__auth {
	position: relative;
	margin-top: 64px;
	background: #0b0606;
	color: #f4ede8;
	border-radius: 14px;
	overflow: hidden;
	padding: 52px 52px 46px;
	/* 桌面端两栏：左文右盘，把右侧留白用表盘视觉填掉；移动端在断点内改回块级 */
	display: grid;
	grid-template-columns: minmax(0, 1fr) 196px;
	column-gap: 52px;
	align-items: start;
}
.vb-about__auth::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(44rem 30rem at 90% -12%, rgba(217, 75, 63, .22), transparent 60%),
		radial-gradient(30rem 24rem at 4% 108%, rgba(158, 33, 27, .16), transparent 55%);
	pointer-events: none;
}
.vb-about__auth::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	pointer-events: none;
}
.vb-about__auth-body { position: relative; z-index: 1; grid-column: 1; grid-row: 1; }
.vb-about__auth-body h2 {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.3;
	color: #f7f2ee;
	text-wrap: balance;
}
.vb-about__auth-body p {
	margin: 18px 0 0;
	max-width: 680px;
	font-size: 13.5px;
	line-height: 2;
	color: #c8beb7;
}
.vb-about__auth-fig {
	position: relative;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	color: #d94b3f;
}
.vb-about__auth-fig svg {
	flex: none;
	width: 156px;
	height: 156px;
	opacity: .92;
	animation: vb-about-dial 9s ease-in-out infinite;
}
@keyframes vb-about-dial {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(3deg); }
}
.vb-about__auth-seal {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-latin);
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #c8beb7;
	border: 1px solid var(--hero-line);
	border-radius: 999px;
	padding: 8px 16px;
	white-space: nowrap;
}
.vb-about__auth-stats {
	position: relative;
	z-index: 1;
	grid-column: 1 / -1;
	margin-top: 44px;
	padding-top: 30px;
	border-top: 1px solid var(--hero-line);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.vb-about__auth-stat b {
	display: block;
	font-family: var(--font-latin);
	font-size: 26px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	font-variant-numeric: lining-nums tabular-nums;
}
.vb-about__auth-stat b span {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	color: #d94b3f;
	margin-left: 1px;
}
.vb-about__auth-stat > span {
	display: block;
	margin-top: 10px;
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--hero-muted);
}
/* 同上：26px 数字旁的英文单位给到 17px，中文「年/万」维持 13px。 */
html[lang="en"] .vb-about__auth-stat b span { font-size: 17px; }

/* ── 担保交易：双泳道 ── */
.vb-about__escrow {
	margin-top: 34px;
	display: grid;
	gap: 14px;
}
.vb-about__lane {
	display: grid;
	grid-template-columns: 152px 1fr;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
}
.vb-about__lane-label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 22px 20px;
	border-right: 1px solid var(--border);
	background: #faf9f7;
}
.vb-about__lane-label b {
	font-family: var(--font-latin);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--brand);
}
.vb-about__lane-label span { font-size: 12px; line-height: 1.7; color: var(--muted); text-wrap: balance; }
.vb-about__lane-body {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vb-about__cell { padding: 20px 18px; transition: background .22s; }
.vb-about__cell:hover { background: #fbf9f7; }
.vb-about__cell + .vb-about__cell { border-left: 1px solid #ebe8e2; }
.vb-about__cell .step {
	font-family: var(--font-latin);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--brand);
}
.vb-about__cell h5 { margin: 9px 0 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.vb-about__cell p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--muted); }

/* 英文的四格并排会把每格压到 ~158px，一段说明要折五六行；
   改成 2×2，每格接近 380px，行数与中文四栏相当。 */
@media (min-width: 641px) {
	html[lang="en"] .vb-about__lane-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[lang="en"] .vb-about__cell + .vb-about__cell { border-left: 0; }
	html[lang="en"] .vb-about__cell:nth-child(even) { border-left: 1px solid #ebe8e2; }
	html[lang="en"] .vb-about__cell:nth-child(n+3) { border-top: 1px solid #ebe8e2; }
}

/* ── 两条保障 ── */
.vb-about__assure {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 16px;
}
.vb-about__assure-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 22px 22px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.vb-about__assure-card:hover {
	border-color: #d9c3bf;
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
}
.vb-about__assure-card h4 { margin: 0 0 9px; font-size: 15px; font-weight: 600; color: var(--text); }
.vb-about__assure-card p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--muted); }

/* ── 收口 ── */
.vb-about__closing {
	margin-top: 64px;
	padding: 52px 28px 54px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.vb-about__closing h2 {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(24px, 3.2vw, 30px);
	line-height: 1.45;
	text-wrap: balance;
}
.vb-about__closing p {
	margin: 16px auto 0;
	max-width: 600px;
	font-size: 14px;
	line-height: 2;
	color: var(--muted);
}
.vb-about__sign {
	margin-top: 30px;
	font-family: var(--font-latin);
	font-size: 12px;
	letter-spacing: .32em;
	color: var(--brand);
}
.vb-about__cta {
	margin-top: 26px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* ── 关于我们 · 响应式 ── */
@media (max-width: 900px) {
	.vb-about__auth { display: block; }
	.vb-about__auth-fig { margin-top: 30px; flex-direction: row; align-items: center; gap: 18px; }
	.vb-about__auth-fig svg { width: 112px; height: 112px; }
	.vb-about__lane { grid-template-columns: 1fr; }
	.vb-about__lane-label {
		flex-direction: row;
		/* 基础样式是为纵向居中写的 justify-content: center，
		   改成横排后它会变成水平居中，这里要显式改回左对齐 */
		justify-content: flex-start;
		align-items: baseline;
		gap: 10px;
		padding: 13px 18px;
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}
	.vb-about__lane-body { grid-template-columns: 1fr 1fr; }
	.vb-about__cell:nth-child(odd) { border-left: 0; }
	.vb-about__cell:nth-child(n+3) { border-top: 1px solid #ebe8e2; }
	.vb-about__auth-stats { grid-template-columns: 1fr 1fr; gap: 22px; }
}

@media (max-width: 640px) {
	/*
	 * 关于我们首屏（2026-10-29 第三版，陈总指出「太紧凑，排版不好看」）。
	 *
	 * 桌面是「大数字在上、说明在下」横排三列 —— 三列并排本身就提供了分栏，
	 * 不需要额外的视觉结构。手机改成单列之后这个结构就失效了：
	 * 三个 38px 的数字竖着摞在 350px 宽里，每个数字下面挂一行 12px 的说明，
	 * 项与项之间只有 18px —— 结果「说明」到「下一个数字」的距离（约 26px）
	 * 比「说明」到「自己那个数字」的距离（8px）还大，眼睛判断不出这行字
	 * 到底属于上面还是下面。这是分组失效，不是空间不够。
	 *
	 * 所以把「数字 → 说明」从上下改回左右：一条 84px 的数字栏 + 说明栏，
	 * 每个数据成为独立的一「行」，行间一条 1px 暗线。数字右对齐，
	 * 右边缘落在同一条竖线上；说明左对齐，左边缘也落在同一条竖线上 ——
	 * 两条干净的竖线，归属不用猜。
	 *
	 * 这么改整块反而矮了约 40px，但密度明显下降：行内上下各 15px 让行距
	 * 从 18px 变成 31px，说明字号也从 12 提到 13。省下的是数字独占一行的
	 * 浪费，还回去的是行距 —— 这就是「紧凑」的解药。
	 * 顺带和首页三张保障卡（同样是竖排单列清单）用的是同一套语法，
	 * 两页读起来是一个系统。
	 */
	.vb-about-hero { padding: 36px 0 52px; }
	.vb-about-hero__crumb { margin-bottom: 34px; }
	/*
	 * 手机上的长标题（2026-10-29）。
	 *
	 * 62 个字放在 350px 里，交给浏览器自动折行一定会落在字中间 ——
	 * 实测 18–22px 各档都会把「可能」劈成「可 / 能」、「动作」劈成「标准动 / 作」。
	 * 所以这里用 word-break: keep-all 关掉「汉字之间随便断」，
	 * 只允许在 、，。 处断行（这也是中文排版的禁则：标点不能出现在行首）。
	 *
	 * 代价是每行长度不再一致，右边缘会参差 —— 但每行都收在标点上，
	 * 读起来是「三个分句被摊开」，不是被切碎的半句话。
	 *
	 * 字号随屏宽走：17 个字（第一分句）在 350px 内需要 20px 及以下，
	 * 320px 屏上要退到 16px，否则 keep-all 不允许折行会横向溢出。
	 * em 在手机上去掉 nowrap：三个「可」允许在顿号处断开。
	 */
	.vb-about-hero__title {
		font-size: clamp(16px, 4.95vw, 20px);
		/* 1.62 → 1.7：六行字在手机上是整块首屏的主体，行距再松一点
		   才不像一段被压在一起的说明文。 */
		line-height: 1.7;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	.vb-about-hero__title em { white-space: normal; }

	/* 数据区：三条数据各占一行，数字左、说明右，行间 1px 暗线。
	   第一条的 border-top 充当原来容器那条分隔线，所以容器自己的
	   border/padding 都归零 —— 否则会出现两条线叠在一起。 */
	.vb-about-hero__stats {
		margin-top: 38px;
		padding-top: 0;
		border-top: 0;
		grid-template-columns: 1fr;
		gap: 0;
	}
	.vb-about-hero__stat {
		display: grid;
		/* 84px 装得下 30px 的「100%」（约 70px），再宽说明栏就窄了。
		   16px 的栏间距让数字右缘与说明左缘之间有一段干净的空气。 */
		grid-template-columns: 84px minmax(0, 1fr);
		column-gap: 16px;
		/* center 而不是 baseline：30px 的数字与 13px 的说明基线对齐后，
		   说明会整个沉到数字的下三分之一，看起来像给数字加的脚注。
		   垂直居中才是「一个数字配一句话」该有的关系。 */
		align-items: center;
		padding: 15px 0;
		border-top: 1px solid rgba(244, 237, 232, .1);
	}
	/* 最后一行补一条底边线，否则 T+N 那行下面是空的，整块数据没有收口，
	   三条并列的数据看起来像被截断了。 */
	.vb-about-hero__stat:last-child {
		border-bottom: 1px solid rgba(244, 237, 232, .1);
	}
	.vb-about-hero__stat b {
		/* 38 → 30：不再独占一行，字号必须收一档，
		   否则右对齐之后会在 84px 的栏里顶到边。 */
		font-size: 30px;
		text-align: right;
	}
	/* 桌面单位是数字的 0.39 倍（38:15）。数字收到 30 之后再把 15 原样留着，
	   「万」就只有数字的一半高，夹在 100% 和 T+N 之间显得像掉了一个字。
	   17px 让三者重量拉平。 */
	.vb-about-hero__stat b span { font-size: 17px; }
	html[lang="en"] .vb-about-hero__stat b span { font-size: 20px; }
	.vb-about-hero__stat > span {
		margin-top: 0;
		max-width: none;
		font-size: 13px;
		line-height: 1.65;
		/* 说明文字在 360 及以下的屏宽放不满一行（19 字 × 13px = 247px，
		   而说明栏只有 228px），交给浏览器自动折行会劈在字中间 ——
		   实测把「全流程无损检测覆盖」拆成「…全流程无损 / 检测覆盖」，
		   并且只甩两个字到第二行。keep-all 关掉「汉字之间随便断」，
		   只允许在逗号处断，于是变成「进入交易流程的腕表，/ 全流程无损检测覆盖」
		   两个完整的短语。break-word 是兜底：万一某个分句长到装不下，
		   宁可断字也不能横向溢出。 */
		word-break: keep-all;
		overflow-wrap: break-word;
	}

	.vb-about__block { padding-top: 48px; }
	.vb-about__leadin h2 { font-size: 25px; }
	.vb-about__pains li { grid-template-columns: 30px 1fr; gap: 4px 12px; padding: 22px 0; }
	.vb-about__pains h3 { font-size: 15px; }

	.vb-about__auth { padding: 36px 22px 32px; border-radius: 12px; }
	.vb-about__auth-body h2 { font-size: 24px; }
	.vb-about__auth-fig { flex-direction: row; align-items: center; gap: 14px; margin-top: 26px; }
	.vb-about__auth-fig svg { width: 92px; height: 92px; }
	.vb-about__auth-stats { grid-template-columns: 1fr 1fr; gap: 18px; }

	/*
	 * 担保交易八步：手机上从「八张卡」改成「八行」（2026-10-29）。
	 *
	 * 桌面是两条四格泳道，横向并排本身就说明了顺序（左→右）。
	 * 手机压成单列之后，8 个带边框的格子竖着摞成一堵 1185px 的墙：
	 * 每格都是「红色小标签 + 粗标题 + 两行灰字」，八个完全同构，
	 * 读起来是八张一模一样的卡片，看不出它们是同一条流程上的八步 ——
	 * 而这一节讲的恰恰是「流程」。
	 *
	 * 所以把盒子拆掉：泳道外框、格子边框、格子底色全部取消，
	 * 只留 1px 细分隔线把八步串成一条清单；上下内边距 20 → 13，
	 * 标题 14 → 15（去掉盒子之后标题需要自己撑起层级）。
	 * 整块从 1185 收到约 820 —— 省下的不是字，是重复的盒子。
	 * 顺序靠 A/B/C/D 和分隔线读，比靠八个方框读更清楚。
	 */
	.vb-about__escrow { margin-top: 26px; gap: 30px; }
	.vb-about__lane { border: 0; border-radius: 0; background: transparent; }
	.vb-about__lane-label {
		padding: 0 0 12px;
		gap: 8px;
		background: transparent;
	}
	.vb-about__lane-body { grid-template-columns: 1fr; }
	.vb-about__cell {
		border-left: 0 !important;
		border-top: 1px solid #f0ece6;
		/* 17px 而不是把 20 一起收掉：这一节的问题是「盒子太多」，
		   不是「空间太多」。去盒子、留空间，读起来才松而不散。 */
		padding: 17px 0;
	}
	.vb-about__cell:first-child { border-top: 0; }
	/* 全部同色同重的小标签，八个叠在一起会变成一条灰蒙蒙的带子；
	   把字母收紧一档、字距放开，让它退成行首的序号而不是标签。 */
	.vb-about__cell .step { font-size: 10px; letter-spacing: .18em; }
	.vb-about__cell h5 { margin: 5px 0 4px; font-size: 15px; line-height: 1.4; }
	.vb-about__cell p { font-size: 12.5px; line-height: 1.72; }

	.vb-about__assure { grid-template-columns: 1fr; }
	.vb-about__closing { margin-top: 48px; padding: 40px 18px 42px; }
	.vb-about__closing h2 { font-size: 23px; }
}

/*
 * 小屏兜底（320/340 一类，iPhone SE 一代、老的安卓小屏）。
 *
 * 320 屏上说明栏只有 188px，而「鉴定团队累计经手鉴定的名表数量」这句
 * 16 个字里有没标点 —— keep-all 会把整句当成一个不可断的单位，
 * 结果最后一个「量」字被单独甩到第二行。这句不能改文案，只能腾宽度：
 * 数字栏 84 → 80、栏距 16 → 12，说明 13 → 12px，说明栏回到 196px，
 * 16 个字（192px）刚好一行。30px 的「100%」实测 75px，80 的栏仍装得下。
 */
@media (max-width: 340px) {
	.vb-about-hero__stat { grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; }
	.vb-about-hero__stat > span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.vb-about__auth-fig svg { animation: none; }
}