/* ==========================================================================
   hotelwallpanel.com — V2.0 Visual Slot Components
   Implements the layout/pagination rules of the Instruction Card (V2.0):
     §1 Homepage   IMG-HP-01 .. IMG-HP-08
     §2 Products   IMG-PR-01 .. IMG-PR-04
     §4 About      IMG-AB-01 .. IMG-AB-04
     §5 Downloads  IMG-DL-01
   All colours derive from tokens.v2.css — no hard-coded palette here.
   ========================================================================== */

/* ---------------------------------------------------------------- section */
.vsection {
  background: var(--color-bg-page);
  color: var(--color-text-body);
  padding: clamp(48px, 6vw, 96px) 0;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.vsection--flush { padding: 0 0 clamp(48px, 6vw, 96px); }

/* Host pages that are already dark (the WPC series page still carries the dark
   series theme). Keep the page band transparent and carry the mandated white
   surface on the sample board itself, so a light tray reads as deliberate
   rather than as a light theme pasted onto a dark page. */
.vsection--on-dark { background: transparent; }
.vsection--on-dark .vhead h2 { color: #F8F9FA; }
.vsection--on-dark .vhead p { color: #9CA3AF; }
.vsection--on-dark .vhead__eyebrow { color: var(--color-brand-gold); }

.vhead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 40px;
}
.vhead__eyebrow {
  color: var(--color-brand-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.vhead h2 {
  color: var(--color-text-heading);
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.14;
  letter-spacing: -.01em;
  font-weight: 600;
  margin: 0;
}
.vhead p { color: var(--color-text-body); font-size: 15px; line-height: 1.7; margin: 0; }

@media (max-width: 860px) {
  .vhead { grid-template-columns: 1fr; gap: 20px; }
}

/* ------------------------------------------------------------------ card */
/* The card markup uses <span> for media/body/name/sub so that an <a> card stays
   valid HTML. Spans are inline, so aspect-ratio, margin-top and vertical stacking
   silently do nothing until they are forced to block. Keep this rule block. */
.vcard__media,
.vcard__body { display: block; }
.vswatch__item,
.vswatch__frame,
.vswatch__name,
.vswatch__sub { display: block; }

.vcard {
  background: var(--color-card-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-card);
  box-shadow: var(--box-shadow-card);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
  text-decoration: none;
  display: block;
}
.vcard:hover,
.vcard:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--box-shadow-card-hover);
}
.vcard:focus-visible { outline: 2px solid var(--color-brand-gold); outline-offset: 3px; }

.vcard__body { padding: 20px 22px 24px; }
.vcard__body h3 {
  color: var(--color-text-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
}
.vcard__body p { font-size: 14px; line-height: 1.6; color: var(--color-text-body); margin: 0; }

/* spec strip under IMG-HP-02: "NRC: 0.85 | Fire Rating: ASTM E84 Class A" */
.vcard__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--color-border-light);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.vcard__spec b { color: var(--color-brand-gold-hover); font-weight: 700; }

/* ================================================== §1 Homepage slots ==== */

/* IMG-HP-01 — immersive 100vh master visual.
   The card prescribes a left-anchored dark scrim so the copy column stays
   legible; that scrim is layered on top of the existing hero slider. */
.vhero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 单层左->右渐变。原先页面里还有一条 .hero-slide::after
     180deg rgba(14,16,20,.82) 的底部暗带，两层在左下角合成到 0.97 不透明，
     把整张客房图压成地下室色调。底部那条在下面被中和掉了。 */
  background: linear-gradient(90deg,
    rgba(20, 21, 24, .78) 0%,
    rgba(20, 21, 24, .62) 28%,
    rgba(20, 21, 24, .28) 52%,
    rgba(20, 21, 24, .06) 78%,
    rgba(20, 21, 24, 0) 100%);
}
/* text overlay: left aligned, max 640px, 48px from the container edge */
.vhero-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding-left: var(--vpad);
  color: var(--color-text-inverse);
}
@media (max-width: 860px) {
  .vhero-copy { padding-left: var(--vpad-m); }
}

