/* =========================================================
   五子衍宗丸 · 单页落地页样式
   移动端优先，最大宽度 480px，桌面端居中
   ========================================================= */

:root {
  --red: #C8102E;
  --red-deep: #A20C24;
  --red-soft: #FDECEE;
  --gold: #E0A64B;
  --bg: #6E0906;
  --card: #FFF9EF;
  --text: #1A1A1A;
  --sub: #757575;
  --line: #EDEDED;
  --radius: 12px;
  --w: 480px;
  --navh: 52px;      /* 底部导航高度 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; }
input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--red); text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.app {
  max-width: var(--w);
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  /* 底部固定栏高度 + 安全区，避免页脚被压住 */
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
  overflow: hidden;
}

/* ---------------- 首图 ---------------- */
.hero {
  position: relative;
  line-height: 0;
  background: #6E0906;   /* 图片加载前的底色，避免闪白 */
  /* 详情图每页自带一圈相框（深红边 + 内侧亮线），首图若满幅贴边就对不齐，
     这里补同款：2.5% = 480 宽时 12px，与详情图 12px 边框等宽，窄屏等比缩放 */
  padding: 0 2.5%;
}
.hero img {
  display: block;
  width: 100%;
  height: auto;
  /* 相框内侧那道亮线，和详情图内缘一个色系 */
  box-shadow: 0 0 0 1px rgba(255, 226, 206, .38);
}
/* 照片下沿向页面底色过渡，避免图片和卡片之间出现硬边 */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(110,9,6,0) 0%, rgba(110,9,6,.55) 58%, #6E0906 100%);
  pointer-events: none;
}

/* ---------------- 占位提示 ---------------- */
.ph {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  background: #FFF3C4;
  border: 1px dashed #E0A800;
  color: #8A6B00;
  font-size: 0.92em;
  font-style: normal;
}

.imgph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  background: #F6F7F9;
  background-image: repeating-linear-gradient(45deg, #EFF1F4 0 8px, #F6F7F9 8px 16px);
  color: #9AA0A8;
  border: 1px dashed #D3D7DD;
  border-radius: 8px;
}
.imgph__label { font-size: 13px; font-weight: 500; color: #7B828C; }
.imgph__size { font-size: 11px; color: #A2A8B0; }
.imgph--square { aspect-ratio: 1 / 1; }

/* ---------------- 详情图（竖向拼接） ---------------- */
.detail { background: #6E0906; margin: 8px 0 0; }
.detail[hidden] { display: none; }
.detail img {
  display: block;
  width: 100%;
  height: auto;
  /* 上下相邻的切片之间不留缝 */
  margin: 0;
  border: 0;
}

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  margin: 10px 10px 0;
  padding: 14px;
  border: 1px solid rgba(231,191,122,.22);
  box-shadow: 0 8px 22px rgba(26,0,0,.30);
}

/* 商品卡：不再压首图，让药盒自己破框压上去 */
.card.product {
  position: relative;
  z-index: 2;
  margin: 10px 12px 0;
  border-radius: 16px;
  border-color: rgba(231,191,122,.34);
  box-shadow: 0 16px 38px rgba(20,0,0,.46);
  /* 药盒要越过上边框，卡片本身不能裁切 */
  overflow: visible;
  /* 底部不再留白：限时抢购做成一整条横带收尾 */
  padding-bottom: 0;
}

/* 限时抢购从卡片内的一张小方框，改成通栏收底 —— 去掉外面那圈多余的"框" */
.card.product .promo {
  margin: 12px -14px 0;
  padding-top: 8px;
  border-radius: 0 0 15px 15px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  padding-bottom: 0;
}
.card__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card__title::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--red);
}

