/* ===== 设计变量与公共样式（对应小程序 app.wxss + Vant 主题变量） =====
   rpx 换算口径：小程序 750rpx = 屏宽；H5 用 html { font-size: calc(100vw / 7.5) }，
   即 1rem = 100rpx，本文件所有尺寸按「rpx ÷ 100 = rem」从小程序 wxss 平移，
   保证任意屏宽下与小程序视觉一致。桌面预览封顶 100px 并限宽 750px（见文件末尾）。 */
:root {
  --brand-primary: #8C5A2B;
  --brand-primary-pressed: #6F4520;
  --bg-page: #F7F5F1;
  --bg-card: #FFFFFF;
  --text-primary: #33261A;
  --text-secondary: #6E5F52;
  --text-tertiary: #A79A8C;
  --semantic-success: #2E7D32;
  --semantic-warning: #C0392B;
  --semantic-link: #1F6FEB;
  --border-light: #E8E2D9;

  --spacing-4: 0.08rem;   /* 8rpx */
  --spacing-8: 0.16rem;   /* 16rpx */
  --spacing-12: 0.24rem;  /* 24rpx */
  --spacing-16: 0.32rem;  /* 32rpx */
  --spacing-24: 0.48rem;  /* 48rpx */
  --radius-sm: 0.16rem;   /* 16rpx */
  --radius-md: 0.24rem;   /* 24rpx */

  /* 宋体标题：茶庄气质用于店名/茶品名/区块标题；iOS 宋体为 Songti SC，安卓回退系统 serif */
  --font-serif: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --shadow-card: 0 0.08rem 0.24rem rgba(51, 38, 26, 0.06);
  --hero-empty-bg: linear-gradient(165deg, #B08A5E 0%, #8C5A2B 52%, #6F4520 100%);
  --cover-empty-bg: #EDE6DB;
  --hero-mask: linear-gradient(180deg, rgba(51, 38, 26, 0.32) 0%, rgba(51, 38, 26, 0) 38%, rgba(51, 38, 26, 0.72) 100%);

  --font-body: 0.28rem;    /* 28rpx，老人可读下限 */
  --font-caption: 0.24rem; /* 24rpx */
  --font-title: 0.36rem;   /* 36rpx */
  --font-display: 0.4rem;  /* 40rpx */
}

html { font-size: calc(100vw / 7.5); -webkit-text-size-adjust: 100%; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--font-body);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
}

/* hidden 属性必须压过类选择器的 display（如 .notice/.flavor 的 flex）：
   作者样式表优先级高于 UA 默认的 [hidden]{display:none}，不加 !important 会导致
   「逻辑上隐藏」的元素仍然显示（本次实测：无 sharer 参数时承接条仍出现） */
[hidden] { display: none !important; }

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* 通用两行截断（茶品卡一句话简介） */
.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ===== 按钮（对应 Vant van-button 主题：茶褐主色 / 88rpx 高 / 44rpx 圆角） ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 0.88rem;
  padding: 0 0.48rem;
  border-radius: 0.44rem;
  font-size: 0.3rem;
  font-weight: 500;
  letter-spacing: 0.02rem;
  transition: opacity 0.15s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:active { opacity: 0.85; }
.btn--primary { background: var(--brand-primary); color: #FFFFFF; }
.btn--primary:active { background: var(--brand-primary-pressed); }
.btn--plain {
  background: var(--bg-card);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
}
.btn--block { width: 100%; }

/* ===== 标签（对应 Vant van-tag 白底细边框小圆角） ===== */
.tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid var(--border-light);
  border-radius: 0.08rem;
  padding: 0.04rem 0.16rem;
  font-size: var(--font-caption);
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-card);
  white-space: nowrap;
}
.tag--scene { color: var(--brand-primary); }
/* 分类胶囊（首页用，选中茶褐填充） */
.chip {
  display: inline-flex;
  box-sizing: border-box;
  padding: 0.1rem 0.28rem;
  border: 1px solid var(--border-light);
  border-radius: 999rem;
  font-size: var(--font-caption);
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-card);
  white-space: nowrap;
}
.chip.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #FFFFFF;
  font-weight: 500;
}

/* ===== 轮播（对应小程序原生 swiper：圆点指示器 + 自动播放 + 触摸滑动） ===== */
.carousel { position: relative; overflow: hidden; touch-action: pan-y; }
.carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
  will-change: transform;
}
.carousel__slide { position: relative; width: 100%; flex: 0 0 auto; height: 100%; }
.carousel__slide img,
.carousel__slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__dots {
  position: absolute;
  left: 0; right: 0; bottom: 0.24rem;
  display: flex;
  justify-content: center;
  z-index: 2;
}
.carousel__dot {
  width: 0.12rem; height: 0.12rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 0.06rem;
  transition: background 0.2s;
}
.carousel__dot.is-active { background: #FFFFFF; }

/* ===== 底部弹层（对应 Vant van-popup 底部弹层） ===== */
.modal { position: fixed; inset: 0; z-index: 100; }
.modal[hidden] { display: none; }
.modal__mask {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s;
}
.modal.is-open .modal__mask { opacity: 1; }
.modal .sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.modal.is-open .sheet { transform: translateY(0); }

/* ===== 轻提示（复制链接等反馈，替代小程序 wx.showToast） ===== */
.toast {
  position: fixed;
  left: 50%; bottom: 2.4rem;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.72);
  color: #FFFFFF;
  font-size: var(--font-caption);
  padding: 0.16rem 0.32rem;
  border-radius: 0.16rem;
  z-index: 200;
  max-width: 80vw;
  text-align: center;
}

/* ===== 分享承接提示条（对应 Vant van-notice-bar，茶褐渐变） ===== */
.notice {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--brand-primary) 0%, #B08A5E 100%);
  color: #FFFFFF;
  font-size: var(--font-caption);
  line-height: 1.6;
}
.notice svg { flex: 0 0 auto; font-size: 0.36rem; }

/* ===== 通用卡片：白底细边框轻阴影 ===== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* ===== 桌面预览：封顶字号并限宽居中，避免大屏下元素被放大 ===== */
@media screen and (min-width: 750px) {
  html { font-size: 100px; }
  body { max-width: 750px; margin: 0 auto; }
  .page { max-width: 750px; margin: 0 auto; position: relative; }
}