/* ============================================================
   顾客端 · 设计系统
   参考：DoorDash（iOS 1290×2796）
   语言：纯白底 / 大图 / 胶囊按钮 / 大圆角 / 轻投影 / 红色主行动
   ────────────────────────────────────────────────────────────
   本文件自成一体，不依赖任何共享 token。
   类名统一 c- 前缀。禁止引用商家端(m-)或骑手端(r-)的类。
   ============================================================ */

:root {
  --c-bg:          #FFFFFF;
  --c-surface:     #FFFFFF;
  --c-line:        #F0F0F0;
  --c-line-strong: #E4E4E4;
  --c-text:        #191919;
  --c-text-2:      #6B6B6B;
  --c-text-3:      #9A9A9A;

  --c-primary:       #EB1700;   /* 实测自 Continue 按钮 rgb(235,23,0) */
  --c-primary-press: #C91300;
  --c-primary-weak:  #FFF0ED;
  --c-accent:        #5A31F4;   /* 会员 / 进度点缀 */

  --c-success: #2F7A4D;  --c-success-bg: #E4F2E8;
  --c-warning: #8A5B00;  --c-warning-bg: #FCEFCB;
  --c-danger:  #B4232A;  --c-danger-bg:  #FBE3E3;

  --r-card:  14px;
  --r-img:   12px;
  --r-input: 12px;
  --r-pill:  999px;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-pop:  0 10px 30px rgba(0, 0, 0, .12);

  --fs-1: 24px; --fs-2: 18px; --fs-3: 16px;
  --fs-4: 14px; --fs-5: 13px; --fs-6: 12px; --fs-7: 11px;

  --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
}

.c-page {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--fs-4);
  padding: var(--sp-4);
}

/* ── 排版 ── */
.c-h1 { font-size: var(--fs-1); font-weight: 700; letter-spacing: -.02em; }
.c-h2 { font-size: var(--fs-2); font-weight: 700; }
.c-h3 { font-size: var(--fs-3); font-weight: 600; }
.c-meta { font-size: var(--fs-5); color: var(--c-text-2); }
.c-label { font-size: var(--fs-6); color: var(--c-text-2); }

/* ── 按钮：48px 完全胶囊，移动端唯一主动作 ── */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.c-btn:hover  { background: var(--c-primary-press); }
.c-btn:active { background: var(--c-primary-press); transform: scale(.985); }
.c-btn:disabled { background: #EDEDED; color: #AEAEAE; cursor: not-allowed; transform: none; }

.c-btn--ghost {
  background: transparent;
  border: 1px solid var(--c-line-strong);
  color: var(--c-text);
  font-weight: 600;
}
.c-btn--ghost:hover { background: #FAFAFA; }

.c-btn--text {
  width: auto; height: auto; padding: 0;
  background: none; color: var(--c-primary);
  font-size: var(--fs-5); font-weight: 600;
}

/* ── 卡片：大圆角 + 轻投影（顾客端唯独有投影的一层）── */
.c-card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.c-card__body { padding: var(--sp-4); }
.c-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #F2F2F2;
  object-fit: cover;
}

/* ── 餐厅列表行 ── */
.c-rest { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; }
.c-rest__thumb {
  width: 76px; height: 76px;
  border-radius: var(--r-img);
  background: #F2F2F2;
  flex: none;
}
.c-rest__name { font-size: var(--fs-3); font-weight: 600; }
.c-rest__meta { font-size: var(--fs-5); color: var(--c-text-2); margin-top: 2px; }
.c-rest__tags { display: flex; gap: 6px; margin-top: var(--sp-2); flex-wrap: wrap; }

/* ── 标签：柔和底 + 圆角 6，比商家端更圆更淡 ── */
.c-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: 6px;
  font-size: var(--fs-6);
  font-weight: 500;
  background: var(--c-success-bg);
  color: var(--c-success);
}
.c-chip--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.c-chip--danger  { background: var(--c-danger-bg);  color: var(--c-danger); }
.c-chip--neutral { background: #F4F4F4;             color: var(--c-text-2); }
.c-chip--accent  { background: #EFEBFF;             color: var(--c-accent); }

/* ── 菜品行 + 数量加减 ── */
.c-dish { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; }
.c-dish__name { font-size: var(--fs-3); font-weight: 600; }
.c-dish__price { font-size: var(--fs-4); font-weight: 600; margin-top: 2px; }
.c-qty { display: inline-flex; align-items: center; gap: var(--sp-3); }
.c-qty__btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  background: #fff;
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.c-qty__val { font-size: var(--fs-4); font-weight: 600; min-width: 14px; text-align: center; }

/* ── 输入框 ── */
.c-input {
  width: 100%;
  height: 46px;
  padding: 0 var(--sp-3);
  background: #FAFAFA;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-input);
  font-size: var(--fs-4);
}
.c-input::placeholder { color: var(--c-text-3); }
.c-input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-weak); }

/* ── 订单进度时间轴（映射 orders.status）── */
.c-timeline { display: flex; align-items: flex-start; }
.c-timeline__step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.c-timeline__step::before {
  content: "";
  position: absolute;
  top: 11px; right: 50%;
  width: 100%; height: 2px;
  background: var(--c-line);
}
.c-timeline__step:first-child::before { display: none; }
.c-timeline__step.is-done::before,
.c-timeline__step.is-current::before { background: var(--c-primary); }
.c-timeline__dot {
  position: relative; z-index: 1;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-line);
}
.c-timeline__step.is-done .c-timeline__dot { background: var(--c-primary); border-color: var(--c-primary); }
.c-timeline__step.is-current .c-timeline__dot { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-weak); }
.c-timeline__label { font-size: var(--fs-6); color: var(--c-text-3); text-align: center; }
.c-timeline__step.is-done .c-timeline__label { color: var(--c-text); font-weight: 500; }
.c-timeline__step.is-current .c-timeline__label { color: var(--c-primary); font-weight: 600; }

/* ── 底部 Tab ── */
.c-tabbar { display: flex; height: 52px; background: #fff; border-top: 1px solid var(--c-line); }
.c-tabbar__item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  font-size: var(--fs-7);
  color: var(--c-text-3);
  cursor: pointer;
}
.c-tabbar__item.is-active { color: var(--c-primary); font-weight: 500; }
.c-tabbar__item svg { width: 22px; height: 22px; }

