/* ============================================================
   爱迪生 · EDISON — 珍珠世家 顶级视觉设计系统
   珍珠彩虹 / 玫瑰金 / 米白暖调 · 女性向奢华
   ============================================================ */

:root {
  /* 主色 */
  --rose-gold: #c9a077;
  --rose-gold-deep: #a87c4f;
  --rose-gold-soft: #e2c29a;
  --champagne: #e8cfa8;
  --blush: #e9b8ae;
  --blush-deep: #d89a8f;
  --lilac: #c9b6d8;
  --pearl-luster: linear-gradient(135deg, #fdfaf5 0%, #f5e9ec 25%, #ece4f2 50%, #f4eee2 75%, #fdfaf5 100%);
  --pearl-sheen: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.75) 45%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.75) 55%, transparent 70%);

  /* 背景 */
  --bg: #faf6ef;
  --bg-soft: #f6efe6;
  --card: #fffdf9;
  --card-2: #fdfaf4;

  /* 文字 */
  --ink: #3b312a;
  --ink-2: #6b5d50;
  --ink-3: #9a8c7d;

  /* 功能 */
  --line: rgba(201,160,119,.22);
  --shadow: 0 10px 30px -12px rgba(150,110,70,.18);
  --shadow-soft: 0 6px 20px -8px rgba(150,110,70,.14);
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 12px;

  /* 字体 */
  --serif: "Cormorant Garamond", "Songti SC", "Noto Serif SC", "STSong", "SimSun", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --maxw: 520px;
  --nav-h: 58px;
  --topbar-h: 52px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  background-image: radial-gradient(1200px 500px at 50% -10%, #fbf7f0 0%, var(--bg) 60%);
  min-height: 100vh;
  line-height: 1.6;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

/* 滚动条 */
::-webkit-scrollbar { width: 0; height: 0; }

/* 主体容器（移动优先，桌面居中） */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: linear-gradient(180deg, #fdfaf5ee, #faf5edf2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { max-width: var(--maxw); margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f7ead9 40%, #e2c29a 75%, #c9a077 100%);
  box-shadow: inset -2px -3px 6px rgba(160,110,60,.35), 0 3px 8px rgba(150,110,70,.25);
  position: relative; flex: none;
}
.brand-mark::after {
  content: ''; position: absolute; left: 9px; top: 8px; width: 12px; height: 9px;
  background: radial-gradient(ellipse at center, #fff 0%, rgba(255,255,255,0) 70%); border-radius: 50%;
}
.brand-name { font-family: var(--serif); font-size: 1.18rem; letter-spacing: .05em; color: var(--ink); font-weight: 700; }
.brand-name b { color: var(--rose-gold-deep); font-weight: 700; }
.brand-sub { display: block; font-size: .56rem; letter-spacing: .22em; color: var(--ink-3); font-weight: 400; text-transform: uppercase; margin-top: -3px; }
.topbar .spacer { flex: 1; }
.topbar-btn { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink-2); border-radius: 50%; transition: .2s; }
.topbar-btn:active { background: var(--rose-gold-soft); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 46px; padding: 0 26px; border-radius: 999px;
  font-size: .95rem; font-weight: 600; letter-spacing: .02em;
  transition: transform .18s, box-shadow .18s; position: relative; overflow: hidden;
}
.btn:active { transform: scale(.96); }
.btn-primary {
  color: #fffaf0;
  background: linear-gradient(135deg, #e9cba5 0%, #d4a878 45%, #c09366 100%);
  box-shadow: 0 8px 20px -6px rgba(192,147,102,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  animation: shimmer 3.2s infinite;
}
@keyframes shimmer { 0% { left: -80%; } 55% { left: 130%; } 100% { left: 130%; } }
.btn-ghost {
  color: var(--rose-gold-deep); background: transparent;
  border: 1.5px solid var(--rose-gold); box-shadow: none;
}
.btn-danger {
  color: #c06a5a; background: transparent;
  border: 1.5px solid var(--blush-deep); box-shadow: none;
}
.btn-block { width: 100%; }

/* ---------- 首页 Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-slide {
  position: relative; height: 340px; overflow: hidden;
  background: var(--pearl-luster);
  display: flex; align-items: center; justify-content: center;
}
.hero-slide .pearl-orb {
  position: absolute; border-radius: 50%; filter: blur(0);
  background: radial-gradient(circle at 32% 28%, #ffffff, #f4e6d8 45%, #dcc0a0 80%, #c9a077);
  box-shadow: inset -6px -10px 24px rgba(160,110,60,.4), 0 30px 60px -20px rgba(150,110,70,.5);
}
.hero-orb1 { width: 190px; height: 190px; right: -30px; top: 30px; animation: floaty 6s ease-in-out infinite; }
.hero-orb2 { width: 90px; height: 90px; left: -20px; bottom: 40px; opacity: .8; animation: floaty 7s ease-in-out infinite reverse; }
.hero-orb3 { width: 46px; height: 46px; right: 26%; top: 20%; opacity: .65; animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 26px; }
.hero-content::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 65%); z-index: -1; }
.hero-kicker { font-size: .72rem; letter-spacing: .38em; color: var(--rose-gold-deep); text-transform: uppercase; margin-bottom: 12px; }
.hero-title { font-family: var(--serif); font-size: 2.3rem; line-height: 1.22; font-weight: 700; color: var(--ink); background: linear-gradient(120deg, #8a623c 0%, #c9a077 45%, #a87c4f 70%, #7d5a38 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-title em { font-style: normal; }
.hero-desc { margin-top: 14px; font-size: .92rem; color: var(--ink-2); letter-spacing: .05em; }
.hero-cta { margin-top: 22px; display: flex; gap: 12px; justify-content: center; }
.hero-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.hero-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(168,124,79,.28); transition: .3s; }
.hero-dots i.on { width: 22px; border-radius: 4px; background: var(--rose-gold); }

/* ---------- 信任条 ---------- */
.trust-strip { background: var(--card); border-bottom: 1px solid var(--line); }
.trust-strip .wrap { display: flex; padding-top: 12px; padding-bottom: 12px; }
.trust-item { flex: 1; text-align: center; }
.trust-item .t-ico { font-size: 1.15rem; color: var(--rose-gold-deep); }
.trust-item .t-txt { font-size: .66rem; color: var(--ink-2); margin-top: 3px; letter-spacing: .02em; }

/* ---------- 区块 ---------- */
.section { padding: 22px 0 6px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; padding: 0 2px; }
.section-title { font-family: var(--serif); font-size: 1.32rem; font-weight: 700; letter-spacing: .02em; position: relative; }
.section-title::before { content: ''; display: inline-block; width: 5px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, var(--rose-gold-soft), var(--rose-gold-deep)); margin-right: 9px; vertical-align: -3px; }
.section-title small { display: block; font-family: var(--sans); font-size: .62rem; color: var(--ink-3); letter-spacing: .18em; text-transform: uppercase; font-weight: 400; margin-top: -2px; }
.section-more { font-size: .8rem; color: var(--rose-gold-deep); display: flex; align-items: center; gap: 2px; }

/* ---------- 分类网格 ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; }
.cat-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cat-orb {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, #ffffff, #f8ecdf 55%, #e8d3b6);
  box-shadow: inset -3px -5px 12px rgba(160,110,60,.28), 0 8px 18px -6px rgba(150,110,70,.34), 0 0 0 1px rgba(255,255,255,.6);
  transition: transform .25s; position: relative;
}
.cat-orb::after { content: ''; position: absolute; left: 16px; top: 14px; width: 18px; height: 13px; border-radius: 50%; background: radial-gradient(ellipse, #fff 0%, rgba(255,255,255,0) 70%); }
.cat-orb:active { transform: scale(.92); }
.cat-orb svg { width: 34px; height: 34px; }
.cat-name { font-size: .76rem; color: var(--ink); font-weight: 500; }

/* ---------- 商品卡片 ---------- */
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pcard {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(201,160,119,.14); box-shadow: var(--shadow-soft);
  transition: transform .2s, box-shadow .2s;
}
.pcard:active { transform: translateY(-2px); box-shadow: var(--shadow); }
.pcard .pimg { aspect-ratio: 1/1; overflow: hidden; position: relative; }
.pcard .pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pcard:active .pimg img { transform: scale(1.05); }
.pcard .tag { position: absolute; top: 10px; left: 10px; font-size: .62rem; padding: 3px 9px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #e2b98a, #c09366); letter-spacing: .05em; }
.pcard .tag.new { background: linear-gradient(135deg, #d8b8d0, #b78bb8); }
.pcard .pbody { padding: 11px 12px 13px; }
.pcard .pname { font-size: .88rem; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.pcard .psub { font-size: .68rem; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .pprice { margin-top: 8px; display: flex; align-items: baseline; gap: 6px; }
.pcard .pprice .now { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--rose-gold-deep); }
.pcard .pprice .now::before { content: '¥'; font-size: .72rem; }
.pcard .pprice .old { font-size: .68rem; color: var(--ink-3); text-decoration: line-through; }
.pcard .pprice .sales { margin-left: auto; font-size: .66rem; color: var(--ink-3); }

/* ---------- 品牌故事 teaser ---------- */
.story-teaser { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: 26px 24px; color: #fff; }
.story-teaser .bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, #d4a878 0%, #b98a5e 40%, #9a6f46 100%);
}
.story-teaser .pearl-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff, #f2ddc0 50%, #d9b88a); box-shadow: 0 20px 40px rgba(0,0,0,.2); }
.story-teaser .orb-a { width: 150px; height: 150px; right: -40px; top: -40px; opacity: .9; }
.story-teaser .orb-b { width: 70px; height: 70px; right: 40px; bottom: -20px; opacity: .7; }
.story-teaser .inner { position: relative; z-index: 1; }
.story-teaser h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; letter-spacing: .04em; }
.story-teaser p { margin-top: 8px; font-size: .82rem; opacity: .92; max-width: 70%; }
.story-teaser .btn { margin-top: 16px; background: rgba(255,255,255,.95); color: var(--rose-gold-deep); }

/* ---------- 会员等级 ---------- */
.level-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.level-card {
  flex: none; width: 132px; padding: 18px 14px 16px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); text-align: center; position: relative;
}
.level-card.cur { border-color: var(--rose-gold); box-shadow: 0 0 0 1px var(--rose-gold), var(--shadow); }
.level-badge { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--pearl-luster); box-shadow: inset -2px -3px 8px rgba(160,110,60,.2); color: var(--rose-gold-deep); }
.level-card .l-name { font-family: var(--serif); font-size: .98rem; font-weight: 700; }
.level-card .l-desc { font-size: .64rem; color: var(--ink-3); margin-top: 6px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 招商 CTA ---------- */
.franchise { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: 30px 24px; color: #fff; text-align: center; }
.franchise .bg { position: absolute; inset: 0; background: linear-gradient(140deg, #c9a077 0%, #9a6f46 55%, #7d5a38 100%); }
.franchise .sheen { position: absolute; inset: 0; background: var(--pearl-sheen); background-size: 220% 100%; animation: sheenmove 5s linear infinite; opacity: .5; }
@keyframes sheenmove { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.franchise .inner { position: relative; z-index: 1; }
.franchise .f-kicker { font-size: .7rem; letter-spacing: .34em; text-transform: uppercase; opacity: .85; }
.franchise h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; margin-top: 8px; letter-spacing: .04em; }
.franchise p { margin-top: 10px; font-size: .84rem; opacity: .92; }
.franchise .f-stats { display: flex; justify-content: center; gap: 26px; margin: 20px 0; }
.franchise .f-stat .n { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; }
.franchise .f-stat .l { font-size: .66rem; opacity: .85; }
.franchise .btn { background: #fff; color: #8a5f38; }

/* ---------- 为什么选择 ---------- */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.why-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; }
.why-item .w-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--pearl-luster); color: var(--rose-gold-deep); margin-bottom: 10px; }
.why-item h4 { font-family: var(--serif); font-size: .98rem; font-weight: 700; }
.why-item p { font-size: .72rem; color: var(--ink-2); margin-top: 4px; line-height: 1.55; }

/* ---------- 页脚 ---------- */
.footer { margin-top: 26px; padding: 26px 16px 30px; background: linear-gradient(180deg, var(--bg-soft), #f0e6d8); border-top: 1px solid var(--line); }
.footer .f-brand { text-align: center; font-family: var(--serif); font-size: 1.15rem; font-weight: 700; }
.footer .f-slogan { text-align: center; font-size: .72rem; color: var(--ink-3); letter-spacing: .16em; margin-top: 4px; }
.footer .f-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 16px 0; }
.footer .f-links a { font-size: .78rem; color: var(--ink-2); }
.footer .f-copy { text-align: center; font-size: .66rem; color: var(--ink-3); line-height: 1.7; }

/* ---------- 底部导航 ---------- */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fffdf9f7; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  display: flex;
}
.bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-3); font-size: .62rem; position: relative; }
.bottomnav a svg { width: 22px; height: 22px; }
.bottomnav a.on { color: var(--rose-gold-deep); }
.bottomnav a .badge { position: absolute; top: 5px; right: 28%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--blush-deep); color: #fff; font-size: .6rem; display: grid; place-items: center; }

/* ---------- 子页通用 ---------- */
.page { padding-top: 6px; }
.page-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px 6px; }
.page-head .back { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
.page-head h2 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; flex: 1; text-align: center; margin-right: 34px; }
.page-head .empty { width: 34px; }

/* ---------- 表单 ---------- */
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow-soft); }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: .78rem; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; height: 46px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--card-2); color: var(--ink);
  transition: border-color .2s, box-shadow .2s; font-size: .94rem;
}
.field textarea { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--rose-gold); box-shadow: 0 0 0 3px rgba(201,160,119,.15); }
.field .code-row { display: flex; gap: 10px; }
.field .code-row input { flex: 1; }
.field .code-btn { flex: none; height: 46px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--pearl-luster); color: var(--rose-gold-deep); font-size: .8rem; font-weight: 600; border: 1.5px solid var(--line); }

