/* ============================================================
   PUREAR · 宠物肖像定制 — 移动优先交互 UI 设计系统
   结构参照 10 屏参考稿：首页瀑布流 / 风格分类 / 风格详情 /
   作品详情 / 上传宠物 / 选择风格 / 预览确认 / 订单确认 / 支付 / 完成
   断点：移动端 < 900px（底部标签栏） · 桌面端 >= 900px（顶部导航）
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 品牌色：深墨绿 / 暖米白 / 香槟金 */
  --ink: #22362B;
  --ink-2: #2E4638;
  --ink-3: #46604F;
  --cream: #F4EFE4;
  --cream-2: #FBF8F1;
  --cream-3: #EFE8DA;
  --gold: #B9985F;
  --gold-2: #D8C29B;
  --gold-soft: #F0E6D2;

  --text: #22362B;
  --text-2: #55635A;
  --muted: #8A9188;
  --line: #E4DBCB;
  --line-2: #D8CDBA;
  --white: #FFFFFF;
  --success: #3E7D5A;
  --danger: #B4483C;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(34, 54, 43, .05);
  --sh-2: 0 4px 16px rgba(34, 54, 43, .08);
  --sh-3: 0 10px 34px rgba(34, 54, 43, .14);

  --appbar-h: 56px;
  --tabbar-h: 62px;
  --pad: 18px;
  /* 内容区最大宽度：4 列瀑布流下每格约 289px（原 1180px 时约 274px）。
     列数封顶后想再放大单张图，只能从容器宽度和留白里挤 —— 这里两个都调了一点。 */
  --maxw: 1240px;

  --font-serif: Georgia, 'Songti SC', 'Noto Serif SC', 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
               'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. 重置与基础 ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
body.no-scroll { overflow: hidden; }
::selection { background: var(--gold-2); color: var(--ink); }

/* 滚动条（桌面） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream-3); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--cream-3); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ---------- 3. 排版 ---------- */
.serif { font-family: var(--font-serif); }
.h1 { font-family: var(--font-serif); font-size: 27px; line-height: 1.22; font-weight: 400; letter-spacing: -.2px; }
.h2 { font-family: var(--font-serif); font-size: 21px; line-height: 1.3; font-weight: 400; }
.h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 400; }
.sub { color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.tiny { font-size: 11.5px; color: var(--muted); letter-spacing: .2px; }
.eyebrow {
  font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.up { text-transform: uppercase; letter-spacing: 1.4px; }

/* ---------- 4. 应用骨架 ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* 顶部栏 */
.appbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--appbar-h);
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  background: rgba(251, 248, 241, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.appbar .spacer { flex: 1; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-pill); color: var(--ink);
  transition: background .18s var(--ease);
}
.icon-btn:hover { background: var(--cream-3); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn.has-dot { position: relative; }
.icon-btn .dot {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); border: 1.5px solid var(--cream-2);
}

/* 品牌字标（圆形 logo + PUREAR 两行） */
.brand { display: flex; flex-direction: row; align-items: center; gap: 9px; line-height: 1; }
/* 图本身就是圆形（圆外透明），border-radius 仅作兜底 */
.brand-logo { width: 38px; height: 38px; flex: none; border-radius: 50%; }
.brand-txt { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.brand .mark {
  font-family: var(--font-serif); font-size: 16.5px; letter-spacing: 4.5px;
  text-transform: uppercase; color: var(--ink); font-weight: 400;
}
.brand .tag {
  font-size: 8px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}
.appbar .brand { flex: 1; }

/* 页面容器 */
.screen { flex: 1; padding-bottom: calc(var(--tabbar-h) + 26px); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { width: 100%; max-width: 620px; margin: 0 auto; padding: 0 var(--pad); }

/* 底部标签栏（移动端） */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(251, 248, 241, .96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
}

/* 流程类页面（风格详情/作品详情/定制向导/结算/支付/完成）隐藏标签栏，
   与参考稿一致：这些页面底部只保留主行动按钮，避免两层固定条叠放 */
body.no-tabbar .tabbar { display: none; }
body.no-tabbar .screen { padding-bottom: 30px; }
body.no-tabbar .ctabar { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
body.no-tabbar .toast { bottom: 26px; }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10.5px; color: var(--muted);
  letter-spacing: .2px; transition: color .18s var(--ease);
}
.tab svg { width: 22px; height: 22px; }
.tab.active { color: var(--ink); font-weight: 600; }
.tab.active svg { stroke-width: 2.1; }
.tab:active { transform: scale(.93); }

/* 桌面顶部导航（默认隐藏） */
.topnav { display: none; }

/* 返回栏（二级页） */
.pagehead {
  display: flex; align-items: center; gap: 4px;
  height: 50px; padding: 0 6px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-2);
  position: sticky; top: var(--appbar-h); z-index: 55;
}
.pagehead .ttl {
  flex: 1; text-align: center; font-family: var(--font-serif);
  font-size: 16px; letter-spacing: .3px;
}

/* ---------- 5. 通用组件 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--cream-2);
  font-size: 15px; font-weight: 600; letter-spacing: .2px;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  box-shadow: 0 6px 18px rgba(34, 54, 43, .18);
}
.btn:hover { background: var(--ink-2); box-shadow: 0 8px 24px rgba(34, 54, 43, .24); }
.btn:active { transform: scale(.975); }
.btn svg { width: 18px; height: 18px; }
.btn.block { width: 100%; }
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); box-shadow: none;
}
.btn.ghost:hover { background: var(--cream-3); }
.btn.gold { background: var(--gold); color: #fff; box-shadow: 0 6px 18px rgba(185, 152, 95, .3); }
.btn.gold:hover { background: #A9884F; }
.btn[disabled], .btn.is-disabled {
  opacity: .42; pointer-events: none; filter: grayscale(.3);
}
.btn.sm { height: 40px; padding: 0 16px; font-size: 13.5px; }
.btn.lg { height: 54px; font-size: 16px; }

/* 底部固定 CTA 条（移动端需让位给标签栏，避免被遮挡） */
.ctabar {
  position: fixed; left: 0; right: 0; z-index: 65;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 12px var(--pad) 12px;
  background: linear-gradient(to top, var(--cream-2) 62%, rgba(251, 248, 241, .82));
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.ctabar .price { display: flex; flex-direction: column; line-height: 1.15; }
.ctabar .price b { font-family: var(--font-serif); font-size: 21px; font-weight: 400; }
.ctabar .price span { font-size: 11px; color: var(--muted); }
.ctabar .btn { flex: 1; }
.ctabar-space { height: 96px; }

/* 文件选择：视觉隐藏但仍可被 label 激活（不可用 display:none，部分浏览器不转发点击） */
.fileinput {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* 卡片 */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1);
}
.card.pad { padding: 16px; }

/* 标签 / 芯片 */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--white);
  font-size: 12.5px; color: var(--text-2); white-space: nowrap;
  transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--cream-2); }
.chiprow {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--pad) 4px;
  scrollbar-width: none;
}
.chiprow::-webkit-scrollbar { display: none; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--cream-2); border: 1px solid var(--line);
  font-size: 11px; color: var(--ink); letter-spacing: .2px;
}
.badge.gold { background: var(--gold-soft); border-color: var(--gold-2); color: #7A5F2C; }
.badge.solid { background: var(--ink); color: var(--cream-2); border-color: var(--ink); }

/* 分区标题 */
.sec { margin-top: 26px; }
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 13px;
}
.sec-head .more {
  font-size: 12.5px; color: var(--gold); font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.sec-head .more svg { width: 14px; height: 14px; }

/* 分隔线 */
.hr { height: 1px; background: var(--line); border: 0; margin: 20px 0; }

/* 空态 */
.empty { text-align: center; padding: 54px 20px; color: var(--muted); }
.empty svg { width: 46px; height: 46px; margin: 0 auto 12px; opacity: .5; }

/* ---------- 6. 首页 ---------- */
.hero { position: relative; margin: 0 0 20px; }
.hero-media { position: relative; overflow: hidden; }
.hero-media img {
  width: 100%; aspect-ratio: 3 / 3.5; object-fit: cover;
}
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(34,54,43,.16) 0%, rgba(34,54,43,0) 34%, rgba(34,54,43,.5) 100%);
}
.hero-card {
  position: absolute; left: var(--pad); right: 96px; bottom: 18px;
  background: rgba(251, 248, 241, .95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-md); padding: 15px 16px 16px;
  box-shadow: var(--sh-3);
  animation: rise .7s var(--ease) both;
}
.hero-card .h1 { font-size: 24px; }
.hero-card .sub { margin-top: 7px; font-size: 12.5px; }
.hero-badge {
  position: absolute; right: 16px; bottom: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 76px; height: 76px; padding: 6px; text-align: center;
  border-radius: 50%; background: var(--ink); color: var(--cream-2);
  box-shadow: var(--sh-3); line-height: 1.22;
  animation: rise .8s .1s var(--ease) both;
}
.hero-badge b { font-family: var(--font-serif); font-size: 17px; font-weight: 400; }
.hero-badge span { font-size: 8.5px; letter-spacing: .9px; text-transform: uppercase; opacity: .82; }

/* 首页轮播图：内容由后台 hero_banners 配置，服务端算出点击落点 */
.hero-carousel { position: relative; overflow: hidden; margin: 0 0 20px; background: var(--cream-3); }
/* 轮播数据未就绪（接口未返回 / 后台一张都没启用）时的占位：保持与真实首屏同高，
   避免首页在这段时间里塌成一条细缝 */
.hero-carousel.hc-skeleton { aspect-ratio: 3 / 3.6; }
.hc-track { display: flex; transition: transform .55s var(--ease); will-change: transform; }
.hc-slide { position: relative; flex: 0 0 100%; min-width: 100%; display: block; text-decoration: none; color: inherit; }
.hc-img { width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover; display: block; }
.hc-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(34,54,43,.10) 0%, rgba(34,54,43,0) 32%, rgba(34,54,43,.74) 100%);
}
.hc-cap {
  position: absolute; left: 0; right: 0; bottom: 46px;
  padding: 0 var(--pad); color: var(--cream-2);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.hc-tag {
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--gold); color: #fff; font-size: 10px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase;
}
.hc-title { font-family: var(--font-serif); font-size: 23px; font-weight: 400; line-height: 1.2; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.hc-sub { font-size: 12.5px; opacity: .92; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.hc-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  padding: 9px 17px; border-radius: var(--r-pill);
  background: rgba(251, 248, 241, .94); color: var(--ink);
  font-size: 12.5px; font-weight: 600; box-shadow: var(--sh-2);
}
.hc-cta svg { width: 15px; height: 15px; }
.hc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(251, 248, 241, .82); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--sh-1);
  transition: background .2s var(--ease); z-index: 2;
}
.hc-arrow:hover { background: var(--white); }
.hc-prev { left: 10px; }
.hc-next { right: 10px; }
.hc-dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px;
  display: flex; gap: 7px; z-index: 2;
}
.hc-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(251, 248, 241, .5); cursor: pointer;
  transition: width .25s var(--ease), background .25s var(--ease);
}
.hc-dot.on { width: 22px; border-radius: var(--r-pill); background: var(--gold); }

/* 瀑布流（卡片整体是链接，点击直达后台绑定的商品详情页）
   简约版：卡上只有「图片 + 标题」，不放价格胶囊 / 商品编号 / 箭头按钮 */
