/* ============================================================
   首页 v2（/）2026-09-12
   与 note2 / me2 / cart2 / search2 同一套设计语言：
   米色底 + 白色大圆角卡 + 黑色系 CTA + 极少量金色点缀

   类名统一 hp- 前缀，作用域 .hp-page —— site.css 里的 .tip / .lb /
   .card / .name / .grid / .in 等通用名一个都不碰（改版踩过四次类名冲突）。
   ============================================================ */

.hp-page{background:var(--bg);-webkit-text-size-adjust:100%}
.hp-wrap{max-width:560px;margin:0 auto;padding:0 18px}

/* ---------- 顶栏（滚动后浮出毛玻璃） ---------- */
.hp-top{
  position:fixed;left:0;right:0;top:0;z-index:60;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.hp-top.solid{
  background:rgba(250,248,245,.9);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line-2);
}
.hp-topbar{
  max-width:560px;margin:0 auto;height:56px;padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.hp-brand{display:flex;align-items:center;gap:9px;min-width:0}
.hp-logo{height:44px;width:auto;max-width:120px;flex:none;object-fit:contain}
.hp-bname{
  font-family:var(--sans);font-size:14.5px;font-weight:500;
  letter-spacing:.14em;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;
}
.hp-me{
  flex:none;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 13px;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.7);
  font-family:var(--sans);font-size:12.5px;color:var(--ink-2);letter-spacing:.04em;
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.hp-me svg{width:15px;height:15px}
.hp-me:active{transform:scale(.95);background:var(--surface)}

/* ---------- Hero ---------- */
.hp-hero{padding:45px 0 0}
/* 页首不放任何英文标题（BUTTERFLY / VINTAGE JEWELRY 都不要，与顶栏 logo 重复），
   一条金色短线起头，视觉重心直接给 serif 标语 */
.hp-rule{width:34px;height:1px;margin:0 0 16px;opacity:.85}
.hp-tagline{
  font-family:var(--serif);font-size:26px;line-height:1.5;font-weight:600;
  color:var(--ink);letter-spacing:.01em;
}
.hp-desc{
  margin-top:11px;font-size:13.5px;line-height:2;color:var(--muted);
  letter-spacing:.01em;
}
/* 地址：去掉原来的金底胶囊，只留一枚细金色定位图标 + 灰字 */
.hp-addr{
  display:inline-flex;align-items:center;gap:5px;margin-top:13px;
  font-size:12.5px;color:var(--muted);letter-spacing:.02em;
  cursor:pointer;              /* 点一下滚到「来胡同里坐坐」 */
}
.hp-addr:active{opacity:.7}
.hp-addr svg{width:12.5px;height:12.5px;flex:none;color:var(--gold-lt)}

/* 三图拼贴：高度由主格 aspect-ratio 决定，侧栏两格均分 —— 换图时尺寸恒定 */
.hp-collage{
  display:grid;grid-template-columns:1.32fr 1fr;gap:8px;
  margin-top:22px;
}
.hp-col-main{position:relative;border-radius:var(--r-lg);overflow:hidden}
.hp-col-main::before{content:"";display:block;padding-top:125%}   /* 4:5 */
.hp-col-main .hp-cl{position:absolute;inset:0;height:auto}
.hp-col-side{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;min-height:0}
.hp-cell{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:0}
.hp-cell .hp-cl{position:absolute;inset:0}
.hp-cl{
  position:relative;width:100%;height:100%;overflow:hidden;
  background:var(--bg-sunk);
}
.hp-cl-panel{
  position:absolute;inset:0;transform:translateX(100%);
  will-change:transform;
  transition:transform .68s var(--ease-out);
}
.hp-cl-panel.is-curr{transform:translateX(0)}
.hp-cl-panel.is-out{transform:translateX(-100%)}
.hp-cl-panel.no-anim{transition:none}
.hp-cl-panel img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.hp-cl-panel.error{background:var(--bg-sunk)}
/* 主图左下角的标题：纯文字压在图上（不要白底胶囊），靠文字阴影保证可读 */
.hp-col-tag{
  position:absolute;left:13px;right:13px;bottom:12px;z-index:2;
  display:flex;align-items:center;gap:6px;
  color:#fff;font-size:12px;letter-spacing:.04em;
  text-shadow:0 1px 8px rgba(23,19,16,.7),0 0 2px rgba(23,19,16,.45);
}
.hp-col-tag .hp-col-title{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hp-col-ar{width:12px;height:12px;flex:none;color:rgba(255,255,255,.86)}
.hp-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:14px 9px 7px;color:#F5F1EA;font-size:10.5px;letter-spacing:.04em;
  background:linear-gradient(transparent,rgba(23,19,16,.55));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hp-cap:empty{display:none}

.hp-hero-acts{display:flex;gap:10px;margin-top:20px}
.hp-btn{
  flex:1;height:46px;border-radius:999px;border:0;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.06em;
  text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),opacity .2s var(--ease),background .2s var(--ease);
}
.hp-btn svg{width:16px;height:16px;flex:none}
.hp-btn:active{transform:scale(.975)}
.hp-btn-dark{background:var(--ink);color:#F7F4F0}
.hp-btn-dark:active{opacity:.88}
.hp-btn-ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.hp-btn-gold{background:var(--ink);color:#F7F4F0}
.hp-btn-call{background:var(--ink);color:#F7F4F0}

/* ---------- 数据条 ---------- */
.hp-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:26px 0 0;padding:17px 6px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.hp-stat{position:relative;text-align:center;padding:0 4px}
.hp-stat + .hp-stat::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line-2);
}
.hp-stat-num{
  font-family:var(--display);font-size:22px;font-weight:600;line-height:1.15;
  color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.hp-stat-num em{font-style:normal;font-size:12px;margin-left:1px;color:var(--muted)}
.hp-stat-lab{
  margin-top:3px;font-size:11px;color:var(--faint);letter-spacing:.07em;
  white-space:nowrap;
}
.hp-stats:empty{display:none}

/* ---------- 区块通用 ---------- */
/* scroll-margin-top：固定顶栏 56px，锚点跳转时别被盖住 */
.hp-sec{margin-top:48px;scroll-margin-top:66px}
.hp-sec-head{margin-bottom:16px}
.hp-eyebrow{
  font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}
.hp-sec-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-top:6px;
}
.hp-sec-title{
  font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.3;
  color:var(--ink);letter-spacing:.06em;
}
.hp-sec-count{
  flex:none;font-size:12px;color:var(--muted);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.hp-sec-sub{margin-top:7px;font-size:13px;color:var(--faint);letter-spacing:.02em}

/* ---------- 品类 chips（横滑，与找一找一致） ---------- */
.hp-chips{
  display:flex;gap:7px;overflow-x:auto;margin:0 -18px 14px;padding:2px 18px 3px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.hp-chips::-webkit-scrollbar{display:none}
.hp-chip{
  flex:none;height:33px;padding:0 13px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);background:var(--surface);
  font-family:var(--sans);font-size:12.5px;color:var(--ink-2);
  letter-spacing:.02em;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.hp-chip b{
  font-weight:400;font-size:10.5px;opacity:.6;
  font-variant-numeric:tabular-nums;
}
.hp-chip.on{background:var(--ink);color:#F5F1EA;border-color:var(--ink);font-weight:600}
.hp-chip.on b{opacity:.7}
.hp-chip:active{transform:scale(.97)}

/* ---------- 商品网格 ---------- */
.hp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hp-card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  cursor:pointer;
  animation:hpCardIn .5s var(--ease-out) both;
  transition:transform .2s var(--ease);
}
.hp-card:active{transform:scale(.985)}
@keyframes hpCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hp-thumb{
  position:relative;display:block;width:100%;height:0;padding-top:125%;
  background:var(--bg-sunk);overflow:hidden;
}
.hp-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hp-shade{
  position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(transparent,rgba(23,19,16,.42));pointer-events:none;
}
.hp-flt{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:3px;
  height:21px;padding:0 8px;border-radius:999px;
  background:rgba(23,19,16,.55);color:#F5F1EA;
  font-size:10px;letter-spacing:.06em;line-height:1;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hp-flt svg{width:10px;height:10px}
.hp-flt-time{left:8px;top:8px}
.hp-flt-pics{right:8px;top:8px}
.hp-flt-brand{
  left:8px;bottom:8px;right:auto;max-width:calc(100% - 16px);
  background:rgba(255,255,255,.86);color:var(--ink);
  font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hp-sold{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  padding:5px 0;text-align:center;
  background:rgba(23,19,16,.62);color:#F5F1EA;
  font-size:10.5px;letter-spacing:.16em;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.hp-sold-tint img{filter:grayscale(.5);opacity:.86}
.hp-info{padding:11px 12px 12px}
.hp-cname{
  font-size:13.5px;font-weight:500;line-height:1.45;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9em;
}
.hp-cpr{
  margin-top:6px;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.hp-cfoot{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2);
}
.hp-ccat{font-size:11px;color:var(--faint);letter-spacing:.04em}
.hp-cgo{
  display:inline-flex;align-items:center;gap:2px;
  font-size:11px;color:var(--gold);letter-spacing:.04em;
}
.hp-cgo svg{width:11px;height:11px}
.hp-card.sold .hp-cname,.hp-card.sold .hp-cpr{color:var(--muted)}

.hp-empty{
  grid-column:1/-1;padding:52px 20px;text-align:center;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  color:var(--faint);font-size:13px;letter-spacing:.02em;
}
.hp-empty svg{width:34px;height:34px;margin:0 auto 12px;display:block;opacity:.5}

.hp-gridfoot{
  margin-top:16px;text-align:center;
  font-size:12px;color:var(--faint);letter-spacing:.04em;line-height:1.9;
}
.hp-gridfoot b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.hp-gridfoot a{color:var(--gold);text-decoration:none}

/* ---------- 故事：杂志特辑白卡 ---------- */
.hp-story{
  overflow:hidden;border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
}
.hp-storypic{
  position:relative;overflow:hidden;background:var(--bg-sunk);
}
.hp-storypic::before{content:"";display:block;padding-top:62%}
.hp-storypic img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease);
}
.hp-storypic img.ok{opacity:1}
.hp-storycap{
  position:absolute;left:14px;bottom:12px;z-index:2;
  padding:4px 10px;border-radius:999px;
  background:rgba(23,19,16,.48);color:#F7F4F0;
  font-family:var(--display);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hp-storycap:empty{display:none}
.hp-storytxt{padding:16px 16px 18px}
.hp-storyk{
  font-family:var(--display);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.hp-storyk:empty{display:none}
.hp-lead{
  margin-top:8px;font-family:var(--serif);font-size:18px;line-height:1.65;font-weight:500;
  color:var(--ink);letter-spacing:.01em;
}
.hp-body{margin-top:10px}
.hp-body p{
  margin-top:8px;font-family:var(--serif);font-size:13.5px;line-height:1.95;
  color:var(--ink-2);
}
.hp-body p:first-child::first-letter{
  float:left;font-size:38px;line-height:.85;padding:.08em .1em 0 0;
  font-family:var(--serif);font-weight:600;color:var(--ink);
}

.hp-fold{
  margin-top:8px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;
}
.hp-foldbtn{
  width:100%;border:0;background:none;padding:14px 16px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--sans);text-align:left;
}
.hp-foldbtn .hp-fbl{display:flex;flex-direction:column;gap:3px;min-width:0}
.hp-fbk{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.hp-foldbtn b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.hp-foldbtn .hp-fbs{display:block;font-size:11.5px;color:var(--faint)}
.hp-fbar{width:16px;height:16px;flex:none;color:var(--muted);transition:transform .3s var(--ease)}
.hp-fold.open .hp-fbar{transform:rotate(180deg)}
.hp-foldpanel{
  overflow:hidden;max-height:0;
  transition:max-height .42s var(--ease-out),opacity .3s var(--ease);
  opacity:0;
}
.hp-fold.open .hp-foldpanel{max-height:1400px;opacity:1}
.hp-tl{
  list-style:none;margin:0 16px 16px;padding:4px 0 0 18px;
  border-left:1px solid var(--line-gold);
}
.hp-tl li{position:relative;padding:0 0 16px 16px}
.hp-tl li:last-child{padding-bottom:2px}
.hp-tl li::before{
  content:"";position:absolute;left:-22px;top:6px;
  width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px var(--surface);
}
.hp-era{
  font-family:var(--display);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.hp-tt{margin-top:3px;font-size:14px;font-weight:600;color:var(--ink)}
.hp-dd{margin-top:3px;font-size:12.5px;line-height:1.85;color:var(--muted)}

/* ---------- 客人怎么说：白卡 + 横滑评价 ---------- */
.hp-voices{
  padding:16px 0 14px;
  border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
  overflow:hidden;
}
.hp-score{
  display:flex;align-items:center;gap:12px;
  padding:0 16px 14px;margin:0 0 2px;
  border-bottom:1px solid var(--line-2);
}
.hp-score .hp-big{
  font-family:var(--sans);font-size:42px;line-height:1;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.04em;
}
.hp-smeta{flex:1;min-width:0}
.hp-score .hp-stars{font-size:12.5px;color:var(--gold);letter-spacing:.1em;line-height:1}
.hp-score .hp-sl{margin-top:5px;font-size:12px;color:var(--muted);letter-spacing:.02em}
.hp-slink{
  flex:none;font-size:12px;color:var(--ink);text-decoration:none;
  letter-spacing:.02em;white-space:nowrap;
}

.hp-vscroll{
  display:flex;gap:10px;overflow-x:auto;
  margin:14px 0 0;padding:0 16px 2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.hp-vscroll::-webkit-scrollbar{display:none}
.hp-vcard{
  flex:none;width:248px;padding:13px 13px 14px;border-radius:var(--r-md);
  background:var(--bg-sunk);border:1px solid var(--line-2);
}
.hp-vhdrow{display:flex;align-items:center;gap:9px}
.hp-av{
  position:relative;width:40px;height:40px;flex:none;border-radius:50%;
  overflow:hidden;background:var(--gold-soft);
  display:flex;align-items:center;justify-content:center;
}
.hp-av img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.hp-av b{
  font-size:13px;font-weight:600;color:#7A6140;line-height:1;
}
.hp-vwho{flex:1;min-width:0}
.hp-nm{
  font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hp-dt{margin-top:2px;font-size:11px;color:var(--faint)}
.hp-sr{flex:none;font-size:11px;color:var(--gold);letter-spacing:.04em}
.hp-vtx{
  margin-top:10px;font-size:13px;line-height:1.8;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.hp-vmore{
  display:block;margin:12px 16px 0;padding-top:12px;
  border-top:1px solid var(--line-2);
  text-align:center;
  font-size:12.5px;color:var(--ink);letter-spacing:.04em;text-decoration:none;
}

/* ---------- 到店：Airbnb 房源式 ---------- */
.hp-visit{
  overflow:hidden;border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line-2);
}
.hp-visitpic{position:relative;background:var(--bg-sunk)}
.hp-visitpic::before{content:"";display:block;padding-top:56%}
.hp-visitpic img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease);
}
.hp-visitpic img.ok{opacity:1}
.hp-visitbody{position:relative;padding:16px 16px 18px}
.hp-vaddr{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;
}
.hp-vaddr svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--gold)}
.hp-vaddr b{
  display:block;font-family:var(--serif);font-size:18px;font-weight:600;
  line-height:1.45;color:var(--ink);
}
.hp-vaddr em{
  display:block;margin-top:4px;font-style:normal;font-size:12px;color:var(--muted);
}
.hp-visitbody > .hp-btn{width:100%;flex:none;height:48px;margin:0 0 14px}

/* ---------- 到店 · 距您多远 ---------- */
/* 距离跟在文字右边（hero 地址栏 / 到店卡的「周边」行），样式与所在文字完全一致
   —— 只要「和文字一样」，所以纯继承、不加任何装饰。
   默认 hidden：非微信 / 没授权 / 定位失败都保持隐藏，不留空位、不报错。 */
.hp-dist{
  font:inherit;color:inherit;letter-spacing:inherit;white-space:nowrap;
}
.hp-dist::before{content:"·";margin:0 6px;opacity:.55}
.hp-dist[hidden]{display:none}
.hp-vgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.hp-vcell{
  padding:10px 12px;border-radius:var(--r-md);background:var(--bg-sunk);
  min-width:0;
}
.hp-vcell span{
  display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.hp-vcell b{
  display:block;margin-top:5px;font-size:12.5px;font-weight:500;line-height:1.5;
  color:var(--ink-2);word-break:break-word;
}
.hp-vphone{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hp-vtip{
  margin-top:12px;text-align:center;font-size:11.5px;line-height:1.9;color:var(--faint);
  letter-spacing:.02em;
}

/* ---------- Footer：品牌三件套 + 三列卡 ---------- */
.hp-footer{
  margin-top:36px;padding:36px 0 28px;
  border-top:1px solid var(--line-2);
}
.hp-fmark{text-align:center;margin-bottom:28px}
.hp-frule{width:28px;height:1px;margin:0 auto 16px;background:var(--gold)}
.hp-fslogan{
  font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink);
  letter-spacing:.02em;
}
.hp-flogo{width:28px;height:28px;margin:16px auto 10px;color:var(--gold-lt);display:block}
.hp-fbn{
  font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.32em;color:var(--ink);text-transform:uppercase;
}
.hp-fcols{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
  padding-bottom:22px;border-bottom:1px solid var(--line-2);
}
.hp-fcols span{
  display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.hp-fcols p{
  margin-top:8px;font-size:12px;line-height:1.75;color:var(--ink-2);
  overflow-wrap:anywhere;
}
.hp-fcols a{color:var(--ink);text-decoration:none}
.hp-fcp{
  margin-top:16px;text-align:center;
  font-size:10.5px;color:var(--faint);letter-spacing:.04em;line-height:1.8;
}

/* ---------- 底部 dock（滚过一段才浮出） ---------- */
.hp-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:10px 18px calc(12px + var(--safe-b));
  background:linear-gradient(transparent,rgba(250,248,245,.86) 34%,rgba(250,248,245,.98));
  transform:translateY(120%);opacity:0;pointer-events:none;
  transition:transform .34s var(--ease-out),opacity .3s var(--ease);
}
.hp-dock.on{transform:none;opacity:1;pointer-events:auto}
.hp-dock.hide{transform:translateY(120%);opacity:0;pointer-events:none}
.hp-dockbar{max-width:560px;margin:0 auto;display:flex;gap:10px}

/* 回到顶部浮标 */
.hp-fab{
  position:fixed;right:16px;bottom:calc(92px + var(--safe-b));z-index:49;
  width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--ink-2);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-1);cursor:pointer;
  transform:translateY(10px) scale(.9);opacity:0;pointer-events:none;
  transition:transform .28s var(--ease-out),opacity .24s var(--ease);
}
.hp-fab.on{transform:none;opacity:1;pointer-events:auto}
.hp-fab svg{width:17px;height:17px}
.hp-fab:active{transform:scale(.92)}

/* ---------- 商品抽屉（缺 note_id 时的兜底） ---------- */
.hp-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  max-height:92vh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:24px 24px 0 0;
  box-shadow:var(--sh-3);
  transform:translateY(101%);
  transition:transform .4s var(--ease-out);
  visibility:hidden;
}
.hp-sheet.open{transform:none;visibility:visible}
.hp-shhead{
  position:relative;flex:none;padding:10px 56px 10px 52px;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.hp-shhead.stuck{background:rgba(255,255,255,.94);border-bottom-color:var(--line-2)}
.hp-grab{
  position:absolute;left:50%;top:7px;transform:translateX(-50%);
  width:38px;height:4px;border-radius:99px;background:var(--line);
}
.hp-back{
  position:absolute;left:12px;top:14px;width:34px;height:34px;
  border:0;border-radius:50%;background:var(--bg-sunk);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.hp-back svg{width:17px;height:17px}
.hp-shtxt{text-align:center}
.hp-shtxt .hp-shtt{
  font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hp-shtxt .hp-shts{margin-top:2px;font-size:11px;color:var(--faint)}
.hp-shscroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.hp-shots{display:flex;flex-direction:column;gap:1px;background:var(--bg-sunk)}
.hp-shot{position:relative;background:var(--bg-sunk)}
.hp-shot img{width:100%;height:auto;display:block}
.hp-idx{
  position:absolute;right:10px;bottom:10px;
  padding:3px 9px;border-radius:999px;
  background:rgba(23,19,16,.5);color:#F5F1EA;font-size:10.5px;letter-spacing:.06em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hp-meta{padding:18px 18px 4px}
.hp-meta .hp-br{
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.hp-meta h2{
  margin-top:7px;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.5;color:var(--ink);
}
.hp-meta .hp-mtm{margin-top:7px;font-size:11.5px;color:var(--faint);letter-spacing:.02em}
.hp-art{margin-top:14px}
.hp-art p{margin-top:8px;font-size:13.5px;line-height:1.95;color:var(--ink-2)}
.hp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.hp-tags span{
  padding:4px 10px;border-radius:999px;background:var(--bg-sunk);
  font-size:11px;color:var(--muted);letter-spacing:.02em;
}
.hp-why{
  margin:16px 18px 0;padding:13px 14px;border-radius:var(--r-md);
  background:var(--gold-soft);border:1px solid var(--line-gold);
  font-size:12px;line-height:1.9;color:#7A6140;
}
.hp-sfoot{
  flex:none;display:flex;gap:10px;
  padding:12px 18px calc(14px + var(--safe-b));
  border-top:1px solid var(--line-2);background:var(--surface);
}

/* ---------- 图片查看 ---------- */
.hp-lb{
  position:fixed;inset:0;z-index:90;background:rgba(12,10,8,.96);
  opacity:0;visibility:hidden;transition:opacity .26s var(--ease),visibility .26s;
}
.hp-lb.open{opacity:1;visibility:visible}
.hp-lbtr{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + var(--sans-safe)) 14px 10px;color:#fff;
}
.hp-lbtr button{
  width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.hp-lbtr button svg{width:18px;height:18px}
.hp-lbc{font-size:12.5px;letter-spacing:.1em;color:rgba(255,255,255,.86)}
.hp-lbtrack{
  display:flex;height:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.hp-lbtrack::-webkit-scrollbar{display:none}
.hp-lbs{
  flex:none;width:100vw;height:100%;scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;padding:64px 0;
}
.hp-lbs img{max-width:100%;max-height:100%;object-fit:contain}
.hp-lbhint{
  position:absolute;left:0;right:0;bottom:calc(18px + var(--safe-b));z-index:2;
  text-align:center;font-size:11.5px;color:rgba(255,255,255,.5);letter-spacing:.06em;
}

/* ---------- 开屏 / 报错 ---------- */
.hp-boot{
  position:fixed;inset:0;z-index:99;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .42s var(--ease),visibility .42s;
}
.hp-boot.gone{opacity:0;visibility:hidden}
.hp-ring{
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--line);border-top-color:var(--gold);
  animation:hpSpin .9s linear infinite;
}
@keyframes hpSpin{to{transform:rotate(360deg)}}
.hp-boottx{
  font-family:var(--display);font-size:11px;letter-spacing:.34em;
  color:var(--faint);text-transform:uppercase;
}
.hp-err{
  display:none;padding:90px 26px;text-align:center;
}
.hp-err h2{font-family:var(--serif);font-size:19px;color:var(--ink)}
.hp-err p{margin-top:10px;font-size:13px;line-height:1.9;color:var(--muted)}
.hp-err a{
  display:inline-block;margin-top:18px;padding:10px 22px;border-radius:999px;
  background:var(--ink);color:#F7F4F0;font-size:13px;letter-spacing:.06em;
}

/* ---------- 进场上浮 ---------- */
.hp-rv{opacity:0;transform:translateY(14px)}
.hp-rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}

@media(prefers-reduced-motion:reduce){
  .hp-rv{opacity:1;transform:none}
  .hp-cl-panel{transition:none}
}
@media(max-width:360px){
  .hp-mark{font-size:33px}
  .hp-tagline{font-size:21px}
  .hp-vcard{width:236px}
  .hp-score .hp-big{font-size:40px}
  .hp-fcols{grid-template-columns:1fr;gap:14px}
  .hp-fcols p{font-size:11.5px}
}