/* LI1971 — theme "cream & caramel"
   Layout boxes replicate bolivarcigars.com at 1440px (see docs/开发手册.md §5).
   All colour lives in these 14 tokens; 后台 设置→配色方案 overrides them via
   siteInfo.theme (head.ejs injects a whitelisted :root block after this file). */
:root {
  --c-header: #241a14;
  --c-line: #241a14;
  --c-hero-bg: #f3e9dc;
  --c-hero-title: #4a2c1a;
  --c-ink-on-hero: #241a14;
  --c-dark: #1b1512;
  --c-accent: #c98a3d;
  --c-btn-bg: #4a2c1a;
  --c-btn-fg: #f3e9dc;
  --c-btn-inv-bg: #f3e9dc;
  --c-btn-inv-fg: #4a2c1a;
  --c-btn2-bg: #5a4d42;
  --c-text-light: #f3e9dc;
  --c-text-dark: #241a14;
  --f-display: "Akshar", "Arial Narrow", sans-serif;
  --f-body: "Sofia Sans", "Segoe UI", sans-serif;
}

@font-face { font-family: "Akshar"; src: url("/static/fonts/akshar-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sofia Sans"; src: url("/static/fonts/sofiasans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sofia Sans"; src: url("/static/fonts/sofiasans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sofia Sans"; src: url("/static/fonts/sofiasans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sofia Sans"; src: url("/static/fonts/sofiasans-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* ── base ── */
html { -webkit-text-size-adjust: 100%; }
body.bh {
  margin: 0; background: var(--c-dark); color: var(--c-text-light);
  font: 400 16px/24px var(--f-body);
}
body.bh * { box-sizing: border-box; }
body.bh img { max-width: 100%; display: block; }
body.bh a { color: var(--c-accent); }
body.bh :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
/* 选择器带上 body.bh a 前缀：通用链接色 `body.bh a{color:var(--c-accent)}` 特异度 (0,1,1)，
   光写 .bh-skip (0,1,0) 会被它盖掉 —— 焦糖金落在深棕上只有 4.31:1，不过 AA */
body.bh a.bh-skip { position: absolute; left: -9999px; top: 0; background: var(--c-btn-bg); color: var(--c-btn-fg); padding: 10px 16px; z-index: 99; }
body.bh a.bh-skip:hover, body.bh a.bh-skip:focus, body.bh a.bh-skip:focus-visible { background: var(--c-btn-bg); color: var(--c-btn-fg); }
body.bh a.bh-skip:focus { left: 8px; top: 8px; }
.bh-wrap { max-width: 1296px; margin: 0 auto; padding: 0 24px; }

/* ── buttons ── */
.bh-btn, body.bh .bh-btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  background: var(--c-btn-bg); color: var(--c-btn-fg);
  font: 700 17.568px/1 var(--f-body); text-transform: uppercase; letter-spacing: .04em;
  padding: 15px 26px;
}
.bh-btn:hover { filter: brightness(1.15); }
.bh-btn-inv { background: var(--c-btn-inv-bg); color: var(--c-btn-inv-fg); }
.bh-btn2 { background: var(--c-btn2-bg); color: var(--c-text-light); }

/* ── header: 100px band ── */
.bh-header { background: var(--c-header); height: 100px; position: relative; z-index: 5; }
.bh-header-in { max-width: 1384px; margin: 0 auto; padding: 0 28px; height: 100px; display: flex; align-items: center; gap: 28px; }
.bh-logo { width: 107px; height: 107px; flex: 0 0 107px; display: flex; align-items: center; justify-content: center; }
.bh-logo img { width: 88px; height: 88px; object-fit: contain; }
.bh-logo-fallback { font: 700 30px/1 var(--f-display); color: var(--c-accent); text-transform: uppercase; letter-spacing: .06em; }
.bh-nav { display: flex; gap: 56px; flex: 1; }
.bh-nav a { color: var(--c-text-light); text-decoration: none; font: 600 19.568px/1 var(--f-body); text-transform: uppercase; letter-spacing: .05em; padding: 12px 0; }
.bh-nav a[aria-current="page"] { color: var(--c-accent); }
.bh-social { display: flex; gap: 18px; }
.bh-social a { color: var(--c-text-light); display: inline-flex; }
.bh-social svg { width: 22px; height: 22px; fill: currentColor; }

/* ── hero: 854px band ── */
.bh-hero { position: relative; background: var(--c-hero-bg); height: 854px; overflow: hidden; }
.bh-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.bh-hero-in { position: relative; max-width: 1296px; margin: 0 auto; padding: 96px 24px 0; display: grid; grid-template-columns: 492px 1fr; gap: 52px; }
.bh-hero-photo { width: 492px; height: 661px; object-fit: cover; position: relative; z-index: 2; box-shadow: 0 24px 60px rgba(27, 21, 18, .35); }
.bh-h1 { font: 700 161.408px/0.95 var(--f-display); text-transform: uppercase; letter-spacing: .008em; color: var(--c-hero-title); margin: 0 0 18px; }
.bh-h4 { font: 700 29.312px/1.35 var(--f-body); text-transform: uppercase; letter-spacing: .02em; color: var(--c-ink-on-hero); margin: 0 0 22px; }
.bh-hero-copy { font: 400 16px/26px var(--f-body); color: var(--c-ink-on-hero); margin: 0 0 18px; max-width: 620px; }
.bh-lead { font-weight: 700; color: var(--c-ink-on-hero); margin: 0; }
/* 目标站的纹理条压在 hero 底边内（y825/h129，hero 100..954），不是 hero 之后的独立带；
   放在正常流里会让整页从轮播往下整体下移 129px。 */
.bh-lower { position: absolute; left: 0; right: 0; bottom: 0; height: 129px; overflow: hidden; background: var(--c-dark); z-index: 3; }
.bh-lower img { width: 100%; height: 129px; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .8; }

/* ── dark bands + 5px divider ── */
.bh-dark { background: var(--c-dark); color: var(--c-text-light); }
.bh-line { height: 5px; background: var(--c-line); }
.bh-h2 { font: 700 58.816px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--c-accent); margin: 0 0 14px; }
.bh-h3 { font: 800 29.312px/1.25 var(--f-body); text-transform: uppercase; letter-spacing: .02em; color: var(--c-accent); margin: 0 0 12px; }
.bh-sub { font: 700 29.312px/1.35 var(--f-body); text-transform: uppercase; color: var(--c-text-light); margin: 0 0 22px; }

/* ── carousel band: 937px ── */
.bh-glide { height: 937px; position: relative; overflow: hidden; }
.bh-glide-track { display: flex; height: 841px; margin-top: 48px; transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
/* min-width:0 —— 540px 的 .bh-land 会把 flex 项的 min-content 撑到 588px，
   目标站幻灯片恒为视口 1/3(1440→480)且图片溢出叠压，必须显式放开收缩下限 */
.bh-glide-slide { flex: 0 0 33.3333%; position: relative; padding: 0 24px; min-width: 0; }
.bh-glide-slide .bh-land { width: 540px; max-width: none; height: 338px; object-fit: cover; margin-top: 221px; }
.bh-glide-slide .bh-vert { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 211px; height: 841px; object-fit: contain; z-index: 2; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.bh-glide-txt { position: relative; z-index: 3; margin-top: 26px; max-width: 420px; }
.bh-glide-txt .bh-tag { font: 700 17.568px/1.4 var(--f-body); text-transform: uppercase; color: var(--c-text-light); margin: 0 0 16px; }
.bh-glide-ctl { position: absolute; top: 749px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 101px; z-index: 4; }
/* padding 10px + 24px 图标 = 44×44 命中区（触控最小尺寸）；只放 padding 不改图标尺寸，桌面观感不变 */
.bh-glide-ctl button { background: none; border: 0; cursor: pointer; padding: 10px; color: var(--c-text-light); }
.bh-glide-ctl svg { width: 24px; height: 24px; fill: currentColor; display: block; }

/* ── locator teaser band: 541px ── */
.bh-teaser { height: 541px; display: grid; grid-template-columns: 792px 1fr; align-items: center; }
.bh-teaser img { width: 792px; max-width: 100%; height: 397px; object-fit: cover; }
.bh-teaser-txt { padding: 0 72px; }

/* ── signup band: 796px ── */
.bh-signup { position: relative; min-height: 796px; }
.bh-signup-in { max-width: 1296px; margin: 0 auto; padding: 72px 24px 0; display: grid; grid-template-columns: 1fr 570px; gap: 48px; }
.bh-signup img { width: 570px; max-width: 100%; height: 652px; object-fit: cover; }
.bh-signup form { display: flex; gap: 14px; margin: 26px 0 14px; flex-wrap: wrap; }
.bh-signup input[type="email"] {
  flex: 0 1 340px; padding: 14px 16px; border: 0; background: var(--c-btn-inv-bg);
  color: var(--c-btn-inv-fg); font: 400 16px/1 var(--f-body);
}
.bh-fine { font: 400 13px/20px var(--f-body); color: var(--c-text-light); opacity: .85; max-width: 560px; }

/* ── footer: 131px ── */
.bh-footer { background: var(--c-dark); min-height: 131px; display: flex; align-items: center; }
.bh-footer-in { max-width: 1384px; margin: 0 auto; padding: 32px 28px; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.bh-legal { font: 700 14px/20px var(--f-body); text-transform: uppercase; color: var(--c-text-light); margin: 0; }
.bh-footer nav { display: flex; gap: 40px; justify-content: center; }
.bh-footer nav a { color: var(--c-text-light); text-decoration: none; font: 700 14px/1 var(--f-body); text-transform: uppercase; letter-spacing: .04em; }
/* 目标站这里是 252×67 的 SGW 警示图；本项目换成同尺寸的文字盒（手册 §5.1），
   高度必须由盒子定住而不是随文字行数收缩，否则页脚右栏比目标矮 19px。 */
.bh-warn {
  justify-self: end; border: 2px solid var(--c-text-light); color: var(--c-text-light);
  font: 700 10px/14px var(--f-body); text-transform: uppercase; padding: 8px 10px;
  width: 252px; min-height: 67px; box-sizing: border-box; margin: 0;
  display: flex; align-items: center; text-align: left;
}

/* ── product page blocks ── */
.bh-prod { padding: 72px 0; }
.bh-prod-block { display: grid; grid-template-columns: 224px 1fr; gap: 56px; padding: 56px 0; border-top: 1px solid rgba(243, 233, 220, .12); }
.bh-prod-block:first-of-type { border-top: 0; }
.bh-prod-vert { width: 224px; height: 891px; object-fit: contain; }
.bh-prod-land { width: 518px; max-width: 100%; height: 325px; object-fit: cover; margin: 28px 0; }
.bh-prod-body p { color: var(--c-text-light); margin: 0 0 16px; max-width: 760px; }
.bh-prod-body h4 { font: 800 21.5855px/1.3 var(--f-body); text-transform: uppercase; color: var(--c-accent); margin: 26px 0 10px; }
/* 产品名/描述行（h2）：区块标题之上的那一层，列表页多产品时同时充当分节标题 */
.bh-prod-title { font: 700 46px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--c-text-light); margin: 0 0 8px; }
/* 审查 R10: 产品名同时是详情页在站内的入口。外观与纯标题一致（继承色、无下划线），
   悬停或键盘聚焦才出下划线 —— 既不破坏复刻的排版，又留住"这可点"的提示 */
.bh-prod-title a { color: inherit; text-decoration: none; }
.bh-prod-title a:hover, .bh-prod-title a:focus { text-decoration: underline; text-underline-offset: .12em; }
.bh-keys { font: 700 15px/1.6 var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--c-accent); margin: 10px 0 0; }
.bh-quote { border-left: 4px solid var(--c-accent); padding: 6px 0 6px 22px; margin: 26px 0; font: 700 24px/1.4 var(--f-body); color: var(--c-text-light); max-width: 720px; }
.bh-table { border-collapse: collapse; margin: 18px 0; min-width: 420px; }
.bh-prod-body table, .bh-prose-in table { border-collapse: collapse; margin: 18px 0; min-width: 320px; }
.bh-prod-body table th, .bh-prod-body table td, .bh-prose-in table th, .bh-prose-in table td {
  border: 1px solid rgba(243, 233, 220, .25); padding: 10px 16px; text-align: left;
  font: 400 15px/22px var(--f-body); color: var(--c-text-light);
}
.bh-prod-body table th, .bh-prose-in table th { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--c-accent); }
.bh-table th, .bh-table td { border: 1px solid rgba(243, 233, 220, .25); padding: 10px 16px; text-align: left; font: 400 15px/22px var(--f-body); color: var(--c-text-light); }
.bh-table th { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--c-accent); white-space: nowrap; }
.bh-stars { letter-spacing: .2em; color: var(--c-accent); }
.bh-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 26px 0; max-width: 900px; }
.bh-chip { background: rgba(243, 233, 220, .06); padding: 18px 20px; }
.bh-chip b { display: block; font: 800 19px/1.2 var(--f-body); text-transform: uppercase; color: var(--c-accent); }
.bh-chip span { font: 400 14px/1.5 var(--f-body); color: var(--c-text-light); }
.bh-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin: 22px 0; }
.bh-card { background: rgba(243, 233, 220, .06); padding: 26px; }
.bh-card b { display: block; font: 800 19px/1.3 var(--f-body); text-transform: uppercase; color: var(--c-accent); margin-bottom: 10px; }
.bh-card p { margin: 0; }
.bh-prod-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

/* ── locator band: 160px ── */
.bh-locator { min-height: 160px; display: flex; align-items: center; }
.bh-locator-in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; width: 100%; }
.bh-locator input[type="text"] {
  padding: 14px 16px; border: 0; background: var(--c-btn-inv-bg); color: var(--c-btn-inv-fg);
  font: 700 15px/1 var(--f-body); text-transform: uppercase; letter-spacing: .06em; width: 220px;
}
.bh-locator select {
  padding: 14px 16px; border: 0; background: rgba(243, 233, 220, .1); color: var(--c-text-light);
  font: 600 15px/1 var(--f-body); max-width: 320px;
}
.bh-locator select option { color: #241a14; }
.bh-locator-label { font: 700 15px/1 var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-light); }