.waterfall { columns: 2; column-gap: 12px; }
.wf-item {
  display: block; text-decoration: none; color: inherit;
  break-inside: avoid; margin-bottom: 12px; position: relative;
  border-radius: var(--r-md); overflow: hidden; background: var(--cream-3);
  box-shadow: var(--sh-1); cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.wf-item:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.wf-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wf-item img { width: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.wf-item:hover img { transform: scale(1.04); }
.wf-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 28px 11px 10px;
  background: linear-gradient(to top, rgba(20,32,25,.86), rgba(20,32,25,0));
  color: #fff;
}
.wf-cap b {
  display: block; font-family: var(--font-serif); font-size: 13.5px; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-cap span {
  display: block; font-size: 10.5px; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-tile {
  break-inside: avoid; margin-bottom: 12px; padding: 20px 15px;
  border-radius: var(--r-md); background: var(--ink); color: var(--cream-2);
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  min-height: 152px;
}
.wf-tile .n { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--gold-2); }
.wf-tile p { font-size: 12.5px; opacity: .9; line-height: 1.45; }
.wf-tile a {
  margin-top: 4px; font-size: 11.5px; letter-spacing: .6px;
  display: inline-flex; align-items: center; gap: 4px; color: var(--gold-2);
}
.wf-tile a svg { width: 13px; height: 13px; }

/* 首页「装饰风格」：成品画挂进真实家居空间的效果图。
   版式与瀑布流同款（列式 masonry，宽度自适应、高度随图）—— 这批效果图的比例差异极大
   （1:1 方图为主，另有 3:2 横图与 2:3 竖图），固定行高的网格只能靠裁图对齐，
   而效果图一旦被裁，客户要看的「这幅画挂墙上多大多高」就没了。
   卡上只有图、没有文字：图里挂的就是那幅画，再压一层标题只会挡住它。 */
.decor-grid { columns: 2; column-gap: 12px; }
.decor-card {
  display: block; text-decoration: none; color: inherit;
  break-inside: avoid; margin-bottom: 12px; position: relative;
  border-radius: var(--r-md); overflow: hidden; background: var(--cream-3);
  box-shadow: var(--sh-1); cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.decor-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.decor-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.decor-card img {
  width: 100%; display: block; object-fit: cover;
  transition: transform .5s var(--ease);
}
.decor-card:hover img { transform: scale(1.04); }
/* 首页那一栏在手机上只露 4 张（2 列 × 2 行）。
   多渲染的 4 张由这里收掉，而不是靠 JS 数屏幕宽度 —— 断点是 CSS 的事，
   JS 里再判一次窗口宽度，resize 时两边必然不一致。 */
.decor-grid.on-home .decor-card:nth-child(n+5) { display: none; }

/* 首页「定制三步」（hero 之下、瀑布流之上）
   移动端竖排，桌面端横排 + 虚线箭头连接。
   箭头在窄屏隐藏而不是转成向下：竖排时卡片已经首尾相接，
   再插一个向下箭头只会把三张卡拉长到一屏放不下第三步 —— 看不到第三步的流程等于没讲。 */
.hiw { padding-top: 2px; }
/* 视觉隐藏的区块标题：设计稿上没有标题，但读屏器与 SEO 需要它 */
.hiw-h {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hiw-top { display: flex; justify-content: center; margin: 0 0 20px; }
.hiw-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  background: linear-gradient(180deg, #C7A671 0%, var(--gold) 62%, #A9884F 100%);
  color: #fff; font-family: var(--font-serif); font-size: 16px; font-weight: 600;
  letter-spacing: .2px; box-shadow: 0 8px 18px rgba(169, 136, 79, .26);
  transition: transform .16s ease, box-shadow .16s ease;
}
.hiw-cta svg { width: 19px; height: 19px; flex: none; }
.hiw-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(169, 136, 79, .34); }
.hiw-row { display: flex; flex-direction: column; gap: 12px; }
.hiw-arrow { display: none; }
.hiw-card {
  flex: 1 1 0; min-width: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 16px 14px; text-align: center;
}
.hiw-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #fff;
  font-family: var(--font-serif); font-size: 15px; font-weight: 600;
}
.hiw-card h3 {
  margin: 11px 0 7px; font-family: var(--font-serif); font-size: 17px;
  font-weight: 600; color: var(--ink);
}
.hiw-card p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.62; color: var(--muted); }
/* 插画用灰米色，不抢金色圆号与标题的视线 */
.hiw-art { color: #C2B9A7; }
.hiw-art svg { display: block; width: 110px; height: 81px; margin: 0 auto; }

/* 评价条 */
.review-strip { display: grid; gap: 10px; }
.review-mini {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px;
}
.review-mini .stars { color: var(--gold); font-size: 13px; letter-spacing: 2px; }
.review-mini p { font-size: 13px; margin: 7px 0 9px; color: var(--text-2); }
.review-mini .who { display: flex; align-items: center; gap: 8px; }
.review-mini .who img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.review-mini .who span { font-size: 11.5px; color: var(--muted); }

/* ---------- 6.5 首页：Vorher / Nachher 对比滑块 ----------
   全站唯一能一眼证明「照片 → 手绘」差别的区块：其他位置都是成品图，
   客户看不出你到底做了什么。
   卡片高度由每张照片的真实比例决定（aspect-ratio 写在元素上），
   所以一排卡片是**顶对齐、高矮不一**的 —— 强行裁成同一高度会把
   「同一张照片」这个前提毁掉（前后两张被裁得不一样，拖动时对不上）。 */
.ba-wrap { position: relative; }
.ba-track {
  display: flex; align-items: flex-start; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 2px 2px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ba-track::-webkit-scrollbar { height: 6px; }
.ba-track::-webkit-scrollbar-track { background: transparent; }
.ba-track::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

.ba-card { flex: 0 0 74%; max-width: 320px; margin: 0; scroll-snap-align: center; }
.ba-stage {
  position: relative; overflow: hidden;
  border-radius: var(--r-md); background: var(--cream-3);
  box-shadow: var(--sh-2); cursor: ew-resize;
  /* 横向手势留给分割线；纵向仍然可以滚页面 —— 否则在卡片上往上一划，
     页面不动，人会以为页面卡死了。 */
  touch-action: pan-y;
}
.ba-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; user-select: none; -webkit-user-drag: none;
}
/* 上层是「成品」，只露出分割线右侧；左侧留给原照片 */
.ba-top { clip-path: inset(0 0 0 var(--ba, 50%)); }

.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--ba, 50%);
  width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(34, 54, 43, .16);
  pointer-events: none;
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  box-shadow: 0 2px 10px rgba(34, 54, 43, .3);
}
.ba-knob svg { width: 19px; height: 19px; }
/* 键盘聚焦时把焦点画在手柄上（range 本身是透明的，不给它画轮廓） */
.ba-stage:has(.ba-range:focus-visible) .ba-knob { outline: 2px solid var(--gold); outline-offset: 2px; }

.ba-tag {
  position: absolute; bottom: 10px; z-index: 2;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(34, 54, 43, .6); color: #fff;
  pointer-events: none;
}
.ba-tag-l { left: 10px; }
.ba-tag-r { right: 10px; }

/* 覆盖整块舞台的透明原生 range：拖动、点击跳转、触摸、键盘方向键、
   读屏器全由它承担。z-index 最高，保证横向手势一定落在它身上。 */
.ba-range {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.ba-range::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; }

.ba-cap { padding: 10px 2px 0; }
.ba-cap b { display: block; font-size: 15px; letter-spacing: .05em; color: var(--ink); }
.ba-cap span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.ba-cap i { display: block; font-size: 11.5px; color: var(--muted); font-style: italic; margin-top: 2px; }
.ba-hint { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

.ba-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; padding: 0; border: 1px solid var(--line);
  border-radius: 50%; cursor: pointer; z-index: 4;
  display: grid; place-items: center;
  background: rgba(251, 248, 241, .94); color: var(--ink);
  box-shadow: var(--sh-1);
  transition: background .2s var(--ease), opacity .2s var(--ease);
}
.ba-nav:hover { background: var(--white); }
.ba-nav svg { width: 17px; height: 17px; }
.ba-prev { left: -6px; }
.ba-next { right: -6px; }

/* ---------- 7. 风格库 ---------- */
.style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.style-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.style-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.style-card .thumb { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--cream-3); }
.style-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.style-card .thumb .cnt {
  position: absolute; top: 8px; right: 8px;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(20,32,25,.55); backdrop-filter: blur(6px);
  color: #fff; font-size: 10px;
}
.style-card .meta { padding: 11px 12px 13px; }
.style-card .meta b { display: block; font-family: var(--font-serif); font-size: 15px; font-weight: 400; }
.style-card .meta span { font-size: 10.5px; color: var(--muted); letter-spacing: .3px; }

/* 风格缩略选择器（向导第 2 步） */
.style-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.pick {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 2px solid var(--line); background: var(--white); cursor: pointer;
  transition: all .2s var(--ease);
}
.pick .thumb { aspect-ratio: 4 / 3.2; overflow: hidden; }
.pick .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pick .nm { padding: 9px 11px; }
.pick .nm b { display: block; font-family: var(--font-serif); font-size: 13.5px; font-weight: 400; }
.pick .nm span { font-size: 10px; color: var(--muted); }
.pick:active { transform: scale(.98); }
.pick.on { border-color: var(--ink); box-shadow: var(--sh-2); }
.pick .tick {
  position: absolute; top: 9px; right: 9px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; opacity: 0; transform: scale(.6);
  transition: all .2s var(--ease);
}
.pick .tick svg { width: 13px; height: 13px; }
.pick.on .tick { opacity: 1; transform: scale(1); }

/* 推荐角标 */
.pick .rec {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--gold); color: #fff; font-size: 9.5px; letter-spacing: .4px;
}

/* ---------- 8. 风格详情 / 作品详情 ---------- */
.detail-hero { position: relative; }
.detail-hero img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }
.detail-hero .crumb {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.counter {
  position: absolute; right: 14px; top: 14px;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: rgba(20,32,25,.5); backdrop-filter: blur(8px);
  color: #fff; font-size: 11.5px; letter-spacing: .5px;
}

/* 横向作品条 */
.hscroller { display: flex; gap: 12px; overflow-x: auto; padding: 2px var(--pad) 8px; scroll-snap-type: x mandatory; }
.hscroller::-webkit-scrollbar { display: none; }
.hscroller .hcard {
  flex: 0 0 132px; scroll-snap-align: start; cursor: pointer;
  border-radius: var(--r-sm); overflow: hidden; background: var(--white);
  border: 1px solid var(--line); transition: transform .2s var(--ease);
}
.hscroller .hcard:hover { transform: translateY(-2px); }
.hscroller .hcard img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hscroller .hcard b { display: block; padding: 7px 9px 2px; font-size: 11.5px; font-weight: 600; }
.hscroller .hcard span { display: block; padding: 0 9px 9px; font-size: 10px; color: var(--muted); }

/* 元信息列表 */
.meta-list { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; }
.meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--white); padding: 14px 15px;
}
.meta-row .k { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); }
.meta-row .k svg { width: 17px; height: 17px; color: var(--gold); flex: none; }
.meta-row .v { font-size: 13.5px; font-weight: 600; text-align: right; }
.meta-row .v small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }

/* 缩略图条 */
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--pad) 2px; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs img {
  flex: 0 0 56px; width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--r-sm); border: 2px solid transparent; cursor: pointer;
  opacity: .62; transition: all .2s var(--ease);
}
.thumbs img.on { border-color: var(--ink); opacity: 1; }