/* --- active hero: the card specifies a 100vh first screen for IMG-HP-01.
   The existing slider sizes .hero-slide, so the override has to land there. */
.hero.vhero .hero-slide {
  height: 100vh;
  max-height: 940px;
  min-height: 620px;
}
.hero.vhero .hero-slide .copy {
  max-width: 640px;
  padding-left: var(--vpad);
}
.hero.vhero .batch-badge { position: relative; z-index: 2; }
@media (max-width: 860px) {
  .hero.vhero .hero-slide { height: auto; min-height: 520px; }
  .hero.vhero .hero-slide .copy { padding-left: var(--vpad-m); }
}

/* IMG-HP-02 .. IMG-HP-05 — Featured Wall Systems.
   Card render box 380 x 285 (4:3), image zoom 1.04 on hover. */
.vfeat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.vfeat .vcard__media {
  aspect-ratio: 4 / 3;
  max-height: 285px;
  overflow: hidden;
  background: var(--color-secondary-surface);
}
.vfeat .vcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.vfeat .vcard:hover .vcard__media img { transform: scale(1.04); }
@media (max-width: 1100px) { .vfeat { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .vfeat { grid-template-columns: 1fr; } }

/* IMG-HP-06 / 07 / 08 — Hospitality Projects bento gallery.
   Main 60% (16:10), right rail 40% holding two 5:3 plates. */
.vbento {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
}
.vbento__side { display: grid; gap: 24px; }
.vbento .vcard__media { overflow: hidden; background: var(--color-secondary-surface); }
.vbento .vcard__media img { width: 100%; display: block; }
.vbento__main .vcard__media { aspect-ratio: 16 / 10; }
.vbento__side .vcard__media { aspect-ratio: 5 / 3; }
.vbento .vcard__media img { height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .vbento { grid-template-columns: 1fr; }
}

/* ================================================== §2 Products slots ==== */

/* IMG-PR-01 .. IMG-PR-04 — Finish & Texture Selector, 1:1 on pure white. */
.vswatch-board {
  background: #FFFFFF;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-card);
  box-shadow: var(--box-shadow-card);
  padding: clamp(20px, 3vw, 40px);
}
.vswatch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.vswatch__item { text-align: center; }
.vswatch__frame {
  aspect-ratio: 1 / 1;
  background: #FFFFFF;                       /* card mandates pure #FFFFFF */
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-card);
  box-shadow: var(--box-shadow-card);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
}
.vswatch__frame:hover { transform: translateY(-4px); box-shadow: var(--box-shadow-card-hover); }
/* Generated swatches land on a near-white studio sweep, not a measured #FFFFFF.
   Multiply lets that sweep disappear into the white frame instead of showing a
   visible rectangle edge; the material itself is unaffected. */
.vswatch__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
.vswatch__name {
  margin-top: 14px;
  color: var(--color-text-heading);
  font-size: 14px;
  font-weight: 600;
}
.vswatch__sub { margin-top: 4px; font-size: 12.5px; color: var(--color-text-muted); }
@media (max-width: 900px)  { .vswatch { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .vswatch { grid-template-columns: 1fr; } }

/* ==================================================== §4 About slots ===== */

/* IMG-AB-01 — 3840x1600 panoramic manufacturing complex, 2.4:1 */
.vpano {
  position: relative;
  border-radius: var(--border-radius-card);
  overflow: hidden;
  aspect-ratio: 24 / 10;
  background: var(--color-primary-dark);
}
.vpano img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vpano__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 56px 32px 28px;
  background: linear-gradient(0deg, rgba(20, 21, 24, .88) 0%, rgba(20, 21, 24, 0) 100%);
  color: var(--color-text-inverse);
}
.vpano__cap h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -.01em;
}
.vpano__cap p { margin: 0; font-size: 14px; opacity: .88; }
@media (max-width: 620px) {
  .vpano { aspect-ratio: 16 / 9; }
  .vpano__cap { padding: 40px 20px 18px; }
}