/* ── 空状态 ── */
.c-empty {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-3);
  padding: 40px var(--sp-5);
  text-align: center;
}
.c-empty__icon { width: 56px; height: 56px; color: #C9C9C9; }
.c-empty__title { font-size: var(--fs-3); font-weight: 600; }
.c-empty__desc { font-size: var(--fs-5); color: var(--c-text-2); line-height: 1.6; max-width: 260px; }

/* ── 布局辅助 ── */
.c-row { display: flex; align-items: center; gap: var(--sp-2); }
.c-row--end { justify-content: flex-end; }
.c-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.c-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.c-stack--sm { gap: var(--sp-3); }
.c-divider { height: 1px; background: var(--c-line); }

/* ============================================================
   以下为页面级组件（顾客端前后台页面共用）
   仍然只用 c- 前缀；不改动上面的 token 与基础组件。
   ============================================================ */

/* 隐藏属性必须压过组件的 display（组件默认 display 会覆盖 UA 的 [hidden]） */
[hidden] { display: none !important; }

/* ── App 壳：手机优先，桌面居中 480px ── */
body.c-body {
  background: var(--c-bg);
  min-height: 100vh;
}
.c-app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--c-bg);
}
@media (min-width: 640px) {
  .c-app {
    border-left: 1px solid var(--c-line);
    border-right: 1px solid var(--c-line);
    box-shadow: 0 0 60px rgba(0, 0, 0, .05);
  }
}
.c-main {
  flex: 1 0 auto;
  padding: 0 0 32px;
  min-width: 0;
}
.c-main--tabs      { padding-bottom: calc(52px + 40px + env(safe-area-inset-bottom)); }
.c-main--bar       { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.c-main--plain     { padding: 0 0 16px; }
.c-main--bar.c-main--plain { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.c-main--search    { padding-bottom: calc(52px + 24px + env(safe-area-inset-bottom)); }
.c-main--center    { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 20px; }

/* ── 顶栏：白色磨砂、滚动吸附 ── */
.c-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.c-topbar--line { border-bottom: 1px solid var(--c-line); }
.c-topbar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 16px;
}
.c-topbar__inner--home { min-height: 64px; padding: 12px 16px; gap: 12px; }
.c-topbar__title {
  flex: 1;
  text-align: center;
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: -.01em;
}
.c-topbar__title--left { text-align: left; font-size: var(--fs-2); font-weight: 700; padding-left: 2px; }
.c-topbar__spacer { width: 40px; height: 40px; flex: none; }

/* ── 圆形图标按钮 ── */
.c-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #F5F5F5;
  color: var(--c-text);
  cursor: pointer;
  transition: background .15s ease;
}
.c-iconbtn:hover { background: #EDEDED; }
.c-iconbtn svg { width: 20px; height: 20px; }
.c-iconbtn--quiet { background: transparent; }
.c-iconbtn--quiet:hover { background: #F5F5F5; }

/* ── 首页顶部地址 ── */
.c-addressbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 4px 6px 4px 2px;
  border-radius: 10px;
}
.c-addressbtn:hover { background: #FAFAFA; }
.c-addressbtn__icon { width: 22px; height: 22px; color: var(--c-primary); flex: none; }
.c-addressbtn__icon svg { width: 22px; height: 22px; }
.c-addressbtn__text { display: flex; flex-direction: column; min-width: 0; }
.c-addressbtn__label { font-size: var(--fs-7); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-3); }
.c-addressbtn__value {
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}
.c-addressbtn__chev { width: 18px; height: 18px; color: var(--c-text-2); flex: none; }
.c-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8365, var(--c-primary));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.c-avatar--lg { width: 64px; height: 64px; font-size: 24px; }

/* ── 首页 ── */
.c-home { padding: 4px 16px 8px; }
.c-searchlink {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: #F5F5F5;
  color: var(--c-text-3);
  font-size: var(--fs-4);
}
.c-searchlink svg { width: 19px; height: 19px; flex: none; }
.c-home__greet {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 20px 2px 12px;
  line-height: 1.2;
}
.c-home__banner:not(:empty) { margin-bottom: 16px; }
.c-home__banner:empty { display: none; }

/* 进行中订单横幅 */
.c-activebanner {
  display: block;
  position: relative;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: linear-gradient(135deg, #FFF3EF 0%, #FFE7E0 100%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.c-activebanner::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -34px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(235, 23, 0, .07);
}
.c-activebanner__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; }
.c-activebanner__eta { font-size: var(--fs-6); font-weight: 600; color: var(--c-primary); }
.c-activebanner__title { margin-top: 8px; font-size: var(--fs-3); font-weight: 700; letter-spacing: -.01em; position: relative; }
.c-activebanner__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: var(--fs-5);
  color: var(--c-text-2);
  position: relative;
}
.c-activebanner__link { color: var(--c-primary); font-weight: 700; white-space: nowrap; }
.c-activebanner__track {
  position: relative;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(235, 23, 0, .14);
  overflow: hidden;
}
.c-activebanner__track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-primary);
  transition: width .4s ease;
}

/* ── 横向筛选 chips ── */
.c-scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 16px 12px;
  margin: 0 -16px;
  scrollbar-width: none;
}
.c-scroller::-webkit-scrollbar { display: none; }
.c-scroller--wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.c-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: #F4F4F4;
  color: var(--c-text);
  font-size: var(--fs-5);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.c-filter:hover { background: #ECECEC; }
.c-filter.is-active { background: #191919; color: #fff; }
.c-filter[aria-pressed="true"] { background: #191919; color: #fff; }
.c-filter--sm { height: 32px; padding: 0 12px; font-size: var(--fs-6); }
.c-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* ── 区块标题 ── */
.c-section { padding: 0 16px; }
.c-section--flush { padding: 0; }
.c-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 10px;
}
.c-section__title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.c-section__meta { font-size: var(--fs-6); color: var(--c-text-3); margin-bottom: 10px; }
.c-section__meta:empty { display: none; }

/* ── 餐厅卡片（首页 / 搜索结果）── */
/* ── 餐厅卡片：整张卡就是那张照片 ──
   图片满版铺开，底部一层从透明到深的渐变，店名和评分压在渐变上；
   价格、菜系这些"要读的信息"留在下面的白色页脚里。
   这样照片不是"贴在卡片左边的一个小图框"，而是卡片本身。 */
.c-restcard {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .2s ease;
}
.c-restcard:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .09); }
.c-restcard:active { transform: scale(.995); }

.c-restcard--photo {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px -12px rgba(38, 18, 10, .28), 0 2px 6px rgba(38, 18, 10, .06);
}
.c-restcard--photo:hover {
  box-shadow: 0 18px 38px -14px rgba(38, 18, 10, .34), 0 2px 6px rgba(38, 18, 10, .07);
  transform: translateY(-1px);
}
.c-restcard--photo:active { transform: scale(.994); }

.c-restcard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.c-restcard__media .c-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
.c-restcard__media .c-photo.is-loaded { opacity: 1; }
.c-restcard--photo:hover .c-restcard__media .c-photo { transform: scale(1.045); }

/* 没有封面时的兜底：渐变底 + emoji，尺寸按满版给足 */
.c-restcard__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
}