/* ---------- 9. 向导（上传 / 选风格 / 预览） ---------- */
.steps { display: flex; align-items: center; gap: 0; padding: 20px 0 4px; }
.step { display: flex; align-items: center; gap: 8px; flex: 1; }
.step .num {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--cream-3); color: var(--muted);
  border: 1px solid var(--line-2); transition: all .25s var(--ease);
}
.step .lbl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.step .bar { flex: 1; height: 1px; background: var(--line-2); margin: 0 8px; min-width: 10px; }
.step.on .num { background: var(--ink); color: var(--cream-2); border-color: var(--ink); }
.step.on .lbl { color: var(--ink); font-weight: 600; }
.step.done .num { background: var(--gold-soft); color: #7A5F2C; border-color: var(--gold-2); }
.step.done .bar { background: var(--gold-2); }
.step:last-child { flex: 0 0 auto; }
.step:last-child .bar { display: none; }

/* 上传区 */
/* ⚠️ display: block 不能删：.dropzone 是 <label>，默认 display:inline，
   而它内部有块级子元素（div.ic / b）⇒ 触发 block-in-inline 碎片化：
   同一个盒子的边框与背景被拆成 3 块画（实测 getClientRects().length === 3），
   padding:34px 20px 在每个碎片上各叠一次，整体还向下多伸 9px 盖住
   「Beispielfotos」标题。症状＝只看到一条 21px 宽的窄虚线框 + 一块白底
   与文字错位，但没有任何 JS 报错。详情页那版 .upbox 一直有 display:block，
   这份漏了 —— 两处必须一致。 */
.dropzone {
  display: block;
  border: 1.5px dashed var(--line-2); border-radius: var(--r-md);
  background: var(--white); padding: 34px 20px; text-align: center;
  cursor: pointer; transition: all .22s var(--ease);
}
.dropzone:hover { border-color: var(--ink-3); background: var(--cream-2); }
.dropzone.drag { border-color: var(--gold); background: var(--gold-soft); transform: scale(1.01); }
.dropzone .ic {
  width: 52px; height: 52px; margin: 0 auto 13px; border-radius: 50%;
  background: var(--cream-3); display: grid; place-items: center;
}
.dropzone .ic svg { width: 24px; height: 24px; color: var(--ink-3); }
.dropzone b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.dropzone span { font-size: 11.5px; color: var(--muted); }

.uploaded { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-2); }
.uploaded img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.uploaded .rm {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(20,32,25,.62); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(6px);
}
.uploaded .rm svg { width: 16px; height: 16px; }
.uploaded .filetag {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(251,248,241,.92); font-size: 11px; color: var(--ink);
  max-width: 76%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 示例照片 */
.samples { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; }
.samples::-webkit-scrollbar { display: none; }
.samples img {
  flex: 0 0 68px; width: 68px; height: 68px; object-fit: cover;
  border-radius: var(--r-sm); border: 2px solid var(--white);
  box-shadow: var(--sh-1); cursor: pointer; transition: transform .2s var(--ease);
}
.samples img:hover { transform: translateY(-2px); }

/* 预览对比 */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare figure { border-radius: var(--r-md); overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.compare figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.compare figcaption {
  padding: 8px 10px; font-size: 11.5px; text-align: center;
  color: var(--text-2); border-top: 1px solid var(--line); background: var(--cream-2);
}
.compare figure.result figcaption { color: var(--ink); font-weight: 600; }
.compare figure.result { border-color: var(--gold-2); }

/* 生成流程 */
.flow { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.flow .node { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; }
.flow .node .ic {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line-2);
  display: grid; place-items: center;
}
.flow .node .ic svg { width: 19px; height: 19px; color: var(--ink-3); }
.flow .node b { font-size: 11px; font-weight: 600; }
.flow .node span { font-size: 9.5px; color: var(--muted); }
.flow .arw { flex: 1; text-align: center; color: var(--line-2); }
.flow .arw svg { width: 18px; height: 18px; display: inline-block; }

/* 进度条 */
.progress { height: 4px; background: var(--cream-3); border-radius: 4px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width .5s var(--ease); }

/* ---------- 10. 订单 / 支付 / 完成 ---------- */
.line-items { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; }
.line-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--white); padding: 13px 15px; font-size: 13.5px;
}
.line-row .k { color: var(--text-2); }
.line-row.total { background: var(--cream-2); padding: 16px 15px; }
.line-row.total .k { font-weight: 600; color: var(--ink); font-size: 14px; }
.line-row.total .v { font-family: var(--font-serif); font-size: 23px; color: var(--ink); }
.line-row .v.strike { text-decoration: line-through; color: var(--muted); }
.line-row .v.discount { color: var(--success); }

/* 商品摘要卡 */
.summary-item { display: flex; gap: 12px; align-items: center; }
.summary-item img { width: 62px; height: 62px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.summary-item .info { flex: 1; min-width: 0; }
.summary-item .info b { display: block; font-family: var(--font-serif); font-size: 14.5px; font-weight: 400; }
.summary-item .info span { font-size: 11.5px; color: var(--muted); }
.summary-item .amt { font-family: var(--font-serif); font-size: 17px; flex: none; }

/* 表单 */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 600;
  margin-bottom: 6px; color: var(--text-2);
}
.field input[type=text], .field input[type=email], .field input[type=tel], .field select {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--white); transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--ink-3);
  box-shadow: 0 0 0 3px rgba(70, 96, 79, .12);
}
.field .hint { font-size: 11px; color: var(--muted); margin-top: 5px; }

/* 复选 */
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 12.5px; color: var(--text-2); }
.check input { display: none; }
.check .box {
  width: 19px; height: 19px; border-radius: 5px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--line-2); background: var(--white);
  display: grid; place-items: center; transition: all .18s var(--ease);
}
.check .box svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.check input:checked + .box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .box svg { opacity: 1; }
.check a { color: var(--gold); text-decoration: underline; }

/* 支付方式 */
.pay-list { display: grid; gap: 9px; }
.pay-item {
  display: flex; align-items: center; gap: 13px; padding: 15px;
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; transition: all .2s var(--ease);
}
.pay-item:hover { border-color: var(--line-2); }
.pay-item:active { transform: scale(.99); }
.pay-item.on { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(34,54,43,.07); }
.pay-item .logo {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; background: var(--cream-3);
}
.pay-item .logo svg { width: 20px; height: 20px; }
.pay-item .nm { flex: 1; }
.pay-item .nm b { display: block; font-size: 14px; font-weight: 600; }
.pay-item .nm span { font-size: 11px; color: var(--muted); }
.pay-item .radio {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line-2); display: grid; place-items: center;
  transition: all .18s var(--ease);
}
.pay-item .radio i {
  width: 11px; height: 11px; border-radius: 50%; background: var(--ink);
  transform: scale(0); transition: transform .18s var(--ease);
}
.pay-item.on .radio { border-color: var(--ink); }
.pay-item.on .radio i { transform: scale(1); }

/* 成功页 */
.done-wrap { text-align: center; padding: 40px 0 10px; }
.done-check {
  width: 92px; height: 92px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--success); display: grid; place-items: center;
  box-shadow: 0 12px 34px rgba(62, 125, 90, .28);
  animation: pop .6s var(--ease) both;
}
.done-check svg { width: 46px; height: 46px; color: #fff; stroke-width: 3; }
.done-check::after {
  content: ''; position: absolute; width: 92px; height: 92px; border-radius: 50%;
  border: 2px solid var(--success); animation: halo 1.6s var(--ease) infinite;
}
.timeline { display: grid; gap: 0; }
.tl-item { display: flex; gap: 13px; padding-bottom: 18px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item .dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: 5px;
  background: var(--line-2); position: relative; z-index: 1;
}
.tl-item.on .dot { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.tl-item::before {
  content: ''; position: absolute; left: 5px; top: 16px; bottom: 0;
  width: 1px; background: var(--line);
}
.tl-item:last-child::before { display: none; }
.tl-item .txt b { display: block; font-size: 13.5px; }
.tl-item .txt span { font-size: 11.5px; color: var(--muted); }

/* ---------- 11. 订单列表 / 我的 ---------- */
.order-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px; }
.order-card + .order-card { margin-top: 11px; }
.order-card .top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.order-card .top .no { font-size: 11px; color: var(--muted); }
.order-card .body { display: flex; gap: 12px; align-items: center; padding: 13px 0 0; }
.order-card .body img { width: 58px; height: 58px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.order-card .body .info { flex: 1; min-width: 0; }
.order-card .body .info b { display: block; font-family: var(--font-serif); font-size: 14.5px; font-weight: 400; }
.order-card .body .info span { font-size: 11.5px; color: var(--muted); }
.order-card .body .amt { font-family: var(--font-serif); font-size: 18px; }
/* 订单卡上的「查看订单详情 / 用邮箱找回」：整卡可点会让客户误以为点哪都能进，
   单独一条链接把入口说清楚 —— 有令牌的进详情，没有的先去查订单。 */
.oc-link {
  display: flex; align-items: center; gap: 5px;
  margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--gold); text-decoration: none;
}
.oc-link svg { width: 14px; height: 14px; }

/* ---------- 免登录查订单（/track） ---------- */
.track-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px 16px;
}
.track-card .fld { display: block; margin-bottom: 14px; }
.track-card .fld > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.track-card .fld input {
  width: 100%; padding: 11px 12px; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--cream-2); color: var(--ink);
}
.track-card .fld input:focus { outline: none; border-color: var(--gold); }
.track-err { margin: 0 0 12px; font-size: 12.5px; color: #B4472F; }
.track-hint { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.track-foot { margin-top: 16px; font-size: 11.5px; color: var(--muted); text-align: center; }

/* 6 格验证码：格子之间留缝但不均分到底，避免最后一格被挤成半格 */
.otp-row { display: flex; gap: 8px; margin-bottom: 16px; }
.otp-box {
  flex: 1; min-width: 0; height: 52px; text-align: center;
  font-size: 22px; font-family: var(--font-serif);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--cream-2); color: var(--ink);
}
.otp-box:focus { outline: none; border-color: var(--gold); background: var(--white); }

/* ---------- 订单详情（/order/{token}） ---------- */
.go-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.go-no { font-family: var(--font-serif); font-size: 20px; }
.go-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.go-status {
  flex: none; font-size: 11.5px; padding: 5px 11px; border-radius: 999px;
  background: var(--gold-soft); color: var(--ink-2);
}
.osteps { list-style: none; margin: 18px 0; padding: 0; }
.ostep { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.ostep .odot { width: 18px; height: 18px; flex: none; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.ostep .odot svg { width: 14px; height: 14px; }
.ostep .olabel { font-size: 13px; color: var(--muted); }
.ostep.done .odot { color: var(--gold); }
.ostep.done .olabel { color: var(--ink-2); }
.ostep.cur .olabel { color: var(--ink); font-weight: 600; }
.ostep.cur .odot { color: var(--gold); }

.go-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.go-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px; margin-bottom: 14px;
}
.go-grid .go-card { margin-bottom: 0; }
.go-card h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 11px;
}
.go-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--cream-3); }
.oi-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.oi-row img { width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.oi-info { flex: 1; min-width: 0; }
.oi-info b { display: block; font-size: 14px; font-weight: 400; font-family: var(--font-serif); }
.oi-info span { font-size: 11.5px; color: var(--muted); }
.oi-amt { font-family: var(--font-serif); font-size: 16px; }
.go-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--line);
}
.go-total span { font-size: 12.5px; color: var(--muted); }
.go-total b { font-family: var(--font-serif); font-size: 20px; }