/* ---------- 列表卡片 ---------- */
.list-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-soft); }
.list-row { display: flex; align-items: center; gap: 12px; }
.list-row .thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; flex: none; background: var(--bg-soft); }
.list-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-row .info { flex: 1; min-width: 0; }
.list-row .info .t1 { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .info .t2 { font-size: .72rem; color: var(--ink-3); margin-top: 2px; }
.list-row .info .price { font-family: var(--serif); font-size: 1.02rem; color: var(--rose-gold-deep); font-weight: 700; margin-top: 4px; }

/* ---------- 状态标签 ---------- */
.badge-status { display: inline-block; font-size: .68rem; padding: 3px 10px; border-radius: 999px; }
.bs-pending { color: var(--rose-gold-deep); background: rgba(201,160,119,.14); }
.bs-paid { color: #3f7d5c; background: rgba(63,125,92,.12); }
.bs-shipped { color: #4a6fa5; background: rgba(74,111,165,.12); }
.bs-done { color: #7a5d8a; background: rgba(122,93,138,.12); }
.bs-cancel { color: var(--ink-3); background: rgba(0,0,0,.06); }

/* ---------- Toast ---------- */
#toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-80px); z-index: 999; background: rgba(59,49,42,.92); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: .84rem; transition: transform .35s cubic-bezier(.2,.9,.3,1.2); max-width: 82vw; text-align: center; }
#toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.empty .e-orb { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: var(--pearl-luster); box-shadow: inset -3px -5px 12px rgba(160,110,60,.18); }
.empty p { font-size: .86rem; }

/* ---------- 详情页 ---------- */
.detail-hero { position: relative; aspect-ratio: 1/1; background: var(--pearl-luster); }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-body { padding: 20px 16px 30px; }
.detail-price { display: flex; align-items: baseline; gap: 10px; }
.detail-price .now { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--rose-gold-deep); }
.detail-price .now::before { content: '¥'; font-size: .9rem; }
.detail-price .old { font-size: .86rem; color: var(--ink-3); text-decoration: line-through; }
.detail-name { font-size: 1.2rem; font-weight: 700; margin-top: 10px; line-height: 1.4; }
.detail-sub { font-size: .8rem; color: var(--ink-3); margin-top: 4px; }
.detail-meta { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.detail-meta span { font-size: .74rem; color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; }
.detail-desc { margin-top: 18px; }
.detail-desc h4 { font-family: var(--serif); font-size: 1rem; margin-bottom: 8px; }
.detail-desc p { font-size: .86rem; color: var(--ink-2); line-height: 1.8; }
.detail-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 55; background: #fffdf9f7; backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; }
.detail-bar .cart-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--pearl-luster); color: var(--rose-gold-deep); position: relative; }
.detail-bar .qty { display: flex; align-items: center; gap: 12px; }
.detail-bar .qty button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink-2); font-size: 1.1rem; display: grid; place-items: center; }
.detail-bar .qty b { min-width: 24px; text-align: center; }
.detail-bar .btn { flex: 1; }

