/* ============================================================
   匠心艺品非遗商城 · 全站样式 V2.0（上线版）
   非遗国潮 · 暖金 + 墨色主题 | 移动优先，桌面居中手机框
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #2b2320;
  --gold: #c9991f;
  --gold-deep: #a37d14;
  --gold-dark: #5d4a1e;
  --gold-grad: linear-gradient(135deg, #b08f47 0%, #d4a94e 50%, #e8cc76 100%);
  --red: #9e2a22;
  --red-bright: #b03a2e;
  --bg: #f7f2e7;
  --card: #fffdf8;
  --border: #e8dcbf;
  --text-sub: #6b5e50;
  --shadow: 0 3px 14px rgba(61,50,37,.08);
}
html { background: #1c1814; }
body {
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Noto Sans SC", sans-serif;
  color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased;
  min-height: 100vh; padding: 0 0 66px 0;
}
.serif { font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif; }
a { color: inherit; }
.phone { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; }
@media (min-width: 560px) {
  body { padding: 28px 0 94px 0; }
  .phone { border-radius: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.55); overflow: hidden; min-height: auto; }
}

/* ===== 顶部品牌导航（首页） ===== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #33291c 0%, #241d14 100%);
  color: #f3e6c4; padding: 10px 14px; display: flex; align-items: center; gap: 10px;
}
.topbar .brand { font-size: 19px; font-weight: 700; letter-spacing: 2px; color: #e8cc76; white-space: nowrap; }
.topbar .brand small { display: block; font-size: 9px; letter-spacing: 4px; color: #a98f5c; font-weight: 400; }
.searchbox {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(232,204,118,.35);
  border-radius: 999px; padding: 6px 12px; text-decoration: none;
}
.searchbox span { font-size: 11px; color: #c9b98d; overflow: hidden; white-space: nowrap; }
.icon-btn { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; position: relative; text-decoration: none; }
.icon-btn .dot { position: absolute; top: 1px; right: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); }

/* ===== 子页头 ===== */
.subbar {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #33291c, #241d14); color: #f3e6c4;
  display: flex; align-items: center; padding: 11px 12px; gap: 10px;
}
.subbar .back, .subbar .home { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); text-decoration: none; }
.subbar .ttl { flex: 1; text-align: center; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: #e8cc76; }
.subbar .ph { width: 30px; }

/* ===== Banner 轮播 ===== */
.banner-wrap { position: relative; margin: 12px 12px 0; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px rgba(61,50,37,.18); }
.banner-track { display: flex; width: 300%; animation: banner-slide 18s ease-in-out infinite; }
.banner-item { width: 33.3333%; position: relative; text-decoration: none; display: block; }
.banner-item img { width: 100%; height: 185px; object-fit: cover; display: block; }
.banner-item .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; background: linear-gradient(180deg, transparent, rgba(28,24,20,.82)); color: #f7e9c8; font-size: 13px; letter-spacing: 1px; }
.banner-item .cap b { font-size: 15px; color: #ffe9a8; }
.banner-theme { width: 100%; height: 185px; background: var(--gold-grad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #3d2f14; }
.banner-theme .t1 { font-size: 24px; font-weight: 800; letter-spacing: 4px; }
.banner-theme .t2 { font-size: 12px; letter-spacing: 2px; color: #6b5220; }
.banner-theme .btn { margin-top: 6px; background: #3d2f14; color: #f3dfa3; font-size: 12px; padding: 7px 22px; border-radius: 999px; letter-spacing: 2px; }
.banner-dots { position: absolute; bottom: 8px; right: 12px; display: flex; gap: 5px; z-index: 5; }
.banner-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.45); }
.banner-dots i:nth-child(2) { animation: dot2 18s infinite; }
.banner-dots i:nth-child(3) { animation: dot3 18s infinite; }
.banner-dots i.on { background: #ffe9a8; }
@keyframes banner-slide { 0%,28% { transform: translateX(0); } 34%,61% { transform: translateX(-33.3333%); } 67%,94% { transform: translateX(-66.6667%); } 100% { transform: translateX(0); } }
@keyframes dot2 { 0%,28% {background:rgba(255,255,255,.45)} 34%,61% {background:#ffe9a8} 67%,100% {background:rgba(255,255,255,.45)} }
@keyframes dot3 { 0%,61% {background:rgba(255,255,255,.45)} 67%,94% {background:#ffe9a8} 100% {background:rgba(255,255,255,.45)} }

/* ===== 金刚区 ===== */
.channels { display: flex; justify-content: space-between; padding: 16px 10px 6px; }
.chan { width: 16%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.chan .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(61,50,37,.08); }
.chan span { font-size: 10px; color: var(--gold-dark); letter-spacing: 0; white-space: nowrap; }

/* ===== 楼层 ===== */
.floor { margin: 18px 12px 0; }
.floor-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.floor-head .tt { font-size: 17px; font-weight: 800; color: var(--gold-dark); letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.floor-head .tt::before { content: ''; width: 4px; height: 16px; background: var(--gold); border-radius: 2px; }
.floor-head .tt em { font-style: normal; font-size: 10px; color: var(--gold); letter-spacing: 1px; font-weight: 600; }
.floor-head .more { font-size: 11px; color: var(--text-sub); text-decoration: none; }

/* ===== 传承人IP卡 ===== */
.inheritor { border-radius: 16px; overflow: hidden; background: linear-gradient(150deg, #3a2f1e 0%, #241d14 60%, #33291c 100%); box-shadow: 0 10px 30px rgba(40,32,22,.35); color: #e9dbb6; border: 1px solid rgba(201,153,31,.4); }
.inheritor .frame { padding: 16px; display: flex; gap: 14px; }
.inheritor .photo { flex: none; width: 104px; height: 140px; border-radius: 10px; overflow: hidden; border: 1.5px solid rgba(232,204,118,.65); position: relative; }
.inheritor .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inheritor .photo .seal { position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; border-radius: 6px; background: var(--red); color: #ffe9c9; font-size: 8px; line-height: 1.2; display: flex; align-items: center; justify-content: center; text-align: center; writing-mode: vertical-rl; letter-spacing: 2px; padding: 2px; font-weight: 700; }
.inheritor .info { flex: 1; min-width: 0; }
.inheritor .name { font-size: 19px; font-weight: 800; color: #ffe9a8; letter-spacing: 3px; }
.inheritor .role { font-size: 10px; color: #b39a63; letter-spacing: 1px; margin: 2px 0 8px; }
.inheritor .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.inheritor .tags i { font-style: normal; font-size: 9.5px; color: #e8cc76; letter-spacing: .5px; border: 1px solid rgba(201,153,31,.5); border-radius: 999px; padding: 2px 8px; background: rgba(201,153,31,.12); white-space: nowrap; }
.inheritor .goto { margin-top: 10px; font-size: 11px; color: #ffe9a8; letter-spacing: 1px; }
.inheritor .vision { padding: 10px 16px 14px; font-size: 10.5px; color: #a98f5c; letter-spacing: 1px; border-top: 1px dashed rgba(201,153,31,.35); line-height: 1.8; }

/* ===== 商品卡 ===== */
.goods-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.goods { width: calc(50% - 5px); background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid #efe6cd; display: flex; flex-direction: column; text-decoration: none; }
.goods .pic { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; }
.goods .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.goods .badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 9.5px; color: #ffe9c9; background: var(--red); border-radius: 999px; padding: 2px 9px; letter-spacing: 1px; }
.goods .badge.gold { background: var(--gold-deep); }
.goods .ph { width: 100%; height: 100%; background: radial-gradient(circle at 30% 25%, rgba(201,153,31,.16), transparent 55%), radial-gradient(circle at 75% 80%, rgba(158,42,34,.10), transparent 50%), linear-gradient(160deg, #f6efdd 0%, #efe3c2 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.goods .ph .hint { font-size: 9px; color: #a3905e; letter-spacing: 2px; border: 1px dashed #cdb678; border-radius: 999px; padding: 2px 10px; background: rgba(255,253,248,.6); }
.goods .body { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.goods .nm { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.goods .spec { font-size: 9.5px; color: var(--text-sub); }
.goods .row { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; }
.goods .price { color: var(--red-bright); font-weight: 800; font-size: 16px; }
.goods .price small { font-size: 10px; font-weight: 600; }
.goods .price em { font-style: normal; font-size: 9px; color: #b3a68e; margin-left: 3px; }
.goods .cart { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-grad); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(163,125,20,.4); }

/* ===== 荣誉墙 ===== */
.honor-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.honor { width: calc(50% - 5px); background: var(--card); border-radius: 12px; border: 1px solid var(--border); padding: 14px 12px; display: flex; align-items: center; gap: 10px; box-shadow: 0 3px 14px rgba(61,50,37,.07); }
.honor .medal { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--gold-grad); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 3px rgba(255,244,214,.6), 0 3px 8px rgba(163,125,20,.35); }
.honor .lv { font-size: 9px; color: var(--gold-deep); letter-spacing: 2px; font-weight: 700; }
.honor .tt { font-size: 12px; font-weight: 700; color: var(--gold-dark); line-height: 1.45; }
.fair-line { margin-top: 10px; text-align: center; font-size: 10px; color: var(--text-sub); letter-spacing: 1px; background: #f1e9d4; border-radius: 999px; padding: 7px 10px; line-height: 1.8; }
.fair-line b { color: var(--gold-deep); }

/* ===== 校企合作 ===== */
.coop-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.coop { width: calc(33.333% - 6px); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.coop .nm { font-size: 11px; font-weight: 700; color: var(--gold-dark); line-height: 1.35; }
.coop .role { font-size: 8.5px; color: var(--text-sub); }
.coop .tagline { width: 22px; height: 2px; background: var(--gold); border-radius: 1px; }

/* ===== 品牌故事 / CTA / 藏品 ===== */
.story-bar { border-radius: 12px; padding: 14px 16px; background: linear-gradient(135deg, #33291c, #241d14); color: #d9c69a; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(201,153,31,.4); }
.story-bar .mark { font-size: 15px; color: #ffe9a8; font-weight: 800; letter-spacing: 3px; writing-mode: vertical-rl; border-right: 1px solid rgba(201,153,31,.4); padding-right: 10px; line-height: 1.3; }
.story-bar .desc { font-size: 10.5px; line-height: 1.9; letter-spacing: .5px; }
.story-bar .desc b { color: #ffe9a8; }
.cta { border-radius: 14px; overflow: hidden; position: relative; background: var(--gold-grad); padding: 18px 16px; color: #3d2f14; box-shadow: 0 8px 24px rgba(163,125,20,.28); text-decoration: none; display: block; }
.cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 90% at 85% 10%, rgba(255,248,220,.5), transparent 60%); pointer-events: none; }
.cta .row { display: flex; align-items: center; justify-content: space-between; position: relative; }
.cta .t1 { font-size: 17px; font-weight: 800; letter-spacing: 2px; }
.cta .t2 { font-size: 10px; color: #6b5220; letter-spacing: 1px; margin-top: 3px; }
.cta .btn { background: #3d2f14; color: #f7e3a0; font-size: 12px; padding: 8px 18px; border-radius: 999px; letter-spacing: 2px; white-space: nowrap; }
.treasure { border-radius: 16px; overflow: hidden; background: #241d14; border: 1px solid rgba(201,153,31,.45); box-shadow: 0 12px 32px rgba(36,29,20,.4); }
.treasure .hero { position: relative; }
.treasure .hero img { width: 100%; height: 200px; object-fit: cover; display: block; opacity: .96; }
.treasure .hero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(28,24,20,.9)); }
.treasure .hero .cap { position: absolute; left: 14px; bottom: 10px; right: 14px; color: #f3e6c4; }
.treasure .hero .cap b { font-size: 16px; color: #ffe9a8; letter-spacing: 2px; }
.treasure .hero .cap span { display: block; font-size: 10px; color: #b39a63; margin-top: 3px; letter-spacing: 1px; }
.treasure .meta { padding: 12px 14px 14px; color: #d9c69a; }
.treasure .meta p { font-size: 10.5px; line-height: 1.85; }
.treasure .meta p b { color: #ffe9a8; }
.treasure .acts { display: flex; gap: 8px; margin-top: 10px; }
.treasure .acts a { flex: 1; text-align: center; font-size: 12px; letter-spacing: 2px; padding: 9px 0; border-radius: 999px; text-decoration: none; }
.treasure .acts .a1 { background: var(--gold-grad); color: #3d2f14; font-weight: 700; }
.treasure .acts .a2 { border: 1px solid rgba(232,204,118,.55); color: #e8cc76; }
.treasure .sub { display: flex; gap: 10px; padding: 0 14px 14px; }
.treasure .sub .mini { flex: 1; border: 1px solid rgba(201,153,31,.35); border-radius: 10px; overflow: hidden; position: relative; }
.treasure .sub .mini img { width: 100%; height: 86px; object-fit: cover; display: block; }
.treasure .sub .mini .tag { position: absolute; left: 0; bottom: 0; right: 0; font-size: 9px; color: #ffe9c9; background: rgba(28,24,20,.75); padding: 3px 8px; letter-spacing: 1px; }

/* ===== 页脚 ===== */
.footer { margin-top: 22px; background: #241d14; color: #a98f5c; padding: 18px 16px 20px; font-size: 10.5px; line-height: 1.9; }
.footer .fbrand { color: #e8cc76; font-size: 14px; letter-spacing: 3px; font-weight: 700; margin-bottom: 8px; }
.footer .row { display: flex; gap: 8px; }
.footer .row svg { flex: none; margin-top: 3px; }
.footer .cpy { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(169,143,92,.35); text-align: center; letter-spacing: 1px; color: #7a684a; }

/* ===== TabBar ===== */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 60; background: rgba(36,29,20,.97); backdrop-filter: blur(8px); display: flex; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(201,153,31,.3); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; position: relative; color: #8a7752; }
.tab.on { color: #ffe9a8; }
.tab svg { color: currentColor; }
.tab span { font-size: 9px; color: inherit; letter-spacing: 1px; }
.tab .cart-dot { position: absolute; top: -2px; right: 26%; min-width: 14px; height: 14px; border-radius: 999px; background: var(--red-bright); color: #ffe9c9; font-size: 8.5px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
@media (min-width: 560px) { .tabbar { border-radius: 0 0 24px 24px; } }

/* ============================================================
   分类列表页
   ============================================================ */
.ch-tabs { display: flex; overflow-x: auto; background: var(--card); border-bottom: 1px solid var(--border); padding: 0 8px; scrollbar-width: none; }
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-tabs a { flex: none; padding: 11px 12px; font-size: 13px; color: var(--text-sub); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.ch-tabs a.on { color: var(--gold-dark); font-weight: 700; border-bottom-color: var(--gold); }
.filter-bar { display: flex; gap: 6px; padding: 10px 12px; flex-wrap: wrap; align-items: center; }
.chip { font-size: 11px; color: var(--text-sub); border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.chip.on { background: var(--gold-dark); color: #ffe9a8; border-color: var(--gold-dark); font-weight: 600; }
.filter-lbl { font-size: 10px; color: #b3a68e; letter-spacing: 1px; margin-right: 2px; }
.list-count { font-size: 10.5px; color: var(--text-sub); padding: 0 14px 4px; }
.empty { text-align: center; padding: 60px 20px; color: #b3a68e; font-size: 12px; letter-spacing: 1px; }
.empty .ico { font-size: 34px; margin-bottom: 10px; opacity: .6; }

/* ============================================================
   商品详情页
   ============================================================ */
.pd-gallery { position: relative; background: #241d14; }
.pd-gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.pd-gallery .ph-wrap { width: 100%; aspect-ratio: 3/4; background: radial-gradient(circle at 30% 25%, rgba(201,153,31,.16), transparent 55%), linear-gradient(160deg, #f6efdd 0%, #efe3c2 100%); display: flex; align-items: center; justify-content: center; }
.pd-info { background: var(--card); padding: 14px 14px 6px; }
.pd-price { color: var(--red-bright); font-size: 24px; font-weight: 800; }
.pd-price small { font-size: 13px; }
.pd-price em { font-style: normal; font-size: 11px; color: #b3a68e; font-weight: 400; margin-left: 6px; }
.pd-name { font-size: 16px; font-weight: 700; margin: 6px 0 4px; line-height: 1.5; }
.pd-meta { font-size: 10.5px; color: var(--text-sub); letter-spacing: .5px; }
.pd-badges { display: flex; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.pd-badges i { font-style: normal; font-size: 10px; color: var(--red-bright); border: 1px solid #e3b8b4; background: #fbf0ee; border-radius: 999px; padding: 2px 9px; }
.pd-block { background: var(--card); margin-top: 10px; padding: 14px; }
.pd-block .bt { font-size: 14px; font-weight: 700; color: var(--gold-dark); margin-bottom: 10px; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.pd-block .bt::before { content: ''; width: 3px; height: 14px; background: var(--gold); border-radius: 2px; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg .opt { font-size: 12.5px; padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); cursor: pointer; }
.seg .opt.on { border-color: var(--gold-deep); background: #fdf3d7; color: var(--gold-dark); font-weight: 700; }
.seg .opt small { color: var(--red-bright); font-weight: 700; margin-left: 4px; }
.qty-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.qty-row .lbl { font-size: 12.5px; color: var(--text-sub); }
.qty { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); }
.qty button { width: 34px; height: 32px; border: none; background: transparent; font-size: 16px; color: var(--gold-dark); cursor: pointer; }
.qty button:disabled { color: #d5cbb8; cursor: not-allowed; }
.qty input { width: 44px; height: 32px; border: none; text-align: center; font-size: 13px; background: var(--card); color: var(--ink); font-weight: 600; }
.kv { display: flex; gap: 10px; font-size: 11.5px; line-height: 2.1; }
.kv b { flex: none; color: var(--gold-deep); font-weight: 600; }
.kv span { color: var(--text-sub); }
.pd-story p { font-size: 12px; color: var(--text-sub); line-height: 1.95; }
.pd-story p b { color: var(--gold-dark); }
.pd-act { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 70; background: rgba(255,253,248,.98); backdrop-filter: blur(8px); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
.pd-act .cart-link { flex: none; width: 42px; text-align: center; text-decoration: none; position: relative; color: var(--gold-dark); font-size: 9px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pd-act .cart-link .cart-dot { position: absolute; top: -4px; left: 28px; min-width: 14px; height: 14px; border-radius: 999px; background: var(--red-bright); color: #ffe9c9; font-size: 8.5px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.btn { border: none; border-radius: 999px; font-size: 13px; letter-spacing: 2px; padding: 11px 0; text-align: center; cursor: pointer; text-decoration: none; display: block; }
.btn-add { flex: 1; background: var(--gold-grad); color: #3d2f14; font-weight: 700; }
.btn-buy { flex: 1; background: linear-gradient(135deg, #8c2a22, #b03a2e); color: #ffe9c9; font-weight: 700; }
.btn-line { background: transparent; border: 1px solid rgba(163,125,20,.6); color: var(--gold-deep); }
.btn-dark { background: #3d2f14; color: #f3dfa3; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
body.has-pd-act { padding-bottom: 84px; }

/* ============================================================
   购物车 / 订单
   ============================================================ */
.cart-list { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cart-item { background: var(--card); border-radius: 12px; border: 1px solid #efe6cd; box-shadow: var(--shadow); display: flex; gap: 10px; padding: 10px; }
.cart-item .pic { flex: none; width: 74px; height: 98px; border-radius: 8px; overflow: hidden; }
.cart-item .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item .pic.ph { background: linear-gradient(160deg, #f6efdd, #efe3c2); display: flex; align-items: center; justify-content: center; font-size: 8px; color: #a3905e; letter-spacing: 1px; }
.cart-item .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cart-item .nm { font-size: 13px; font-weight: 600; line-height: 1.45; }
.cart-item .sku { font-size: 10px; color: var(--text-sub); margin: 3px 0 6px; }
.cart-item .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.cart-item .price { color: var(--red-bright); font-weight: 800; font-size: 15px; }
.cart-item .del { border: none; background: transparent; color: #b3a68e; font-size: 10px; cursor: pointer; text-decoration: underline; padding: 4px 0; }
.cart-item .qty { transform: scale(.92); transform-origin: right center; }
.cart-foot { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 70; background: rgba(255,253,248,.98); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 12px; }
.cart-foot .sum { flex: 1; font-size: 11px; color: var(--text-sub); }
.cart-foot .sum b { color: var(--red-bright); font-size: 19px; font-weight: 800; margin-left: 4px; }
.cart-foot .btn { flex: none; padding: 11px 30px; }
.succ-panel { margin: 20px 12px; background: var(--card); border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow); padding: 26px 18px; text-align: center; }
.succ-panel .ok { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; background: var(--gold-grad); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(163,125,20,.35); }
.succ-panel h3 { font-size: 17px; color: var(--gold-dark); letter-spacing: 2px; }
.succ-panel .no { font-size: 11px; color: var(--text-sub); margin: 6px 0 14px; letter-spacing: 1px; }
.succ-panel .amt { font-size: 22px; color: var(--red-bright); font-weight: 800; margin-bottom: 16px; }
.succ-panel .btns { display: flex; gap: 10px; }
.succ-panel .btns .btn { flex: 1; }
.order-card { background: var(--card); border-radius: 12px; border: 1px solid #efe6cd; box-shadow: var(--shadow); margin: 0 12px 10px; padding: 12px; }
.order-card .oh { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed var(--border); margin-bottom: 8px; }
.order-card .no { font-size: 10px; color: var(--text-sub); letter-spacing: .5px; }
.order-card .st { font-size: 10px; color: var(--gold-deep); font-weight: 700; }
.order-card .oi { display: flex; justify-content: space-between; font-size: 11.5px; line-height: 2; color: var(--ink); }
.order-card .oi em { font-style: normal; color: var(--text-sub); }
.order-card .ot { text-align: right; font-size: 12px; margin-top: 6px; }
.order-card .ot b { color: var(--red-bright); font-size: 14px; }

/* ============================================================
   我的
   ============================================================ */
.profile { background: linear-gradient(150deg, #3a2f1e, #241d14); padding: 24px 16px 20px; color: #e9dbb6; display: flex; align-items: center; gap: 14px; }
.profile .ava { flex: none; width: 62px; height: 62px; border-radius: 50%; background: var(--gold-grad); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #3d2f14; font-weight: 800; border: 2px solid rgba(232,204,118,.6); }
.profile .nm { font-size: 17px; font-weight: 700; color: #ffe9a8; letter-spacing: 1px; }
.profile .sub { font-size: 10px; color: #b39a63; margin-top: 3px; }
.profile .login { margin-left: auto; border: 1px solid rgba(232,204,118,.55); color: #e8cc76; font-size: 11px; border-radius: 999px; padding: 6px 16px; letter-spacing: 2px; text-decoration: none; }
.my-menu { background: var(--card); margin: -14px 12px 0; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.my-menu a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; text-decoration: none; border-bottom: 1px solid #f1ead8; font-size: 13px; color: var(--ink); }
.my-menu a:last-child { border-bottom: none; }
.my-menu .mi { width: 30px; height: 30px; border-radius: 9px; background: #fdf3d7; display: flex; align-items: center; justify-content: center; }
.my-menu .ar { margin-left: auto; color: #c9b98d; font-size: 12px; }
.sec-tt { margin: 18px 14px 8px; font-size: 14px; font-weight: 800; color: var(--gold-dark); letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.sec-tt::before { content: ''; width: 3px; height: 14px; background: var(--gold); border-radius: 2px; }

/* ============================================================
   表单（询价 / 预约 / 地址）
   ============================================================ */
.form { background: var(--card); border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow); padding: 16px 14px; margin: 0 12px; }
.f-row { margin-bottom: 12px; }
.f-row label { display: block; font-size: 11.5px; color: var(--gold-dark); font-weight: 600; margin-bottom: 5px; letter-spacing: 1px; }
.f-row label em { font-style: normal; color: var(--red-bright); margin-left: 2px; }
.f-row input, .f-row select, .f-row textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  padding: 9px 12px; font-size: 13px; color: var(--ink); outline: none; font-family: inherit;
}
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { border-color: var(--gold-deep); background: #fffdf8; }
.f-row textarea { height: 72px; resize: none; }
.f-row .err { display: none; font-size: 10px; color: var(--red-bright); margin-top: 4px; }
.f-row.invalid input, .f-row.invalid select { border-color: var(--red-bright); background: #fdf3f2; }
.f-row.invalid .err { display: block; }
.f-tip { font-size: 10px; color: #b3a68e; line-height: 1.8; margin-top: 4px; }
.form .btn { width: 100%; margin-top: 4px; }

/* ============================================================
   通用组件：toast / modal / 标签
   ============================================================ */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(8px); background: rgba(36,29,20,.92); color: #ffe9c9; font-size: 12.5px; letter-spacing: 1px; padding: 10px 22px; border-radius: 999px; z-index: 999; opacity: 0; pointer-events: none; transition: all .25s ease; border: 1px solid rgba(201,153,31,.5); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.modal-mask { position: fixed; inset: 0; background: rgba(28,24,20,.6); z-index: 900; display: none; align-items: flex-end; justify-content: center; }
.modal-mask.show { display: flex; }
.modal { width: 100%; max-width: 480px; background: var(--card); border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 84vh; overflow-y: auto; }
.modal .m-tt { font-size: 15px; font-weight: 800; color: var(--gold-dark); letter-spacing: 2px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.modal .m-close { border: none; background: #f1ead8; color: var(--text-sub); width: 26px; height: 26px; border-radius: 50%; font-size: 13px; cursor: pointer; }
.tag-pill { display: inline-block; font-size: 10px; padding: 2px 10px; border-radius: 999px; background: #fdf3d7; color: var(--gold-deep); font-weight: 600; letter-spacing: 1px; }

/* ===== 传承人 / 荣誉页 ===== */
.hero-ip { background: linear-gradient(150deg, #3a2f1e 0%, #241d14 70%); padding: 22px 16px; color: #e9dbb6; }
.hero-ip .row { display: flex; gap: 16px; align-items: center; }
.hero-ip .photo { flex: none; width: 118px; height: 156px; border-radius: 12px; overflow: hidden; border: 1.5px solid rgba(232,204,118,.65); position: relative; }
.hero-ip .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-ip .photo .seal { position: absolute; right: 5px; bottom: 5px; background: var(--red); color: #ffe9c9; font-size: 8px; border-radius: 5px; padding: 3px 6px; writing-mode: vertical-rl; letter-spacing: 2px; font-weight: 700; }
.hero-ip .name { font-size: 24px; font-weight: 800; color: #ffe9a8; letter-spacing: 4px; }
.hero-ip .role { font-size: 11px; color: #b39a63; margin: 4px 0 10px; letter-spacing: 1px; line-height: 1.7; }
.tag-wall { padding: 4px 16px 20px; background: linear-gradient(150deg, #3a2f1e 0%, #241d14 70%); display: flex; flex-wrap: wrap; gap: 6px; }
.tag-wall i { font-style: normal; font-size: 10px; color: #e8cc76; border: 1px solid rgba(201,153,31,.5); border-radius: 999px; padding: 3px 10px; background: rgba(201,153,31,.12); }
.card-sec { background: var(--card); border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow); padding: 16px 14px; margin: 12px; }
.card-sec .ct { font-size: 15px; font-weight: 800; color: var(--gold-dark); letter-spacing: 2px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card-sec .ct::before { content: ''; width: 3px; height: 15px; background: var(--gold); border-radius: 2px; }
.card-sec p { font-size: 12px; color: var(--text-sub); line-height: 2; }
.card-sec p b { color: var(--gold-dark); }
.card-sec .img-row { display: flex; gap: 8px; margin-top: 10px; }
.card-sec .img-row .im { flex: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.card-sec .img-row img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: #ecd5a2; border-radius: 1px; }
.tl li { list-style: none; position: relative; padding-bottom: 14px; }
.tl li::before { content: ''; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid var(--bg); box-shadow: 0 0 0 2px #ecd5a2; }
.tl li b { display: block; font-size: 12px; color: var(--gold-deep); }
.tl li span { font-size: 11.5px; color: var(--text-sub); line-height: 1.8; }

/* ===== 礼盒页 ===== */
.gift-hero { position: relative; }
.gift-hero img { width: 100%; height: 210px; object-fit: cover; display: block; }
.gift-hero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,24,20,.15), rgba(28,24,20,.85)); }
.gift-hero .cap { position: absolute; left: 16px; bottom: 14px; color: #f7e9c8; }
.gift-hero .cap b { font-size: 20px; letter-spacing: 3px; color: #ffe9a8; display: block; }
.gift-hero .cap span { font-size: 11px; letter-spacing: 1px; }
.tier-bar { margin: 12px 12px 0; background: var(--gold-grad); border-radius: 12px; padding: 12px 14px; color: #3d2f14; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tier-bar .t { font-size: 13px; font-weight: 800; letter-spacing: 2px; }
.tier-bar .d { font-size: 10px; color: #6b5220; margin-top: 2px; letter-spacing: .5px; }
.gift-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px; }
.gift { width: calc(50% - 5px); background: var(--card); border-radius: 12px; border: 1px solid #efe6cd; box-shadow: var(--shadow); overflow: hidden; }
.gift .pic { width: 100%; aspect-ratio: 3/4; position: relative; background: linear-gradient(160deg, #f6efdd, #efe3c2); display: flex; align-items: center; justify-content: center; }
.gift .pic img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.gift .pic .g-ico { font-size: 30px; opacity: .55; }
.gift .bd { padding: 10px 10px 11px; }
.gift .nm { font-size: 12.5px; font-weight: 700; line-height: 1.45; min-height: 34px; }
.gift .sp { font-size: 9.5px; color: var(--text-sub); margin: 3px 0 6px; }
.gift .pr { display: flex; align-items: baseline; justify-content: space-between; }
.gift .pr .p { color: var(--red-bright); font-weight: 800; font-size: 16px; }
.gift .pr .p small { font-size: 10px; }
.gift .pr .q { font-size: 9.5px; color: var(--gold-deep); font-weight: 600; }

/* ===== 响应式 ===== */
@media screen and (max-width: 600px) {
  h1 { font-size: 20px !important; }
  .banner-item img, .banner-theme { height: 160px; }
}
@media print { body { background: #fff; } .tabbar, .pd-act, .cart-foot { display: none; } }