.ev-list { list-style: none; margin: 0; padding: 0; }
.ev { display: flex; gap: 11px; padding: 8px 0; }
.ev-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  margin-top: 5px; flex: none;
}
.ev b { display: block; font-size: 13px; font-weight: 500; }
.ev span { font-size: 11px; color: var(--muted); }
.go-help { text-align: center; padding: 4px 0; }
.go-help p { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
/* 客服两个入口（WhatsApp / 复制邮箱）并排：原来是单个按钮，两个 inline-block
   之间会贴在一起，给外边距拉开，窄屏也能各自换行而不是挤成一行溢出 */
.go-help .btn { margin: 4px; }

.status { padding: 4px 10px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 600; letter-spacing: .3px; }
.status.pending { background: #FBF0DC; color: #8A6A22; }
.status.paid { background: #E2F0E7; color: #2F6A48; }
.status.processing { background: #E4EDF7; color: #2C5A85; }
.status.shipped { background: #EDE7F7; color: #563B85; }
.status.delivered { background: #E2F0E7; color: #2F6A48; }
.status.cancelled { background: #F7E6E4; color: #8A3A31; }

/* “我的”页头 */
.profile-hero {
  background: var(--ink); color: var(--cream-2);
  padding: 30px var(--pad) 26px; margin-bottom: 18px;
}
.profile-hero .av {
  width: 62px; height: 62px; border-radius: 50%; background: var(--gold);
  display: grid; place-items: center; font-family: var(--font-serif);
  font-size: 25px; color: #fff; margin-bottom: 13px;
}
.profile-hero h2 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; }
.profile-hero p { font-size: 12.5px; opacity: .72; margin-top: 4px; }
.profile-hero .stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px;
}
.profile-hero .stats div {
  background: rgba(251,248,241,.1); border-radius: var(--r-sm); padding: 11px 8px; text-align: center;
}
.profile-hero .stats b { display: block; font-family: var(--font-serif); font-size: 19px; font-weight: 400; color: var(--gold-2); }
.profile-hero .stats span { font-size: 10px; opacity: .7; }

.menu-list { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.menu-item {
  display: flex; align-items: center; gap: 13px; padding: 15px;
  border-bottom: 1px solid var(--line); cursor: pointer; width: 100%; text-align: left;
  transition: background .16s var(--ease);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item:hover { background: var(--cream-2); }
.menu-item .ic {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: none;
  background: var(--cream-3); display: grid; place-items: center;
}
.menu-item .ic svg { width: 17px; height: 17px; color: var(--ink-3); }
.menu-item .tx { flex: 1; }
.menu-item .tx b { display: block; font-size: 14px; font-weight: 500; }
.menu-item .tx span { font-size: 11px; color: var(--muted); }
.menu-item .rt { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.menu-item .rt svg { width: 15px; height: 15px; }

/* ---------- 12. 浮层：抽屉 / 购物车 / 提示 ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(20, 32, 25, .42);
  opacity: 0; pointer-events: none; transition: opacity .28s var(--ease);
}
.scrim.on { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--cream-2); border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(102%); transition: transform .34s var(--ease);
  max-height: 88vh; overflow-y: auto;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(20,32,25,.2);
}
.sheet.on { transform: translateY(0); }
.sheet-head {
  position: sticky; top: 0; background: var(--cream-2); z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad) 12px; border-bottom: 1px solid var(--line);
}
.sheet-head b { font-family: var(--font-serif); font-size: 17px; font-weight: 400; }
.sheet-body { padding: 16px var(--pad); }
.sheet .grab {
  width: 38px; height: 4px; border-radius: 4px; background: var(--line-2);
  margin: 9px auto -4px;
}

.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: 282px; z-index: 95;
  background: var(--ink); color: var(--cream-2);
  transform: translateX(-102%); transition: transform .34s var(--ease);
  padding: 26px 22px; overflow-y: auto;
}
.drawer.on { transform: translateX(0); }
.drawer .drawer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* 抽屉品牌行：圆形 logo + PUREAR（与页脚同一套观感） */
.drawer-bd { display: flex; align-items: center; gap: 10px; }
.drawer-logo { width: 42px; height: 42px; flex: none; border-radius: 50%; }
.drawer .icon-btn { color: var(--cream-2); flex: none; margin: -4px -6px 0 0; }
.drawer .icon-btn:hover { background: rgba(251, 248, 241, .12); }
.drawer .mark {
  font-family: var(--font-serif); font-size: 19px; letter-spacing: 5px;
  text-transform: uppercase; margin-bottom: 3px;
}
.drawer .tag { font-size: 8.5px; letter-spacing: 2.6px; text-transform: uppercase; opacity: .5; }
.drawer nav { margin-top: 30px; display: grid; gap: 2px; }
.drawer nav a {
  padding: 12px 12px; border-radius: var(--r-sm); font-size: 14.5px;
  display: flex; align-items: center; gap: 11px; transition: background .18s var(--ease);
}
.drawer nav a svg { width: 18px; height: 18px; opacity: .72; }
.drawer nav a:hover { background: rgba(251,248,241,.09); }
.drawer nav a.on { background: rgba(185,152,95,.2); }
.drawer .divider { height: 1px; background: rgba(251,248,241,.13); margin: 22px 0; }
.drawer .lang-switch { display: flex; gap: 7px; }
.drawer .lang-switch button {
  flex: 1; height: 36px; border-radius: var(--r-sm); font-size: 12px;
  border: 1px solid rgba(251,248,241,.22); color: var(--cream-2);
  transition: all .18s var(--ease);
}
.drawer .lang-switch button.on { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }
.drawer .lbl { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; opacity: .45; margin-bottom: 10px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 24px);
  transform: translate(-50%, 14px); z-index: 300;
  background: var(--ink); color: var(--cream-2);
  padding: 12px 20px; border-radius: var(--r-pill);
  font-size: 13px; box-shadow: var(--sh-3);
  opacity: 0; pointer-events: none; transition: all .3s var(--ease);
  max-width: calc(100vw - 40px); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--danger); }

/* 骨架屏 */
.skel {
  background: linear-gradient(100deg, var(--cream-3) 28%, var(--cream-2) 46%, var(--cream-3) 64%);
  background-size: 260% 100%; animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

/* ---------- 13. 动画 ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 62% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes halo { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.view-enter { animation: fadeUp .34s var(--ease) both; }
.stagger > * { animation: fadeUp .42s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .1s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; }
.stagger > *:nth-child(6) { animation-delay: .22s; }
.stagger > *:nth-child(7) { animation-delay: .25s; }
.stagger > *:nth-child(8) { animation-delay: .28s; }
.stagger > *:nth-child(9) { animation-delay: .31s; }
.stagger > *:nth-child(10) { animation-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 14. 风格滤镜（2026-10-08 移除） ----------
   原注释写明这是「占位技法：用 CSS 滤镜模拟不同画派，替换真实作品图后即可移除」。
   作品图已于 09-30 全部换成各画派自己的真实生成稿，滤镜不再是风格来源，
   只会把图本身的画风带偏（saturate 2.5 / grayscale 1 直接改画种）。
   按既定退出方式删除 10 条 .fx-* 滤镜；.fx 类名保留（app.js 仍挂 class、
   加框渲染依赖类名），仅不再产生视觉效果。FILTERS-REMOVED-20261008
*/
.fx { transition: none; }

/* ============================================================
   16. 商品详情（商城同构）· 浮层下单/支付 · 评论板
   移动优先：浮层默认底部抽屉，评论板单列
   ============================================================ */

/* ---- 商品详情：画廊轮播 ---- */
.pdp-gallery { display: block; }
.pdp-main {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--cream-3); box-shadow: var(--sh-1);
}
/* 数字稿：父容器固定比例，图片用 contain 完整落入，四周留白。
   窗口尺寸钉死 4:3.4 是为了布局稳定 —— 竖画横画切换时右侧价格栏不跟着跳动；
   图片改成 contain 而不是 cover，竖构图的画才不会被裁掉上下。
   手绘画布另走 .has-frame 分支：框体比例由 artAspect() 按所选尺寸算，img 撑满框内画面区。 */
.pdp-main:not(.has-frame) { aspect-ratio: 4 / 3.4; }
.pdp-main:not(.has-frame) img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdp-main.has-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(251,248,241,.9); color: var(--ink);
  display: grid; place-items: center; backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); box-shadow: var(--sh-1);
  transition: background .18s var(--ease), transform .18s var(--ease); z-index: 3;
}
.pdp-nav:active { transform: translateY(-50%) scale(.92); }
.pdp-nav svg { width: 22px; height: 22px; }
.pdp-prev { left: 10px; }
.pdp-next { right: 10px; }
.pdp-thumbs { --pt-w: 76px; --pt-gap: 10px; display: flex; gap: var(--pt-gap); overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.pdp-thumbs::-webkit-scrollbar { display: none; }
.pdp-thumbs .thumb {
  flex: 0 0 var(--pt-w); width: var(--pt-w); height: var(--pt-w); padding: 0; overflow: hidden;
  border-radius: var(--r-sm); border: 2px solid transparent; opacity: .62;
  cursor: pointer; transition: all .2s var(--ease); background: var(--cream-3);
}
.pdp-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs .thumb.on { border-color: var(--ink); opacity: 1; }
/* 缩略图两行制：每列 = 上格肖像 + 下格对应家居图，上下对齐。
   .thumb 的 flex: 0 0 var(--pt-w) 在 column 容器里作用于高度方向，恰好上下两格同高；
   列宽同样取 --pt-w，保证格子是正方形（旧版列宽写死 58、桌面格高 66 会被压扁）。 */
.pt-col { display: flex; flex-direction: column; gap: var(--pt-gap); flex: 0 0 var(--pt-w); }
.pt-col:empty { display: none; }

/* ---- 商品详情：后台绑定商品条（证明这张图对应后台哪个商品） ---- */
.pdp-prod {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white);
}
.pdp-prod .pp-ic {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cream-2); color: var(--gold);
  display: grid; place-items: center;
}
.pdp-prod .pp-ic svg { width: 15px; height: 15px; }
.pdp-prod .pp-tx { flex: 1; min-width: 0; }
.pdp-prod .pp-tx small {
  display: block; font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--text-2);
}
.pdp-prod .pp-tx b {
  display: block; font-family: var(--font-serif); font-size: 14.5px; font-weight: 400; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdp-prod .pp-meta { font-size: 10.5px; color: var(--text-2); }

/* ---- 商品详情：定制面板 ---- */
.pdp-custom { margin-top: 20px; }

/* SVG 尺寸兜底：I() 生成的图标无内联宽高，新组件上下文必须显式约束，否则撑成巨图 */
.pdp-custom .h3 { display: flex; align-items: center; gap: 7px; }
.pdp-custom .h3 svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.badge svg { width: 14px; height: 14px; flex: none; }
.filetag svg { width: 14px; height: 14px; flex: none; }
.tiny svg { width: 14px; height: 14px; flex: none; }
.upbox {
  position: relative; display: block; text-align: center;
  border: 1.5px dashed var(--line-2); border-radius: var(--r-md);
  background: var(--white); padding: 26px 18px; cursor: pointer;
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.upbox:hover { border-color: var(--ink-3); background: var(--cream-2); }
.upbox .ic {
  width: 50px; height: 50px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--cream-3); display: grid; place-items: center;
}
.upbox .ic svg { width: 24px; height: 24px; color: var(--ink-3); }
.upbox b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.upbox span { font-size: 11.5px; color: var(--muted); }
.size-select {
  width: 100%; height: 44px; margin-top: 12px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--white); font-size: 12.5px; color: var(--text-2);
}
.upbox-preview { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-2); }
.upbox-preview img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; display: block; }
.upbox-preview .rm {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(20,32,25,.62); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.upbox-preview .rm svg { width: 16px; height: 16px; }
.upbox-preview .filetag {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(251,248,241,.92); font-size: 11px; color: var(--ink);
  max-width: 76%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}

/* 格式选择（数字稿 / 手绘布面） */
.fmt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.fmt-opt {
  display: flex; align-items: center; gap: 10px; padding: 13px 12px;
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; transition: all .2s var(--ease);
}
.fmt-opt:active { transform: scale(.99); }
.fmt-opt.on { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(34,54,43,.07); }
.fmt-opt .ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--cream-3); display: grid; place-items: center; flex: none; font-size: 18px; }
.fmt-opt .tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fmt-opt .tx b { font-size: 13px; font-weight: 600; }
.fmt-opt .tx small { font-size: 11.5px; color: var(--gold); font-weight: 600; margin-top: 2px; }

/* 尺寸选择 + 备注 */
.size-sel { margin-top: 14px; }
.size-sel label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--text-2); }
.size-sel select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--white); font-size: 14px; }
.fmt-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* 价格行 + 购买按钮 */
.detail-price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 18px 0 14px; padding: 14px 16px;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.detail-price-row > span { font-size: 13px; color: var(--text-2); font-weight: 600; }
.detail-price-row .price { font-family: var(--font-serif); font-size: 26px; color: var(--ink); }
.buy-now-btn { margin-top: 8px; }

/* 跳转评论板入口 */
.reviews-entry {
  display: flex; align-items: center; gap: 12px; margin-top: 26px;
  padding: 16px 18px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.reviews-entry:active { transform: scale(.99); }
.reviews-entry-text { flex: 1; min-width: 0; }
.reviews-entry-text strong { display: block; font-family: var(--font-serif); font-size: 16px; font-weight: 400; }
.reviews-entry-text span { font-size: 12px; color: var(--muted); }
.reviews-entry-arrow { color: var(--gold); display: grid; place-items: center; flex: none; }
.reviews-entry-arrow svg { width: 20px; height: 20px; }

/* ---- 浮层（底部抽屉 → 桌面居中对话框） ---- */
.overlay { position: fixed; inset: 0; z-index: 200; display: flex; }
.overlay-scrim {
  position: absolute; inset: 0; background: rgba(20,32,25,.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fadeIn .25s var(--ease) both;
}
.overlay-modal {
  position: relative; margin: auto auto 0; width: 100%; max-width: 520px;
  max-height: 92vh; background: var(--cream-2); border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -10px 40px rgba(20,32,25,.28); animation: slideUp .3s var(--ease) both;
}
.overlay-modal.center {
  margin: auto; max-width: 420px; border-radius: var(--r-lg);
  text-align: center; padding: 34px 26px 26px;
}
.overlay-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 16px 14px; border-bottom: 1px solid var(--line); background: var(--cream-2);
}
.overlay-header h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 17px; font-weight: 400; }
.overlay-header h3 svg { width: 20px; height: 20px; color: var(--gold); }
.overlay-body { padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.overlay-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--cream-2); }
.overlay-footer .btn { width: 100%; }

/* 表单行（桌面两列） */
.form-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.req { color: var(--danger); margin-left: 3px; }

/* 加载态 */
.loading { text-align: center; padding: 56px 20px; color: var(--muted); font-size: 18px; letter-spacing: 4px; animation: pulse 1.2s ease-in-out infinite; }