/* ---------------- 产品信息 ---------------- */
/* 药盒从卡片里探出去，压在首图上；只破上沿，卡片信息区保持原样 */
.product__pic {
  position: relative;
  z-index: 3;
  /* 百分比而不是固定 px：窄屏上盒子不会撑满整张卡片；
     底边落在商品名上方一点，不再往下压 */
  margin: -16% auto 3%;
  width: 60%;
  max-width: 100%;
  text-align: center;
}
.product__pic picture { display: block; }
.product__pic img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  /* 透明底商品图：投影往下方落，压到照片上才有“浮起来”的层次；
     一圈金色描边把盒子和照片分开，盒形更硬朗 */
  box-shadow:
    0 0 0 1px rgba(242,206,140,.9),
    0 0 0 2px rgba(38,4,2,.30);
  filter: drop-shadow(0 16px 22px rgba(20,0,0,.55));
  /* 侧一侧：轻微透视 + 小角度旋转，像盒子被随手放在那儿 */
  transform: perspective(1600px) rotateY(-7deg) rotateZ(-2.4deg);
  transform-origin: 50% 62%;
}
.product__name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
}

.product__price {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.price { display: flex; align-items: baseline; gap: 2px; color: var(--red); }
.price__cur { font-size: 16px; font-weight: 600; }
.price__now { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; }
.price__origin {
  margin-left: 8px;
  font-size: 13px;
  color: #A5A5A5;
  text-decoration: line-through;
}
.price__badge {
  margin-left: auto;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--red-soft);
  color: var(--red);
  font-weight: 500;
}