.c-restcard__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(24, 12, 8, .82) 0%,
      rgba(24, 12, 8, .52) 26%,
      rgba(24, 12, 8, .16) 52%,
      rgba(24, 12, 8, 0) 74%),
    linear-gradient(to bottom, rgba(24, 12, 8, .26), rgba(24, 12, 8, 0) 34%);
}
.c-restcard__badge { position: absolute; top: 10px; right: 10px; }
.c-restcard__badge .c-chip {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #2B1B14;
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .14);
}
.c-restcard__caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
}
.c-restcard__caption .c-restcard__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.c-restcard__caption .c-restcard__meta { color: rgba(255, 255, 255, .88); }
.c-restcard__caption .c-dot { color: rgba(255, 255, 255, .55); }
.c-restcard__caption .c-restcard__star svg { color: #FFC24B; }
.c-restcard__caption .c-restcard__fee { color: rgba(255, 255, 255, .78); }
.c-restcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 12px;
}
.c-restcard__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.c-restcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.c-restcard__name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.c-restcard__meta { display: flex; align-items: center; gap: 5px; font-size: var(--fs-6); color: var(--c-text-2); }
.c-restcard__meta svg { width: 12px; height: 12px; color: #F5A623; flex: none; }
.c-restcard__meta .c-dot { color: var(--c-text-3); }
.c-restcard__star { display: inline-flex; align-items: center; padding-top: 1px; }
.c-restcard__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.c-restcard__fee { font-size: var(--fs-6); color: var(--c-text-3); }
.c-restcard-skel { display: block; padding: 10px; border-radius: 20px; }
.c-restcard-skel__body { display: flex; flex-direction: column; gap: 8px; padding: 10px 4px 2px; }

/* 渐变底 + emoji（无图片资产） */
.c-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  background: #F2F2F2;
  font-size: 38px;
  line-height: 1;
  user-select: none;
  overflow: hidden;          /* 实拍图要裁在这个圆角里 */
  position: relative;
}
/* 垫在实拍图下面的 emoji：图加载失败时露出来 */
.c-thumb .c-em {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 实拍图铺满缩略图；没有图时 .c-thumb 里的 emoji 照旧居中 */
.c-thumb .c-photo {
  opacity: 0;
  transition: opacity .18s ease;
  /* ⚠️ 不要给 z-index：加了会在父级堆叠上下文里盖住菜品行右下角那个“+”，
     结果就是有图的菜点不了加购。这里靠 position:relative + DOM 顺序压住兜底 emoji 就够了。 */
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.c-thumb .c-photo.is-loaded { opacity: 1; }
.c-thumb--lg { width: 92px; height: 92px; font-size: 38px; }
.c-thumb--md { width: 56px; height: 56px; font-size: 26px; border-radius: 10px; }
.c-thumb--sm { width: 44px; height: 44px; font-size: 20px; border-radius: 9px; }
.c-thumb--dish {
  width: 76px;
  height: 76px;
  font-size: 32px;
  border-radius: 14px;
  box-shadow: 0 3px 10px -4px rgba(38, 18, 10, .28);
}
.c-thumb--dish .c-photo { transition: opacity .25s ease, transform .45s cubic-bezier(.2, .7, .3, 1); }
.c-dishrow:hover .c-thumb--dish .c-photo { transform: scale(1.06); }

/* restaurant detail meta rating */
.c-rating { display: inline-flex; align-items: center; gap: 4px; color: #B36A00; font-weight: 600; }
.c-rating__star { display: inline-flex; width: 13px; height: 13px; color: #F5A623; }
.c-rating__star svg { width: 13px; height: 13px; }

/* ── 骨架屏 ── */
.c-skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #F2F2F2 25%, #E9E9E9 37%, #F2F2F2 63%);
  background-size: 400% 100%;
  animation: c-skel 1.5s ease infinite;
}
.c-skel--thumb { width: 92px; height: 92px; border-radius: 12px; flex: none; }
@keyframes c-skel {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .c-skel { animation: none; }
  .c-btn, .c-filter, .c-activebanner__track > span { transition: none; }
}

/* ── 提示条 / 错误态 ── */
.c-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  font-size: var(--fs-5);
  line-height: 1.5;
}
.c-alert[hidden] { display: none !important; }
.c-alert--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.c-alert--info { background: #F4F4F4; color: var(--c-text-2); }
.c-alert--success { background: var(--c-success-bg); color: var(--c-success); }
.c-alert__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.c-alert__action {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: #fff;
  color: inherit;
  font-size: var(--fs-6);
  font-weight: 600;
  border: 1px solid currentColor;
}
.c-alert__action:hover { background: rgba(255, 255, 255, .6); }
.c-alert__body { flex: 1; min-width: 0; }
.c-alert__title { font-weight: 600; }
.c-alert__text { display: block; }
.c-alert__hint { display: block; margin-top: 4px; opacity: .85; }

/* ── 底部固定条（Tab 之外的 CTA）── */
.c-bottombar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 45;
  width: 100%;
  max-width: 480px;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.c-bottombar[hidden] { display: none; }
.c-bottombar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.c-bottombar__sum { display: flex; flex-direction: column; min-width: 0; }
.c-bottombar__count { font-size: var(--fs-6); color: var(--c-text-2); }
.c-bottombar__total { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.c-bottombar__cta { width: auto; flex: 1; max-width: 230px; }

/* 底栏左边的购物车图标 + 角标
   图标是 AI 出的四帧精灵图（静止 / 压扁 / 弹起 / 落稳），加购时逐帧播放一次。
   按钮底色用白，是因为贴纸本体是红车身 + 白描边，压在红底上描边会糊掉。 */
.c-cartbtn {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #FFE1D8;
  box-shadow: 0 6px 14px -8px rgba(38, 18, 10, .5);
  transition: transform .16s ease;
}
.c-cartbtn:active { transform: scale(.94); }

.c-cartbtn__art {
  width: 28px;
  height: 28px;
  background-image: url("/customer/static/img/cart-sprite.webp");
  background-size: 400% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
/* 四帧：每帧对应背景横向 33.333% 的位移（400% 尺寸下正好是一格） */
@keyframes c-cart-play {
  0%   { background-position: 0% 0; }
  25%  { background-position: 33.333% 0; }
  50%  { background-position: 66.666% 0; }
  75%  { background-position: 100% 0; }
  100% { background-position: 100% 0; }
}
.c-cartbtn__art.is-playing {
  animation: c-cart-play .34s step-end 1;
}
@media (prefers-reduced-motion: reduce) {
  .c-cartbtn__art.is-playing { animation: none; }
}

.c-cartbtn__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
/* 数量变化时弹一下，让"放进去了"这件事被看见 */
.c-cartbtn__badge.is-pop { animation: c-cartpop .32s cubic-bezier(.2, .8, .3, 1.3); }
@keyframes c-cartpop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .c-cartbtn__badge.is-pop { animation: none; }
}

/* 搜索页的底栏要浮在 tabbar 上面，否则会把它盖掉 */
.c-bottombar--above-tabs { bottom: calc(52px + env(safe-area-inset-bottom)); }
/* 底栏浮在 tabbar 上时，toast 得再往上让一截 */
body.has-cartbar .c-toast { bottom: calc(146px + env(safe-area-inset-bottom)); }
.c-searchpage.has-cartbar { padding-bottom: 78px; }

/* 固定 tabbar */
.c-tabbar--fixed {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 44;
  width: 100%;
  max-width: 480px;
  height: calc(52px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ── 搜索页 ── */
.c-searchpage { padding: 8px 16px 8px; }
.c-searchfield {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 10px 0 13px;
  border-radius: var(--r-pill);
  background: #F5F5F5;
  border: 2px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
.c-searchfield:focus-within { background: #fff; border-color: var(--c-primary); }
.c-searchfield > svg { width: 18px; height: 18px; color: var(--c-text-3); flex: none; }
.c-searchfield__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--fs-4);
}
.c-searchfield__input::-webkit-search-cancel-button { display: none; }
.c-searchfield__input:focus-visible { outline: none; }
.c-searchfield__clear {
  width: 24px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: #DDD;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.c-searchpage__idle { padding-top: 12px; }
.c-recent { padding: 10px 0 18px; }
.c-recent__head { padding-bottom: 10px; }
.c-recent__title { font-size: var(--fs-3); font-weight: 700; }
.c-dishresult {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}
.c-dishresult:last-child { border-bottom: 0; }
.c-dishresult__main { flex: 1; min-width: 0; }
.c-dishresult__name { display: block; font-size: var(--fs-4); font-weight: 600; }
.c-dishresult__sub { display: block; font-size: var(--fs-6); color: var(--c-text-2); margin-top: 2px; }
.c-dishresult__price { display: block; font-size: var(--fs-4); font-weight: 600; margin-top: 2px; }
.c-addbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--c-primary);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease;
}
.c-addbtn:hover { transform: scale(1.06); }
.c-addbtn svg { width: 15px; height: 15px; }
.c-addbtn--static { box-shadow: none; background: var(--c-primary-weak); color: var(--c-primary); }

/* 主厨推荐：一枚小贴纸 + 文字，跟在菜名后面 */
.c-dishpick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 7px;
  padding: 2px 8px 2px 4px;
  border-radius: var(--r-pill);
  background: #FFF6E6;
  color: #96601A;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: 2px;
  white-space: nowrap;
}
.c-dishpick img { display: block; width: 16px; height: 16px; }
.c-dishpick--sm { margin-left: 6px; padding: 1px 7px 1px 3px; font-size: 10px; vertical-align: 1px; }
.c-dishpick--sm img { width: 14px; height: 14px; }

/* ── 首页的优惠条 ──
   横向滑动的小票券卡。左边一条虚线隔开面额，右边是标题和门槛，
   和账户页里那张大券卡是同一套语言，只是压缩了。 */
.c-offers { margin-top: 14px; }
.c-offers .c-section__head { margin-bottom: 8px; }
.c-offers .c-section__title { display: inline-flex; align-items: center; gap: 6px; }
.c-offers__mark { width: 20px; height: 20px; object-fit: contain; }
.c-offers__all {
  font-size: var(--fs-6);
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
  white-space: nowrap;
}

.c-offers__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* ⚠️ 负边距 + 内边距让两边的卡片能滑到屏幕边缘，但 scroll-snap 会无视这层
     padding，把第一张卡直接吸到容器边缘（实测 scrollLeft 变成 16，第一个券
     被裁掉一截）。补一条 scroll-padding-left 才让吸附点和内容对齐。 */
  scroll-padding-left: 16px;
  padding: 2px 16px 4px;
  margin: 0 -16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.c-offers__track::-webkit-scrollbar { display: none; }

/* 券条里唯一的例外：一张券都没有时，用这张占满一行的卡片代替票券 */
.c-offertile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #FFE1D8;
  box-shadow: 0 6px 16px -10px rgba(38, 18, 10, .3);
  text-decoration: none;
  color: inherit;
}
.c-offertile__badge {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-primary-weak);
  color: var(--c-primary);
  font-weight: 800;
  font-size: 14px;
}
.c-offertile__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-offertile__title { font-size: var(--fs-6); font-weight: 700; }
.c-offertile__sub {
  font-size: 11px;
  color: var(--c-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-offertile__chev { flex: none; color: var(--c-text-3); font-size: 20px; }

/* ── 首页的双列餐厅网格 ──
   一屏能看到四家，图在上、决策信息在下，横向比较不用点进去。 */
/* ── 购物车：一家店一组 ──
   每家店一个独立的车，所以购物车页是"若干张卡片叠起来"，
   而不是一页一单。每张卡片自己带小计和结算按钮。 */
.c-cartpage { padding: 8px 16px 32px; }
.c-main--cartlist { padding-bottom: 24px; }

.c-cartgroup {
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px -18px rgba(38, 18, 10, .5), 0 1px 3px rgba(38, 18, 10, .05);
}
.c-cartgroup .c-carthead { padding: 0 0 10px; }
.c-cartlist__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-7);
  color: var(--c-text-3);
  padding: 2px 0 6px;
}
.c-cartgroup__clear {
  border: 0;
  background: none;
  padding: 2px 0;
  color: var(--c-text-3);
  font: inherit;
  font-size: var(--fs-7);
  text-decoration: underline;
  cursor: pointer;
}
.c-cartgroup__sum { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-line); }
.c-cartgroup__cta { margin-top: 12px; width: 100%; }
.c-cartgroup .c-cartlist { padding: 0; }
.c-cartgroup .c-cartline { padding: 10px 0; }

/* ── 口味宫格 ──
   一排方图 + 下面的字，替换掉原来那排文字胶囊。
   图用的是该分类下第一家店的封面，所以"格子背后真的有店"。 */
.c-cuisinetile {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 70px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text-2);
  font: inherit;
  cursor: pointer;
}
.c-cuisinetile__media {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-color: #F2F2F2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
  transition: transform .16s ease, box-shadow .16s ease;
}
.c-cuisinetile:hover .c-cuisinetile__media { transform: translateY(-2px); }
.c-cuisinetile__media--all {
  display: grid;
  place-items: center;
  background: var(--c-primary-weak);
  color: var(--c-primary);
}
.c-cuisinetile__media--all svg { width: 24px; height: 24px; }
.c-cuisinetile__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text-2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-cuisinetile.is-active .c-cuisinetile__media {
  box-shadow: 0 0 0 2px var(--c-primary), inset 0 0 0 1px rgba(0, 0, 0, .05);
}
.c-cuisinetile.is-active .c-cuisinetile__label { color: var(--c-primary); font-weight: 700; }