/* ── contact band ── */
.bh-contact { padding: 64px 0 84px; }
.bh-contact-in { display: grid; grid-template-columns: 1fr 576px; gap: 56px; align-items: start; }
.bh-contact img { width: 576px; max-width: 100%; height: 552px; object-fit: cover; }
.bh-form label { display: block; font: 700 14px/1.4 var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-light); margin: 0 0 18px; }
.bh-form input, .bh-form select, .bh-form textarea {
  display: block; width: 100%; margin-top: 8px; padding: 13px 14px; border: 0;
  background: rgba(243, 233, 220, .1); color: var(--c-text-light); font: 400 16px/1.4 var(--f-body);
}
.bh-form input::placeholder, .bh-form textarea::placeholder { color: rgba(243, 233, 220, .55); }
.bh-form select option { color: #241a14; }
.bh-form .form-result { font: 700 15px/1.5 var(--f-body); color: var(--c-accent); min-height: 22px; }
.bh-form .form-result-err { color: #e08b8b; }
.bh-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* ── legal / prose pages ── */
.bh-prose { padding: 64px 0 96px; }
.bh-prose-in { max-width: 820px; }
.bh-prose-in h2, .bh-prose-in h3 { color: var(--c-accent); font-family: var(--f-body); text-transform: uppercase; letter-spacing: .04em; }
.bh-prose-in p, .bh-prose-in li { color: var(--c-text-light); line-height: 27px; }
.bh-recs { list-style: none; padding: 0; margin: 12px 0 0; }
.bh-recs li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(243, 233, 220, .18); padding: 12px 0; }
.bh-recs a { color: var(--c-text-light); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bh-recs a:hover, .bh-recs a:focus { color: var(--c-accent); text-decoration: underline; }

/* ── age gate ── */
.bh-agegate[open] { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: rgba(10, 7, 5, .82); z-index: 60; display: flex; align-items: center; justify-content: center; }
.bh-agegate::backdrop { background: rgba(10, 7, 5, .82); }
.bh-agegate-panel { background: var(--c-dark); border: 1px solid rgba(201, 138, 61, .5); padding: 56px 64px; max-width: 640px; text-align: center; }
.bh-agegate-panel h2 { font: 700 44px/1.15 var(--f-display); text-transform: uppercase; color: var(--c-accent); margin: 0 0 28px; }
.bh-agegate-panel .bh-age-btns { display: flex; gap: 18px; justify-content: center; margin-bottom: 24px; }
.bh-agegate-panel p { font: 400 14px/21px var(--f-body); color: var(--c-text-light); margin: 0; }
.bh-agegate-panel p a { color: var(--c-accent); }

/* ── inner-page hero (same 854 band, text-only or with photo) ── */
.bh-hero-page .bh-hero-in { grid-template-columns: 492px 1fr; align-items: center; padding-top: 0; height: 854px; }
/* 没有主图的子页（法务/联系/where to buy/404）只有一个文字子元素，
   不跨列就会被塞进 492px 的图片列，129px 的标题挤成两三行 */
.bh-hero-page .bh-hero-in > div:only-child { grid-column: 1 / -1; }
/* 子页标题比首页短词更长（PRIVACY POLICY / WHERE TO BUY），固定 129px 在窄屏会被
   hero 的 overflow:hidden 直接裁掉 —— 用 clamp 随视口缩，1440 处仍是证据里的 129px */
.bh-hero-page .bh-h1 { font-size: clamp(36px, 9vw, 129px); }
.bh-vh { position: absolute; left: -9999px; top: -9999px; }

/* ── engine leftovers we keep (search/404/forms) restyled minimally ── */
body.bh .wrap { max-width: 1296px; margin: 0 auto; padding: 48px 24px; }
body.bh .page-title { font: 700 58.816px/1.1 var(--f-display); text-transform: uppercase; color: var(--c-accent); }
body.bh .muted { color: rgba(243, 233, 220, .7); }

/* ── responsive ── */
@media (max-width: 1200px) {
  .bh-h1 { font-size: 108px; }
  .bh-hero-in { grid-template-columns: 380px 1fr; }
  .bh-hero-photo { width: 380px; height: 512px; }
  .bh-teaser { grid-template-columns: 1fr; height: auto; padding: 56px 0; }
  .bh-teaser-txt { padding: 32px 24px 0; }
  .bh-signup-in { grid-template-columns: 1fr; }
  .bh-contact-in { grid-template-columns: 1fr; }
  .bh-glide-slide { flex: 0 0 50%; }
  /* .bh-hero-page .bh-hero-in 的两条声明特异度更高，媒体查询里必须同选择器覆盖 */
  .bh-hero-page .bh-hero-in { height: auto; min-height: 460px; padding-top: 72px; padding-bottom: 56px; grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .bh-header { height: auto; }
  .bh-header-in { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  .bh-logo { width: 64px; height: 64px; flex-basis: 64px; }
  .bh-nav { gap: 14px; }
  .bh-nav a { font-size: 15px; }
  /* 触控目标 ≥44px：桌面靠 19.6/14px 字号 + 行距自然达标，窄屏字号缩到 15/14px 后只有
     39px / 28px 高，拇指点不准 —— 用 padding + min-height 补出命中区，视觉间距用 gap 抵回 */
  .bh-nav a, .bh-footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 4px; }
  .bh-footer nav { gap: 18px; flex-wrap: wrap; justify-content: center; }
  .bh-social { gap: 2px; }
  .bh-social a { min-width: 44px; min-height: 44px; padding: 11px; align-items: center; justify-content: center; box-sizing: border-box; }
  .bh-hero { height: auto; padding-bottom: 48px; }
  .bh-hero-in { grid-template-columns: 1fr; padding-top: 40px; gap: 28px; }
  .bh-h1 { font-size: 64px; }
  .bh-h4, .bh-sub { font-size: 21px; }
  .bh-h2 { font-size: 38px; }
  .bh-hero-photo { width: 100%; height: auto; aspect-ratio: 492/661; }
  .bh-glide { height: auto; padding-bottom: 64px; }
  .bh-glide-track { height: auto; margin-top: 24px; }
  .bh-glide-slide { flex: 0 0 100%; }
  .bh-glide-slide .bh-vert { position: static; transform: none; width: 150px; height: auto; margin: 0 auto 18px; }
  .bh-glide-slide .bh-land { margin-top: 0; width: 100%; max-width: 100%; height: 220px; }
  .bh-glide-ctl { position: static; padding: 18px 24px 0; }
  .bh-prod-block { grid-template-columns: 1fr; gap: 24px; }
  .bh-prod-vert { width: 150px; height: auto; }
  .bh-prod-title { font-size: 32px; }
  .bh-chips, .bh-cards { grid-template-columns: 1fr; }
  .bh-footer-in { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .bh-warn { justify-self: center; }
  .bh-agegate-panel { padding: 36px 22px; margin: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bh-glide-track { transition: none; }
  body.bh * { animation: none !important; scroll-behavior: auto !important; }
}

/* ── WhatsApp 联系浮层（参考 pdhcigar.com 的 wa-widget；气泡 ↔ 面板互换 + 移动端底部抽屉）──
   颜色口径：面板/文字一律走本站 14 个 --c-* token；只有 WhatsApp 自己的品牌色
   (#25d366 气泡 / #075e54 头部与直链 / #fff 其上的白色图形与文字) 保持字面量 ——
   那是第三方服务的识别色，不随本站换配色而变，也不该被后台"配色方案"覆盖掉。 */
.bh-wa { position: fixed; right: 22px; bottom: 22px; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.bh-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bh-wa-bubble {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(18, 12, 8, .35); transition: transform .2s ease, box-shadow .2s ease;
}
.bh-wa-bubble:hover { transform: scale(1.06); }
.bh-wa-bubble:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.bh-wa-bubble-icon svg { width: 30px; height: 30px; fill: #fff; display: block; }
.bh-wa-panel {
  /* 不用 100vw 兜宽度：移动仿真下 100vw 是布局视口，比可见宽度多出一条滚动条，
     于是 calc(100vw - 24px) 与 max-width 互相咬出 20px 的左右不对称。窄屏改走 stretch。 */
  width: 320px; background: var(--c-hero-bg);
  border: 1px solid rgba(36, 26, 20, .14); border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(18, 12, 8, .34);
  transform-origin: bottom right; opacity: 1; transform: translateY(0) scale(1);
  transition: opacity .22s ease, transform .22s ease;
}
.bh-wa-panel[hidden] { display: none; }
.bh-wa-panel.is-enter { opacity: 0; transform: translateY(10px) scale(.96); }
.bh-wa-head { display: flex; align-items: center; gap: 10px; background: #075e54; color: var(--c-text-light); padding: 12px 14px; }
.bh-wa-title { flex: 1; font: 700 15px/1.35 var(--f-body); }
.bh-wa-close { background: transparent; border: 0; color: var(--c-text-light); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.bh-wa-close:hover { background: rgba(243, 233, 220, .16); }
.bh-wa-close:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.bh-wa-body { padding: 16px; text-align: center; }
.bh-wa-hint { font: 400 13px/1.6 var(--f-body); color: var(--c-text-dark); margin: 0 0 12px; }
.bh-wa-qr { width: 240px; height: 240px; max-width: 100%; object-fit: contain; background: #fff; border: 1px solid rgba(36, 26, 20, .12); border-radius: 10px; }
.bh-wa-direct {
  /* 白字必须落在 WhatsApp 自己的深头绿 #075e54 上（7.7:1）。
     亮品牌绿 #25d366 只用于无文字的图形（气泡），白字压上去只有 2.0:1。 */
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 44px; padding: 10px 18px; border-radius: 999px; background: #075e54; color: #fff;
  font: 700 13px/1 var(--f-body); text-decoration: none; letter-spacing: .02em;
}
.bh-wa-direct:hover { background: #0b7a6d; }
.bh-wa-direct:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.bh-wa-direct svg { width: 20px; height: 20px; fill: #fff; }
@media (max-width: 480px) {
  /* 底部抽屉：外层撑满左右，面板 stretch 到可用宽度，气泡仍靠右 */
  .bh-wa { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .bh-wa-panel { width: auto; border-radius: 14px 14px 10px 10px; transform-origin: bottom center; }
  .bh-wa-bubble { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .bh-wa-bubble, .bh-wa-panel { transition: none; }
  .bh-wa-bubble:hover { transform: none; }
}
@media print { .bh-wa { display: none !important; } }