/* ---- 评论板（对标商城 /reviews） ---- */
.revs-stats { display: flex; gap: 12px; }
.revs-stats .st {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
  padding: 16px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.revs-stats .st b { font-family: var(--font-serif); font-size: 30px; font-weight: 400; line-height: 1; color: var(--ink); }
.revs-stats .st span { font-size: 12px; color: var(--muted); }
.revs-filter select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--white); font-size: 14px; }
.revs-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
.rv-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 16px; box-shadow: var(--sh-1); }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-author { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rv-rating { color: var(--gold); font-size: 14px; letter-spacing: 2px; white-space: nowrap; }
.rv-text { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 9px 0 11px; }
.rv-media { margin: 0 -2px 11px; border-radius: var(--r-sm); overflow: hidden; }
.rv-media img { width: 100%; border-radius: var(--r-sm); object-fit: cover; max-height: 240px; }
.rv-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--gold-soft); color: #7A5F2C; font-size: 11.5px; }
.rv-tag svg { width: 13px; height: 13px; }

/* 浮层打开时锁定背景滚动 */
body.has-overlay { overflow: hidden; }

/* 成功对勾定位修正 */
.done-check { position: relative; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(40px); opacity: .6 } to { transform: translateY(0); opacity: 1 } }
@keyframes pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* ============================================================
   15. 桌面端适配（>= 900px）
   底部标签栏 → 顶部导航；瀑布流 2 列 → 4 列；卡片流 → 网格
   ============================================================ */