/* ---------------- 限时优惠（倒计时 + 库存合并为一条） ---------------- */
.promo {
  margin-top: 12px;
  padding: 9px 11px 0;
  border-radius: 10px;
  background: linear-gradient(100deg, #FFEDEA 0%, #FFE3DE 52%, #FFF1EA 100%);
  border: 1px solid rgba(200, 16, 46, .28);
  overflow: hidden;
  /* 边框缓缓呼吸，整条一直在「动」 */
  animation: promoGlow 3.2s ease-in-out infinite;
}
@keyframes promoGlow {
  0%, 100% { border-color: rgba(200, 16, 46, .26); }
  50%      { border-color: rgba(200, 16, 46, .58); }
}
.promo__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 9px;
}
.promo__time {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.promo__time[hidden] { display: none; }
.promo__tag {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
.promo__pre {
  flex-shrink: 0;
  font-size: 12px;
  color: #7A4232;
}
.promo__clock {
  flex-shrink: 0;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 21px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* 常驻脉动：秒数一直在跳，数字也跟着一起「跳」 */
  animation: promoBreath 2s ease-in-out infinite;
}
.promo__tip {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: #8A6250;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promo__stock {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 12px;
  color: #B3122C;
  white-space: nowrap;
}
.promo__fire {
  font-style: normal;
  margin-right: 3px;
  font-size: 13px;
  vertical-align: -2px;
}
.promo__stock b { color: var(--red); font-size: 17px; font-weight: 700; }
/* 窄屏（iPhone SE 一类）只留「限时优惠 + 倒计时 + 仅剩」，省掉补充说明 */
@media (max-width: 400px) {
  .promo__tip { display: none; }
}
/* 底部进度条：两端贴到卡片圆角，被 overflow 裁切；填充部分有流光扫过 */
.promo__bar {
  height: 6px;
  margin: 0 -11px;
  background: #F2D8D4;
  overflow: hidden;
}
.promo__fill {
  position: relative;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #FF8A3D, #E8203A 62%, #C8102E);
  transition: width .6s ease;
  overflow: hidden;
}
.promo__fill::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  animation: promoShine 1.5s linear infinite;
}
@keyframes promoShine {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(240%); }
}
/* 剩不到 5 分钟：数字脉动，紧张感拉满 */
.promo.is-hot .promo__clock { animation: promoPulse 1s ease-in-out infinite; }
.promo.is-hot { animation: promoGlow .9s ease-in-out infinite; }
@keyframes promoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .82; transform: scale(1.045); }
}
@keyframes promoBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* ---------------- 评价 ---------------- */
.reviews__count { font-size: 12px; font-weight: 400; color: var(--sub); }
.reviews__list { display: flex; flex-direction: column; gap: 2px; }
.review {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.review:last-child { border-bottom: none; }
.review__top {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 7px;
}
.review__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EFEFF1;
  color: #7A7A7A;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review__who { flex: 1; min-width: 0; }
.review__name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.35;
}
.review__name { font-size: 13px; color: #444; }
.review__tag {
  padding: 0 5px;
  border-radius: 3px;
  background: #FFF2E2;
  color: #B57A28;
  font-size: 10px;
  line-height: 15px;
  white-space: nowrap;
}
.review__spec {
  margin-top: 1px;
  font-size: 11px;
  color: #ABABAB;
}
.review__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.review__stars { font-size: 11px; color: var(--gold); letter-spacing: 1px; }
.review__date { font-size: 11px; color: #B0B0B0; }
.review__text { font-size: 13px; color: #555; line-height: 1.7; }
.reviews__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.reviews__pager button {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  background: #F4F5F7;
  color: #666;
  font-size: 12px;
}
.reviews__pager button.is-active { background: var(--red); color: #fff; }
.reviews__pager button:disabled { opacity: .4; }

/* 展开 / 收起全部评价 */
.reviews__pager .reviews__more {
  width: 100%;
  height: 34px;
  border-radius: 17px;
  background: #F7F8FA;
  border: 1px solid var(--line);
  color: #666;
  font-size: 12.5px;
  position: relative;
}
.reviews__pager .reviews__more::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  margin-bottom: 2px;
  border: solid #B0B0B0;
  border-width: 0 1.3px 1.3px 0;
  transform: rotate(45deg);
  vertical-align: middle;
}
.reviews__pager .reviews__more[data-more="0"]::after {
  transform: rotate(-135deg);
  margin-bottom: -2px;
}

/* ---------------- 表单 ---------------- */
.field {
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.field--block { display: block; }
.field--row { align-items: center; }
.field__label {
  flex: 0 0 72px;
  font-size: 13px;
  color: #333;
  padding-top: 2px;
}
.field__label b { font-weight: 500; }
.field__input { flex: 1; min-width: 0; }
.field__input input,
.field__input textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  /* 16px：iOS Safari 低于 16px 会在聚焦时自动放大页面 */
  font-size: 16px;
  padding: 4px 0;
  resize: none;
}
.field__input input::placeholder,
.field__input textarea::placeholder { color: #BDBDBD; font-size: 13px; }

/* 省市区 */
.region { display: flex; gap: 6px; }
.region select {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #FAFAFA;
  font-size: 13px;
  padding: 0 4px;
  color: #333;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23AAA' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 16px;
}
.region select:invalid, .region select option[value=""] { color: #BDBDBD; }

/* 规格 */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.spec {
  position: relative;
  padding: 17px 6px 9px;      /* 顶部留出角标高度，角标贴在卡片右上角内侧 */
  border: 1px solid #E4E6EA;
  border-radius: 9px;
  background: #FCFCFD;
  text-align: center;
  transition: all .18s;
  overflow: hidden;            /* 角标跟着卡片圆角裁切，不会伸到卡片外 */
}
.spec.is-active {
  border-color: var(--red);
  background: var(--red-soft);
  box-shadow: 0 0 0 1px var(--red) inset;
}
.spec__name { font-size: 13px; font-weight: 500; color: #333; }
.spec__qty { font-size: 11px; color: var(--sub); margin-top: 1px; }
.spec__price { font-size: 15px; font-weight: 700; color: var(--red); margin-top: 5px; }
.spec__origin { font-size: 10px; color: #B5B5B5; text-decoration: line-through; }
.spec__tag {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  padding: 1px 6px 1px 5px;
  border-radius: 0 8px 0 8px;   /* 右上角跟卡片圆角贴合 */
  background: linear-gradient(100deg, #E23A4E, #C8102E);   /* 红渐变，更立体 */
  box-shadow: 0 1px 4px rgba(200, 16, 46, .28);
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  opacity: 0;
}
/* 角标前的火焰图标 */
.spec__tag::before {
  content: "🔥";
  font-size: 9px;
  line-height: 1;
  margin-right: 2px;
}
.spec__tag.is-show { opacity: 1; }
.spec__check {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
  opacity: 0;
  transition: opacity .18s;
}
.spec.is-active .spec__check { opacity: 1; }

/* 金额（合并进付款方式标题行） */
.pay__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pay__head .field__label { padding-top: 0; }
.pay__total { font-size: 12px; color: #9A9A9A; }
.pay__num {
  margin-left: 4px;
  font-size: 19px;
  font-weight: 700;
  color: var(--red);
}
.pay__num b { font-weight: 700; }

/* 付款方式 */
.pays { display: flex; gap: 8px; margin-top: 8px; }
.pay {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border: 1px solid #E4E6EA;
  border-radius: 9px;
  background: #FCFCFD;
  cursor: pointer;
  transition: all .18s;
  min-width: 0;
}
.pay.is-active { border-color: var(--red); background: var(--red-soft); }
.pay input { position: absolute; opacity: 0; pointer-events: none; }
.pay__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA0A8;
  transition: color .18s;
}
.pay.is-active .pay__icon { color: var(--red); }
.pay__icon--wx { width: 22px; }
.pay__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pay__text { font-size: 13px; color: #333; white-space: nowrap; }
.pay__hint { font-size: 10px; color: #A8A8A8; white-space: nowrap; }
.pay__check {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent var(--red) transparent transparent;
  border-radius: 0 9px 0 0;
  opacity: 0;
  transition: opacity .18s;
}
.pay__check::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -20px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}
.pay.is-active .pay__check { opacity: 1; }
.pay__tip { font-size: 11px; color: #ABABAB; margin-top: 8px; line-height: 1.5; }

/* 邮费 */
.ship {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #F7F8FA;
  font-size: 11px;
  color: #8A8F98;
  line-height: 1.55;
}

/* 协议 */
.agree {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  color: #777;
  line-height: 1.5;
}
.agree input { position: absolute; opacity: 0; pointer-events: none; }
.agree__box {
  width: 15px;
  height: 15px;
  border: 1px solid #C9CCD1;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  background: #fff;
}
.agree input:checked + .agree__box { background: var(--red); border-color: var(--red); }
.agree input:checked + .agree__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}
.agree__text a { color: var(--red); }

/* 提交 */
.promo-note[hidden],
.promo[hidden] { display: none; }
.promo-note {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #FFF7F0;
  border: 1px solid #FBE3C8;
  font-size: 12px;
  color: #8A6250;
  text-align: center;
}
.promo-note b {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--red);
  font-weight: 700;
}

.submit {
  width: 100%;
  height: 48px;
  margin-top: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, #D6152F, #B50C26);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 6px 16px -6px rgba(200,16,46,.55);
  transition: transform .12s, opacity .2s;
}
.submit:active { transform: scale(.985); }
.submit:disabled { opacity: .6; box-shadow: none; }

/* ---------------- 最近下单（页内滚动榜） ---------------- */
.marquee__box {
  height: 156px;   /* 4 行 × (34px + 5px)，多出的行正好被裁掉 */
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%);
          mask-image: linear-gradient(180deg, transparent, #000 7%);
}
.marquee__list { animation: marqueeUp 30s linear infinite; }
.marquee__list:hover { animation-play-state: paused; }
@keyframes marqueeUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.shot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin-bottom: 5px;
  padding: 0 10px 0 7px;
  border-radius: 5px;
  background: #F6F7F9;
  font-size: 12px;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
}
.shot__avatar {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  font-weight: 500;
  opacity: .9;
}
.shot__body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shot b { color: #333; font-weight: 500; }
.shot__time { color: #AFAFAF; margin: 0 4px; }
.shot__spec { color: var(--red); }
.shot__money { color: var(--red); font-weight: 600; margin-left: 4px; }
.shot__money.is-empty { color: #BDBDBD; font-weight: 400; }

/* ---------------- 左侧悬浮下单播报 ----------------
   固定在屏幕左侧、竖向一叠，同时显示 2 条，新的从上面进来、旧的淡出。
   位置故意贴着内容区左边缘（桌面端也跟着 480 的盒子走），不挡右侧文字。 */
.buybar {
  position: fixed;
  top: 30vh;
  left: max(10px, calc(50% - var(--w) / 2 + 10px));
  z-index: 35;
  display: flex;
  max-width: min(300px, calc(var(--w) - 20px));
  pointer-events: none;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .3s ease, transform .3s ease;
}
.buybar.is-in { opacity: 1; transform: none; }
.buybar[hidden] { display: none; }
body.is-locked .buybar,
body.is-typing .buybar {
  opacity: 0;
  transform: translateX(-20px);
  pointer-events: none;
}
.buybar__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.buybar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 7px 11px;
  border-radius: 10px;
  background: rgba(34,35,40,.8);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  /* 只做展示，点击穿透到下面的表单/按钮，避免挡住输入框；只有 × 可点 */
  pointer-events: none;
  animation: barIn .32s cubic-bezier(.2,.8,.3,1) both;
}
.buybar__item.is-out { animation: barOut .26s ease both; }
@keyframes barIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes barOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateX(-10px); }
}
/* 「姓名 + N分钟前已购买」，不带头像和套餐信息 */
.buybar__text {
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255,255,255,.92);
}
.buybar__text b {
  font-weight: 600;
  color: #fff;
  margin-right: 5px;
}
/* 关闭按钮每张都占着位置（宽度不跳），只显示最上面那张的 */
.buybar__close {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  line-height: 15px;
  font-size: 13px;
  text-align: center;
  color: rgba(255,255,255,.45);
  visibility: hidden;
  pointer-events: none;
}
.buybar__item:first-child .buybar__close {
  visibility: visible;
  pointer-events: auto;
}

/* ---------------- 订单查询 ---------------- */
.query__row { display: flex; gap: 8px; }
.query__row input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #E4E6EA;
  border-radius: 8px;
  background: #FAFAFA;
  font-size: 16px;
  outline: none;
}
.query__row input:focus { border-color: var(--red); background: #fff; }
.query__row button {
  flex: 0 0 78px;
  height: 38px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
}
.query__result { margin-top: 10px; font-size: 13px; color: #666; }
.query__result .qitem {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: #777;
}
.query__result .qitem b { color: #333; font-weight: 500; }
.query__result .qempty { color: #A8A8A8; font-size: 12px; }

/* ---------------- 页脚 ---------------- */
.footer {
  margin-top: 8px;
  padding: 18px 24px 22px;
  background: transparent;
  font-size: 11px;
  color: rgba(246,220,182,.55);
  line-height: 1.9;
  text-align: center;
}
.footer__note {
  margin-top: 0;
  color: rgba(246,220,182,.45);
  line-height: 1.6;
}
/* 首页页脚备案号：法定要展示，所以压到最小——一行 10px 半透明小字，不额外撑红底 */
.icpline {
  margin: 12px 0 0;
  padding: 0 20px;
  text-align: center;
  font-size: 10px;
  line-height: 1.6;
  color: rgba(246, 220, 182, .40);
}
.icpline a { color: inherit; text-decoration: none; }
.icpline[hidden] { display: none; }

/* 二级页「返回商品页」仍用这一行（首页页脚已不再放链接） */
.footer__links {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  color: #B8B8B8;
}
.footer__links a { color: #8A8A8A; }
.footer__links i { font-style: normal; color: #D8D8D8; }
.safe-bottom {
  height: calc(var(--navh) + env(safe-area-inset-bottom) + 8px);
}

/* ---------------- 底部导航 ---------------- */
.fixednav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--w);
  display: flex;
  gap: 1px;
  background: #fff;
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 40;
  box-shadow: 0 -2px 12px rgba(0,0,0,.04);
}
.fixednav__item {
  flex: 1;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  color: #444;
}
.fixednav__item--main {
  background: var(--red);
  color: #fff;
  font-weight: 500;
  gap: 8px;
  height: 56px;
}
.fixednav__icon { font-size: 16px; line-height: 1; }
/* 按钮内两行：主 CTA + 限时提示 */
.fixednav__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.15;
}
.fixednav__cta {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.fixednav__hint {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .84);
}
.fixednav__hint[hidden] { display: none; }
.fixednav__hint b {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}

/* ---------------- 弹层 ---------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal.is-open { display: flex; }
.modal__mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  animation: fadeIn .2s ease;
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 330px;
  max-height: 76vh;
  overflow-y: auto;
  padding: 22px 18px 18px;
  background: #fff;
  border-radius: 14px;
  animation: popIn .24s cubic-bezier(.2,.9,.3,1.1);
  -webkit-overflow-scrolling: touch;
}
.modal__panel--tall { padding-top: 18px; }
.modal__panel--center { text-align: center; padding: 26px 20px 20px; }
.modal__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  font-size: 20px;
  color: #B5B5B5;
  line-height: 1;
}
.modal__title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 14px;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.faq dl { padding: 10px 0; border-bottom: 1px solid var(--line); }
.faq dt { font-size: 13px; font-weight: 500; color: #333; }
.faq dd { margin: 5px 0 0; font-size: 12px; color: #777; line-height: 1.7; }

.doc p { font-size: 12.5px; color: #555; line-height: 1.85; margin-bottom: 8px; }
.doc p b { color: #333; font-weight: 600; }
.doc__notice { font-size: 11px !important; color: #A8A8A8 !important; margin-top: 12px; }

.done__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #EAF7EE;
  color: #2BA24C;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.done__order { font-size: 13px; color: #666; }
.done__order b { color: #333; font-weight: 600; letter-spacing: .5px; }
.done__tip { margin-top: 8px; font-size: 12px; color: #999; line-height: 1.7; }
.done__btn {
  width: 100%;
  height: 42px;
  margin-top: 18px;
  border-radius: 21px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
}

/* ---------------- 轻提示 ---------------- */
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.94);
  max-width: 260px;
  padding: 11px 18px;
  border-radius: 9px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 200;
}
.toast.is-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------------- 大屏适配 ---------------- */
@media (min-width: 520px) {
  .app { box-shadow: 0 0 30px rgba(0,0,0,.07); }
  body { background: #E4E6E9; }
}

/* ---------------- 微信支付未开通 ---------------- */
.pay.is-disabled { opacity: .5; }
.pay.is-disabled .pay__hint::after { content: " · 待开通"; color: var(--red); }

/* ---------------- 微信内打开引导 ---------------- */
.browser__tip { font-size: 13px; color: #666; line-height: 1.7; margin: 2px 0 14px; }
.browser__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
  margin: 0 0 10px;
  text-align: left;
}
.browser__step b {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.browser__dots {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid #DDD;
  border-radius: 4px;
  font-size: 11px;
  line-height: 18px;
}
.browser__note { font-size: 11px; color: #999; margin: 12px 0 16px; line-height: 1.6; }

/* ---------------- 二级页：资质与备案 ---------------- */
.subbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 8px;
  background: var(--red);
  color: #fff;
}
.subbar__back {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subbar__arrow {
  width: 9px;
  height: 9px;
  margin-left: 4px;
  border: solid #fff;
  border-width: 0 0 1.8px 1.8px;
  transform: rotate(45deg);
}
.subbar__title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}
.subbar__hold { width: 34px; }

.subcard { padding: 16px 14px; }
.subcard .card__title { margin-bottom: 8px; }
.subcard__tip {
  margin-top: 10px;
  font-size: 11px;
  color: #B0B0B0;
  line-height: 1.6;
}

.kv { margin: 0; }
.kv__row {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.7;
}
.kv__row:last-child { border-bottom: 0; }
.kv dt {
  flex: 0 0 108px;
  color: #9A9A9A;
}
.kv dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #333;
  word-break: break-all;
}

.lics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 10px;
}
.lic { margin: 0; }
.lic img,
.lic__ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #FAFAFB;
}
/* 证照多为横版扫描件，用 contain 保证四角完整可读，不裁切 */
.lic img {
  background: #FFFFFF;
  object-fit: contain;
}
.lic__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: #B0B0B0;
}
.lic__ph em {
  font-style: normal;
  padding: 0 5px;
  border-radius: 3px;
  background: #FFF9E0;
  border: 1px dashed #E6CC7A;
  color: #8A6B00;
}
.lic figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: #888;
  text-align: center;
}