@tbox.cn/app-module-promotion 0.2.0 → 0.9.4

package/src/client/styles/promotion.css

@@ -0,0 +1,2135 @@
+.promotion-card {
+  /* 域色板（mall-vis 营销域）：价格红/票根红/CTA 蓝与营销橙渐变/成功绿；对照 docs/reference/templates.md（视觉体系与域色矩阵） */
+  --promo-mint: #169e5a;
+  --promo-mint-dark: #128356;
+  --promo-mint-soft: #eaf8f1;
+  --promo-coral: var(--tbox-domain-promotion-accent, #e42f46);
+  --promo-coral-soft: var(--tbox-domain-promotion-surface, #fff1f3);
+  --promo-cyan: #2368ec;
+  --promo-cyan-soft: #eaf3ff;
+  --promo-primary: #2368ec;
+  --promo-ticket: #ee3347;
+  --promo-cta-orange: linear-gradient(135deg, #ff8c33 0%, #ff6f1f 100%);
+  --promo-activity-gradient: linear-gradient(135deg, #06459d 0%, #0874d8 100%);
+  --promo-ink: #0b0f17;
+  --promo-muted: #535b6c;
+  --promo-line: #e1e5ec;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+  background: #fff;
+  color: var(--promo-ink);
+  font-size: 28px;
+  letter-spacing: 0;
+}
+
+.promotion-sheet__qrcode {
+  display: block;
+  width: min(70%, 240px);
+  height: auto;
+  aspect-ratio: 1;
+  margin: 20px auto 24px;
+  image-rendering: pixelated;
+}
+
+.promotion-sheet__qrcode--disabled {
+  opacity: 0.85;
+}
+
+.promotion-sheet__barcode {
+  display: block;
+  width: min(70%, 320px);
+  height: auto;
+  min-height: 52px;
+  margin: 28px auto 20px;
+}
+
+.promotion-sheet__barcode--disabled {
+  opacity: 0.85;
+}
+.promotion-card * {
+  box-sizing: border-box;
+  letter-spacing: 0;
+}
+.promotion-card button {
+  font: inherit;
+}
+.promotion-card h3,
+.promotion-card p {
+  margin: 0;
+}
+.promotion-card__header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  min-width: 0;
+  padding: 28px 32px 24px;
+}
+.promotion-card__header--compact {
+  padding-bottom: 20px;
+}
+.promotion-card__header > div {
+  flex: 1;
+  min-width: 0;
+}
+/* mark 方块四色编码（demo 活动分类图标族：绿/青/红/金） */
+.promotion-card__mark {
+  display: grid;
+  place-items: center;
+  flex: 0 0 76px;
+  width: 76px;
+  height: 76px;
+  border: 1px solid rgba(8, 119, 95, 0.18);
+  border-radius: 20px;
+  background: #dff6ed;
+  color: #08775f;
+  box-shadow: 0 10px 28px rgba(8, 119, 95, 0.08);
+}
+.promotion-card__mark svg {
+  width: 40px;
+  height: 40px;
+}
+.promotion-card__mark--cyan {
+  border-color: rgba(13, 115, 132, 0.18);
+  background: #e1f5f7;
+  color: #0d7384;
+}
+.promotion-card__mark--coral {
+  border-color: rgba(180, 67, 51, 0.18);
+  background: #ffebe7;
+  color: #b44333;
+}
+.promotion-card__mark--violet {
+  border-color: rgba(155, 104, 20, 0.22);
+  background: #fff0cb;
+  color: #9b6814;
+}
+.promotion-card__eyebrow {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--promo-primary);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+}
+.promotion-card h3 {
+  overflow-wrap: anywhere;
+  font-size: 34px;
+  font-weight: 740;
+  line-height: 44px;
+}
+.promotion-card__header p {
+  margin-top: 4px;
+  overflow: hidden;
+  color: var(--promo-muted);
+  font-size: 22px;
+  line-height: 32px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.promotion-card__count {
+  flex: none;
+  padding: 10px 16px;
+  border: 1px solid rgba(83, 91, 108, 0.13);
+  border-radius: 999px;
+  background: #f0f3f8;
+  color: var(--promo-muted);
+  font-size: 20px;
+}
+.promotion-card__footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 18px 32px 22px;
+  border-top: 1px solid var(--promo-line);
+  color: var(--promo-muted);
+  font-size: 20px;
+  line-height: 30px;
+}
+.promotion-card__footer--accent {
+  color: var(--promo-cyan);
+}
+.promotion-card__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  min-height: 188px;
+  padding: 40px;
+  color: var(--promo-muted);
+  font-size: 24px;
+}
+.promotion-image--fallback {
+  display: grid;
+  place-items: center;
+  /* 中性灰而非彩色：兜底图是「这里本该有张图」的说明，带上色相反而比真图更抢眼 */
+  background: #f1f2f4;
+  color: rgba(11, 15, 23, 0.26);
+}
+.promotion-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  padding: 8px 14px;
+  border-radius: 999px;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.promotion-status--available {
+  background: var(--promo-mint-soft);
+  color: var(--promo-mint-dark);
+}
+.promotion-status--requires_action {
+  background: var(--promo-coral-soft);
+  color: #a43d25;
+}
+.promotion-status--unavailable,
+.promotion-status--unknown {
+  background: #f0f3f2;
+  color: var(--promo-muted);
+}
+.promotion-list__hero {
+  position: relative;
+  height: 184px;
+  overflow: hidden;
+  background: #eef2f8;
+}
+.promotion-list__hero-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.promotion-list__glass {
+  position: absolute;
+  right: 24px;
+  bottom: 20px;
+  left: 24px;
+  display: grid;
+  gap: 2px;
+  padding: 16px 20px;
+  border: 1px solid rgba(255, 255, 255, 0.68);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow: 0 16px 40px rgba(21, 45, 88, 0.15);
+  backdrop-filter: blur(12px);
+}
+.promotion-list__glass span {
+  color: var(--promo-mint-dark);
+  font-size: 18px;
+  font-weight: 700;
+}
+.promotion-list__glass strong {
+  font-size: 28px;
+  line-height: 36px;
+}
+.promotion-list__items {
+  padding: 0 32px 8px;
+}
+.promotion-list__items > button,
+.promotion-list__items > article {
+  display: grid;
+  grid-template-columns: 104px minmax(0, 1fr) auto 24px;
+  align-items: center;
+  gap: 18px;
+  width: 100%;
+  min-height: 132px;
+  padding: 16px 0;
+  border: 0;
+  border-top: 1px solid var(--promo-line);
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+.promotion-list__items > :first-child {
+  border-top: 0;
+}
+.promotion-list__items > button {
+  cursor: pointer;
+}
+.promotion-list__items > button:focus-visible {
+  border-radius: 10px;
+  outline: 2px solid var(--promo-primary);
+  outline-offset: 1px;
+}
+.promotion-list__items > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.promotion-list__visual {
+  position: relative;
+  width: 104px;
+  height: 96px;
+}
+.promotion-list__thumb {
+  width: 104px;
+  height: 96px;
+  border-radius: 14px;
+  object-fit: cover;
+}
+.promotion-list__visual em {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  max-width: 94px;
+  overflow: hidden;
+  padding: 4px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.82);
+  color: var(--promo-coral);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  backdrop-filter: blur(7px);
+}
+.promotion-list__copy {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+.promotion-list__copy small {
+  color: var(--promo-mint-dark);
+  font-size: 18px;
+  font-weight: 700;
+}
+.promotion-list__copy strong,
+.promotion-list__copy span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.promotion-list__copy strong {
+  font-size: 26px;
+  line-height: 36px;
+}
+.promotion-list__copy span {
+  color: var(--promo-muted);
+  font-size: 20px;
+}
+.promotion-list__items > button > svg {
+  color: #82918c;
+}.promotion-detail__hero {
+  position: relative;
+  height: 252px;
+  overflow: hidden;
+  background: #eef2f8;
+}
+.promotion-detail__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.promotion-detail__hero-label {
+  position: absolute;
+  top: 20px;
+  left: 24px;
+  padding: 8px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  border-radius: 999px;
+  background: rgba(6, 42, 101, 0.66);
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  backdrop-filter: blur(8px);
+}
+.promotion-detail__glass {
+  position: absolute;
+  right: 24px;
+  bottom: 20px;
+  left: 24px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 2px 20px;
+  padding: 16px 20px;
+  border: 1px solid rgba(255, 255, 255, 0.62);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 16px 44px rgba(21, 45, 88, 0.16);
+  backdrop-filter: blur(12px);
+}
+.promotion-detail__glass small,
+.promotion-detail__glass em {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.promotion-detail__glass small {
+  color: var(--promo-mint-dark);
+  font-size: 18px;
+  font-weight: 700;
+}
+.promotion-detail__glass strong {
+  grid-row: 1/3;
+  grid-column: 2;
+  color: var(--promo-coral);
+  font-size: 44px;
+  line-height: 48px;
+  font-variant-numeric: tabular-nums;
+}
+.promotion-detail__glass em {
+  color: var(--promo-muted);
+  font-size: 20px;
+  font-style: normal;
+}
+.promotion-detail__body {
+  padding: 26px 32px 30px;
+}
+.promotion-detail__status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.promotion-detail__status small {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--promo-muted);
+  font-size: 18px;
+}
+.promotion-detail__status small svg {
+  width: 24px;
+  height: 24px;
+}
+.promotion-detail__body > h3 {
+  margin-top: 16px;
+  font-size: 36px;
+}
+.promotion-detail__body > p {
+  margin-top: 8px;
+  color: var(--promo-muted);
+  font-size: 22px;
+  line-height: 34px;
+}
+.promotion-detail__notice-strip {
+  display: grid;
+  gap: 10px;
+  margin-top: 16px;
+  padding: 16px 18px;
+  border-radius: 14px;
+  background: #fff8ef;
+}
+.promotion-detail__notice-strip span {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 16px;
+  color: #171717;
+  font-size: 21px;
+  line-height: 30px;
+}
+.promotion-detail__notice-strip b {
+  width: auto;
+  text-align: left;
+  color: #b38a3e;
+  font-size: 22px;
+}
+.promotion-detail__notice-strip span + span b {
+  color: #ef7654;
+}
+.promotion-detail__usage-rule {
+  margin-top: 24px;
+  color: var(--promo-muted);
+  font-size: 20px;
+  line-height: 32px;
+}
+.promotion-detail__usage-rule > strong {
+  display: block;
+  margin-bottom: 8px;
+  color: #171717;
+  font-size: 23px;
+}
+.promotion-detail__usage-rule p,
+.promotion-detail__usage-rule div {
+  margin: 0;
+}
+.promotion-detail__rules {
+  display: grid;
+  gap: 12px;
+  margin-top: 22px;
+}
+.promotion-detail__rules > span {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 0 12px;
+  align-items: start;
+}
+.promotion-detail__rules svg {
+  grid-row: 1/3;
+  margin-top: 4px;
+  color: var(--promo-mint);
+}
+.promotion-detail__rules b {
+  font-size: 22px;
+}
+.promotion-detail__rules small {
+  color: var(--promo-muted);
+  font-size: 20px;
+  line-height: 30px;
+}
+.promotion-detail__bundle {
+  display: grid;
+  gap: 10px;
+  margin-top: 22px;
+}
+.promotion-detail__bundle > span {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  padding: 14px 16px;
+  border: 1px solid var(--promo-line);
+  border-radius: 12px;
+  background: #f8faf9;
+}
+.promotion-detail__bundle svg {
+  color: var(--promo-coral);
+}
+.promotion-detail__bundle b {
+  font-size: 22px;
+}
+.promotion-detail__bundle small {
+  color: var(--promo-muted);
+}
+.promotion-detail__facts {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr);
+  gap: 0;
+  margin: 20px 0 0;
+  border: 1px solid var(--promo-line);
+  border-radius: 14px;
+  background: #f8faf9;
+  overflow: hidden;
+}
+.promotion-detail__facts dt,
+.promotion-detail__facts dd {
+  margin: 0;
+  padding: 14px 18px;
+  border-top: 1px solid var(--promo-line);
+  font-size: 20px;
+}
+.promotion-detail__facts > div {
+  display: contents;
+}
+.promotion-detail__facts > :nth-child(-n + 2) {
+  border-top: 0;
+}
+.promotion-detail__facts dt {
+  color: var(--promo-muted);
+}
+.promotion-detail__facts dd {
+  font-weight: 650;
+  text-align: right;
+}
+.promotion-detail__notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-top: 20px;
+  padding: 16px 18px;
+  border: 1px solid rgba(228, 47, 70, 0.12);
+  border-radius: 12px;
+  background: var(--promo-coral-soft);
+  color: #744333;
+  font-size: 20px;
+  line-height: 30px;
+}
+.promotion-detail__notice svg {
+  flex: none;
+  width: 28px;
+  height: 28px;
+  margin-top: 2px;
+}
+
+.promotion-detail__stores {
+  display: grid;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--promotion-line, #e5e7eb);
+  border-radius: 8px;
+  background: var(--promotion-surface-muted, #f8fafc);
+}
+
+.promotion-detail__stores strong {
+  color: var(--promotion-ink, #17202a);
+  font-size: 12px;
+}
+
+.promotion-detail__stores span {
+  display: flex;
+  gap: 5px;
+  color: var(--promotion-muted, #667085);
+  font-size: 12px;
+}
+.promotion-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  height: 76px;
+  margin-top: 22px;
+  border: 0;
+  border-radius: 14px;
+  font-size: 24px;
+  font-weight: 740;
+  cursor: pointer;
+}
+.promotion-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+/* 票根钮（demo OfferDealRow action）：底 #ee3347 + clip-path 斜切 + 楷体文字。
+   ⚠️ 紧凑位专用（ItemActionsRow chip / 行内条）——基座 .promotion-button width:100% 是占满紧凑容器，
+   全宽主 CTA 位用 --confirm 蓝轨（斜切+楷体在全宽位视觉失衡）。
+   （demo 用 skewX±9deg 双层反斜切；本处 chip label 是裸文本节点无包裹元素可反斜切，改 clip-path 等效实现、文字保持正直；demo 票根无发光影） */
+.promotion-button--primary {
+  background: var(--promo-ticket);
+  color: #fff;
+  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
+  font-family: 'Kaiti SC', STKaiti, KaiTi, serif;
+  font-weight: 900;
+  letter-spacing: 1px;
+}
+/* 确认类主操作：CTA 蓝轨 */
+.promotion-button--confirm {
+  background: var(--promo-primary);
+  color: #fff;
+  box-shadow: 0 14px 30px rgba(35, 104, 236, 0.2);
+}
+.promotion-guide__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0 32px;
+  padding: 16px 20px;
+  border: 1px solid rgba(35, 104, 236, 0.13);
+  border-radius: 14px;
+  background: var(--promo-cyan-soft);
+  color: var(--promo-cyan);
+  font-size: 20px;
+}
+.promotion-guide__summary span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.promotion-guide__summary svg {
+  width: 26px;
+}
+.promotion-guide ol {
+  display: grid;
+  gap: 16px;
+  margin: 24px 32px;
+  padding: 0;
+  list-style: none;
+}
+.promotion-guide li {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  gap: 16px;
+}
+.promotion-guide li > b {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--promo-mint);
+  color: #fff;
+  font-size: 20px;
+}
+.promotion-guide li > span {
+  display: grid;
+  gap: 4px;
+  padding-top: 4px;
+}
+.promotion-guide li strong {
+  font-size: 22px;
+}
+.promotion-guide li small {
+  color: var(--promo-muted);
+  font-size: 20px;
+  line-height: 30px;
+}
+.promotion-guide__requirements {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 0 32px 22px;
+}
+.promotion-guide__requirements span {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 10px;
+  background: var(--promo-mint-soft);
+  color: var(--promo-mint-dark);
+  font-size: 18px;
+}
+.promotion-guide__requirements svg {
+  width: 22px;
+}
+.promotion-guide > .promotion-detail__notice {
+  margin-right: 32px;
+  margin-left: 32px;
+}
+.promotion-recommendation {
+  padding-bottom: 30px;
+}
+.promotion-recommendation__main {
+  display: grid;
+  grid-template-columns: 140px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 20px;
+  margin: 0 32px;
+  padding: 18px;
+  border: 1px solid rgba(35, 104, 236, 0.16);
+  border-radius: 16px;
+  background: #f5fbf8;
+}
+.promotion-recommendation__image {
+  width: 140px;
+  height: 124px;
+  border-radius: 14px;
+  object-fit: cover;
+}
+.promotion-recommendation__main > div {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+}
+.promotion-recommendation__main strong,
+.promotion-recommendation__main small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.promotion-recommendation__main strong {
+  font-size: 26px;
+}
+.promotion-recommendation__main small {
+  color: var(--promo-muted);
+  font-size: 20px;
+}
+.promotion-recommendation__main em {
+  color: var(--promo-coral);
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+}
+.promotion-recommendation__reason,
+.promotion-deal__notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  margin: 20px 32px 0;
+  padding: 16px 18px;
+  border-radius: 14px;
+  background: var(--promo-coral-soft);
+  color: #744333;
+  font-size: 20px;
+}
+.promotion-recommendation__reason > span,
+.promotion-deal__notice > span {
+  display: grid;
+  gap: 2px;
+}
+.promotion-recommendation__reason svg,
+.promotion-deal__notice svg {
+  flex: none;
+  color: var(--promo-coral);
+}
+.promotion-recommendation__alternatives {
+  margin: 16px 32px 0;
+  color: var(--promo-muted);
+  font-size: 18px;
+}
+.promotion-recommendation > .promotion-button,
+.promotion-deal > .promotion-button {
+  width: calc(100% - 64px);
+  margin-right: 32px;
+  margin-left: 32px;
+}
+.promotion-deal {
+  padding-bottom: 30px;
+}
+.promotion-deal__hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin: 0 32px;
+  padding: 22px 24px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--promo-mint-soft), var(--promo-coral-soft));
+}
+.promotion-deal__hero > span {
+  display: grid;
+}
+.promotion-deal__hero small {
+  color: var(--promo-muted);
+  font-size: 18px;
+}
+.promotion-deal__hero strong {
+  color: var(--promo-coral);
+  font-size: 44px;
+  font-variant-numeric: tabular-nums;
+}
+.promotion-deal__hero em {
+  padding: 10px 16px;
+  border-radius: 999px;
+  background: #fff;
+  color: var(--promo-coral);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 750;
+  box-shadow: 0 8px 24px rgba(69, 69, 69, 0.08);
+}
+.promotion-deal__metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin: 18px 32px 0;
+}
+.promotion-deal__metrics span {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 16px 12px;
+  border: 1px solid var(--promo-line);
+  border-radius: 12px;
+  background: #f9fbfa;
+  text-align: center;
+}
+.promotion-deal__metrics small {
+  color: var(--promo-muted);
+  font-size: 18px;
+}
+.promotion-deal__metrics strong {
+  overflow: hidden;
+  color: var(--promo-mint-dark);
+  font-size: 26px;
+  text-overflow: ellipsis;
+}.promotion-list__more {
+  padding: 8px 32px 18px;
+  color: var(--promo-muted);
+  font-size: 18px;
+  text-align: center;
+}
+.promotion-list__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  justify-content: center;
+  margin-top: 4px;
+  padding: 14px 24px 16px;
+  border: 0;
+  border-top: 1px solid rgba(188, 205, 191, 0.42);
+  background: linear-gradient(105deg, #fffaf0 0%, #f9f5e9 46%, #eaf6f3 100%);
+  color: #0b0f17;
+  font: inherit;
+  font-size: 17px;
+  font-weight: 650;
+  cursor: pointer;
+}
+.promotion-list__toggle:hover { filter: brightness(0.94); }
+.promotion-list__toggle:focus-visible { outline: 3px solid #0b0f17; outline-offset: -3px; }
+.promotion-list__toggle svg { transition: transform 160ms ease; }
+.promotion-list__toggle svg[data-rotated='true'] { transform: rotate(180deg); }
+/* 滚动定位落在卡片底部留白之后，并避开宿主底部固定操作区。 */
+.promotion-list__bottom-anchor {
+  height: 0;
+  flex: none;
+  scroll-margin-bottom: max(96px, calc(var(--tbox-chat-bottom-height, 0px) + 24px));
+}
+.promotion-activity {
+  --activity-gold: #b8862e;
+  --activity-gold-soft: #fff6df;
+  --activity-coral: #e75c47;
+  overflow: hidden;
+  background: #fff;
+}
+/* 活动卡头：固定品牌图只承载集合标题，真实活动封面留在条目与详情。 */
+.promotion-activity__header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 174px;
+  overflow: hidden;
+  padding: 24px 28px 20px;
+  background: var(--promo-activity-gradient);
+}
+.promotion-activity__header--pea {
+  background: #f9f1e2;
+  /* 素材变量链（主题品牌资产轨 A1 级联修复）：元素只消费不声明（声明截断主题覆写继承），
+     兜底 = 中立渐变（零品牌资产——B2），主题包经 html[data-theme] 段覆写 --tbox-asset-promotion-activity-header */
+  background-image: var(--tbox-asset-promotion-activity-header, linear-gradient(135deg, #fff1f3, #ffe4e8));
+  background-size: cover;
+  background-position: center;
+}
+.promotion-coupon__header {
+  /* 券场景头图覆写（同一语义位族；消费形态同 A1 修复，兜底渐变同族） */
+  background-image: var(--tbox-asset-promotion-coupon-header, linear-gradient(135deg, #fff1f3, #ffe4e8));
+}
+.promotion-activity__header-copy {
+  position: relative;
+  z-index: 1;
+  width: 52%;
+  min-width: 0;
+}
+.promotion-activity__header-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #2f3a22;
+}
+.promotion-activity__header-title-row svg {
+  flex: none;
+  width: 30px;
+  height: 30px;
+  color: #4f7b37;
+}
+.promotion-activity__header--pea h3 {
+  color: #2f3a22;
+  font-size: 32px;
+  line-height: 42px;
+}
+.promotion-activity__header--pea p {
+  margin-top: 8px;
+  color: #626b5c;
+  font-size: 22px;
+  line-height: 32px;
+}
+.promotion-activity__header-mark {
+  display: grid;
+  flex: 0 0 68px;
+  width: 68px;
+  height: 68px;
+  place-items: center;
+  border: 0;
+  border-radius: 18px;
+  color: var(--activity-gold);
+  background: #fff;
+  box-shadow: 0 12px 28px rgba(142, 100, 24, 0.12);
+}
+.promotion-activity__header-mark svg { width: 36px; height: 36px; }
+.promotion-activity__header:not(.promotion-activity__header--pea) .promotion-card__eyebrow { color: #cfe5ff; font-size: 18px; line-height: 24px; }
+.promotion-activity__header:not(.promotion-activity__header--pea) h3 { font-size: 30px; line-height: 38px; color: #fff; }
+.promotion-activity__header:not(.promotion-activity__header--pea) p { margin-top: 4px; font-size: 20px; line-height: 28px; color: rgba(255, 255, 255, 0.84); }
+.promotion-activity__categories {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  padding: 0 28px 28px;
+}
+.promotion-activity__categories > button,
+.promotion-activity__categories > article {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr) 18px;
+  align-items: center;
+  gap: 12px;
+  min-height: 92px;
+  padding: 14px 16px;
+  border: 1px solid #e5ece9;
+  border-radius: 14px;
+  color: #15372f;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 10px 26px rgba(23, 74, 61, 0.08);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
+}
+.promotion-activity__categories > button:hover { border-color: #aadbd0; background: #f8fffc; box-shadow: 0 14px 32px rgba(15, 115, 91, 0.12); }
+.promotion-activity button:focus-visible { outline: 3px solid #0b8b70; outline-offset: 3px; }
+.promotion-activity__category-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; color: #08775f; background: #dff6ed; }
+.promotion-activity__category-icon--1 { color: #9b6814; background: #fff0cb; }
+.promotion-activity__category-icon--2 { color: #b44333; background: #ffebe7; }
+.promotion-activity__category-icon--3 { color: #0d7384; background: #e1f5f7; }
+.promotion-activity__category-icon svg { width: 30px; height: 30px; }
+.promotion-activity__categories > * > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
+.promotion-activity__categories strong { overflow: hidden; font-size: 23px; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; }
+.promotion-activity__categories small { color: #687a74; font-size: 18px; line-height: 24px; }
+.promotion-activity__cover-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 39, 32, 0.82), rgba(12, 39, 32, 0.3) 68%, transparent); }
+.promotion-activity__list { display: grid; padding: 4px 28px 10px; }
+.promotion-activity__list > button,
+.promotion-activity__list > article {
+  display: grid;
+  grid-template-columns: 142px minmax(0, 1fr);
+  align-items: center;
+  gap: 18px;
+  width: 100%;
+  min-height: 142px;
+  padding: 18px 0;
+  border: 0;
+  border-top: 1px solid #e6ecea;
+  color: inherit;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: background-color 180ms ease;
+}
+.promotion-activity__list > button:first-child,
+.promotion-activity__list > article:first-child { border-top: 0; }
+.promotion-activity__list > button:hover:not(:disabled) { background: #f5f8ff; }
+.promotion-activity__list > button:focus-visible { outline: 3px solid #0b8b70; outline-offset: -3px; }
+.promotion-activity__list > button:disabled { cursor: default; }
+.promotion-activity__list > button.is-muted { opacity: 0.68; }
+.promotion-activity__visual { position: relative; width: 142px; height: 106px; }
+.promotion-activity__thumb { width: 142px; height: 106px; border-radius: 14px; object-fit: cover; box-shadow: 0 10px 24px rgba(22, 62, 51, 0.14); }
+.promotion-activity__visual .promotion-activity__status { position: absolute; right: 8px; bottom: 8px; }
+.promotion-activity__copy { display: grid; min-width: 0; gap: 5px; }
+.promotion-activity__copy small { display: flex; align-items: center; gap: 5px; color: var(--activity-gold); font-size: 18px; font-weight: 750; line-height: 24px; }
+.promotion-activity__copy strong { display: -webkit-box; overflow: hidden; font-size: 24px; line-height: 31px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+.promotion-activity__copy span { display: flex; align-items: center; gap: 6px; color: #60726c; font-size: 19px; line-height: 25px; }
+.promotion-activity__copy em { color: var(--activity-coral); font-size: 18px; font-style: normal; font-weight: 750; line-height: 24px; }
+.promotion-activity__status { display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid rgba(10, 133, 103, 0.16); border-radius: 999px; color: #08745f; background: rgba(235, 250, 244, 0.92); font-size: 18px; font-weight: 750; line-height: 24px; white-space: nowrap; backdrop-filter: blur(12px); }
+.promotion-activity__status--full,
+.promotion-activity__status--ended { border-color: rgba(80, 91, 87, 0.12); color: #687570; background: rgba(245, 247, 246, 0.94); }
+.promotion-activity__status--upcoming { border-color: rgba(184, 134, 46, 0.18); color: #92600e; background: rgba(255, 246, 223, 0.94); }
+.promotion-activity__footer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 28px 20px; border-top: 1px solid #e7eeeb; color: #6c7c77; font-size: 18px; line-height: 24px; }
+.promotion-activity__cover { position: relative; height: 248px; background: #dfeee9; }
+.promotion-activity__cover-image { width: 100%; height: 100%; object-fit: cover; }
+.promotion-activity__cover-meta { position: absolute; top: 20px; right: 22px; left: 22px; display: flex; align-items: center; justify-content: space-between; }
+.promotion-activity__cover-meta > span { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid rgba(255, 255, 255, 0.58); border-radius: 999px; color: #fff5d6; background: rgba(18, 48, 40, 0.56); font-size: 18px; font-weight: 750; backdrop-filter: blur(14px); }
+.promotion-activity__detail-body { padding: 22px 28px 28px; }
+.promotion-activity__detail-body > small { color: var(--activity-gold); font-size: 18px; font-weight: 750; line-height: 24px; }
+.promotion-activity__detail-body h3 { margin: 6px 0 4px; font-size: 32px; line-height: 41px; }
+.promotion-activity__detail-body > p { color: #62736d; font-size: 21px; line-height: 29px; }
+.promotion-activity__spotlight { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
+.promotion-activity__spotlight > span { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; padding: 15px 16px; border: 1px solid #e1ebe7; border-radius: 14px; background: #f8fbfa; }
+.promotion-activity__spotlight svg { grid-row: 1 / 3; align-self: center; width: 32px; height: 32px; color: #0b8b70; }
+.promotion-activity__spotlight small { color: #71817c; font-size: 17px; line-height: 22px; }
+.promotion-activity__spotlight strong { overflow: hidden; color: #213b34; font-size: 20px; line-height: 26px; text-overflow: ellipsis; white-space: nowrap; }
+.promotion-activity__venue { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 14px 16px; border: 1px solid #e7ecea; border-radius: 14px; }
+.promotion-activity__venue > svg { width: 32px; height: 32px; color: var(--activity-coral); }
+.promotion-activity__venue span { display: grid; }
+.promotion-activity__venue small { color: #71817c; font-size: 17px; line-height: 22px; }
+.promotion-activity__venue strong { font-size: 21px; line-height: 27px; }
+.promotion-activity__benefit { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(184, 134, 46, 0.2); border-radius: 14px; color: #805616; background: var(--activity-gold-soft); }
+.promotion-activity__benefit > svg { flex: none; width: 34px; height: 34px; }
+.promotion-activity__benefit span { display: grid; font-size: 18px; line-height: 24px; }
+.promotion-activity__benefit b { font-size: 21px; line-height: 27px; }
+.promotion-activity__detail-notice { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 13px 15px; border: 1px solid #e4e9e7; border-radius: 12px; color: #596d66; background: #f4f7f6; font-size: 18px; line-height: 25px; }
+.promotion-activity__detail-notice > svg { flex: none; width: 24px; height: 24px; color: #7b8e87; }
+/* 活动报名 CTA：营销橙渐变（demo MallActivityCards __action） */
+.promotion-activity__register { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 84px; margin-top: 18px; border: 0; border-radius: 999px; color: #fff; background: var(--promo-cta-orange); box-shadow: 0 6px 14px rgba(255, 111, 31, 0.2); font: inherit; font-size: 22px; font-weight: 760; line-height: 28px; cursor: pointer; touch-action: manipulation; }
+.promotion-activity__register:hover:not(:disabled) { opacity: 0.8; }
+.promotion-activity__register:focus-visible { outline: 3px solid #ff6f1f; outline-offset: 3px; }
+.promotion-activity__register:disabled { cursor: default; opacity: 0.5; background: #e3e7ee; box-shadow: none; }
+.promotion-activity__register svg { flex: none; width: 27px; height: 27px; }
+.promotion-activity__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
+.promotion-activity__actions--single { grid-template-columns: 1fr; }
+.promotion-activity__actions .promotion-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 84px; margin: 0; border-radius: 14px; font-size: 22px; line-height: 28px; }
+.promotion-activity__actions .promotion-button svg { width: 26px; height: 26px; }
+.promotion-button--secondary { border: 1px solid #cfe0f7; color: #2368ec; background: #f2f7ff; }
+.promotion-activity__session-summary { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 28px 18px; padding: 15px 17px; border: 1px solid rgba(184, 134, 46, 0.2); border-radius: 14px; background: linear-gradient(105deg, #fff9eb, #fff4d8); }
+.promotion-activity__session-summary > svg { width: 38px; height: 38px; color: var(--activity-gold); }
+.promotion-activity__session-summary span { display: grid; }
+.promotion-activity__session-summary small { color: #806b43; font-size: 17px; line-height: 22px; }
+.promotion-activity__session-summary strong { color: #5c451c; font-size: 23px; line-height: 29px; }
+.promotion-activity__session-summary em { color: #9a6813; font-size: 18px; font-style: normal; font-weight: 750; }
+.promotion-activity__sessions { display: grid; gap: 12px; padding: 0 28px 18px; }
+.promotion-activity__sessions article { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 92px; padding: 14px 16px; border: 1px solid #e0eae6; border-radius: 14px; box-shadow: 0 8px 22px rgba(31, 77, 65, 0.06); }
+.promotion-activity__sessions article > b { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 14px; color: #08735d; background: #e5f7f1; font-size: 20px; }
+.promotion-activity__sessions article > span { display: grid; gap: 1px; }
+.promotion-activity__sessions article > span:nth-child(3) { display: flex; align-items: center; gap: 5px; color: #61736d; font-size: 18px; white-space: nowrap; }
+.promotion-activity__sessions strong { font-size: 22px; line-height: 28px; }
+.promotion-activity__sessions small { color: #71817c; font-size: 18px; line-height: 24px; }
+.promotion-activity__sessions em { padding: 6px 10px; border-radius: 999px; color: #08735d; background: #e7f8f2; font-size: 17px; font-style: normal; font-weight: 750; }
+.promotion-activity__sessions .is-full { opacity: 0.68; }
+.promotion-activity__empty-state { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 106px; border: 1px dashed #cadbd5; border-radius: 14px; color: #667973; background: #f8fbfa; }
+.promotion-activity__empty-state svg { width: 38px; height: 38px; }
+.promotion-activity__empty-state span { display: grid; }
+.promotion-activity__empty-state strong { font-size: 22px; }
+.promotion-activity__empty-state small { font-size: 18px; }
+.promotion-activity__readonly { display: flex; align-items: center; gap: 8px; margin: 0 28px 24px; padding: 13px 15px; border-radius: 12px; color: #596d66; background: #f2f7f5; font-size: 18px; line-height: 25px; }
+.promotion-activity__readonly svg { flex: none; width: 24px; height: 24px; color: #0b8a6f; }
+.promotion-activity__guide-banner { display: flex; align-items: center; gap: 14px; margin: 0 28px 20px; padding: 16px 18px; border: 1px solid rgba(184, 134, 46, 0.18); border-radius: 14px; color: #78531a; background: linear-gradient(105deg, #fff9ed, #fff3d6); }
+.promotion-activity__guide-banner > svg { width: 38px; height: 38px; }
+.promotion-activity__guide-banner span { display: grid; }
+.promotion-activity__guide-banner small { font-size: 17px; font-weight: 800; line-height: 22px; }
+.promotion-activity__guide-banner strong { font-size: 22px; line-height: 28px; }
+.promotion-activity__steps { display: grid; gap: 0; margin: 0; padding: 0 28px 18px; list-style: none; }
+.promotion-activity__steps li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; min-height: 82px; align-items: start; }
+.promotion-activity__steps li:not(:last-child):after { position: absolute; top: 48px; bottom: 4px; left: 23px; width: 2px; background: #cbe6de; content: ""; }
+.promotion-activity__steps li > b { z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #0e9a79, #08745f); font-size: 20px; box-shadow: 0 7px 18px rgba(8, 116, 95, 0.18); }
+.promotion-activity__steps li > span { display: grid; gap: 3px; padding-top: 3px; }
+.promotion-activity__steps strong { font-size: 23px; line-height: 29px; }
+.promotion-activity__steps small { color: #687a74; font-size: 19px; line-height: 26px; }
+.promotion-activity__requirements { margin: 0 28px 18px; padding: 15px 17px; border: 1px solid #dfebe7; border-radius: 14px; background: #f8fbfa; }
+.promotion-activity__requirements > b { display: block; margin-bottom: 9px; color: #29473e; font-size: 20px; }
+.promotion-activity__requirements > div { display: flex; flex-wrap: wrap; gap: 8px; }
+.promotion-activity__requirements span { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; color: #08745f; background: #e6f7f1; font-size: 18px; }
+.promotion-activity__requirements svg { width: 20px; height: 20px; }
+@media (prefers-reduced-motion: reduce) {
+  .promotion-activity__categories > button { transition: none; }
+}
+@media (max-width: 380px) {
+  .promotion-card__header {
+    padding-right: 26px;
+    padding-left: 26px;
+  }
+  .promotion-list__items {
+    padding-right: 26px;
+    padding-left: 26px;
+  }
+  .promotion-list__items > button,
+.promotion-list__items > article {
+    grid-template-columns: 92px minmax(0, 1fr) auto 20px;
+    gap: 14px;
+  }
+  .promotion-list__visual,
+.promotion-list__thumb {
+    width: 92px;
+  }
+  .promotion-detail__body {
+    padding-right: 26px;
+    padding-left: 26px;
+  }
+  .promotion-card h3 {
+    font-size: 32px;
+  }
+  .promotion-card__count {
+    display: none;
+  }
+}
+@media (min-width: 760px) {
+  .promotion-card {
+    font-size: 28px;
+  }
+  .promotion-list__items > button:hover {
+    background: #f5f8ff;
+  }
+  .promotion-card__header {
+    padding-top: 30px;
+  }
+  .promotion-detail__hero {
+    height: 276px;
+  }
+}
+
+/* tbox transport integration: renderer-owned read actions keep the legacy row silhouette. */
+.promotion-item-actions {
+  display: contents;
+}
+.promotion-chip {
+  display: inline-flex;
+  width: auto;
+  min-width: 104px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 14px;
+  border: 1px solid #d9e0ea;
+  border-radius: 999px;
+  color: var(--promo-primary);
+  background: #f4f8ff;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
+  cursor: pointer;
+}
+.promotion-chip:hover:not(:disabled) {
+  border-color: var(--promo-primary);
+  color: #fff;
+  background: var(--promo-primary);
+  box-shadow: 0 6px 16px rgba(35, 104, 236, 0.18);
+}
+.promotion-chip::after { content: '→'; margin-left: 8px; font-size: 16px; line-height: 1; }
+.promotion-chip:focus-visible {
+  outline: 3px solid rgba(255, 111, 31, 0.22);
+  outline-offset: 2px;
+}
+.promotion-chip:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}.promotion-activity__category-action {
+  grid-column: 1 / -1;
+}
+
+/* ===== MasterGo coupon journey: scoped to coupon list/detail/owned/claim states. ===== */
+.promotion-detail__claim-status { margin: 10px 0 0; color: #9a4b12; font-size: 13px; line-height: 20px; }
+.promotion-coupon-row__tags { display: flex; gap: 5px; margin-top: 4px; overflow: hidden; }
+.promotion-coupon-row__tags em { padding: 2px 7px; border-radius: 4px; font-size: 11px; font-style: normal; line-height: 18px; white-space: nowrap; }
+.promotion-coupon-row__tag--rank { padding: 3px 8px !important; border-radius: 3px 3px 10px 3px !important; color: #fff !important; background: #e8471c !important; font-size: 12px !important; font-weight: 800; }
+.promotion-coupon-row__tag--category { color: #9a6b1b; background: #fff8e9; font-weight: 650; }
+.promotion-coupon-row__tag--meta { color: rgba(11, 15, 23, 0.55); background: #f3f4f6; }
+.promotion-sheet__copy { display: inline-flex; align-items: center; gap: 5px; margin: 12px 0; padding: 7px 12px; border: 1px solid #e8b37c; border-radius: 6px; color: #9a4b12; background: #fff7ed; font-size: 20px; }
+.promotion-sheet__code { display: flex; align-items: center; gap: 12px; margin: 22px 32px 0; padding: 22px 24px; border-radius: 20px; background: #fff; }
+.promotion-sheet__code > span { flex: none; color: rgba(11, 15, 23, 0.86); font-size: 24px; font-weight: 700; }
+.promotion-sheet__code > strong { min-width: 0; overflow-wrap: anywhere; color: rgba(11, 15, 23, 0.9); font-size: 28px; font-weight: 650; letter-spacing: 1px; }
+.promotion-sheet__code--disabled > strong { color: #999; text-decoration: line-through; }
+.promotion-coupon-row--disabled { opacity: 0.72; }
+.promotion-sheet__code .promotion-sheet__copy { flex: none; margin: 0 0 0 auto; min-height: 48px; padding: 7px 20px; border: 0; border-radius: 999px; color: #fff; background: #c8a45e; font-size: 22px; }
+.promotion-sheet__stores { margin: 16px 32px 0; padding: 8px 24px; border-radius: 20px; background: #fff; }
+.promotion-sheet__store { display: flex; align-items: center; gap: 16px; padding: 18px 0; color: #493d36; font-size: 24px; }
+.promotion-sheet__store + .promotion-sheet__store { border-top: 1px solid #ecedf1; }
+.promotion-sheet__store img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
+.promotion-sheet__store > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
+.promotion-sheet__store strong { color: rgba(11, 15, 23, 0.9); font-size: 26px; font-weight: 650; }
+.promotion-sheet__store small { overflow: hidden; color: rgba(11, 15, 23, 0.55); font-size: 22px; line-height: 32px; text-overflow: ellipsis; white-space: nowrap; }
+.promotion-sheet__navigate { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; margin-left: auto; border: 0; border-radius: 8px; padding: 8px 10px; background: #fff1eb; color: #d4512d; font-size: 22px; cursor: pointer; }
+.promotion-list--coupon,
+.promotion-entitlements,
+.promotion-detail--coupon {
+  /* 外框由宿主 .tbox-card 统一负责，券域只重排内部层级。 */
+  background: #fff;
+}
+.promotion-list--coupon .promotion-card__header,
+.promotion-entitlements .promotion-card__header {
+  gap: 16px;
+  padding: 24px 28px 18px;
+  border-bottom: 1px solid #f0f1f4;
+}
+.promotion-list--coupon .promotion-card__mark,
+.promotion-entitlements .promotion-card__mark {
+  flex-basis: 58px;
+  width: 58px;
+  height: 58px;
+  border: 0;
+  border-radius: 16px;
+  background: var(--promo-coral-soft);
+  color: var(--promo-ticket);
+  box-shadow: none;
+}
+.promotion-list--coupon .promotion-card__mark svg,
+.promotion-entitlements .promotion-card__mark svg {
+  width: 32px;
+  height: 32px;
+}
+.promotion-list--coupon .promotion-card__eyebrow,
+.promotion-entitlements .promotion-card__eyebrow {
+  margin: 0;
+  color: rgba(11, 15, 23, 0.62);
+  font-size: 18px;
+  line-height: 24px;
+}
+.promotion-list--coupon .promotion-card__header h3,
+.promotion-entitlements .promotion-card__header h3 {
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 38px;
+}
+.promotion-list--coupon .promotion-card__header p,
+.promotion-entitlements .promotion-card__header p {
+  margin-top: 0;
+  font-size: 18px;
+  line-height: 26px;
+}
+.promotion-list--coupon .promotion-card__count,
+.promotion-entitlements .promotion-card__count {
+  padding: 7px 12px;
+  border: 0;
+  background: #f5f6f8;
+  font-size: 17px;
+}
+.promotion-list--coupon .promotion-list__items {
+  padding: 0 28px 8px;
+  overflow: hidden;
+  transition: max-height 320ms ease;
+}
+.promotion-list--coupon .promotion-list__items--expanded { transition: none; }
+.promotion-list--coupon .promotion-list__items > article {
+  grid-template-columns: 112px minmax(0, 1fr) auto auto;
+  gap: 14px;
+  min-height: 154px;
+  padding: 18px 0;
+  border-color: #f0f1f4;
+}
+.promotion-list--coupon .promotion-list__visual,
+.promotion-list--coupon .promotion-list__thumb {
+  width: 112px;
+  height: 112px;
+  border-radius: 12px;
+}
+.promotion-list--coupon .promotion-list__thumb {
+  box-shadow: inset 0 0 0 1px rgba(11, 15, 23, 0.04);
+}
+.promotion-list--coupon .promotion-list__visual > em {
+  display: none;
+}
+.promotion-list--coupon .promotion-list__copy {
+  position: relative;
+  gap: 3px;
+  align-self: stretch;
+  align-content: center;
+}
+.promotion-list--coupon .promotion-list__copy > small:first-child {
+  color: rgba(11, 15, 23, 0.62);
+  font-size: 16px;
+  line-height: 22px;
+}
+.promotion-list--coupon .promotion-list__copy > strong {
+  display: -webkit-box;
+  overflow: hidden;
+  color: rgba(11, 15, 23, 0.88);
+  font-size: 23px;
+  line-height: 30px;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.promotion-list--coupon .promotion-list__copy > span:not(.promotion-coupon-row__benefit) {
+  color: rgba(11, 15, 23, 0.62);
+  font-size: 17px;
+  line-height: 23px;
+}
+.promotion-coupon-row__benefit {
+  display: flex !important;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
+  width: max-content;
+  max-width: 100%;
+  margin-top: 4px;
+  padding: 6px 10px;
+  border-radius: 7px;
+  background: var(--promo-coral-soft);
+}
+.promotion-coupon-row__benefit b {
+  overflow: hidden;
+  color: var(--promo-coral);
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 28px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.promotion-coupon-row__benefit small {
+  overflow: hidden;
+  color: #a94357 !important;
+  font-size: 14px !important;
+  line-height: 20px !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}.promotion-list--coupon .promotion-status {
+  padding: 5px 9px;
+  border-radius: 6px;
+  background: #fff5f1;
+  color: #9f3d24;
+  font-size: 15px;
+}
+.promotion-list--coupon .promotion-status--unavailable,
+.promotion-list--coupon .promotion-status--unknown {
+  background: #f4f5f7;
+  color: #5f6671;
+}
+.promotion-chip--coupon {
+  min-width: 96px;
+  height: 64px;
+  padding: 0 15px;
+  border: 0;
+  /* 米金实心胶囊：动作与价格分色——橙红只留给价格，按钮不与它争夺注意力 */
+  border-radius: 999px;
+  background: linear-gradient(160deg, #c3ad78 0%, #a89058 100%);
+  color: #fff;
+  box-shadow: none;
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.promotion-chip--coupon::after {
+  display: none;
+}
+.promotion-chip--coupon:hover:not(:disabled) {
+  border: 0;
+  background: linear-gradient(160deg, #b39d68 0%, #967f4a 100%);
+  color: #fff;
+  box-shadow: none;
+}
+.promotion-chip--coupon:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #5f101d;
+}.promotion-list--coupon .promotion-card__footer,
+.promotion-entitlements .promotion-card__footer {
+  justify-content: center;
+  padding: 14px 28px 18px;
+  color: rgba(11, 15, 23, 0.62);
+  font-size: 16px;
+  line-height: 24px;
+}
+.promotion-detail--coupon .promotion-detail__hero {
+  height: 214px;
+  margin: 18px 20px 0;
+  border-radius: 16px;
+  background: #f5f6f8;
+}
+.promotion-detail--coupon .promotion-detail__hero-label {
+  top: 14px;
+  left: 14px;
+  border: 0;
+  border-radius: 7px;
+  background: rgba(200, 32, 54, 0.94);
+  font-size: 16px;
+}
+.promotion-detail--coupon .promotion-detail__glass {
+  right: 14px;
+  bottom: 14px;
+  left: 14px;
+  padding: 13px 16px;
+  border: 0;
+  border-radius: 10px;
+  background: rgba(255, 241, 243, 0.94);
+  box-shadow: none;
+  backdrop-filter: blur(8px);
+}
+.promotion-detail--coupon .promotion-detail__glass small {
+  color: #9f3d24;
+  font-size: 16px;
+}
+.promotion-detail--coupon .promotion-detail__glass strong {
+  color: var(--promo-coral);
+  font-size: 36px;
+  line-height: 42px;
+}
+.promotion-detail--coupon .promotion-detail__glass em {
+  color: rgba(11, 15, 23, 0.62);
+  font-size: 17px;
+}
+.promotion-detail--coupon .promotion-detail__body {
+  padding: 22px 28px 28px;
+}
+.promotion-detail--coupon .promotion-detail__body > h3 {
+  margin-top: 13px;
+  font-size: 30px;
+  line-height: 39px;
+}
+.promotion-detail--coupon .promotion-detail__body > p {
+  margin-top: 5px;
+  font-size: 19px;
+  line-height: 29px;
+}
+.promotion-detail--coupon .promotion-detail__facts {
+  border-color: #eceef2;
+  background: #fafafb;
+}
+.promotion-detail--coupon .promotion-detail__notice {
+  border: 0;
+  background: var(--promo-coral-soft);
+  color: #8a4a3d;
+}
+/* 全宽主 CTA：不做票根斜切——斜切是紧凑 chip 的语言（见 .promotion-button--primary 注释），
+   拉到全宽后两端的斜边会读成渲染错位；且 clip-path 会把 border-radius 一并切掉。 */
+.promotion-coupon-main-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 76px;
+  margin-top: 18px;
+  border: 0;
+  border-radius: 12px;
+  background: #d9273d;
+  color: #fff;
+  font: inherit;
+  font-size: 22px;
+  font-weight: 800;
+  cursor: pointer;
+}
+.promotion-coupon-main-action--pending {
+  position: relative;
+  overflow: hidden;
+  cursor: wait;
+}
+.promotion-coupon-main-action--pending::after {
+  position: absolute;
+  inset: 0;
+  width: 38%;
+  background: rgba(255, 255, 255, 0.18);
+  content: '';
+  transform: translateX(-140%) skewX(-18deg);
+  animation: promotion-claim-progress 1.1s ease-in-out infinite;
+}
+@keyframes promotion-claim-progress {
+  0% { transform: translateX(-140%) skewX(-18deg); }
+  100% { transform: translateX(360%) skewX(-18deg); }
+}
+.promotion-coupon-main-action:hover:not(:disabled) {
+  background: #c82036;
+}
+.promotion-coupon-main-action:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #5f101d;
+}
+.promotion-coupon-main-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+@media (max-width: 520px) {
+  .promotion-list--coupon .promotion-list__items > .promotion-coupon-row {
+    grid-template-rows: auto;
+  }
+  .promotion-coupon-row .promotion-chip--coupon {
+    grid-column: 3;
+    grid-row: 1;
+    align-self: center;
+    justify-self: end;
+    min-width: 96px;
+    height: 64px;
+    padding: 0 15px;
+    font-size: 24px;
+  }
+}
+
+/* ===== promotion-bumpin（碰出惊喜活动卡，detail/banner 双模式；mall-vis 营销域） =====
+ * 结构：深蓝渐变头（cover/占位徽章 + 标题 + 副题 + 时段徽章）→ 进度（轨道 + 橙渐变 fill）→
+ *   奖励池（浅灰内嵌块 + 白底条目）→ 活动规则（HTML 富文本块）。banner 模式无 prizes/rules 自然收敛。
+ * 值为 750/2x 源码 px（折半渲染）；域变量沿用 .promotion-card 色板。 */
+.promotion-bumpin__header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 28px;
+  background: var(--promo-activity-gradient);
+}
+.promotion-bumpin__cover {
+  flex: 0 0 auto;
+  width: 116px;
+  height: 116px;
+  border-radius: 20px;
+  object-fit: cover;
+  box-shadow: 0 8px 22px rgba(2, 18, 55, 0.32);
+}
+.promotion-bumpin__cover-placeholder {
+  display: grid;
+  flex: 0 0 auto;
+  width: 116px;
+  height: 116px;
+  place-items: center;
+  border-radius: 20px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.16);
+}
+.promotion-bumpin__header-copy {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+.promotion-bumpin__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow-wrap: anywhere;
+  color: #fff;
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 40px;
+}
+.promotion-bumpin__title svg {
+  flex: 0 0 auto;
+}
+.promotion-bumpin__subtitle {
+  color: rgba(255, 255, 255, 0.84);
+  font-size: 22px;
+  line-height: 30px;
+}
+.promotion-bumpin__period {
+  justify-self: start;
+  padding: 4px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  color: #fff;
+  font-size: 18px;
+  line-height: 26px;
+}
+.promotion-bumpin__progress {
+  display: grid;
+  gap: 10px;
+  padding: 24px 28px 0;
+}
+.promotion-bumpin__progress-bar {
+  height: 14px;
+  border-radius: 999px;
+  background: var(--promo-line);
+  overflow: hidden;
+}
+.promotion-bumpin__progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--promo-cta-orange);
+  transition: width 0.28s ease;
+}
+.promotion-bumpin__progress-text {
+  color: var(--promo-muted);
+  font-size: 20px;
+  line-height: 28px;
+}
+.promotion-bumpin__prizes {
+  margin: 24px 28px 0;
+  border: 2px solid var(--promo-line);
+  border-radius: 24px;
+  background: #f5f7fa;
+  overflow: hidden;
+}
+.promotion-bumpin__prizes-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  color: #b06b2e;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 30px;
+  border-bottom: 2px solid var(--promo-line);
+}
+.promotion-bumpin__prizes-list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.promotion-bumpin__prize-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  background: #fff;
+  border-bottom: 2px solid var(--promo-line);
+}
+.promotion-bumpin__prize-item:last-child {
+  border-bottom: 0;
+}
+.promotion-bumpin__prize-logo {
+  flex: 0 0 auto;
+  width: 72px;
+  height: 72px;
+  border-radius: 16px;
+  object-fit: cover;
+}
+.promotion-bumpin__prize-logo-placeholder {
+  flex: 0 0 auto;
+  width: 72px;
+  height: 72px;
+  border-radius: 16px;
+  background: var(--promo-mint-soft);
+}
+.promotion-bumpin__prize-copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+.promotion-bumpin__prize-copy strong {
+  overflow: hidden;
+  color: var(--promo-ink);
+  font-size: 24px;
+  font-weight: 650;
+  line-height: 32px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.promotion-bumpin__prize-copy small {
+  overflow: hidden;
+  color: var(--promo-muted);
+  font-size: 20px;
+  line-height: 28px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 折叠/展开按钮 */
+.promotion-bumpin__prizes-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  padding: 16px 20px;
+  border: none;
+  background: none;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--promo-muted);
+  cursor: pointer;
+  border-top: 2px solid var(--promo-line);
+}
+.promotion-bumpin__prizes-toggle:active {
+  opacity: 0.7;
+}
+
+.promotion-bumpin__rules {
+  margin: 24px 28px 28px;
+  border-radius: 20px;
+  background: #f5f7fa;
+  overflow: hidden;
+}
+.promotion-bumpin__rules-header {
+  padding: 14px 20px 0;
+  color: var(--promo-muted);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+}
+.promotion-bumpin__rules-content {
+  padding: 10px 20px 16px;
+  color: var(--promo-muted);
+  font-size: 20px;
+  line-height: 32px;
+  word-break: break-word;
+}
+.promotion-bumpin__rules-content img {
+  max-width: 100%;
+}
+
+/* ===== 券行（超值好券形态）=====
+   米金作动作与标记、橙红只给价格：一屏五六行券，价格是唯一需要被瞬间比较的量，
+   把它独占最强色，其余（按钮、类目、榜位）退到同一支米金里，视线才有落点。 */
+.promotion-list--coupon .promotion-list__items > .promotion-coupon-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr) auto;
+  gap: 0 16px;
+  align-items: center;
+  padding: 18px 0;
+  overflow: hidden;
+  /* 整行是唯一可交互控件（领/抢只是视觉承诺），可点性得由行自己交代 */
+  cursor: pointer;
+}
+.promotion-coupon-row__thumb {
+  display: block;
+  width: 112px;
+  height: 112px;
+  border-radius: 12px;
+  box-shadow: inset 0 0 0 1px rgba(11, 15, 23, 0.04);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.promotion-coupon-row__thumb.promotion-image--fallback {
+  display: grid;
+  place-items: center;
+}
+.promotion-coupon-row__main {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+  align-self: stretch;
+  justify-content: center;
+  padding-right: 4px;
+}
+.promotion-coupon-row__title {
+  display: -webkit-box;
+  overflow: hidden;
+  color: rgba(11, 15, 23, 0.9);
+  font-size: 23px;
+  font-weight: 750;
+  line-height: 30px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.promotion-coupon-row__sub {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  color: rgba(11, 15, 23, 0.55);
+  font-size: 17px;
+  line-height: 23px;
+}
+.promotion-coupon-row__price {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  margin-top: 2px;
+}
+.promotion-coupon-row__price > b {
+  flex-shrink: 0;
+  color: #e8471c;
+  font-size: 26px;
+  font-weight: 800;
+  line-height: 32px;
+}
+.promotion-coupon-row__discount {
+  flex-shrink: 0;
+  padding: 1px 6px;
+  border-radius: 4px;
+  color: #e8471c;
+  background: #fff1eb;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+/* 我的券复用券行骨架，两处差异：有效期跟在额度后，右侧是状态而非动作 */
+.promotion-coupon-row__validity {
+  flex-shrink: 0;
+  color: rgba(11, 15, 23, 0.45);
+  font-size: 17px;
+  font-weight: 400;
+}
+.promotion-coupon-row__state {
+  flex-shrink: 0;
+  align-self: center;
+  padding: 8px 14px;
+  border-radius: 8px;
+  background: #fff5f1;
+  color: #9f3d24;
+  font-size: 22px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+/* 不可再用的券退成中性灰：暖色会让它读作还能用 */
+.promotion-coupon-row__state--used,
+.promotion-coupon-row__state--expired,
+.promotion-coupon-row__state--invalid,
+.promotion-coupon-row__state--unknown {
+  background: #f4f5f7;
+  color: #5f6671;
+}
+.promotion-coupon-row__price > s {
+  overflow: hidden;
+  color: rgba(11, 15, 23, 0.38);
+  font-size: 17px;
+  line-height: 23px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 可领券列表拿掉期限行后，把释放出的纵向空间还给核心信息；
+   「我的券」仍复用原尺寸，避免状态型列表被连带放大。 */
+.promotion-list--coupon .promotion-coupon-row__main {
+  gap: 7px;
+}
+.promotion-list--coupon .promotion-coupon-row__title {
+  font-size: 25px;
+  line-height: 32px;
+}
+.promotion-list--coupon .promotion-coupon-row__tags {
+  gap: 6px;
+  margin-top: 0;
+}
+.promotion-list--coupon .promotion-coupon-row__tags em {
+  padding: 4px 9px;
+  font-size: 16px;
+  line-height: 24px;
+}
+.promotion-list--coupon .promotion-coupon-row__tag--rank {
+  padding: 4px 9px !important;
+  font-size: 16px !important;
+}
+.promotion-list--coupon .promotion-coupon-row__price > b {
+  font-size: 28px;
+  line-height: 34px;
+}
+.promotion-list--coupon .promotion-coupon-row__discount {
+  padding: 2px 7px;
+  font-size: 15px;
+  line-height: 21px;
+}
+.promotion-list--coupon .promotion-coupon-row__price > s {
+  font-size: 18px;
+  line-height: 24px;
+}
+.promotion-item-actions--coupon {
+  flex-shrink: 0;
+}
+.promotion-owned-action {
+  justify-self: end;
+  pointer-events: none;
+}
+
+/* 神券与门店导览对齐；独立作用域避免影响复用券行的「我的券」。 */
+.promotion-list--offers {
+  padding-bottom: 24px;
+}
+.promotion-list--offers .promotion-list__items {
+  padding-bottom: 0;
+}
+.promotion-list--offers .promotion-list__items > .promotion-coupon-row {
+  grid-template-columns: 136px minmax(0, 1fr) auto;
+  gap: 0 18px;
+  padding: 20px 0;
+  border: 0;
+}
+.promotion-list--offers .promotion-coupon-row__thumb {
+  width: 136px;
+  height: 136px;
+  border-radius: 18px;
+}
+.promotion-list--offers .promotion-coupon-row__main {
+  gap: 8px;
+}
+.promotion-list--offers .promotion-coupon-row__title {
+  color: var(--tbox-text-primary, #202124);
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 38px;
+}
+.promotion-list--offers .promotion-coupon-row__tags {
+  gap: 8px;
+}
+.promotion-list--offers .promotion-coupon-row__tags em {
+  flex-shrink: 0;
+  max-width: 160px;
+  overflow: hidden;
+  padding: 2px 10px;
+  border-radius: 7px;
+  color: #986415;
+  background: #fff4df;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.promotion-list--offers .promotion-list__toggle {
+  display: flex;
+  gap: 4px;
+  min-height: 64px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #686d69;
+  font-size: 24px;
+  font-weight: 400;
+}
+.promotion-list--offers .promotion-list__toggle:hover {
+  filter: none;
+}
+.promotion-list--offers .promotion-list__toggle:focus-visible {
+  outline: 3px solid rgba(9, 107, 250, 0.28);
+  outline-offset: 2px;
+  border-radius: 10px;
+}
+
+/* 不可领：退成描边灰。与可领同样醒目的米金实心会让人以为点下去能领到 */
+.promotion-chip--coupon-off,
+.promotion-chip--coupon-off:hover:not(:disabled) {
+  background: #f5f5f7;
+  color: rgba(11, 15, 23, 0.45);
+  box-shadow: inset 0 0 0 1px #e3e4e8;
+}
+
+/* ===== 券详情浮层 =====
+   底部抽屉而非居中弹窗：这是从列表行「拉起来」的详情，从下方升起与手势方向一致；
+   高度封顶 82vh，内容长了在内部滚，底部价格与领取条始终贴边不随内容跑掉。 */
+.promotion-sheet {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  background: rgba(11, 15, 23, 0.42);
+  animation: promotion-sheet-in 180ms ease-out;
+}
+.promotion-sheet__panel {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 750px;
+  max-height: 82vh;
+  flex-direction: column;
+  border-radius: 36px 36px 0 0;
+  background: #fff;
+  animation: promotion-sheet-up 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.promotion-sheet__close {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  z-index: 2;
+  display: grid;
+  width: 60px;
+  height: 60px;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(11, 15, 23, 0.42);
+  color: #fff;
+  cursor: pointer;
+}
+.promotion-sheet__scroll {
+  overflow-y: auto;
+  padding: 0 0 12px;
+  -webkit-overflow-scrolling: touch;
+}
+.promotion-sheet__image {
+  width: 100%;
+  height: 420px;
+  border-radius: 36px 36px 0 0;
+  /* 券图比例由厂商配置决定，完整展示避免横幅/竖图被裁切。 */
+  object-fit: contain;
+  background: #f5f6f8;
+}
+.promotion-sheet__price {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  padding: 24px 32px;
+  background: linear-gradient(180deg, #fdf1e8 0%, #fbe7d9 100%);
+}
+.promotion-sheet__price > b {
+  color: #e8471c;
+  font-size: 46px;
+  font-weight: 800;
+  line-height: 54px;
+}
+.promotion-sheet__price > s {
+  color: rgba(11, 15, 23, 0.4);
+  font-size: 22px;
+}
+.promotion-sheet__stock {
+  margin-left: auto;
+  color: rgba(11, 15, 23, 0.55);
+  font-size: 22px;
+}
+.promotion-sheet__title {
+  margin: 28px 32px 0;
+  color: rgba(11, 15, 23, 0.9);
+  font-size: 34px;
+  font-weight: 750;
+  line-height: 46px;
+}
+.promotion-sheet__sub {
+  margin: 12px 32px 0;
+  color: rgba(11, 15, 23, 0.55);
+  font-size: 26px;
+  line-height: 38px;
+}
+.promotion-sheet__notice-strip {
+  display: grid;
+  gap: 6px;
+  margin: 12px 32px 0;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: #fff8ef;
+  font-size: 26px;
+  line-height: 38px;
+}
+.promotion-sheet__notice-strip span {
+  display: grid;
+  grid-template-columns: 144px minmax(0, 1fr);
+  gap: 12px;
+}
+.promotion-sheet__notice-strip b {
+  width: auto;
+  text-align: left;
+  color: #b38a3e;
+}
+.promotion-sheet__notice-strip span + span b {
+  color: #ef7654;
+}
+.promotion-sheet__section {
+  margin: 34px 32px 0;
+  color: rgba(11, 15, 23, 0.9);
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 40px;
+}
+.promotion-sheet__facts {
+  margin: 16px 32px 0;
+  padding: 6px 24px;
+  border-radius: 20px;
+  background: #f7f8fa;
+}
+.promotion-sheet__facts > div {
+  display: flex;
+  gap: 12px;
+  padding: 22px 0;
+  border-bottom: 1px solid #ecedf1;
+}
+.promotion-sheet__facts > div:last-child {
+  border-bottom: 0;
+}
+.promotion-sheet__facts dt {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 7px;
+  width: 140px;
+  color: rgba(11, 15, 23, 0.55);
+  font-size: 24px;
+  line-height: 34px;
+}
+.promotion-sheet__facts dd {
+  color: rgba(11, 15, 23, 0.85);
+  font-size: 26px;
+  line-height: 38px;
+  overflow-wrap: anywhere;
+}
+.promotion-sheet__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 22px 32px calc(22px + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid #eef0f3;
+  background: #fff;
+}
+.promotion-sheet__foot-price {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+.promotion-sheet__foot-price > b {
+  color: #e8471c;
+  font-size: 40px;
+  font-weight: 800;
+}
+.promotion-sheet__foot-price > s {
+  color: rgba(11, 15, 23, 0.4);
+  font-size: 22px;
+}
+.promotion-chip--coupon-lg {
+  min-width: 240px;
+  height: 84px;
+  font-size: 26px;
+}
+@keyframes promotion-sheet-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes promotion-sheet-up {
+  from { transform: translateY(14%); }
+  to { transform: translateY(0); }
+}
+@keyframes promotion-sheet-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes promotion-sheet-down {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+.promotion-sheet--closing {
+  pointer-events: none;
+  animation: promotion-sheet-out 180ms ease-in both;
+}
+.promotion-sheet--closing .promotion-sheet__panel {
+  animation: promotion-sheet-down 180ms ease-in both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .promotion-sheet,
+  .promotion-sheet__panel,
+  .promotion-sheet--closing .promotion-sheet__panel {
+    animation-duration: 1ms;
+  }
+}
+/* 券行整行可点：给出可点的手感，但不喧宾夺主 */
+.promotion-coupon-row[role='button'] {
+  cursor: pointer;
+}
+.promotion-coupon-row[role='button']:focus-visible {
+  outline: 2px solid var(--promo-primary);
+  outline-offset: -2px;
+  border-radius: 12px;
+}