@media (min-width: 900px) {
  :root { --pad: 24px; --appbar-h: 68px; }

  .tabbar { display: none; }
  .screen { padding-bottom: 60px; }
  .screen.has-ctabar { padding-bottom: 60px; }

  /* 顶部导航 */
  .topnav {
    display: flex; align-items: center; gap: 4px;
    height: 100%; margin-left: 8px;
  }
  .topnav a {
    padding: 9px 15px; border-radius: var(--r-pill);
    font-size: 13.5px; color: var(--text-2);
    transition: all .18s var(--ease);
  }
  .topnav a:hover { background: var(--cream-3); color: var(--ink); }
  .topnav a.on { color: var(--ink); font-weight: 600; }

  .appbar { padding: 0 26px; }
  .appbar .brand { flex: none; align-items: flex-start; }
  .appbar .brand .mark { font-size: 19px; letter-spacing: 5.5px; }
  .appbar .spacer { flex: 1; }
  .icon-btn { width: 42px; height: 42px; }
  .icon-btn.menu-btn { display: none; }

  /* 首页主视觉：左右分栏 */
  .hero {
    display: grid; grid-template-columns: 1.06fr 1fr;
    gap: 0; border-radius: var(--r-lg); overflow: hidden;
    background: var(--ink); box-shadow: var(--sh-3); margin-bottom: 34px;
  }
  .hero-media { order: 2; }
  .hero-media img { aspect-ratio: auto; height: 100%; min-height: 396px; }
  .hero-media::after { background: linear-gradient(to right, rgba(34,54,43,.5), rgba(34,54,43,0) 42%); }
  .hero-card {
    position: static; background: transparent; backdrop-filter: none;
    box-shadow: none; padding: 52px 40px 34px; color: var(--cream-2);
    order: 1; display: flex; flex-direction: column; justify-content: center;
    animation: none;
  }
  .hero-card .h1 { font-size: 40px; line-height: 1.14; color: var(--cream-2); }
  .hero-card .sub { font-size: 14.5px; color: rgba(244,239,228,.76); margin-top: 14px; }
  .hero-card .eyebrow { color: var(--gold-2); margin-bottom: 16px; }
  .hero-card .btn { align-self: flex-start; margin-top: 26px; background: var(--cream-2); color: var(--ink); }
  .hero-card .btn:hover { background: #fff; }
  .hero-badge {
    position: absolute; right: 20px; bottom: 20px; width: 88px; height: 88px;
  }
  .hero-badge b { font-size: 19px; }

  /* 瀑布流 4 列 */
  .waterfall { columns: 4; column-gap: 16px; }
  .wf-item, .wf-tile { margin-bottom: 16px; }

  /* 装饰风格 4 列：首页那一栏正好 2 行 × 4 张 = 8 张。
     同时把手机端「只露 4 张」的收束放开 —— 断点两侧必须成对改，
     只加不撤的话桌面端会一直只显示 4 张。 */
  .decor-grid { columns: 4; column-gap: 16px; }
  .decor-card { margin-bottom: 16px; }
  .decor-grid.on-home .decor-card:nth-child(n+5) { display: block; }
  /* 桌面卡片更宽，标题略放大 */
  .wf-cap { padding: 32px 14px 13px; }
  .wf-cap b { font-size: 15px; }
  .wf-cap span { font-size: 11.5px; }

  /* 商品图（画风）4 列 × 2 行 = 8 个/页，与分页器每页条数对齐。
     不再随屏宽涨到 5 列：列数变了每页就不满 8 个，翻页节奏会乱。 */
  .style-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .style-picker { grid-template-columns: repeat(4, 1fr); gap: 14px; }

  /* 定制三步：宽屏横排，卡片之间补上虚线箭头。
     箭头宽度固定（42px）而不是按比例分 —— 它是连接符号，跟着卡片一起变宽
     会变成一条越长越像分隔线的空白。 */
  .hiw-row { flex-direction: row; gap: 0; align-items: stretch; }
  .hiw-arrow {
    display: flex; align-items: center; gap: 3px; flex: none;
    width: 56px; padding: 0 8px; color: var(--gold); align-self: center;
  }
  .hiw-arrow::before { content: ''; flex: 1; border-top: 2px dashed rgba(185, 152, 95, .6); }
  .hiw-arrow svg { width: 15px; height: 15px; flex: none; }
  .hiw-top { margin-bottom: 28px; }
  .hiw-cta { padding: 14px 30px; font-size: 17px; }
  .hiw-card { padding: 26px 22px 18px; }
  .hiw-card h3 { font-size: 18.5px; margin: 13px 0 8px; }
  .hiw-card p { font-size: 13px; margin-bottom: 16px; }
  .hiw-num { width: 38px; height: 38px; font-size: 16px; }
  .hiw-art svg { width: 128px; height: 94px; }

  /* 评价条 3 列 */
  .review-strip { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  /* 对比滑轨：宽屏一屏正好三张（与参考站一致），卡片比手机端大一圈 */
  .ba-track { gap: 20px; }
  .ba-card { flex: 0 0 auto; width: 336px; max-width: none; }
  .ba-prev { left: -18px; }
  .ba-next { right: -18px; }
  .ba-knob { width: 44px; height: 44px; }

  /* 分区标题 */
  .sec { margin-top: 42px; }
  .sec-head { margin-bottom: 18px; }
  .sec-head .h2 { font-size: 26px; }
  .h1 { font-size: 34px; }

  /* 二级页头部 */
  .pagehead { top: var(--appbar-h); padding: 0 14px; }
  .pagehead .ttl { font-size: 18px; }

  /* 详情页两栏 */
  .detail-2col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; align-items: start; }
  .detail-hero img { aspect-ratio: 16 / 11; border-radius: var(--r-lg); }
  .detail-hero { border-radius: var(--r-lg); overflow: hidden; }
  .detail-sticky { position: sticky; top: calc(var(--appbar-h) + 24px); }

  /* 底部 CTA → 静态面板 */
  .ctabar {
    position: static; background: none; border-top: 0; padding: 0; margin-top: 22px;
    gap: 16px;
  }
  .ctabar .price b { font-size: 27px; }
  .ctabar .price.mobile-only { display: none; }
  .ctabar .btn { flex: 0 0 auto; min-width: 240px; }
  .ctabar-space { display: none; }

  /* 向导：主区 + 侧边摘要 */
  .wizard-grid { display: grid; grid-template-columns: 1fr 366px; gap: 34px; align-items: start; }
  .wizard-side { position: sticky; top: calc(var(--appbar-h) + 24px); }
  .steps { padding: 4px 0 22px; }
  .steps .step .lbl { font-size: 13px; }

  /* 对比预览更大 */
  .compare { gap: 16px; }

  /* 订单 / 结算两栏 */
  .checkout-grid { display: grid; grid-template-columns: 1fr 384px; gap: 34px; align-items: start; }
  .checkout-side { position: sticky; top: calc(var(--appbar-h) + 24px); }

  /* 订单列表 2 列 */
  .orders-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .order-card + .order-card { margin-top: 0; }

  /* 我的页 */
  .profile-hero {
    border-radius: var(--r-lg); padding: 40px 40px 34px; margin-bottom: 26px;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px;
  }
  .profile-hero .stats { margin-top: 0; grid-template-columns: repeat(3, 118px); }
  .profile-hero .left { display: flex; align-items: center; gap: 20px; }
  .profile-hero .av { margin-bottom: 0; width: 72px; height: 72px; font-size: 28px; }

  /* 浮层居中 */
  .drawer { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
  .toast { bottom: 34px; }

  /* 桌面端不受「隐藏标签栏」的移动端规则影响 */
  body.no-tabbar .screen { padding-bottom: 60px; }
  body.no-tabbar .toast { bottom: 34px; }
}

/* 超宽屏：瀑布流**仍保持 4 列**（原为 5 列）。
   列数封顶后每格宽度随之放大 —— 客户是来看画的，格子多一格不如每张画大一截。 */
@media (min-width: 1440px) {
  .waterfall { columns: 4; column-gap: 18px; }
  .wf-item, .wf-tile { margin-bottom: 18px; }
  .decor-grid { columns: 4; column-gap: 18px; }
  .decor-card { margin-bottom: 18px; }
}

/* 桌面端隐藏移动端专用元素 */
@media (min-width: 900px) {
  .mobile-only { display: none !important; }
}
@media (max-width: 899px) {
  .desktop-only { display: none !important; }
}

/* ============================================================
   17. 桌面端：商品详情 / 浮层 / 评论板 适配
   ============================================================ */
@media (min-width: 900px) {
  /* 详情页画廊更大、圆角更舒展。
     这里原来还有一条 `.pdp-main img { aspect-ratio: 4/3.2 }`，会盖掉上面的 height:auto
     把数字稿重新钉成横幅 —— 已删除：数字稿的高度就该由图片自己决定。 */
  .pdp-thumbs { --pt-w: 92px; --pt-gap: 12px; }

  /* 定制面板间距 */
  .pdp-custom { margin-top: 4px; }

  /* 表单行两列 */
  .form-row { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* 浮层：底部抽屉 → 居中对话框 */
  .overlay-modal {
    margin: auto; max-width: 500px; border-radius: var(--r-lg);
    max-height: 88vh; animation: fadeIn .25s var(--ease) both;
  }
  .overlay-footer .btn { width: 100%; }

  /* 评论板两列 */
  .revs-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .revs-stats { gap: 16px; }
}
@media (min-width: 1440px) {
  .revs-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   18. 首页轮播图：桌面端适配（≥900px）
   ============================================================ */
@media (min-width: 900px) {
  .hero-carousel {
    max-width: var(--maxw); margin: 22px auto 34px;
    border-radius: var(--r-lg); box-shadow: var(--sh-3);
  }
  /* 高度略高，避免文案块顶端与垂直居中的左右箭头相撞 */
  .hc-img { aspect-ratio: 21 / 9.5; }
  /* 骨架占位要与真实首屏同高（真实高度由 .hc-img 决定） */
  .hero-carousel.hc-skeleton { aspect-ratio: 21 / 9.5; }
  .hc-cap { bottom: 52px; padding: 0 44px; gap: 8px; }
  .hc-title { font-size: 42px; line-height: 1.14; }
  .hc-sub { font-size: 15px; }
  .hc-cta { margin-top: 8px; padding: 11px 22px; font-size: 13.5px; }
  .hc-arrow { width: 46px; height: 46px; font-size: 24px; }
  .hc-prev { left: 18px; }
  .hc-next { right: 18px; }
  .hc-dots { bottom: 22px; gap: 9px; }
  .hc-dot { width: 9px; height: 9px; }
  .hc-dot.on { width: 26px; }
}

/* ============================================================
   画框（Rahmen）—— 9 种经典框的立体渲染
   ------------------------------------------------------------
   框体完全由 CSS 绘制，服务端只下发 css_class：
     · 加一个框型 = 数据库加一行 + 这里补一组变量，不动任何 Java 代码
     · 框边宽度用百分比，画作与框等比缩放（等同于把实物画框等比缩小看）

   ▍为什么上一版是「平的」
   上一版只有一层 padding + 一层背景渐变，本质是一张贴在画上的色纸。
   真实画框之所以一眼看出立体，靠三件事，缺一件都会塌：
     ① 画作是**凹**在框里的 —— 框的内唇会在画面上投一圈影子
     ② 框面线脚有**受光方向** —— 光从左上来，左上亮、右下暗
     ③ 框**挂在墙上** —— 与墙面之间有接触影 + 环境影，而不是浮在空中
   所以这一版改成三层复合，而不是一层：

     .artframe          最外沿带（底色）+ 自身斜面 + 挂墙投影
     .artframe::after   框面线脚（margin 缩进 → 只在框边露出一圈）
     .artframe > img    画作（z-index 2，抬到线脚之上）
     .artframe::before  画作内凹层（正好重合在画上，z-index 3）

   ▍为什么覆盖层用 margin 定位，而不是 inset
   百分比 padding / margin 的参照是**宽度**，四个方向都是 —— 这是 CSS 的古老约定。
   而 inset / top / height 的百分比，纵向参照高度、横向参照宽度，两者不一致。
   框边是四边等宽的，所以必须挑一个四边同参照的属性：margin 或 padding。
   ::before 的 containing block 恰好是 .artframe 的 padding box，其宽度等于父容器宽度，
   与 .artframe 自身 padding 的参照完全一致 —— 于是 margin: var(--af-pad) 能精确
   重合到画作上，一个像素都不差。若改用 inset 就会出现「横向对齐、纵向偏掉」。

   ▍变量（凡参与 calc 的默认值都必须带单位，否则整条声明会失效 —— 见下方注释）
     --af-pad      框边总宽度（相对「父容器宽度」的百分比，四边等宽）
     --af-edge-k   最外沿带占框宽的比例 0~1（0 = 没有独立外沿带）
     --af-edge-c   最外沿带颜色（.artframe 的底色，可以是渐变）
     --af-face     框面线脚（::after 的底色/纹理，画作中央会被盖住）
     --af-bv       斜面柔和度（长度）—— 越大越像圆润的欧式线脚
     --af-hi/--af-lo  左上受光 / 右下背光强度 0~1
     --af-rabbit   内凹阴影扩散（长度，画作被压进框里的深度感，立体感主力）
     --af-rabbit-a 内凹阴影浓度
     --af-lip      内唇亮线（长度） --af-lip-c  内唇亮线颜色
     --af-hair     外部发丝边（长度） --af-hair-c 发丝边颜色
     --af-out-k    外沿带斜面强度折扣（外沿通常比主框面暗，避免抢戏）
     --af-cast     挂墙投影
     --af-s        细节缩放倍率：缩略图场景下调小，避免 72px 上出现 4px 的粗亮线
   ============================================================ */
.artframe {
  /* 默认值必须带单位。写成 0（无单位）时，calc(var(--af-bv) * 1.8) 会算出**数字 0**
     而不是长度 0px，整条 box-shadow 声明随即变成「非法值」被整条丢弃 ——
     表现就是「无框」模式下画布一点投影都没有，像贴纸一样糊在墙上。
     同理 --af-pad 用 0%：它同时要参与 calc(var(--af-pad) * var(--af-edge-k)) 算 margin。 */
  --af-pad: 0%;
  --af-edge-k: 0; --af-edge-c: transparent;
  --af-face: none; --af-face-size: 100% 100%;
  --af-bv: 0px; --af-hi: .5; --af-lo: .5; --af-out-k: .6;
  --af-rabbit: 0px; --af-rabbit-a: .55;
  --af-lip: 0px; --af-lip-c: transparent;
  --af-hair: 0px; --af-hair-c: transparent;
  --af-cast: 0 8px 18px -8px rgba(32, 26, 14, .32);
  --af-s: 1;

  display: block; position: relative; margin: 0;
  box-sizing: border-box;
  padding: var(--af-pad);
  background: var(--af-edge-c);
  border-radius: 2px;
  box-shadow:
    0 0 0 var(--af-hair) var(--af-hair-c),
    inset var(--af-bv) var(--af-bv) calc(var(--af-bv) * 1.8) rgba(255, 250, 232, calc(var(--af-hi) * var(--af-out-k))),
    inset calc(var(--af-bv) * -1) calc(var(--af-bv) * -1) calc(var(--af-bv) * 1.8) rgba(0, 0, 0, calc(var(--af-lo) * var(--af-out-k))),
    var(--af-cast);
}

/* 框面线脚：铺满「外沿带以内」，画作会盖住中央 → 只在框边露出一圈。
   受光方向由 --af-face 的渐变角度决定，全站统一光从左上（135deg）。 */
.artframe::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  margin: calc(var(--af-pad) * var(--af-edge-k));
  background-color: transparent;
  background-image: var(--af-face);
  background-size: var(--af-face-size);
  background-position: 0 0;
  background-repeat: no-repeat;
  border-radius: 2px;
  box-shadow:
    inset var(--af-bv) var(--af-bv) calc(var(--af-bv) * 1.8) rgba(255, 250, 232, var(--af-hi)),
    inset calc(var(--af-bv) * -1) calc(var(--af-bv) * -1) calc(var(--af-bv) * 1.8) rgba(0, 0, 0, var(--af-lo));
}

/* 画作层：抬到线脚之上（否则会被 ::after 盖住） */
.artframe > img,
.artframe > span { position: relative; z-index: 2; display: block; }

/* 画作内凹层：精确重合在画作上，用 inset 阴影把画「压进」框里。
   第一层是内唇亮线（贴画那圈框料的反光），第二层才是投在画面上的影子。
   顺序不能反 —— box-shadow 里先写的画在上面。 */
.artframe::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  margin: var(--af-pad);
  pointer-events: none; border-radius: 1px;
  box-shadow:
    inset 0 0 0 var(--af-lip) var(--af-lip-c),
    inset 0 0 var(--af-rabbit) rgba(20, 14, 4, var(--af-rabbit-a));
}

/* 缩略场景：框体像素尺寸只有大图的十几分之一，px 细节必须同步收窄，
   否则 72px 的结算缩略图上会出现一道 4px 的粗亮线，一眼就是假的。 */
.afbox .artframe,
.rk-opt .artframe { --af-s: .34; }
/* 详情页缩略图放大到 92px（桌面）/ 76px（移动）后，框线细节按同比例回放大，
   否则 92px 上的画框会细得像一根描边线。改缩略图尺寸时这行要跟着动。 */
.pdp-thumbs .artframe { --af-s: .46; }

/* 缩略场景：框体撑满父容器（58px 缩略图 / 72px 结算缩略图），由父容器决定尺寸 */
.artframe.fill { width: 100%; height: 100%; }
.artframe.fill > img { width: 100% !important; height: 100% !important; object-fit: cover; }

/* ============================================================
   整幅线脚层（frame-sample.js 的 FrameSample.mould）
   ------------------------------------------------------------
   背景：用户反馈「画框在实际图片展示中的，多层立体感觉都没有效果」。
   上面那三层 CSS（padding 底色 + ::after 一层线脚 + ::before 一层内凹）的问题是
   物理上不成立 —— 渐变的参照是整个框，一条 135deg 斜向渐变四条边共用；
   而真实画框的剖面垂直于各自那条梃。于是四边的明暗关系全错，
   加上四角没有斜接缝（「这是真框」最便宜的那一笔），读起来就是一块贴了斜纹的色纸。

   现在这一圈由 SVG 按真实厘米画：
     · 四条梃各自沿剖面方向铺渐变（上横梃自上而下、左立梃自左而右）
     · 四角 45° 斜接缝，缝宽按框料宽取
     · 内唇投在画布上的影（上/左实、下/右虚）+ 画布与内唇的接缝线
     · 水平/垂直两条受光叠加，把「上亮下暗、左亮右暗」补上

   两条硬约束（改这几行之前先读）：
     ① 伪元素必须让位。SVG 就是框本身，CSS 那两层再画一遍 = 两套线脚叠着。
     ② box-shadow 只留挂墙投影。inset 那几层会从开窗（SVG 的透明窗口）里透出来，
        和 SVG 画的内唇影打架，开窗边缘会出现两道方向相反的影。
   ============================================================ */
.artframe.has-mould {
  background: transparent;
  border-radius: 0;
  box-shadow: var(--af-cast);
}
.artframe.has-mould::before,
.artframe.has-mould::after { content: none; }
.artframe > .af-mould {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; display: block; pointer-events: none;
}

/* ---- ① 无框：不加框体，只让画布自己从墙上「浮」起来 ---- */
.f-none {
  --af-pad: 0%; --af-edge-k: 0;
  --af-hair: calc(1px * var(--af-s)); --af-hair-c: rgba(120, 104, 78, .32);
  /* 无框时投影就是唯一的立体线索，所以给足：接触影紧而深，环境影大而散 */
  --af-cast: 0 16px 30px -14px rgba(32, 26, 14, .48), 0 3px 8px -2px rgba(32, 26, 14, .20);
}

/* ---- ② 画布绷框：无外框，但画布有厚度，侧面延续画面（Keilrahmen） ---- */
.f-wrap {
  --af-pad: 3.4%; --af-edge-k: .38;
  --af-edge-c: linear-gradient(135deg, #D9CDB2 0%, #C8BA9A 100%);
  --af-face: linear-gradient(135deg, #FBF6EB 0%, #F1EADA 34%, #DED2B8 72%, #CBBB9C 100%);
  --af-bv: calc(4px * var(--af-s)); --af-hi: .58; --af-lo: .42;
  --af-rabbit: calc(9px * var(--af-s)); --af-rabbit-a: .46;
  --af-lip: calc(1px * var(--af-s)); --af-lip-c: rgba(255, 252, 242, .48);
  --af-hair: calc(1px * var(--af-s)); --af-hair-c: rgba(122, 106, 78, .40);
  --af-cast: 0 15px 28px -13px rgba(32, 26, 14, .42), 0 3px 8px -2px rgba(32, 26, 14, .19);
}

/* ---- ③ 现代黑色画廊框：窄边、硬朗，内唇一道金属亮线 ---- */
.f-black {
  --af-pad: 3.8%; --af-edge-k: .28;
  --af-edge-c: #08080A;
  --af-face: linear-gradient(135deg, #3A3A41 0%, #26262C 34%, #141418 70%, #0B0B0E 100%);
  --af-bv: calc(3px * var(--af-s)); --af-hi: .44; --af-lo: .58;
  --af-rabbit: calc(11px * var(--af-s)); --af-rabbit-a: .70;
  --af-lip: calc(1.5px * var(--af-s)); --af-lip-c: rgba(255, 255, 255, .32);
  --af-hair: calc(1px * var(--af-s)); --af-hair-c: #050506;
  --af-cast: 0 18px 32px -15px rgba(18, 16, 10, .52), 0 4px 9px -2px rgba(18, 16, 10, .26);
}

/* ---- ④ 原木细框：浅色实木，纹理走 45°（画框四角是斜接的，纹路本就斜） ---- */
.f-oak {
  --af-pad: 3%; --af-edge-k: .30;
  --af-edge-c: linear-gradient(135deg, #C6A97A 0%, #96794C 100%);
  --af-face:
    repeating-linear-gradient(45deg, rgba(255, 253, 244, .14) 0 3px, rgba(98, 72, 36, .13) 3px 7px),
    linear-gradient(135deg, #EFDFBE 0%, #DFC8A0 30%, #C1A272 64%, #AC8A5C 100%);
  --af-bv: calc(3px * var(--af-s)); --af-hi: .54; --af-lo: .44;
  --af-rabbit: calc(8px * var(--af-s)); --af-rabbit-a: .46;
  --af-lip: calc(1px * var(--af-s)); --af-lip-c: rgba(255, 250, 236, .50);
  --af-hair: calc(1px * var(--af-s)); --af-hair-c: rgba(118, 88, 50, .46);
  --af-cast: 0 14px 26px -13px rgba(32, 26, 14, .40), 0 3px 7px -2px rgba(32, 26, 14, .18);
}

/* ---- ⑤ 深胡桃木：深色实木，哑光，适配古典室内（Nussbaum dunkel） ---- */
.f-walnut {
  --af-pad: 5.8%; --af-edge-k: .22;
  --af-edge-c: #1E1207;
  --af-face:
    repeating-linear-gradient(45deg, rgba(255, 245, 228, .07) 0 2px, rgba(0, 0, 0, .16) 2px 6px),
    linear-gradient(135deg, #6B4527 0%, #4E3018 30%, #3A2210 62%, #29180A 100%);
  --af-bv: calc(4px * var(--af-s)); --af-hi: .40; --af-lo: .62;
  --af-rabbit: calc(12px * var(--af-s)); --af-rabbit-a: .70;
  --af-lip: calc(1.5px * var(--af-s)); --af-lip-c: rgba(255, 236, 202, .28);
  --af-hair: calc(1px * var(--af-s)); --af-hair-c: #140C04;
  --af-cast: 0 18px 32px -15px rgba(18, 14, 8, .54), 0 4px 10px -2px rgba(18, 14, 8, .26);
}

/* ---- ⑥ 米白卡纸细框：细金框条 + 宽卡纸。
     卡纸最好认的特征是开窗那圈 45° 斜切面 —— 一条亮线，由 --af-lip 画在画作边缘。
     这里框体几乎全是卡纸，细金框条只占框宽的 9%。 ---- */
.f-mat {
  --af-pad: 10%; --af-edge-k: .09;
  --af-edge-c: linear-gradient(135deg, #C9A24E 0%, #8A6820 55%, #5E4415 100%);
  --af-face: linear-gradient(135deg, #FDFAF3 0%, #F8F2E4 26%, #F1E8D5 58%, #E6DAC2 100%);
  --af-bv: calc(4px * var(--af-s)); --af-hi: .44; --af-lo: .26;
  --af-rabbit: calc(15px * var(--af-s)); --af-rabbit-a: .50;
  --af-lip: calc(2px * var(--af-s)); --af-lip-c: rgba(255, 255, 255, .60);
  --af-hair: calc(1px * var(--af-s)); --af-hair-c: rgba(140, 116, 64, .55);
  --af-cast: 0 16px 30px -14px rgba(32, 26, 14, .42), 0 4px 9px -2px rgba(32, 26, 14, .19);
}

/* ---- ⑦ 象牙白宽框：厚米白线脚，靠自身体量撑住画面（Elfenbein breit） ---- */
.f-ivory {
  --af-pad: 7.8%; --af-edge-k: 0;
  --af-edge-c: #CFC3AB;
  --af-face: linear-gradient(135deg, #FDF9EF 0%, #F5EEE0 22%, #E8DDC8 48%, #D6C9AF 76%, #C6B898 100%);
  --af-bv: calc(6px * var(--af-s)); --af-hi: .66; --af-lo: .40;
  --af-rabbit: calc(14px * var(--af-s)); --af-rabbit-a: .56;
  --af-lip: calc(2px * var(--af-s)); --af-lip-c: rgba(138, 122, 92, .42);
  --af-hair: calc(1px * var(--af-s)); --af-hair-c: rgba(146, 132, 104, .58);
  --af-cast: 0 20px 36px -16px rgba(32, 26, 14, .46), 0 5px 11px -3px rgba(32, 26, 14, .20);
}

/* ---- ⑧ 古典金色雕花框：深外沿 → 亮鎏金 → 阴刻 → 内缘亮珠饰。
     上一版把雕花纹理平铺满整个框面，出来是满框竖条纹（像条绒布）。
     这一版只保留两层：一层 45° 细密阴刻纹（模拟錾花），一层多段鎏金渐变，
     中央被画作盖住 → 只有框边那一圈露出，贴近真实剖面。 ---- */
.f-gold {
  --af-pad: 7.8%; --af-edge-k: .14;
  --af-edge-c: #3A2810;
  --af-face:
    repeating-linear-gradient(45deg, rgba(255, 250, 224, .17) 0 2px, rgba(78, 54, 14, .19) 2px 5px),
    linear-gradient(135deg, #F7E5A8 0%, #C9A24E 16%, #8E6A22 34%, #5E4415 50%, #A8822F 63%, #F0DA9C 78%, #B8912F 90%, #7A5A22 100%);
  --af-bv: calc(7px * var(--af-s)); --af-hi: .68; --af-lo: .62;
  --af-rabbit: calc(15px * var(--af-s)); --af-rabbit-a: .74;
  --af-lip: calc(2px * var(--af-s)); --af-lip-c: rgba(255, 240, 196, .46);
  --af-hair: calc(2px * var(--af-s)); --af-hair-c: #4A3412;
  --af-cast: 0 22px 40px -18px rgba(28, 20, 8, .55), 0 5px 12px -3px rgba(28, 20, 8, .26);
}

/* ---- ⑨ 金框亚麻内衬：博物馆最经典的双层框 —— 外圈鎏金雕花 + 内圈亚麻衬边。
     结构上刚好用满两层：--af-edge-c 是外圈金（占框宽 52%），--af-face 是内圈亚麻。
     金与亚麻交接处那道台阶由 --af-bv 斜面画出来。 ---- */
.f-goldlinen {
  --af-pad: 9.5%; --af-edge-k: .52;
  --af-edge-c:
    repeating-linear-gradient(45deg, rgba(255, 250, 224, .16) 0 2px, rgba(78, 54, 14, .20) 2px 5px),
    linear-gradient(135deg, #F0DA9C 0%, #C9A24E 22%, #8E6A22 48%, #6B4C18 70%, #B8912F 100%);
  --af-face:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .40) 0 1px, rgba(120, 104, 76, .10) 1px 3px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .28) 0 1px, rgba(120, 104, 76, .08) 1px 3px),
    linear-gradient(135deg, #FBF6EA 0%, #F4EDDC 40%, #E9DFC7 78%, #DFD2B4 100%);
  --af-bv: calc(5px * var(--af-s)); --af-hi: .34; --af-lo: .30;
  --af-rabbit: calc(12px * var(--af-s)); --af-rabbit-a: .60;
  --af-lip: calc(1.5px * var(--af-s)); --af-lip-c: rgba(255, 255, 255, .52);
  --af-hair: calc(2px * var(--af-s)); --af-hair-c: #4A3412;
  --af-cast: 0 24px 44px -20px rgba(28, 20, 8, .58), 0 6px 13px -3px rgba(28, 20, 8, .27);
}

/* ---- 尺寸定位壳：让框体的百分比框边以「画作自身宽度」为参照 ---- */
/* 百分比 padding 解析的是父容器宽度。父容器一旦比框体本身宽（结算行的 flex 容器就是），
   框边就会按父容器算 —— 62px 的缩略图曾因此被算出 39.8px 的框边，图片被挤成 0 宽。
   凡是「框体尺寸 ≠ 父容器尺寸」的场景，都套一层壳把参照物纠正过来。 */
.afwrap { width: 100%; }
/* 壳上用行内 aspect-ratio 钉住「含框外框」的比例（见 app.js 的 artImg）。
   这里必须 height:100%，否则框体高度仍由内容撑 —— 而内容（img）的高度是
   100% of 框体，形成循环，框会塌掉。 */
.afwrap > .artframe { width: 100%; height: 100%; }
.afbox { width: 72px; height: 72px; flex: none; }
.afbox > .artframe { width: 100%; height: 100%; }

/* ---- 详情页主图：有框时换成墙面底色，让画「挂」在墙上看 ---- */
.pdp-main.has-frame {
  background: linear-gradient(180deg, #F8F4EC 0%, #E8E0CF 100%);
  box-shadow: none;
  border-radius: var(--r-sm);
}
.pdp-main.has-frame .afwrap { width: 86%; margin: 4.5% auto; }

/* ---- 缩略图：撑满 + 去掉圆角（方框被切成圆角会一眼假） ---- */
.pdp-thumbs .thumb.has-frame { border-radius: 4px; }
.pdp-thumbs .thumb .artframe { width: 100%; height: 100%; }

/* ---- 结算 / 购物车缩略图 ---- */
.summary-item .afbox > .artframe { border-radius: var(--r-sm); }

/* ---- 定制向导的「效果图」---- */
.compare figure.result.has-artframe { border: 0; background: transparent; overflow: visible; }

/* ============================================================
   画框陈列（重做版）

   参考站的做法：把选框做成一家「装裱店」——
     ① 圆角面板 + 定高滚动 + 多列网格，一屏看全所有框
     ② 每格是框装裱之后的实物观感 + 框料宽度 + 当前尺寸加价
     ③ 下方一张两列装裱规格表（框号 / 材质 / 画面尺寸 / 外框尺寸 / 框料宽度 / 厚度）
     ④ 换墙色：框好不好看，一半取决于配什么墙
     ⑤ 「挂到房间里看」：把画合成到实拍房间的墙上

   与上一版最关键的区别：选框格不再画「一个色块」。
   每格给的是「你家宠物装进这个框」的样子 —— 客户要判断的是这件事，
   框料本身不是。所以每格都把当前画作按真实框边比例重渲一遍。
   ============================================================ */

/* ---- 面板：定高滚动，9 种框也不会把详情页拉长 ---- */
.rk-panel {
  height: 306px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.rk-panel::-webkit-scrollbar { width: 6px; }
.rk-panel::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.rk-panel::-webkit-scrollbar-track { background: transparent; }

.rk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
@media (min-width: 720px) { .rk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- 单格 ---- */
.rk-opt {
  position: relative; display: block; width: 100%; min-width: 0;
  padding: 6px 4px 7px;
  border: 1px solid transparent; border-radius: 9px;
  background: var(--white); text-align: center; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.rk-opt:hover { border-color: var(--line-2); }
.rk-opt.on { border-color: var(--gold); background: var(--cream-2); box-shadow: 0 0 0 1px var(--gold) inset; }
.rk-opt.off { cursor: not-allowed; opacity: .42; background: var(--cream-3); }

/* 小方墙：每格一个统一的墙面底。底色由 --rk-wall 注入（跟着客户选的墙色走），
   于是「换墙色」这一个动作会同时改主图与全部 9 个选框格 —— 框与墙的关系一眼可见。 */
.rk-sw {
  position: relative; display: grid; place-items: center;
  width: 100%; aspect-ratio: 1 / 1; margin-bottom: 6px;
  background: var(--rk-wall, linear-gradient(180deg, #F8F4EC 0%, #E8E0CF 100%));
  border-radius: 5px; overflow: hidden;
}
/* 尺寸壳：让框体的百分比框边以「画作自身宽度」为参照。
   百分比 padding 解析的是父容器宽度 —— 父容器一旦比框体宽，框边就会被算大，
   图片被挤小甚至挤没（结算缩略图曾因此被压成 0 宽）。 */
/* 样块：一块框料的 45° 拼角特写（见 js/frame-sample.js）。
   齐边裁切到框料外沿（同参考站），靠描边 + 投影与墙分离 ——
   浅色款配浅色墙时才看得出格子边界，而留白方案在浅墙上是糊的。
   （留 88% 而非 100%：四周还要透出一点墙色，客户才能判断「这料跟墙配不配」。） */
.rk-sample {
  display: block; width: 88%; aspect-ratio: 1 / 1;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(58, 48, 30, .18), 0 3px 9px -3px rgba(38, 30, 14, .38);
}
.rk-sample svg { display: block; width: 100%; height: 100%; }
.rk-off-tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2px 3px; font-size: 9px; line-height: 1.25;
  color: var(--white); background: rgba(34, 54, 43, .74);
}
.rk-name {
  display: block; font-size: 11px; font-weight: 600; line-height: 1.28;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.rk-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; margin-top: 2px; }
.rk-cm { font-size: 10px; color: var(--muted); }
.rk-price { font-size: 11px; font-weight: 700; color: var(--text); }
.rk-opt.on .rk-price { color: var(--gold); }

.rk-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rk-label-note { font-size: 11px; font-weight: 400; color: var(--muted); }

/* ---- 装裱规格表：两列，靠 1px 缝隙形成网格线（比逐条描边干净） ---- */
.rk-spec {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 10px 0 0; padding: 0;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden;
}
.rk-spec-row {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  margin: 0; padding: 8px 10px; background: var(--white);
}
.rk-spec-row dt {
  flex: 0 0 auto; margin: 0;
  font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
}
.rk-spec-row dd {
  margin: 0; min-width: 0; font-size: 12px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 420px) {
  .rk-spec { grid-template-columns: minmax(0, 1fr); }
  .rk-spec-row dd { white-space: normal; }
}

/* 数字稿模式：整块压暗。框只装在实物上，但仍让客户看到有哪几种可选 */
.frame-sel.is-off .rk-grid { opacity: .72; }
.frame-sel.is-off .rk-opt { background: var(--cream-2); }
.frame-sel.is-off .rk-opt.on { background: var(--white); }
.frame-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* ============================================================
   换墙色
   ============================================================ */
.wall-row { margin-top: 10px; }
.wall-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wall-title { font-size: 12px; font-weight: 600; color: var(--text); }
.wall-toggle {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--gold); text-decoration: underline;
}
.wall-sw { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.wall-chip {
  width: 30px; height: 30px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: linear-gradient(180deg, var(--w1) 0%, var(--w2) 100%);
  box-shadow: var(--sh-1);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.wall-chip:hover { transform: translateY(-1px); }
.wall-chip.on { box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--gold); }

/* 主图上的「挂到房间里看」入口 */
.room-open {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; cursor: pointer;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94); color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 600;
  box-shadow: var(--sh-2);
}
.room-open:hover { background: var(--white); }
.room-open .ro-ic { display: inline-flex; }
.room-open .ro-ic svg { width: 15px; height: 15px; }

/* ============================================================
   挂到房间里看

   舞台固定为正方形：房间图本身也是正方形，因此归一化锚框坐标可以直接当百分比用，
   不会因为 object-fit: cover 的裁切而错位。房间图一旦换成非正方形，
   锚框坐标就必须先过一遍裁切换算 —— 这是这套做法唯一的硬前提。
   ============================================================ */
.rmv {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  background: rgba(20, 26, 22, .86);
}
.rmv-panel { position: relative; width: min(740px, 94vw); }
.rmv-close {
  position: absolute; top: -14px; right: -14px; z-index: 3;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink);
}
.rmv-close svg { width: 16px; height: 16px; }
.rmv-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--r-sm); overflow: hidden; background: #222;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.rmv-bg { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 画作落位：等比缩放后居中。投影让它与墙面分离 ——
   没有这道影，画看起来像贴纸糊在照片上，而不是挂在墙上 */
.rmv-art { position: absolute; display: block; box-shadow: 0 6px 22px rgba(0, 0, 0, .42); }
.rmv-art > .artframe { width: 100%; height: 100%; }
.rmv-label {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 5px 10px; border-radius: 5px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 12px; line-height: 1.3; max-width: 84%;
}
.rmv-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; justify-content: center; }
.rmv-tab {
  padding: 7px 14px; cursor: pointer;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); color: #DDD;
  font: inherit; font-size: 12.5px; white-space: nowrap;
}
.rmv-tab.on { background: #fff; color: #222; font-weight: 700; }
.rmv-strip { display: flex; gap: 8px; margin-top: 8px; justify-content: center; flex-wrap: wrap; }
.rmv-thumb {
  width: 72px; height: 72px; flex: none; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 6px; overflow: hidden;
  background: none; opacity: .62;
  transition: opacity .14s var(--ease), border-color .14s var(--ease);
}
.rmv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rmv-thumb:hover { opacity: 1; }
.rmv-thumb.on { border-color: #fff; opacity: 1; }

@media (max-width: 640px) {
  .rk-panel { height: 268px; }
  .rmv { padding: 12px; align-items: flex-start; }
  .rmv-thumb { width: 56px; height: 56px; }
  .rmv-close { top: 6px; right: 6px; }
}

/* ============================================================
   分页器（瀑布流 30/页、商品图 8/页共用同一套）
   规则：总数不超过一页时**整块不渲染** —— 只有一页却摆一排页码，
   客户会以为下面还有内容，点一下发现没变化，反而像是坏了。
   ============================================================ */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 26px 0 6px;
}
.pg-btn {
  min-width: 38px; height: 38px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--text);
  font: inherit; font-size: 13px; line-height: 1;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.pg-btn:hover:not(:disabled):not(.on) { border-color: var(--gold); color: var(--gold); }
.pg-btn.on {
  background: var(--ink); border-color: var(--ink); color: var(--cream-2);
  font-weight: 700; cursor: default;
}
.pg-btn:disabled { opacity: .36; cursor: not-allowed; }
.pg-btn.pg-step { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.pg-btn svg { width: 15px; height: 15px; display: block; }
.pg-gap { padding: 0 2px; color: var(--muted); font-size: 13px; }
.pg-info { width: 100%; text-align: center; font-size: 12px; color: var(--muted); margin-top: 2px; }
@media (min-width: 900px) {
  .pager { margin: 34px 0 8px; gap: 9px; }
  .pg-info { width: auto; margin: 0 0 0 8px; }
}

/* ============================================================
   站点页脚
   结构照参考站：信任条 → 四栏链接（服务 / 帐户 / 信息 / 联系）→ 底栏（版权 + 导航 + 支付）
   配色走 PUREAR 品牌深墨绿，页脚是深色块，与米白正文区分开。
   ============================================================ */
.site-foot {
  margin-top: 56px;
  background: var(--ink); color: rgba(244, 239, 228, .82);
}
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: var(--gold-2); }

/* 信任条：一条横贯的四格，进来先把「凭什么信你」摆出来 */
.ft-trust {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(244, 239, 228, .14);
}
.ft-trust-item { display: flex; align-items: center; gap: 9px; }
.ft-trust-item svg { width: 21px; height: 21px; flex: none; color: var(--gold-2); }
.ft-trust-item b { display: block; font-size: 12.5px; font-weight: 600; color: var(--cream-2); }
.ft-trust-item span { display: block; font-size: 11px; opacity: .7; }

.ft-main { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 30px 0 24px; }
/* 页脚品牌行：圆形 logo 与 PUREAR 字标并排（logo 米色圆底在墨绿页脚上自然成一个徽章） */
.ft-brand-row { display: flex; align-items: center; gap: 12px; }
.ft-logo { width: 46px; height: 46px; flex: none; border-radius: 50%; }
.ft-brand .mark {
  font-family: var(--font-serif); font-size: 23px; letter-spacing: 1.5px;
  color: var(--cream-2);
}
.ft-brand .tagline { margin-top: 7px; font-size: 12.5px; line-height: 1.65; opacity: .78; max-width: 300px; }
.ft-brand .ft-markets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ft-flag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; cursor: pointer;
  border: 1px solid rgba(244, 239, 228, .26); border-radius: var(--r-pill);
  background: none; color: inherit; font: inherit; font-size: 11.5px;
  /* 必须不换行：窄屏下「DE · AT · CH」一旦折成三行，圆角药丸会被撑成圆形金饼 */
  white-space: nowrap;
}
.ft-flag svg { width: 14px; height: 14px; flex: none; }
.ft-flag:hover { border-color: var(--gold-2); }
.ft-flag.on { background: var(--gold); border-color: var(--gold); color: #22362B; font-weight: 700; }

.ft-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
.ft-col h4 {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase; color: var(--cream-2);
  margin-bottom: 11px;
}
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ft-col li { font-size: 12.5px; line-height: 1.45; }
/* 未开放的页面不做死链：渲染成不可点的弱化文本，避免点一下跳到空页 */
.ft-col li.soon { opacity: .52; cursor: default; }
.ft-col li.soon::after {
  content: attr(data-soon);
  margin-left: 6px; padding: 1px 5px; border-radius: 4px;
  background: rgba(244, 239, 228, .14); font-size: 9.5px; letter-spacing: .3px;
  /* 徽标不许折行：窄列（联系信息那种长句）会把「即将开放」拆成两行并裁掉下半截 */
  display: inline-block; white-space: nowrap; vertical-align: 1px;
}
/* 说明性文字（营业时间等）：不是链接也不是待开放功能，只是普通一行字 */
.ft-col li.ft-raw { color: rgba(244, 239, 228, .72); }
.ft-contact-mail { font-size: 12.5px; color: var(--gold-2); }

.ft-bottom {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(244, 239, 228, .14);
  font-size: 11.5px;
}
.ft-nav { display: flex; flex-wrap: wrap; gap: 7px 16px; }
.ft-nav a { opacity: .82; }
.ft-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ft-pay .pay-chip {
  padding: 4px 8px; border-radius: 4px;
  background: rgba(244, 239, 228, .1);
  font-size: 10px; letter-spacing: .4px; color: var(--cream-2);
}
.ft-copy { opacity: .62; line-height: 1.5; }

@media (min-width: 720px) {
  .ft-trust { grid-template-columns: repeat(4, 1fr); }
  .ft-cols { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .site-foot { margin-top: 72px; }
  .ft-main { grid-template-columns: 300px 1fr; gap: 40px; padding: 38px 0 30px; }
  .ft-bottom {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 20px; padding: 18px 0;
  }
  .ft-copy { order: 1; }
  .ft-nav { order: 2; }
  .ft-pay { order: 3; }
}

/* ---------- 内容页（页脚「即将开放」栏目的真实页面）---------- */
.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--appbar-h) + 18px) var(--pad) 64px;
  color: var(--text);
}
.doc-back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 18px; padding: 8px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--cream-2); color: var(--ink);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.doc-back:hover { background: var(--cream-3); border-color: var(--gold); }
.doc-back svg { width: 16px; height: 16px; }

.doc-title {
  font-family: var(--font-serif);
  font-size: 30px; line-height: 1.22; font-weight: 700;
  letter-spacing: .2px; color: var(--ink);
  margin-bottom: 10px;
}
.doc-lead {
  font-size: 16px; line-height: 1.6; color: var(--text-2);
  margin-bottom: 22px;
}
.doc-loading {
  font-size: 15px; color: var(--muted);
  padding: 28px 0;
}
.doc-cover {
  display: block; width: 100%; max-height: 320px; object-fit: cover;
  border-radius: var(--r-md); margin: 4px 0 26px;
  box-shadow: var(--sh-2);
}
.doc-body { font-size: 15px; line-height: 1.74; color: var(--text); }
.doc-body h2 {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 700; color: var(--ink);
  margin: 28px 0 10px;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body p { margin: 12px 0; }
.doc-body ul { margin: 12px 0; padding-left: 20px; }
.doc-body li { margin: 7px 0; }
.doc-body strong { color: var(--ink); font-weight: 700; }

.doc-meta {
  margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}

.doc-help {
  margin-top: 28px; padding: 18px 20px;
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.doc-help b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.doc-help p { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin-bottom: 12px; }
.doc-help .btn { gap: 8px; }
/* 「还有疑问」卡片里的明文邮箱：按钮之外再给一次可直接抄走的地址。
   邮箱串比普通文字长，窄屏要允许从中间断行，否则会把卡片撑破。 */
.doc-help p.doc-mail { margin: 12px 0 0; font-size: 13px; letter-spacing: .2px; }
/* 邮箱地址是按钮而不是链接：点击 = 复制到剪贴板（mailto 会唤起 Outlook，见 copyText）。
   样式上仍要像一段可点的文字，所以把 button 的默认框全部抹掉、继承行内字体。 */
.doc-help p.doc-mail button,
button.mail-copy {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  word-break: break-all; display: inline-flex; align-items: center; gap: 5px;
}
.doc-help p.doc-mail button svg,
button.mail-copy svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .65; }
.doc-help p.doc-mail button:active svg,
button.mail-copy:active svg { opacity: 1; }
/* 页脚邮箱项：同上，button 抹掉默认外观，与同列其它 <a> 保持同一基线 */
li button.ft-contact-mail {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; text-align: left;
  /* 邮箱地址没有空格，窄列（手机端两列）下不会自动折行会撑出边界 */
  overflow-wrap: anywhere;
}
li button.ft-contact-mail svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .6; }
/* 邮箱项前面的语种标签（E-Mail / Email / 邮箱）：弱化、不抢地址本身的注意力，
   但保留 5px 间隔让两者不是糊在一起的一串字 */
li button.ft-contact-mail i {
  font-style: normal; opacity: .6; letter-spacing: .3px; flex: 0 0 auto;
}

.doc-more { margin-top: 30px; }
.doc-more h4 {
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-bottom: 12px;
}
.doc-more-list {
  display: flex; flex-wrap: wrap; gap: 9px;
}
.doc-more-list a {
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--cream-2); border: 1px solid var(--line-2);
  color: var(--ink-2); font-size: 13px; text-decoration: none;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.doc-more-list a:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }

.doc-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;
}
.doc-actions .btn { gap: 8px; }

@media (min-width: 720px) {
  .doc { padding-top: calc(var(--appbar-h) + 30px); }
  .doc-title { font-size: 36px; }
  .doc-body { font-size: 16px; }
}