.c-restgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}
.c-restgrid > .c-card { grid-column: 1 / -1; }

.c-tile { display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit; }
.c-tile:active { transform: scale(.985); }

.c-tile__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px -12px rgba(38, 18, 10, .4);
}
.c-tile__media .c-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}
.c-tile__media .c-photo.is-loaded { opacity: 1; }
.c-tile:hover .c-tile__media .c-photo { transform: scale(1.05); }
.c-tile__fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.c-tile__state {
  position: absolute;
  left: 8px; top: 8px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(24, 12, 8, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.c-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-tile__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-tile__meta {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  color: var(--c-text-2);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-tile__meta b { font-weight: 700; color: var(--c-text); }
.c-tile__star { display: inline-flex; align-items: center; color: #F5A623; }
.c-tile__star svg { width: 11px; height: 11px; }
.c-tile__dim { color: var(--c-text-3); }
.c-tile__dot { color: var(--c-text-3); }

.c-tile__chips { display: flex; gap: 4px; margin-top: 1px; overflow: hidden; }
.c-tile__chip {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  background: #FFF1EA;
  border: 1px solid #FFD9C7;
  color: #C2410C;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}
.c-tile__chip--more { background: #F6F6F6; border-color: #EAEAEA; color: var(--c-text-3); }

/* ── 餐厅详情页 ── */
.c-restpage { padding-bottom: 4px; }
.c-hero {
  position: relative;
  height: 264px;
  background-size: cover;
  background-position: center 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* ⚠️ 必须写 background-image 而不是 background：
     用简写会把上面那两行 background-size / background-position 一起重置掉，
     表现是封面图永远显示左上角。 */
  background-image: linear-gradient(135deg, #FFD8C7, #FFB199);
}
.c-hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .45), transparent 42%),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .28), transparent 40%),
    radial-gradient(circle at 60% 90%, rgba(0, 0, 0, .12), transparent 50%);
}
.c-hero__emoji {
  position: relative;
  font-size: 94px;
  line-height: 1;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .18));
  animation: c-float 6s ease-in-out infinite;
}
@keyframes c-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero__emoji { animation: none; }
}
.c-hero--photo .c-hero__glow,
.c-hero--photo .c-hero__emoji { display: none; }

/* 照片不再是"一块 196px 的图框"，而是从顶部铺下来、底部化进页面白底。
   用 mask 而不是盖一层白色渐变：盖白渐变会在暖色照片上留一道灰边。 */
.c-hero--photo {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, .55) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, .55) 82%, transparent 100%);
}
.c-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(18, 10, 6, .34), rgba(18, 10, 6, 0));
  pointer-events: none;
}