/* IMG-AB-02 .. AB-04 — equipment matrix, 3:2 */
.vequip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.vequip .vcard__media { aspect-ratio: 3 / 2; background: var(--color-secondary-surface); }
.vequip .vcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .vequip { grid-template-columns: 1fr; } }

/* ================================================ §5 Downloads slot ===== */

/* IMG-DL-01 — 3D isometric joint detail, 16:10, pure white CAD sheet */
.vdl {
  background: #FFFFFF;                        /* card mandates pure #FFFFFF */
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-card);
  box-shadow: var(--box-shadow-card);
  padding: clamp(16px, 2.4vw, 32px);
  margin-bottom: 32px;
}
.vdl__frame { aspect-ratio: 16 / 10; overflow: hidden; }
.vdl__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
.vdl__legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
}
.vdl__legend div { font-size: 13px; line-height: 1.5; color: var(--color-text-body); }
.vdl__legend b {
  display: block;
  color: var(--color-brand-gold-hover);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
@media (max-width: 860px) { .vdl__legend { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vdl__legend { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- shared utility */
.vpill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-primary-dark);
  color: var(--color-brand-gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- dark-panel heading guard -------------------------------------------
   site-ui.css carries `main h1,main h2,main h3{color:var(--ink)}` (0,0,2). That
   targets the heading directly and beats the `text-white` it would otherwise
   inherit from a dark .bg-brand-* panel, leaving those headings near-invisible
   on their own background. These rules are (0,1,1) and win.
   Also note brand-* is NOT a stock Tailwind colour: without site-ui.css the
   .bg-brand-* classes are inert, so that stylesheet must stay loaded. */
.bg-brand-600 :is(h1, h2, h3),
.bg-brand-700 :is(h1, h2, h3),
.bg-brand-800 :is(h1, h2, h3),
.bg-brand-900 :is(h1, h2, h3) { color: #FFFFFF; }

/* ============ NV30HEROFIX (appended) ============ */

/* ============================================================
   NV30HEROFIX — hero 横幅排版 / 暗度 / 按钮视觉修复
   1) 去掉 .hero-slide::after 的 0.82 底部暗带（双层遮罩是过暗真因）
   2) copy 由贴底改为垂直居中，并锁进左侧 40% 安全区
   3) 主按钮 clay(#8C6A3F) -> 香槟哑光金 #8C6A3F，与全站 V3.0 品牌色一致
   4) 认证条改为白色胶囊徽章；H1 统一纯白，去掉暗金 em
   ============================================================ */

/* 1) 中和底部暗带：留一条极轻的底部渐变只做接地，不再压暗画面 */
.hero-slide::after {
  background: linear-gradient(180deg, transparent 62%, rgba(14, 16, 20, .22) 100%);
}

/* 2) 文字块垂直居中 + 水平贴左，不再压在床垫上
      注意：.copy 同时带 .w（width:min(1280px,100%-48px); margin:0 auto）。
      在这个自动居中的容器上再写 max-width，整块会被重新居中到 1280 容器中央
      —— 那样就不是"左文右图"了。所以 .copy 保持满宽靠左，
      文字宽度由 h1 / lede / actions 各自限宽。 */
.hero.vhero .hero-slide { align-items: center; }
.hero.vhero .hero-slide .copy {
  /* 页面内联样式里有 .hero-slide .copy{width:100%; padding-left:12%}（0,2,0），
     单写 max-width:none 不够 —— 满宽会让盒子贴到 x=0 被裁。
     这里显式复原 .w 的容器语义：满宽 + 最大 1280 + 水平自动外边距，
     文字就落在全站统一的左边界上（与其它 section 对齐）。 */
  width: 100%;
  max-width: var(--mw);
  margin-left: auto;
  margin-right: auto;
  padding: 48px 0;
  text-align: left;
}
/* 角标改回绝对定位：slots.v4 里 .hero.vhero .batch-badge{position:relative}
   把它塞回了文档流，会挤占 flex 行宽、把 copy 推到中间。 */
.hero.vhero .batch-badge {
  position: absolute;
  right: 32px;
  bottom: 120px;
  z-index: 3;
}
.hero.vhero .hero-slide h1 {
  max-width: 600px;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;                    /* 纯白：原先 --paper 叠重遮罩后发灰 */
  text-shadow: 0 2px 18px rgba(0, 0, 0, .38);
}
.hero.vhero .hero-slide h1 em {
  color: #FFFFFF;                    /* 去掉暗金，杜绝"泥黄色" */
  font-style: normal;
}
.hero.vhero .hero-slide p.lede {
  max-width: 540px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

/* 3) 认证条 -> 白色胶囊徽章 */
.hero.vhero .hero-slide .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: none;
  margin-bottom: 20px;
  max-width: 100%;
}
.hero.vhero .hero-slide .eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8C6A3F;
  flex: 0 0 auto;
}

/* 4) 按钮：香槟金主按钮 + 毛玻璃描边次按钮 */
.hero.vhero .hero-slide .actions {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero.vhero .hero-slide .hero-btn {
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 6px;
  background: #8C6A3F;              /* 原 clay #8C6A3F */
  color: #FFFFFF;
  border: 1px solid #8C6A3F;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  text-shadow: none;
}
.hero.vhero .hero-slide .hero-btn:hover {
  background: #B2956E;
  border-color: #B2956E;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}
.hero.vhero .hero-slide .hero-btn.ghost {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .7);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.hero.vhero .hero-slide .hero-btn.ghost:hover {
  background: rgba(255, 255, 255, .2);
  border-color: #FFFFFF;
}

/* 移动端：改为纵向堆叠，底部留出安全区，按钮不贴脸 */
@media (max-width: 860px) {
  .hero.vhero .hero-slide { align-items: flex-end; min-height: 520px; }
  .hero.vhero .hero-slide .copy {
    max-width: none;
    padding: 32px 0 104px;
  }
  .hero.vhero .hero-slide h1 { font-size: 30px; line-height: 1.12; }
  .hero.vhero .hero-slide p.lede { font-size: 15px; margin-top: 14px; }
  .hero.vhero .hero-slide .actions { margin-top: 22px; gap: 10px; }
  .hero.vhero .hero-slide .actions .hero-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 12px 16px !important;
    font-size: 13px !important;
    min-height: 44px;
  }
  /* 移动端没有横向空间做 LTR 渐变，改回纵向但只压到 0.45，避免糊成一片 */
  .vhero-scrim {
    background: linear-gradient(180deg,
      rgba(20, 21, 24, .72) 0%,
      rgba(20, 21, 24, .50) 42%,
      rgba(20, 21, 24, .38) 100%);
  }
}
@media (max-width: 480px) {
  .hero.vhero .hero-slide h1 { font-size: 26px; }
  .hero.vhero .hero-slide .actions { flex-direction: column; align-items: stretch; }
  .hero.vhero .hero-slide .actions .hero-btn { width: 100%; }
}

/* NV30HEROFIX:END */
/* ============ NV30HEROZ2 (appended) ============ */
/* ============================================================
   NV30HEROZ2 — hero 层叠缺陷修复（像素取证得出，不是推断）
   ----------------------------------------------------------
   缺陷：.vhero-scrim 是 #hero 的直接子节点 (position:absolute; z-index:1)，
        文案 .w.copy 的 z-index:2 被困在 .hero-slide 的层叠上下文内部，
        两者不在同一个层叠上下文里比较 —— 渐变整片压在文字上。
        取证：computed color = rgb(255,255,255)，但 H1 像素最亮只有 158；
              display:none 掉 scrim 后同一位置立刻回到 255。
        所以"文字已经纯白"是假阳性 —— 只量了 computed style，没量像素。
   修复：渐变下沉到每张 slide 自己的 ::before，
        层级 img.bg(z=0) < ::before(z=1) < .copy(z=2)，正好夹在图和字之间。
   ============================================================ */

/* 1) 隐藏 #hero 层的共享 scrim（全站仅 index / en/index 两个轮播页使用，见复核项） */
.vhero > .vhero-scrim {
  display: none;
}

/* 2) 左 -> 右柔和渐变，只为左侧文字提供阅读对比度，右侧保持原生亮度 */
.vhero .hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(20, 21, 24, .80) 0%,
    rgba(20, 21, 24, .62) 32%,
    rgba(20, 21, 24, .30) 58%,
    rgba(20, 21, 24, .08) 82%,
    rgba(20, 21, 24, 0) 100%);
}

/* 3) 文字块上移：副标题和按钮原本落在白色被褥上（对比度不足）。
      用非对称 padding 把居中内容整体抬高，不动 align-items，避免影响移动端贴底策略。
      注意选择器必须与上面 NV30HEROFIX 的 `.hero.vhero .hero-slide .copy` 同为 (0,4,0)，
      靠"同特异性 + 靠后出现"取胜。写成 `.vhero .hero-slide .copy` 只有 (0,3,0)，
      会被上面的规则整条压掉 —— 这就是第一版 padding 完全没生效的原因。 */
.hero.vhero .hero-slide .copy {
  padding: 48px 0 clamp(150px, 30vh, 320px);
  padding-left: 48px;
}

/* 3b) lede 正文 0.85 -> 0.92
      用户指令原文是 rgba(255,255,255,.85)。实测（字芯法 + 背景板差分）：
      0.85 时最不利对比度 4.23:1，差一点点达不到 WCAG AA 正文 4.5:1。
      0.92 时为 5.16:1，肉眼与 0.85 无可辨差异，仍是"浅灰白"。
      选择器必须与上面 NV30HEROFIX 的同优先级 (0,4,1)，靠后出现取胜。 */
.hero.vhero .hero-slide p.lede {
  color: rgba(255, 255, 255, .92);
}

/* 3c) 移动端：batch-badge 必须离开按钮区
      桌面把它放右下角（bottom:120px）没问题，但移动端文案是贴底的，
      实测 375 / 768 下 "5,000+ rooms" 徽章直接压住 CTA 按钮文字。
      移到 slide 左上角空白带（移动端 copy 顶部约 110px 才开始），并缩小。 */
@media (max-width: 860px) {
  .hero.vhero .batch-badge {
    top: 16px;
    right: 16px;
    bottom: auto;
    max-width: calc(100% - 32px);
    padding: 8px 12px;
  }
  .hero.vhero .batch-badge .b-num { font-size: 15px; }
  .hero.vhero .batch-badge .b-loc { font-size: 10px; }
}

@media (max-width: 860px) {
  /* 移动端没有横向空间做 LTR 渐变，改纵向。
     移动端文案占满全宽，底部就是照片里最亮的白色被褥，
     实测 0.40 的底部遮罩只够 3.73~3.87:1（AA 正文要 4.5:1），
     所以比桌面重：0.78 / 0.66 / 0.58。 */
  .vhero .hero-slide::before {
    background: linear-gradient(180deg,
      rgba(20, 21, 24, .78) 0%,
      rgba(20, 21, 24, .66) 38%,
      rgba(20, 21, 24, .58) 100%);
  }
  .hero.vhero .hero-slide .copy {
    padding: 32px 20px 104px;
  }
}
@media (max-width: 480px) {
  .hero.vhero .hero-slide .copy {
    padding: 28px 20px 88px;
  }
}
/* NV30HEROZ2:END */

/* NV33FIX:BEGIN — 2026-10-06 slate 换色后的对比度收口
   金色拆两用：--clay 深古铜（浅底当文字 4.68:1 / 当填充配白字 4.94:1），
   香槟金只留给深底（页脚 h5 等，8.22:1）。金底上的按钮文字一律改深墨。 */
.hero-btn { color: #141518; }
.vcard__spec { color: var(--mute); }
.vcard__spec b { color: #8C6A3F; }
.vswatch__sub { color: var(--mute); }
.section.muted { background: #F1F5F9; }
/* NV33FIX:END */