/* XDMDX（小店卖东西）促销展位页
 *
 * 这一页只做一件事：让「位次 = 价格」这件事不用看价目表就能感觉到。
 * 所以尺寸是**信息**，不是装饰：
 *   1-3 号 ¥1000/天 → 大卡，有图，标题大，价格大
 *   4-7 号 ¥800/天  → 中卡，图矮一半
 *   8-10 号 ¥500/天 → 小卡，不放图，只留价格和标题
 * 三个档位用三条横带分开，横带上写明档位与单价；带宽本身也递减（2 列 → 2 列 → 3 列）。
 *
 * 「大路通南北」的做法：整块展位板上有一条竖直虚线中轴（.xx-board::before），
 * 横带标题压在中轴上当作路牌，卡片压在线的两侧（卡片 z-index 更高，线从卡片背后穿过）。
 * 不画插画、不用 emoji —— 这条线就是全部的视觉母题。
 *
 * 颜色一律取 site.css 的变量（深蓝 #0E3560 / 金 #b8935a / 绿 #1a7f5a），
 * 不引入外部字体与图片，站外商品图只用接口给的 image 字段。
 */

/* ---------- 首屏：字标 ---------- */
.xx-hero {
  position: relative;
  padding: 46px 24px 44px;
  background: linear-gradient(163deg, #0a2747 0%, #0e3560 44%, #1d4e84 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
/* 中轴从首屏底部引出，接到下面的展位板：让「路」是连续的，而不是从中间突然开始 */
.xx-hero::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .34));
}
.xx-hero-in { max-width: 1120px; margin: 0 auto; }
.xx-wordmark {
  font-size: 42px; font-weight: 700; line-height: 1.1;
  letter-spacing: .34em;
  /* letter-spacing 会在最后一个字母后也留一份间距，用负 margin 抵掉，否则整体看起来偏左 */
  margin-right: -.34em;
}
.xx-hero-rule {
  width: 54px; height: 2px; margin: 16px auto 14px;
  background: var(--gold);
}
.xx-cn {
  font-size: 17px; font-weight: 600;
  letter-spacing: .3em; margin-right: -.3em;
  color: #eadfc6;
}
.xx-slogan {
  margin: 12px 0 0;
  font-size: 23px; font-weight: 600;
  letter-spacing: .12em; margin-right: -.12em;
  color: #fff;
}
.xx-deck {
  margin: 12px 0 0;
  font-size: 13.5px; color: #c3d4e8;
}
.xx-deck b { color: #fff; font-weight: 600; }
.xx-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin-top: 20px;
  font-size: 13px; color: #b9cbe0;
}
.xx-stats b { color: #fff; font-size: 15px; }
.xx-hero-acts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 22px;
}

/* ---------- 通用按钮 ---------- */
.xx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 22px;
  border: 1px solid transparent; border-radius: 8px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.xx-btn:hover { text-decoration: none; }
