/* ============================================================ VITRINE 主题 — 橱窗营销 · 摄影前置（近白 + 纯黑 CTA + 金色次强调，双模式） 对标：bloomthis.co（马来西亚高端花店，同日达电商 / 高频礼赠 / 多场景选购） 结构：三段式（契约见 themes/_shared/README.md §1） 段1 token 覆盖 —— 换肤核心，功能页（商品/购物车/结账/付款/搜索/登录/会员中心） 继承 florisse EJS + 基底 CSS，仅靠本段变量整体转黑白极简 段2 nav / footer —— vt- 前缀（防污染，仿 florisse 的 fl- 惯例）；本次任务留空占位 段3 首页 —— 大图 hero + 营销区块；本次任务留空占位 视觉性格：大留白、近白页底、纯白卡片、发丝级分隔线、近黑 CTA、金色只做次要强调、 圆角压到 2–4px（编辑风偏直角，胶囊 pill 仍保 980px 让徽章保持圆形）。 ⚠️ vitrine 是「反转主题」（README §7 末条）——判断理由： cartToast 底色 --rose-ink 亮色是近黑 #111111、暗色必须翻成近白 #F2F0ED （暗色页底本身就是近黑，toast 若仍用近黑会与页底糊成一片、失去浮层层次）， 即 toast 底跨明暗发生了明度反转。故骑在它上面的 --on-accent（文字色）与 --btn-close-filter（Bootstrap 关闭钮滤镜）必须成对、同块同步翻转： 深底 → 白字 + 白钮 invert 滤镜；浅底 → 深字 + 黑钮 none。 只在 :root 放一次的话，切暗色时关闭钮跌回亮色的 invert 白钮，压在浅色 toast 上 对比度约 2:1 近乎不可见（手测最难发现的一类）。样板：zen。 自引入色统一走 --vt-* 局部变量： · --vt-hairline（比 --line 更淡的发丝分隔线，段2/段3 消费）→ 随明暗变，四块各定义一次； · --vt-accent-hover（主按钮/链接 hover 底）→ 随明暗变，四块各定义一次； · --vt-hover-surface（列表项/幽灵钮/步进器的软底 hover 面）→ 随明暗变，四块各定义一次； · --vt-on-gold（金色 --rose 底上的字色）→ mode-invariant，只放 :root 一处： 金色明暗虽不同(#C8A96A / #D4B87C)，但近黑字 #111111 骑在两种金上都够可读，故前景取单值。 ============================================================ */ /* ========== 段1：token 覆盖（四个选择器块缺一不可，见 README §5） ========== */ /* —— ① 亮色默认 + mode-invariant token（近白页底 / 纯白卡 / 近黑 CTA / 金色次强调） —— */ :root { --content-max: 1240px; /* 内容区最大宽：比基底 1180 略放宽，给「大图摄影前置」的通栏视觉留呼吸 */ --wrap-max: var(--content-max); /* 让【继承来的】功能页外壳 .fl-wrap（搜索页、以及 index 和 product 补齐前继承的 florisse 版） 与 vt- 自绘的 nav 和 footer 同宽。不覆写就吃基底回退值 1120px， 比 vt-nav 的 1240px 窄 120px，滚到功能页时左右边缘会明显错台。 mode-invariant：--content-max 只在本 :root 定义一次，故此处也只需一处。 */ --nav-bw: 1px; /* .vt-nav 的 border-bottom 宽 —— **单一真源**。 这 1px 有三个消费方，写死在任一处都会与另两处失联（改一处不报错、只错位）： ① .vt-nav 自己的 border-bottom-width（段2） ② .vt-nav-inner 的 height: calc(var(--nav-h) - var(--nav-bw))（段2） ③ .apple-mobile-menu 的 top: calc(100% + var(--nav-bw))（段2）—— 绝对定位的包含块是 .vt-nav 的 **padding box**，不含 border-bottom， 所以 top:100% 会落在 nav 下沿**之上** 1px（重叠 1px）。 前科：上一轮只改了 --nav-h 没改 ②，nav 变 66px、错位从 1px 放大到 2px。 现在三处同读一个 token → 改边框宽只需改这一行。 */ /* —— 顶栏两行高（Phase 4 Task 4.2）—— 对标站 bloomthis.co 实测：header **两层 108px**，第 1 行 logo 居中 + 账户/搜索/购物袋靠右， 第 2 行 11 个主项（1440 下跨 138→1287）。原先我们是单层 65px。 ⚠️ 拆成两个 token 而不是「把 --nav-h 直接写成 108」：第 2 行在手机端整个 display:none （导航折进汉堡菜单），那时 nav 真的变矮 —— 只有把两行分开，--nav-h 才能自动跟着变。 写死 108 会让手机端所有读 --nav-h 的地方（手机菜单高度、sticky 偏移…）多让出 43px。 */ --nav-row1-h: 64px; /* 第 1 行：品牌 + 动作簇（= 改动前 .vt-nav-inner 的内容高，视觉不变） */ --nav-row2-h: 44px; /* 第 2 行：主导航。手机端下面的媒体查询把它归零 */ /* 第 3 行：分类条。高度直接读**共享片段**在 :root 上给的 --ns-catbar-h （_shared/_category-bar 的