/* ---------- 购物车 ---------- */
.cart-item { display: flex; gap: 12px; align-items: center; }
.cart-item .qty { display: flex; align-items: center; gap: 8px; }
.cart-item .qty button { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink-2); display: grid; place-items: center; }

/* ---------- 会员中心 ---------- */
.member-hero { position: relative; padding: 24px 20px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(135deg, #d4a878, #b98a5e 55%, #9a6f46); color: #fff; overflow: hidden; }
.member-hero .sheen { position: absolute; inset: 0; background: var(--pearl-sheen); background-size: 220% 100%; animation: sheenmove 6s linear infinite; opacity: .4; }
.member-hero .inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.member-avatar { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 1.6rem; border: 2px solid rgba(255,255,255,.5); flex: none; }
.member-info h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.member-info .lvl { display: inline-block; margin-top: 4px; font-size: .7rem; padding: 3px 11px; border-radius: 999px; background: rgba(255,255,255,.22); }
.member-assets { position: relative; z-index: 1; display: flex; margin-top: 18px; gap: 10px; }
.member-assets .as { flex: 1; background: rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.member-assets .as .n { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.member-assets .as .l { font-size: .66rem; opacity: .85; margin-top: 2px; }
.menu-group { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: var(--card-2); }
.menu-item .mi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--pearl-luster); color: var(--rose-gold-deep); flex: none; }
.menu-item .mi-txt { flex: 1; font-size: .9rem; }
.menu-item .mi-val { font-size: .76rem; color: var(--ink-3); }
.menu-item .chev { color: var(--ink-3); }

/* ---------- 资产流水表 ---------- */
.ledger-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.ledger-item:last-child { border-bottom: none; }
.ledger-item .lg-reason { flex: 1; }
.ledger-item .lg-reason .t { font-size: .86rem; font-weight: 600; }
.ledger-item .lg-reason .d { font-size: .68rem; color: var(--ink-3); margin-top: 2px; }
.ledger-item .amt { font-family: var(--serif); font-size: 1.02rem; font-weight: 700; }
.ledger-item .amt.in { color: #3f7d5c; }
.ledger-item .amt.out { color: var(--rose-gold-deep); }

/* ---------- 遮罩/弹层 ---------- */
#mask { position: fixed; inset: 0; background: rgba(40,30,20,.5); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .3s; }
#mask.show { opacity: 1; pointer-events: auto; }
#sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--card); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.9,.3,1); }
#sheet.show { transform: translateY(0); }

/* ---------- 动画 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .5s ease both; }

/* ---------- 桌面适配 ---------- */
@media (min-width: 768px) {
  :root { --maxw: 560px; }
  .topbar-inner, .bottomnav { max-width: var(--maxw); left: 50%; transform: translateX(-50%); }
  .topbar-inner { position: relative; }
  .bottomnav { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .detail-bar { max-width: var(--maxw); left: 50%; transform: translateX(-50%); border-radius: var(--radius) var(--radius) 0 0; }
  #toast { max-width: 420px; }
}

/* ---------- 优惠券 ---------- */
.coupon-strip {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #f7efe2, #fbf3ea);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-soft);
}
.coupon-strip .cs-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #e9cba5, #c09366); color: #fff; flex: none; }
.coupon-strip .cs-txt { flex: 1; display: flex; flex-direction: column; }
.coupon-strip .cs-txt b { font-family: var(--serif); font-size: 1.02rem; }
.coupon-strip .cs-txt small { font-size: .7rem; color: var(--ink-3); margin-top: 2px; }
.coupon-strip .cs-go { display: flex; align-items: center; gap: 2px; font-size: .78rem; color: var(--rose-gold-deep); font-weight: 600; }

.coupon-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #d4a878, #b98a5e 55%, #9a6f46); color: #fff;
  padding: 22px 20px; margin-bottom: 14px;
}
.coupon-hero .sheen { position: absolute; inset: 0; background: var(--pearl-sheen); background-size: 220% 100%; animation: sheenmove 6s linear infinite; opacity: .4; }
.coupon-hero .inner { position: relative; z-index: 1; }
.coupon-hero h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; }
.coupon-hero p { font-size: .78rem; opacity: .9; margin-top: 4px; }
.coupon-hero .f-kicker { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }

.coupon-card {
  display: flex; align-items: stretch; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-soft); position: relative;
}
.coupon-card.got { opacity: .62; filter: saturate(.6); }
.coupon-card .cp-left {
  width: 92px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(160deg, #e9cba5, #c09366); color: #fff; padding: 14px 8px;
}
.coupon-card .cp-amount { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1; display: flex; align-items: baseline; }
.coupon-card .cp-amount small { font-size: .82rem; margin-right: 1px; }
.coupon-card .cp-amount i { font-style: normal; font-size: .8rem; margin-left: 2px; }
.coupon-card .cp-cond { font-size: .66rem; opacity: .92; margin-top: 3px; }
.coupon-card .cp-right { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.coupon-card .cp-name { font-family: var(--serif); font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.coupon-card .cp-desc { font-size: .72rem; color: var(--ink-2); margin-top: 3px; }
.coupon-card .cp-time { font-size: .64rem; color: var(--ink-3); margin-top: 4px; }
.coupon-card .cp-act { display: flex; align-items: center; justify-content: center; padding: 0 12px; flex: none; }
.coupon-card .cp-state {
  font-size: .7rem; padding: 4px 12px; border-radius: 999px;
  background: var(--card-2); color: var(--ink-3); border: 1px solid var(--line);
}
.coupon-card .cp-state.on { background: var(--pearl-luster); color: var(--rose-gold-deep); border-color: var(--rose-gold); }

/* ---------- 会员专享价 ---------- */
.member-tag {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  color: #fff; background: linear-gradient(135deg, #d89a8f, #c0765f);
  padding: 3px 9px; border-radius: 999px;
}

/* ---------- 秒杀 ---------- */
.sk-hero, .gb-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #c0765f, #a05a46); color: #fff;
  padding: 20px 20px; margin-bottom: 14px;
}
.gb-hero { background: linear-gradient(135deg, #c9a077, #a87c4f); }
.sk-hero .sheen, .gb-hero .sheen { position: absolute; inset: 0; background: var(--pearl-sheen); background-size: 220% 100%; animation: sheenmove 6s linear infinite; opacity: .4; }
.sk-hero .inner, .gb-hero .inner { position: relative; z-index: 1; }
.sk-hero h3, .gb-hero h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.sk-hero p, .gb-hero p { font-size: .74rem; opacity: .9; margin-top: 4px; }
.sk-hero .f-kicker, .gb-hero .f-kicker { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }

.sk-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, #fff0ed, #ffe3d8);
  border: 1px solid rgba(192,118,95,.25); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 12px;
}
.sk-banner .sk-info { display: flex; align-items: baseline; gap: 8px; }
.sk-tag { font-size: .68rem; font-weight: 700; color: #c0765f; display: inline-flex; align-items: center; gap: 4px; }
.sk-price { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: #c0765f; }
.sk-old { font-size: .74rem; color: var(--ink-3); text-decoration: line-through; }
.sk-count { font-family: var(--serif); font-size: .9rem; font-weight: 700; color: #c0765f; background: #fff; padding: 5px 10px; border-radius: 8px; letter-spacing: .05em; }

.sk-prod {
  position: relative; display: flex; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  margin-bottom: 12px; box-shadow: var(--shadow-soft); padding-bottom: 48px;
}
.sk-prod > img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; flex: none; }
.sk-prod-info { flex: 1; min-width: 0; }
.sk-prod-name { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-prod-price { margin-top: 6px; font-family: var(--serif); }
.sk-prod-price span { color: #c0765f; font-size: 1.3rem; font-weight: 700; }
.sk-prod-price del { color: var(--ink-3); font-size: .74rem; margin-left: 6px; }
.sk-progress { height: 6px; border-radius: 999px; background: var(--bg-soft); margin-top: 10px; overflow: hidden; }
.sk-progress i { display: block; height: 100%; background: linear-gradient(90deg, #d89a8f, #c0765f); border-radius: 999px; }
.sk-prod-meta { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ink-3); margin-top: 6px; }
.sk-prod-count { font-weight: 700; color: #c0765f; }

/* ---------- 拼团 ---------- */
.gb-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, #fbf3ea, #f7e9db);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 14px; margin: 12px 0;
}
.gb-card .gb-info { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gb-tag { font-size: .68rem; font-weight: 700; color: var(--rose-gold-deep); display: inline-flex; align-items: center; gap: 4px; }
.gb-price { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--rose-gold-deep); }
.gb-note { font-size: .7rem; color: var(--ink-2); }

/* ---------- 评价 ---------- */
.rev-link { text-decoration: none; color: inherit; }
.rev-head { display: flex; align-items: center; gap: 14px; }
.rev-big { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; color: var(--rose-gold-deep); }
.rev-summary { display: flex; align-items: center; gap: 8px; }
.rev-score { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--rose-gold-deep); }
.rev-more { margin-left: auto; font-size: .74rem; color: var(--ink-3); display: inline-flex; align-items: center; }

/* ---------- 首页活动入口 ---------- */
.promo-grid { display: flex; gap: 10px; }
.promo-card {
  flex: 1; display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius); padding: 14px 14px; color: #fff;
  box-shadow: var(--shadow-soft);
}
.promo-sk { background: linear-gradient(135deg, #d98a72, #c0765f); }
.promo-gb { background: linear-gradient(135deg, #d4a878, #a87c4f); }
.promo-ico { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.22); display: grid; place-items: center; flex: none; }
.promo-txt { flex: 1; display: flex; flex-direction: column; }
.promo-txt b { font-family: var(--serif); font-size: 1rem; }
.promo-txt small { font-size: .66rem; opacity: .9; margin-top: 2px; }
.promo-go { opacity: .85; }

/* ---------- 邀请海报 ---------- */
.poster {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  background: var(--pearl-luster); padding: 3px;
}
.poster-inner {
  position: relative; text-align: center; padding: 44px 24px 40px;
  border-radius: calc(var(--radius-lg) - 3px);
  background:
    radial-gradient(420px 260px at 15% 8%, rgba(232,207,168,.5), transparent 60%),
    radial-gradient(420px 300px at 85% 90%, rgba(201,182,216,.45), transparent 60%),
    linear-gradient(160deg, #fdfaf5, #f5e9ec 45%, #ece4f2);
  border: 1px solid var(--line);
}
.poster-brand { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 14px; background: linear-gradient(135deg, #e9cba5, #c09366); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px -4px rgba(168,124,79,.5); }
.poster-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--rose-gold-deep); letter-spacing: .04em; }
.poster-sub { font-size: .78rem; color: var(--ink-2); margin-top: 4px; }
.poster-slogan { font-family: var(--serif); font-size: .92rem; color: var(--ink-3); margin-top: 10px; }
.poster-code { margin-top: 34px; }
.poster-code-label { font-size: .7rem; color: var(--ink-3); letter-spacing: .2em; }
.poster-code-val { font-family: var(--serif); font-size: 2.4rem; font-weight: 700; letter-spacing: .28em; color: var(--rose-gold-deep); margin-top: 8px; }
.poster-tip { font-size: .7rem; color: var(--ink-3); line-height: 1.7; margin-top: 36px; }