.xx-btn-main { background: var(--blue); color: #fff; }
.xx-btn-main:hover { background: var(--blue-d); }
.xx-btn-gold { background: var(--gold); color: #2b1d0a; }
.xx-btn-gold:hover { background: #a37f4a; }
.xx-btn-ghost { background: #fff; color: var(--ink-2); border-color: var(--line); }
.xx-btn-ghost:hover { color: var(--ink); background: #f7f9fc; }
.xx-btn[disabled] { opacity: .55; cursor: not-allowed; }
/* .xx-btn 是 inline-flex，会盖掉 [hidden] 的 UA 样式；提交成功后要把按钮藏起来，得显式写一条 */
.xx-btn[hidden] { display: none; }

/* ---------- 数据异常提示条 ----------
   接口挂了也必须让用户看得见「还能提交意向」，而不是以为这页坏了 */
.xx-alert { max-width: 1120px; margin: 14px auto 0; padding: 0 24px; }
.xx-alert-in {
  padding: 9px 14px;
  background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 8px;
  font-size: 13px; color: #8a6a33;
}
/* 提交成功后的回执用绿色：同一块位置承担两种语气，靠底色区分比多一个元素更省 */
.xx-alert-in.ok { background: #f2f8f4; border-color: rgba(26, 127, 90, .28); color: #14603f; }

/* ---------- 展位板（中轴） ---------- */
.xx-board {
  position: relative;
  max-width: 1120px; margin: 0 auto;
  padding: 26px 24px 8px;
}
.xx-board::before {
  content: '';
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(14, 53, 96, .24) 0 9px,
    rgba(14, 53, 96, 0) 9px 18px
  );
}
.xx-band { position: relative; z-index: 1; }
.xx-band + .xx-band { margin-top: 30px; }
.xx-band-hd {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 14px;
}
.xx-band-rule {
  flex: 0 1 118px; height: 1px;
  background: linear-gradient(to right, rgba(14, 53, 96, 0), rgba(14, 53, 96, .22));
}
.xx-band-rule.r { background: linear-gradient(to left, rgba(14, 53, 96, 0), rgba(14, 53, 96, .22)); }
/* 路牌：横带标题压在中轴上，底色盖掉虚线，读起来就是「这条路走到这一站」 */
.xx-band-tag {
  flex: none;
  padding: 3px 13px;
  background: var(--gold-l);
  border: 1px solid rgba(184, 147, 90, .5); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  color: #7a6033;
  white-space: nowrap;
}
.xx-band-grid { display: grid; gap: 16px; }
/* 首屏带：左边 1 号位（2/3 宽）跨两行，右边 2、3 号各占一行。
   行高交给内容决定（不用 1fr）：1 号位的内容高于右侧两卡之和时，行会一起长高，
   右侧卡片靠 .xx-foot 的 margin-top:auto 把按钮压到底，视觉上仍然齐。 */
.xx-band-a .xx-band-grid { grid-template-columns: 1.58fr 1fr; }
/* 1 号位吃掉首屏两行：右边 2、3 号各占一行，两张小卡的高度之和正好等于大卡，
   「尺寸即价目表」这个信息才成立 */
.xx-band-a .xx-card.is-lead { grid-row: span 2; }
.xx-band-b .xx-band-grid { grid-template-columns: repeat(2, 1fr); }
.xx-band-c .xx-band-grid { grid-template-columns: repeat(3, 1fr); }

/* ---------- 卡片 ---------- */
.xx-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease;
}
.xx-card:hover { box-shadow: 0 10px 26px rgba(14, 53, 96, .13); transform: translateY(-1px); }

.xx-media { position: relative; flex: none; background: #f2f4f8; overflow: hidden; }
.xx-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 三档尺寸：这是本页最主要的信息层级 */
.xx-c-first .xx-media { height: 216px; }
.xx-band-a .xx-card:not(.is-lead) .xx-media { height: 68px; }
.xx-c-mid .xx-media { height: 120px; }
.xx-c-tail .xx-media { display: none; }   /* 500 元档不放图：省下的高度就是价签 */

.xx-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 14px; min-width: 0; }
.xx-c-first .xx-body { padding: 16px 18px 15px; }
/* 没有图区时，印章角标会压到正文首行，所以把正文顶下来一点 */
.xx-card.xx-no-media .xx-body { padding-top: 38px; }

.xx-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xx-shop {
  font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 平台角标：纯文字色块，不使用任何平台的 logo 图片（未获授权） */
.xx-plat {
  flex: none;
  padding: 2px 7px; border-radius: 3px;
  background: #6b7280; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.6;
}
.xx-plat[data-plat="天猫"] { background: #c9151e; }
.xx-plat[data-plat="淘宝"] { background: #ff5000; }
.xx-plat[data-plat="京东"] { background: #b81c22; }
.xx-plat[data-plat="拼多多"] { background: #e02e24; }
.xx-plat[data-plat="抖音商城"] { background: #161823; }
.xx-plat[data-plat="唯品会"] { background: #c8102e; }
.xx-plat[data-plat="其他平台"] { background: #6b7280; }

.xx-title {
  margin: 9px 0 0;
  font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.xx-c-first .xx-title { font-size: 19px; }
.xx-c-tail .xx-title { font-size: 14px; -webkit-line-clamp: 2; }
.xx-sub {
  margin: 6px 0 0;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 价格：活动价大、原价划掉、折扣单独贴标（没有原价时后端不给折扣，这里也不编） */
.xx-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.xx-now { font-size: 25px; font-weight: 700; color: #b23b3b; letter-spacing: -.02em; }
.xx-c-first .xx-now { font-size: 29px; }
.xx-c-tail .xx-now { font-size: 19px; }
.xx-now em { font-size: 14px; font-style: normal; font-weight: 600; margin-right: 1px; }
.xx-old { font-size: 12.5px; color: var(--ink-3); text-decoration: line-through; }
.xx-off {
  padding: 0 5px; border-radius: 4px;
  border: 1px solid rgba(178, 59, 59, .34); color: #b23b3b;
  font-size: 11.5px; font-weight: 600; line-height: 1.65;
}
.xx-ask { font-size: 13px; color: var(--ink-2); }
.xx-sales { margin-top: 5px; font-size: 12px; color: var(--ink-3); }

/* 页脚条：广告标识 + 动作按钮。广告标识是法定义务，字号不低于 11px，不许做成 hover 才出现 */
.xx-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px;
}
.xx-c-first .xx-foot, .xx-c-mid .xx-foot { border-top: 1px dashed var(--line); margin-top: 12px; }
.xx-ad { font-size: 11px; color: #98a2b3; letter-spacing: .02em; }
.xx-go {
  flex: none;
  padding: 7px 15px; border-radius: 7px;
  font-size: 13px; font-weight: 700;
}
.xx-c-first .xx-go { padding: 9px 20px; font-size: 13.5px; }

/* 服务商位：没有价格，用机构身份做视觉重心 */
.xx-prov { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xx-prov-tag {
  flex: none;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(26, 127, 90, .1); color: #1a7f5a;
  border: 1px solid rgba(26, 127, 90, .26);
  font-size: 11px; font-weight: 700;
}
.xx-prov b {
  font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 印章角标：朱色、略旋转、压在左上角。要求来自运营，也替代不了 adLabel（两者都要有） */
.xx-seal {
  position: absolute; z-index: 3; top: 10px; left: 10px;
  padding: 3px 8px;
  background: rgba(168, 51, 44, .95); color: #fff;
  border-radius: 3px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-indent: .18em;
  line-height: 1.5;
  transform: rotate(-4deg);
  box-shadow: 0 2px 6px rgba(70, 12, 10, .22);
}

/* 空位卡：虚线 + 淡底 + 大号位号水印，一眼看出「还没卖出去」而不是「加载失败」 */
.xx-empty { background: #fbfcfe; border-style: dashed; border-color: #d3dbe6; box-shadow: none; }
.xx-empty:hover { transform: none; box-shadow: none; }
.xx-no {
  position: absolute; right: 10px; top: 2px;
  font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: rgba(14, 53, 96, .08);
}
.xx-c-tail .xx-no { font-size: 34px; }
.xx-empty-t { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.xx-empty-s { margin-top: 4px; font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.xx-empty-price { margin-top: 8px; font-size: 21px; font-weight: 700; color: var(--blue); }
.xx-c-first .xx-empty-price { font-size: 25px; }
.xx-c-tail .xx-empty-price { font-size: 18px; }
.xx-empty-price i { font-size: 12px; font-style: normal; font-weight: 400; color: var(--ink-3); }

/* ---------- 价目表 ---------- */
.xx-price-sec { max-width: 1120px; margin: 34px auto 0; padding: 0 24px 46px; }
.xx-price-box {
  padding: 24px 24px 22px;
  background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
}
.xx-price-hd h2 { margin: 0; font-size: 18px; color: var(--blue); letter-spacing: .02em; }
.xx-price-hd p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.xx-price-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 18px;
}
.xx-price-row {
  padding: 14px 16px;
  background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px;
}
.xx-price-k { display: block; font-size: 12.5px; color: var(--ink-2); letter-spacing: .04em; }
.xx-price-v { display: block; margin-top: 6px; font-size: 24px; font-weight: 700; color: var(--blue); }
.xx-price-v i { font-size: 12.5px; font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.xx-price-note {
  margin: 16px 0 0;
  padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--ink-3); line-height: 1.75;
}
.xx-price-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.xx-price-acts .xx-hint { font-size: 12.5px; color: var(--ink-3); }

/* ---------- 弹层（离开提示 / 留资） ---------- */
.xx-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.xx-modal[hidden] { display: none; }
.xx-modal-bg { position: absolute; inset: 0; background: rgba(10, 26, 45, .55); }
.xx-modal-panel {
  position: relative;
  width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto;
  padding: 22px 22px 18px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 26, 45, .3);
}
.xx-modal-panel.wide { max-width: 600px; }
.xx-modal-t { margin: 0; font-size: 17px; color: var(--blue); }
.xx-modal-b { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
.xx-modal-b b { color: var(--ink); }
.xx-modal-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.xx-modal-acts .xx-btn { padding: 9px 18px; font-size: 14px; }

/* 留资表单：字段名与 server/xdmxd.js 的取值一一对应，改这里任何一个 name 都会变成空值 */
.xx-f { margin-top: 14px; }
.xx-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xx-f-k {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.xx-f-k i { font-style: normal; color: #b23b3b; margin-left: 2px; }
.xx-f input[type="text"], .xx-f input[type="tel"], .xx-f input[type="url"],
.xx-f select, .xx-f textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #dde4ee; border-radius: 8px;
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: #fff;
}
.xx-f textarea { min-height: 68px; resize: vertical; line-height: 1.6; }
.xx-f input:focus, .xx-f select:focus, .xx-f textarea:focus {
  outline: none; border-color: var(--blue-l); box-shadow: 0 0 0 3px rgba(29, 78, 132, .1);
}
.xx-f input.bad, .xx-f select.bad, .xx-f textarea.bad { border-color: #d08a8a; background: #fdf6f6; }
/* 校验失败时红框画在字段上（.xx-f 是整行容器，包里可能有两个控件） */
.xx-f.bad input, .xx-f.bad select, .xx-f.bad textarea { border-color: #d08a8a; background: #fdf6f6; }
.xx-f-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.xx-f-err { display: block; margin-top: 4px; font-size: 12px; color: #b23b3b; min-height: 0; }
.xx-radios { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.xx-radios label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.xx-radios input { margin: 0; }

.xx-form-msg {
  margin: 14px 0 0; padding: 10px 12px;
  border-radius: 8px; font-size: 13px; line-height: 1.7;
  background: #f3f8f5; border: 1px solid rgba(26, 127, 90, .26); color: #14603f;
}
.xx-form-msg.err { background: #fdf3f3; border-color: rgba(178, 59, 59, .3); color: #8f2f2f; }
.xx-form-msg[hidden] { display: none; }
.xx-form-msg b { display: block; font-size: 13.5px; }
.xx-form-msg span { color: inherit; opacity: .85; }

/* 弹层打开时锁住背后页面滚动，避免手机上「弹层跟着手指滚」 */
body.xx-lock { overflow: hidden; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .xx-band-c .xx-band-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* 单列之后中轴会从卡片文字上穿过去，留着只是噪音，收掉 */
  .xx-board::before, .xx-hero::after { display: none; }
  .xx-hero { padding: 34px 16px 30px; }
  .xx-wordmark { font-size: 30px; }
  .xx-slogan { font-size: 19px; }
  .xx-band-a .xx-band-grid,
  .xx-band-b .xx-band-grid,
  .xx-band-c .xx-band-grid { grid-template-columns: 1fr; }
  /* 单列后 1 号位不再跨行：桌面上「1 号大卡 = 右侧两卡之和」是信息，
     手机上这个等式只会变成两张卡之间的空白 */
  .xx-band-a .xx-card.is-lead { grid-row: auto; }
  .xx-board { padding: 20px 16px 4px; }
  .xx-c-first .xx-media { height: 168px; }
  .xx-band-a .xx-card:not(.is-lead) .xx-media { height: 96px; }
  .xx-c-mid .xx-media { height: 150px; }
  .xx-price-sec { padding: 0 16px 36px; }
  .xx-price-box { padding: 18px 16px; }
  .xx-price-grid { grid-template-columns: 1fr; gap: 8px; }
  .xx-price-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; }
  .xx-price-v { margin-top: 0; font-size: 20px; }
  .xx-f-row { grid-template-columns: 1fr; gap: 0; }
  .xx-c-first .xx-title { font-size: 17px; }
  .xx-c-first .xx-now { font-size: 25px; }
}