.c-hero__back {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .16);
}
.c-restpage__loading { padding: 0 16px 0; position: relative; margin-top: -28px; }
.c-restinfo {
  position: relative;
  z-index: 2;
  margin: -64px 16px 0;
  border-radius: 22px;
  box-shadow: 0 18px 40px -22px rgba(38, 18, 10, .45), 0 2px 10px rgba(38, 18, 10, .06);
}
.c-restinfo__head { align-items: flex-start; }
.c-restinfo__head .c-h1 { font-size: 22px; line-height: 1.2; }
.c-restinfo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  margin-top: 6px;
}
.c-restinfo__desc { margin-top: 8px; font-size: var(--fs-5); color: var(--c-text-2); line-height: 1.55; }
.c-restinfo__desc:empty { display: none; }
.c-restinfo__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
}
.c-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-fact__label { font-size: var(--fs-7); letter-spacing: .03em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; }
.c-fact__value { font-size: var(--fs-5); font-weight: 600; }
.c-restpage__alert { margin: 16px; }
.c-restpage__body { padding: 16px 16px 0; }
.c-anchors {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 10px;
  margin: 2px 0 2px;
  background: linear-gradient(#fff 78%, rgba(255, 255, 255, 0));
  scrollbar-width: none;
}
.c-anchors::-webkit-scrollbar { display: none; }
.c-menusec { padding: 12px 0 6px; scroll-margin-top: 52px; }
.c-menusec__title { font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin: 4px 0 2px; }
.c-dishrow { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.c-dishrow:last-child { border-bottom: 0; }
.c-dishrow.is-soldout { opacity: .55; }
.c-dishrow__main { flex: 1; min-width: 0; }
.c-dishrow__name { font-size: 15px; font-weight: 600; line-height: 1.35; }
.c-dishrow__desc {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-dishrow__meta { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.c-dishrow__price { font-size: var(--fs-4); font-weight: 700; }
.c-dishrow__kcal { font-size: var(--fs-6); color: var(--c-text-3); }
.c-dishrow__side { position: relative; flex: none; width: 86px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c-dishrow__thumbwrap { position: relative; }
.c-dishrow__side .c-addbtn { position: absolute; right: -7px; bottom: -7px; z-index: 2; }
.c-dishrow__side .c-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  padding: 1px;
  border-radius: var(--r-pill);
  background: #fff;
}
.c-dishrow__side .c-qty__btn { width: 28px; height: 28px; border-color: var(--c-line); }
.c-dishrow__side .c-qty__val { font-size: var(--fs-5); min-width: 16px; }
.c-dishrow__soldout {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  font-size: var(--fs-7);
  font-weight: 600;
}
.c-reviews { padding: 12px 0 20px; }
.c-review {
  padding: 14px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.c-review__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-review__name { font-size: var(--fs-4); font-weight: 600; }
.c-review__date { font-size: var(--fs-7); color: var(--c-text-3); }
.c-review__text { margin-top: 6px; font-size: var(--fs-5); color: var(--c-text-2); line-height: 1.55; }
.c-stars--sm { display: flex; gap: 1px; }
.c-stars--sm > span { display: inline-flex; width: 13px; height: 13px; }
.c-stars--sm svg { width: 13px; height: 13px; color: #E4E4E4; }
.c-stars--sm .is-on svg { color: #F5A623; }

/* ── 购物车 ── */
.c-cartpage, .c-checkout, .c-orderpage, .c-addresspage, .c-accountpage, .c-orderspage { padding: 10px 16px 8px; }
.c-cartpage .c-alert, .c-checkout > .c-alert, .c-orderpage > .c-alert, .c-addresspage > .c-alert, .c-accountpage > .c-alert, .c-orderspage > .c-alert { margin-bottom: 14px; }
.c-carthead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.c-carthead__main { flex: 1; min-width: 0; }
.c-carthead__name { font-size: var(--fs-3); font-weight: 700; letter-spacing: -.01em; }
.c-carthead__meta { font-size: var(--fs-6); color: var(--c-text-2); margin-top: 2px; }
.c-cartlist { margin-top: 14px; }
.c-cartlist__title { font-size: var(--fs-5); font-weight: 600; color: var(--c-text-2); padding: 0 2px 8px; }
.c-cartline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
}
.c-cartline:last-child { border-bottom: 0; }
.c-cartline__main { flex: 1; min-width: 0; }
.c-cartline__name { font-size: var(--fs-4); font-weight: 600; line-height: 1.35; }
.c-cartline__unit { font-size: var(--fs-6); color: var(--c-text-2); margin-top: 2px; }
.c-cartline__controls { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.c-cartline__controls .c-qty { gap: 2px; padding: 1px; }
.c-cartline__remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--c-text-3); cursor: pointer; margin-left: 4px; }
.c-cartline__remove:hover { background: var(--c-danger-bg); color: var(--c-danger); }
.c-cartline__remove svg { width: 16px; height: 16px; }
.c-cartline__total { font-size: var(--fs-4); font-weight: 700; white-space: nowrap; padding-top: 2px; }
.c-cartactions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.c-minhint { margin-top: 6px; }

/* 费用明细 */
.c-summary { display: flex; flex-direction: column; gap: 8px; }
.c-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--fs-5); color: var(--c-text-2); }
.c-summary__row > span:last-child { color: var(--c-text); font-variant-numeric: tabular-nums; }
.c-summary__row--muted > span:last-child { color: var(--c-text-2); }
.c-summary__row--total {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--c-line-strong);
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--c-text);
}
.c-summary__row--total > span:last-child { font-size: var(--fs-3); font-weight: 700; }

/* ── 结算 ── */
.c-checkout { display: flex; flex-direction: column; gap: 22px; }
.c-checkout .c-section__head { padding-top: 0; }
.c-checkout .c-section__title { margin-bottom: 2px; }
.c-addrcard {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.c-addrcard:hover { border-color: var(--c-line-strong); }
.c-addrcard.is-selected {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-weak), var(--shadow-card);
}
.c-addrcard__main { flex: 1; min-width: 0; }
.c-addrcard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-addrcard__label { font-size: var(--fs-4); font-weight: 700; }
.c-addrcard__contact { display: block; font-size: var(--fs-5); color: var(--c-text-2); margin-top: 3px; }
.c-addrcard__text { display: block; font-size: var(--fs-5); color: var(--c-text-2); margin-top: 3px; line-height: 1.45; }
.c-addrcard__actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line); }
.c-radio {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border: 2px solid var(--c-line-strong);
  border-radius: 50%;
  transition: border-color .15s ease;
}
.is-selected > .c-radio, .c-payrow:has(input:checked) .c-radio, .c-addrcard.is-selected .c-radio { border-color: var(--c-primary); }
.is-selected > .c-radio::after,
.c-payrow:has(input:checked) .c-radio::after,
.c-addrcard.is-selected .c-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--c-primary);
}
.c-eta { display: flex; align-items: center; gap: 12px; padding: 14px; margin-top: 8px; }
.c-eta__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary-weak); color: var(--c-primary); display: grid; place-items: center; flex: none; }
.c-eta__icon svg { width: 20px; height: 20px; }
.c-eta__main { flex: 1; min-width: 0; }
.c-eta__title { display: block; font-size: var(--fs-4); font-weight: 700; }
.c-eta__sub { display: block; font-size: var(--fs-6); color: var(--c-text-2); margin-top: 2px; }
.c-eta.is-warning .c-eta__icon { background: var(--c-warning-bg); color: var(--c-warning); }
.c-eta.is-warning .c-eta__title { color: var(--c-warning); }
.c-paylist { overflow: hidden; }
.c-payrow { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; }
.c-payrow + .c-payrow { border-top: 1px solid var(--c-line); }
.c-payrow__icon { width: 38px; height: 38px; border-radius: 10px; background: #F5F5F5; display: grid; place-items: center; color: var(--c-text-2); flex: none; }
.c-payrow__icon svg { width: 20px; height: 20px; }
.c-payrow__text { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.c-payrow__title { font-size: var(--fs-4); font-weight: 600; }
.c-payrow__sub { font-size: var(--fs-6); color: var(--c-text-2); }.c-coitems { display: flex; flex-direction: column; gap: 10px; }
.c-coitem { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-5); }
.c-coitem__qty { color: var(--c-text-2); min-width: 22px; font-weight: 600; }
.c-coitem__name { flex: 1; min-width: 0; color: var(--c-text); }
.c-coitem__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-remark {
  font-size: var(--fs-5);
  line-height: 1.5;
  color: var(--c-text-2);
  padding: 10px 12px;
  border-radius: 10px;
  background: #FAFAFA;
  border-left: 3px solid var(--c-line-strong);
}

/* ── 表单 ── */
.c-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.c-field:last-child { margin-bottom: 0; }
.c-field__label { font-size: var(--fs-5); font-weight: 600; color: var(--c-text); }
.c-field__optional { color: var(--c-text-3); font-weight: 400; }
.c-field__hint { font-size: var(--fs-6); color: var(--c-text-3); line-height: 1.5; }
.c-field__hint[hidden] { display: none; }
.c-field__error { font-size: var(--fs-6); color: var(--c-danger); line-height: 1.5; }
.c-field__error[hidden] { display: none; }
.c-input.is-invalid { border-color: var(--c-danger); background: #FFFCFC; }
.c-textarea {
  height: auto;
  min-height: 84px;
  padding: 12px;
  line-height: 1.5;
  resize: vertical;
}
textarea.c-input { height: auto; min-height: 84px; padding: 12px; line-height: 1.5; resize: vertical; }
.c-select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, #9A9A9A 50%), linear-gradient(135deg, #9A9A9A 50%, transparent 50%); background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.c-inputwrap { position: relative; }
.c-inputwrap .c-input { padding-right: 66px; }
.c-inputwrap__btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px;
  border: 0;
  background: none;
  color: var(--c-primary);
  font-size: var(--fs-6);
  font-weight: 700;
  cursor: pointer;
}
.c-checkrow { display: flex; align-items: center; gap: 10px; padding: 4px 0 16px; cursor: pointer; font-size: var(--fs-5); }
.c-checkrow input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-checkbox {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border: 2px solid var(--c-line-strong);
  border-radius: 6px;
  background: #fff;
  transition: all .15s ease;
}
.c-checkrow input:checked + .c-checkbox { background: var(--c-primary); border-color: var(--c-primary); }
.c-checkrow input:checked + .c-checkbox::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.c-checkrow input:focus-visible + .c-checkbox { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ── 按钮补充态 ── */
.c-btn--compact { width: auto; height: 40px; padding: 0 16px; font-size: var(--fs-5); font-weight: 600; }
.c-btn--inline { width: auto; height: 40px; padding: 0 20px; font-size: var(--fs-5); display: inline-flex; }
.c-btn--danger { background: transparent; border: 1px solid #F1C7C7; color: var(--c-danger); }
.c-btn--danger:hover { background: var(--c-danger-bg); }
.c-btn--text:disabled { background: transparent; color: var(--c-text-3); border: 0; }
.c-btn--block { width: 100%; }
.c-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.c-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: c-spin .7s linear infinite;
}
.c-btn--ghost.is-loading::after { border-color: rgba(25, 25, 25, .2); border-top-color: var(--c-text); }
@keyframes c-spin { to { transform: rotate(360deg); } }
.c-link { color: var(--c-primary); font-weight: 600; }
.c-link:hover { text-decoration: underline; }
.c-link--muted { color: var(--c-text-2); font-weight: 500; }

/* ── 登录 / 注册 ── */
.c-auth {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 30px 22px 28px;
}
.c-auth__head { display: flex; flex-direction: column; gap: 6px; }
.c-auth__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 800; letter-spacing: -.035em; margin-bottom: 18px; }
.c-auth__brand:hover { opacity: .85; }
.c-auth__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-weak); }
.c-auth__title { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.c-auth__form { display: flex; flex-direction: column; gap: 2px; }
.c-auth__form[hidden] { display: none; }
.c-auth__form .c-btn[type="submit"] { margin-top: 8px; }
.c-auth__helper { margin: -6px 0 10px; flex-wrap: wrap; gap: 8px; }
.c-auth__helper--after { margin: 16px 0 0; }
.c-auth__switch { align-self: center; margin-top: 14px; }
.c-auth__terms { font-size: var(--fs-6); color: var(--c-text-3); line-height: 1.55; margin-top: 4px; }
.c-auth__foot { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.c-auth__foot .c-meta { font-size: var(--fs-4); }
.c-auth > .c-alert { margin: 0; }

/* ── 订单列表 ── */
.c-orderspage { padding-top: 14px; }
.c-seg { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); background: #F4F4F4; margin-bottom: 16px; }
.c-seg__btn {
  flex: 1;
  height: 38px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text-2);
  font-size: var(--fs-4);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.c-seg__btn.is-active { background: #191919; color: #fff; }
.c-order-card {
  display: block;
  padding: 15px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease;
}
.c-order-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .09); }
.c-order-card__rest { font-size: var(--fs-3); font-weight: 700; letter-spacing: -.01em; }
.c-order-card__meta { font-size: var(--fs-6); color: var(--c-text-2); margin-top: 4px; }
.c-order-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.c-order-card__total { font-size: var(--fs-4); font-weight: 700; }
.c-order-card__cta { font-size: var(--fs-5); font-weight: 600; color: var(--c-primary); white-space: nowrap; }
.c-minibar { height: 4px; margin-top: 12px; border-radius: 999px; background: #F2F2F2; overflow: hidden; }
.c-minibar > span { display: block; height: 100%; border-radius: inherit; background: var(--c-primary); }
.c-monthgroup { margin-top: 22px; }
.c-monthgroup:first-child { margin-top: 0; }
.c-monthgroup__title { font-size: var(--fs-5); font-weight: 600; color: var(--c-text-2); padding: 0 2px 10px; }
.c-orders-empty { padding-top: 6px; }
.c-orders-active .c-stack, .c-orders-past .c-stack { gap: 12px; }

/* ── 订单详情 ── */
.c-statushero { padding: 10px 2px 18px; }
.c-statushero__title { font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.c-statushero__sub { font-size: var(--fs-4); color: var(--c-text-2); margin-top: 6px; line-height: 1.5; }
.c-statushero__sub:empty { display: none; }
.c-timeline-card { padding: 18px 14px 14px; }
.c-timeline__time { font-size: 10.5px; color: var(--c-text-3); margin-top: -2px; font-variant-numeric: tabular-nums; }
.c-timeline__step.is-current .c-timeline__time { color: var(--c-primary); font-weight: 600; }
.c-timeline__step.is-done .c-timeline__time { color: var(--c-text-2); }
.c-orderpage > .c-alert { margin-bottom: 12px; }
.c-order__section { margin-top: 20px; }
.c-order__section .c-section__title { padding: 0 2px 10px; }
.c-order__actions { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.c-order__footnum { text-align: center; font-size: var(--fs-7); color: var(--c-text-3); margin-top: 18px; }
.c-contact { display: flex; align-items: center; gap: 12px; }
.c-contact__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--c-primary-weak);
  color: var(--c-primary);
}
.c-contact__icon svg { width: 20px; height: 20px; }
.c-contact__icon--neutral { background: #F4F4F4; color: var(--c-text-2); }
.c-contact__main { flex: 1; min-width: 0; }
.c-contact__title { display: block; font-size: var(--fs-4); font-weight: 600; }
.c-contact__sub { display: block; font-size: var(--fs-6); color: var(--c-text-2); margin-top: 2px; line-height: 1.45; }
.c-callbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: #fff;
  color: var(--c-text);
  font-size: var(--fs-6);
  font-weight: 600;
}
.c-callbtn:hover { background: #FAFAFA; }
.c-callbtn svg { width: 14px; height: 14px; }
.c-deliveryrow { display: flex; gap: 12px; }
.c-deliveryrow + .c-deliveryrow { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.c-deliveryrow__icon { width: 34px; height: 34px; border-radius: 50%; background: #F5F5F5; color: var(--c-text-2); display: grid; place-items: center; flex: none; }
.c-deliveryrow__icon svg { width: 17px; height: 17px; }
.c-deliveryrow__main { flex: 1; min-width: 0; }
.c-deliveryrow__label { display: block; font-size: var(--fs-7); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--c-text-3); }
.c-deliveryrow__value { display: block; font-size: var(--fs-5); margin-top: 2px; line-height: 1.5; }
.c-orderitem { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: var(--fs-5); }
.c-orderitem__qty { min-width: 22px; color: var(--c-text-2); font-weight: 600; }
.c-orderitem__name { flex: 1; min-width: 0; }
.c-orderitem__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-ratepromo {
  padding: 16px;
  border-radius: var(--r-card);
  background: linear-gradient(135deg, #FFF6F2, #FFEDE6);
  box-shadow: var(--shadow-card);
}
.c-ratepromo__title { font-size: var(--fs-3); font-weight: 700; letter-spacing: -.01em; }
.c-ratepromo__sub { font-size: var(--fs-5); color: var(--c-text-2); margin-top: 3px; }
.c-ratepromo .c-btn { margin-top: 12px; }

/* 骑手最后上报的位置（FR-23） */
.c-riderloc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-6);
  color: var(--c-text-2);
}
.c-riderloc__icon { display: inline-flex; width: 16px; height: 16px; flex: none; color: var(--c-primary); }
.c-riderloc__icon svg { width: 16px; height: 16px; }
.c-riderloc__text { flex: 1; min-width: 0; line-height: 1.4; }
.c-riderloc__link { flex: none; font-size: var(--fs-6); font-weight: 600; color: var(--c-primary); }
.c-riderloc__link:hover { text-decoration: underline; }

/* ── 评分弹层 ── */
.c-rateblock { padding: 14px 0 6px; border-top: 1px solid var(--c-line); margin-top: 14px; }
.c-rateblock:first-of-type { border-top: 0; }
.c-rateblock__label { font-size: var(--fs-5); font-weight: 600; margin-bottom: 8px; }
.c-stars { display: flex; gap: 6px; }
.c-star {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: #D9D9D9;
  cursor: pointer;
  transition: color .12s ease, transform .12s ease;
}
.c-star svg { width: 100%; height: 100%; }
.c-star:hover { transform: scale(1.08); }
.c-star.is-on { color: #F5A623; }
.c-star.is-on svg { fill: currentColor; }
.c-stars--rider .c-star { width: 32px; height: 32px; }

/* ── 地址页 ── */
.c-addresspage { padding-top: 14px; }
.c-addresspage #addr-list { margin-top: 4px; }
.c-addrform { margin-top: 16px; }
.c-addrform__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.c-addrform .c-field { margin-bottom: 16px; }
.c-map {
  position: relative;
  height: 170px;
  border-radius: 12px;
  background: #F2F2F2;
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
}
.c-map__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: var(--fs-6);
  color: var(--c-text-3);
  text-align: center;
}
.c-coordbtn { align-self: flex-start; margin-top: 2px; }
.c-addr-empty-state { margin-top: 8px; }

/* ── 账户页 ── */
.c-accountpage { padding-top: 6px; }
.c-profile { display: flex; align-items: center; gap: 14px; padding: 8px 2px 18px; }
.c-profile__text { min-width: 0; }
.c-profile__text .c-h1 { font-size: 24px; }
.c-profile__text .c-meta { margin-top: 3px; }
.c-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
.c-stat { padding: 12px 6px; border-radius: 12px; background: #FAFAFA; text-align: center; }
.c-stat__num { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.c-stat__label { display: block; font-size: var(--fs-7); color: var(--c-text-2); margin-top: 3px; }
.c-account__section { margin-bottom: 22px; }
.c-account__section .c-section__head { padding-top: 0; }
.c-linklist { overflow: hidden; }
.c-menurow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; }
.c-menurow + .c-menurow { border-top: 1px solid var(--c-line); }
.c-menurow:hover { background: #FCFCFC; }
.c-menurow__icon { width: 38px; height: 38px; flex: none; border-radius: 10px; background: #F5F5F5; color: var(--c-text-2); display: grid; place-items: center; }
.c-menurow__icon svg { width: 19px; height: 19px; }
.c-menurow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.c-menurow__title { font-size: var(--fs-4); font-weight: 600; }
.c-menurow__sub { font-size: var(--fs-6); color: var(--c-text-2); }
.c-menurow__chev { width: 18px; height: 18px; flex: none; color: var(--c-text-3); }
.c-menurow__arrow { font-size: var(--fs-4); color: var(--c-text-3); }
.c-account__foot { text-align: center; font-size: var(--fs-7); color: var(--c-text-3); margin-top: 20px; }

/* ── 弹层 / Toast ── */
.c-modal { position: fixed; inset: 0; z-index: 100; }
.c-modal[hidden] { display: none; }
.c-modal__backdrop { position: absolute; inset: 0; background: rgba(12, 12, 12, .46); animation: c-fade .18s ease; }
.c-modal__sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: #fff;
  box-shadow: var(--shadow-pop);
  animation: c-sheet .22s cubic-bezier(.2, .8, .3, 1);
}
.c-modal__handle { width: 38px; height: 4px; margin: 0 auto 14px; border-radius: 999px; background: var(--c-line-strong); }
.c-modal__sheet .c-h2 { font-size: 20px; }
.c-modal__sheet > .c-meta { margin-top: 6px; line-height: 1.5; }
.c-modal__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.c-modal__actions--top { margin-top: 18px; }
@keyframes c-sheet { from { transform: translate(-50%, 16px); opacity: .5; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes c-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .c-modal__sheet, .c-modal__backdrop { animation: none; }
}
body.c-modal-open { overflow: hidden; }

.c-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 120;
  width: calc(100% - 48px);
  max-width: 400px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #191919;
  color: #fff;
  font-size: var(--fs-5);
  line-height: 1.45;
  text-align: center;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.c-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.c-toast--error { background: var(--c-danger); }

/* ── 错误页 ── */
.c-errorpage { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 330px; margin: auto; text-align: center; }
.c-errorpage__badge {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--c-primary-weak);
  color: var(--c-primary);
  font-size: 28px;
  font-weight: 800;
}
.c-errorpage .c-h1 { font-size: 24px; line-height: 1.25; }
.c-errorpage__desc { line-height: 1.6; }
.c-errorpage .c-btn { margin-top: 8px; max-width: 280px; }

/* ── 桌面：把 480px 列呈现成有意的手机式画布 ── */
@media (min-width: 640px) {
  .c-toast { bottom: 110px; }
}


/* ============================================================
   优惠券（官方发券：券包 + 我的券）
   —— 券本身是"票券"的形态：左侧面额、中间规则、右侧状态。
      三端里只有顾客端有这一块，所以类名仍然是 c- 前缀。
   ============================================================ */
.c-couponpage { padding: 4px 16px 32px; }

.c-topbar__action {
  flex: none;
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
  padding: 8px 4px;
}
.c-topbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  color: var(--c-text);
}
.c-topbar__back svg { width: 22px; height: 22px; }

/* 分段控件：可用 / 已用 / 已过期 */
.c-seg {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: #F5F5F5;
  border-radius: var(--r-pill);
  margin: 10px 0 16px;
}
.c-seg__btn {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  padding: 9px 6px;
  font: inherit;
  font-size: var(--fs-6);
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.c-seg__btn.is-active {
  background: #fff;
  color: var(--c-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}
.c-seg__count {
  display: inline-block;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-3);
}
.c-seg__btn.is-active .c-seg__count { color: var(--c-text-2); }

.c-couponlist { display: flex; flex-direction: column; gap: 12px; }

/* ── 一张券：底板是生成的那张空白票券 ──
   左 34% 是印好的红块（面额写在上面），右边米白区写标题和门槛。
   底板按 954x402 的比例铺满，所以文字用百分比定位才不会跑偏。 */
.c-coupon {
  position: relative;
  display: block;
  aspect-ratio: 954 / 402;
  background: url("/customer/static/img/coupon-card.webp") center / 100% 100% no-repeat;
  border: 0;
  overflow: hidden;
  filter: drop-shadow(0 10px 18px rgba(38, 18, 10, .14));
  transition: transform .16s ease, filter .16s ease;
}
a.c-coupon:hover { transform: translateY(-1px); filter: drop-shadow(0 14px 24px rgba(38, 18, 10, .2)); }

.c-coupon__value {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 33.9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 6px;
  color: #fff;
  text-align: center;
}
.c-coupon__amount {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;   /* 窄的时候也不许把 ¥ 和数字拆成两行 */
}
.c-coupon__amount small { font-size: 15px; font-weight: 700; margin-right: 1px; }
.c-coupon__threshold { font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, .86); }

.c-coupon__main {
  position: absolute;
  left: 37.5%; right: 4.5%; top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.c-coupon__title {
  font-size: var(--fs-5);
  font-weight: 700;
  color: #2B1B14;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-coupon__meta { font-size: var(--fs-7); color: #9A7A63; line-height: 1.4; }
.c-coupon__badge {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: var(--c-success-bg);
  color: var(--c-success);
}
.c-coupon__badge--new { background: #EEE9FF; color: var(--c-accent); }

/* 不可用 / 已用 / 已过期：整张褪色，但不换布局 */
.c-coupon--muted { filter: grayscale(.85) opacity(.55); }
.c-coupon--muted .c-coupon__title { color: #6B5A50; }
.c-coupon--muted .c-coupon__badge { background: #F0F0F0; color: var(--c-text-3); }

/* 首页券条里的小号票券 */
.c-coupon--sm {
  flex: none;
  width: 200px;
  scroll-snap-align: start;
}
.c-coupon--sm .c-coupon__value { gap: 0; padding: 0 2px; }
.c-coupon--sm .c-coupon__amount { font-size: 19px; }
.c-coupon--sm .c-coupon__amount small { font-size: 12px; }
.c-coupon--sm .c-coupon__title { font-size: 12.5px; }
.c-coupon--sm .c-coupon__meta { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 去商店的入口条 */
.c-storepromo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: linear-gradient(100deg, #FFF3EF, #FFF9F6);
  border: 1px solid #FFE1D8;
  text-decoration: none;
  color: inherit;
}
/* 入口条左侧：不画那个 % 圆，直接贴一枚券的贴纸 */
.c-storepromo__icon {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.c-storepromo__icon img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 5px rgba(38, 18, 10, .18));
}

/* 空状态上方的贴纸 */
.c-empty__sticker {
  display: block;
  width: 104px; height: 104px;
  object-fit: contain;
  margin-bottom: 2px;
  filter: drop-shadow(0 6px 14px rgba(38, 18, 10, .12));
}
.c-storepromo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-storepromo__title { font-size: var(--fs-5); font-weight: 700; }
.c-storepromo__sub { font-size: var(--fs-7); color: var(--c-text-2); }
.c-storepromo__chev { color: var(--c-text-3); font-size: 20px; line-height: 1; }

/* 券包货架 */
.c-storenintro { margin: 8px 0 18px; }
.c-storenintro .c-h2 { font-size: 20px; }
.c-storenintro .c-meta { margin-top: 6px; line-height: 1.55; }

.c-pack {
  position: relative;
  border: 1px solid var(--c-line-strong);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: var(--shadow-card);
}
/* 券包卡右上角贴一枚礼盒贴纸：略微倾斜、带一点投影，才像贴上去而不是排版进去的 */
.c-pack__sticker {
  position: absolute;
  top: -12px;
  right: -6px;
  width: 50px;
  height: 50px;
  object-fit: contain;
  transform: rotate(8deg);
  filter: drop-shadow(0 6px 10px rgba(38, 18, 10, .18));
  pointer-events: none;
}
.c-pack--disabled .c-pack__sticker { filter: grayscale(.5) opacity(.55); }
.c-pack__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: 40px;   /* 右上角贴纸占位，不让它压住划线原价 */
}
.c-pack__title { font-size: var(--fs-3); font-weight: 700; }
.c-pack__sub { font-size: var(--fs-7); color: var(--c-text-2); margin-top: 2px; }
.c-pack__price { display: flex; align-items: baseline; gap: 6px; }
.c-pack__price b { font-size: 22px; letter-spacing: -.02em; }
.c-pack__price small { font-size: var(--fs-7); color: var(--c-text-3); text-decoration: line-through; }

.c-pack__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  background: #FAFAFA;
}
.c-pack__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-6); }
.c-pack__item span:first-child { color: var(--c-text-2); }
.c-pack__item b { font-weight: 700; }

.c-pack__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.c-pack__note { flex: 1; min-width: 0; font-size: var(--fs-7); color: var(--c-text-3); line-height: 1.4; }
/* .c-btn 默认是整行宽的移动端按钮，这里要收成固定宽度 */
.c-pack__buy { flex: none; width: auto; min-width: 96px; height: 40px; padding: 0 18px; font-size: var(--fs-5); }
.c-pack--disabled { opacity: .62; }

.c-couponfoot { margin-top: 20px; font-size: var(--fs-7); color: var(--c-text-3); line-height: 1.6; }

/* 结算页：可点击的汇总行 */
.c-summary__row--action {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-5);
  color: var(--c-text);
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.c-summary__row--action span:last-child { color: var(--c-primary); font-weight: 600; }
.c-summary__row--action[disabled] { cursor: default; }
.c-summary__row--action[disabled] span:last-child { color: var(--c-text-3); font-weight: 400; }

/* 结算页：选券弹层 */
#co-coupon-sheet .c-modal__sheet { max-height: 72vh; display: flex; flex-direction: column; }
.c-couponpicker { overflow-y: auto; margin: 14px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.c-couponpick {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.c-couponpick.is-selected { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary) inset; }
.c-couponpick:disabled { opacity: .55; cursor: default; }
.c-couponpick__amount { font-size: 18px; font-weight: 800; color: var(--c-primary); min-width: 54px; }
.c-couponpick__body { flex: 1; min-width: 0; }
.c-couponpick__title { font-size: var(--fs-5); font-weight: 600; display: block; }
.c-couponpick__reason { font-size: var(--fs-7); color: var(--c-text-3); display: block; margin-top: 2px; }
.c-couponpick__radio {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--c-line-strong);
}
.c-couponpick.is-selected .c-couponpick__radio {
  border-color: var(--c-primary);
  background: radial-gradient(circle, var(--c-primary) 0 5px, transparent 5px);
}