/* 设计变量 + 重置 + 跨页面通用组件 */
:root {
  --paper:      #f6f2e9;
  --surface:    #fffdf7;
  --ink:        #2b2924;
  --ink-soft:   #6f6859;
  --ink-faint:  #9a9284;
  --line:       #e5ddcb;
  --green:      #3d5c48;
  --green-deep: #2c4435;
  --clay:       #a4522b;
  --gold:       #b58a3c;
  --radius:     14px;
  --shadow:     0 1px 2px rgba(60,50,30,.05), 0 8px 24px rgba(60,50,30,.06);
  --serif:      "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans:       -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }

.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }

/* 按钮 */
.btn {
  border: 0; border-radius: 10px; padding: 11px 20px; cursor: pointer;
  background: var(--green); color: #fff; font-size: 15px; letter-spacing: .06em;
  transition: background .15s ease;
}
.btn:hover { background: var(--green-deep); }
.btn:disabled { background: #c3bcac; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--green-deep); border: 1px solid var(--line); }
.btn.ghost:hover { background: rgba(61,92,72,.06); }
.btn.danger { background: transparent; color: #a33; border: 1px solid #e5c9c9; }
.btn.danger:hover { background: #fbf0f0; }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

/* 标签 / 价格 / 状态 */
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.tag {
  font-size: 11.5px; padding: 2px 8px; border-radius: 4px;
  background: rgba(61,92,72,.08); color: var(--green-deep); border: 1px solid rgba(61,92,72,.16);
}
.price { font-family: var(--serif); color: var(--clay); font-size: 19px; font-weight: 600; }
.price small { font-size: 12px; font-weight: 400; }
.price .none { color: var(--ink-faint); font-size: 13px; font-family: var(--sans); }

.badge { font-size: 11.5px; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.badge.in_stock { background: rgba(61,92,72,.1);   color: var(--green-deep); }
.badge.presale  { background: rgba(181,138,60,.14); color: #8a6516; }
.badge.sold_out { background: rgba(0,0,0,.06);      color: var(--ink-faint); }

/* 空状态 / 大图 / 提示条 */
.empty { text-align: center; padding: 70px 20px; color: var(--ink-faint); }
.empty .mark { font-family: var(--serif); font-size: 40px; opacity: .35; margin-bottom: 12px; }

.lightbox {
  position: fixed; inset: 0; background: rgba(20,18,14,.9); display: grid; place-items: center;
  z-index: 50; padding: 24px; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 6px; }

.toast {
  position: fixed; left: 50%; top: 22px; transform: translateX(-50%);
  background: #2b2924; color: #fff; padding: 9px 18px; border-radius: 8px;
  font-size: 13.5px; z-index: 90; box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

/* 下单联系弹层 */
.contact-mask {
  position: fixed; inset: 0; background: rgba(30,26,18,.46);
  display: grid; place-items: center; z-index: 60; padding: 24px;
}
.contact-card {
  background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line);
  padding: 26px 26px 22px; width: 100%; max-width: 320px; text-align: center;
  box-shadow: 0 24px 60px rgba(40,32,16,.26);
}
.contact-card h3 {
  font-family: var(--serif); font-size: 17px; letter-spacing: .14em;
  margin: 0 0 18px; color: var(--green-deep);
}
.contact-card .wx-label { font-size: 12px; color: var(--ink-faint); letter-spacing: .12em; margin-bottom: 7px; }
.contact-card .wx-row {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px;
}
.contact-card code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px;
  background: rgba(61,92,72,.07); border: 1px solid rgba(61,92,72,.16);
  padding: 7px 12px; border-radius: 8px; color: var(--green-deep); letter-spacing: .04em;
}
.contact-card .wx-note { font-size: 13px; color: var(--ink-soft); margin: 0 0 8px; }
.contact-card .wx-note.dim { color: var(--ink-faint); font-size: 12.5px; }
.contact-card .btn.ghost { width: 100%; margin-top: 12px; }

/* 二维码：留白要足，微信长按识别对图片清晰度和边距都有要求 */
.contact-card .qr-wrap {
  width: 190px; margin: 0 auto 10px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.contact-card .qr-wrap img { width: 100%; display: block; }
.contact-card .qr-tip {
  font-size: 12.5px; color: var(--clay); letter-spacing: .1em; margin: 0 0 14px;
}
.contact-card .wx-label { margin-top: 4px; }