/* ============================================================
   套餐陈列（plan）
   —— 微信 H5 支付驳回「网站中体验不到服务内容」的**第二半**解药。
      第一半（demo.css 的免费试看）解决「能看到成品」，
      这一半解决「一眼看出这是个明码标价卖东西的网站」。

   🔴 商品一律来自 config.js 的真实 SKU，**不许编不存在的权益**：
      hd_4_9 / print_12_9 / vip_month / vip_quarter / vip_year / credits_10
   🔴 本文件排在 demo.css 之后加载，同特异性天然压过 pc.css / p-index.css。
   🔴 PC 端只加 `grid-row: 5`（新起一行），**绝不碰前四行的既有定位**（285 铁律）。
   ============================================================ */

/* ─────────── ① 首屏价格条（手机端） ─────────── */
/* 目的：审核员第一屏就要看见一个**具体数字**，不用滚动、不用点。 */
.price-strip {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: calc(4 * var(--u)) calc(32 * var(--u)) calc(22 * var(--u));
  padding: calc(18 * var(--u)) calc(24 * var(--u));
  background: linear-gradient(135deg, #eef4ff 0%, #ffffff 70%);
  border: calc(2 * var(--u)) solid #d3e0f7;
  border-radius: calc(18 * var(--u));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.price-strip-ico {
  flex: 0 0 auto;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  border-radius: 50%;
  background: #3d6deb;
  position: relative;
}
.price-strip-ico::after {
  content: '¥';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: calc(28 * var(--u));
  font-weight: 700;
}
.price-strip-body { flex: 1 1 auto; min-width: 0; }
.price-strip-main {
  font-size: calc(26 * var(--u));
  color: #1f2740;
  font-weight: 600;
  line-height: 1.35;
}
.price-strip-main b {
  color: #3d6deb;
  font-size: calc(32 * var(--u));
  font-weight: 800;
  letter-spacing: -0.5px;
}
.price-strip-sub {
  margin-top: calc(4 * var(--u));
  font-size: calc(21 * var(--u));
  color: #7c869c;
  line-height: 1.4;
}
.price-strip-go {
  flex: 0 0 auto;
  font-size: calc(22 * var(--u));
  color: #3d6deb;
  font-weight: 600;
}

/* ─────────── ② 服务与套餐（手机端卡片墙） ─────────── */
.plan-block { margin: calc(10 * var(--u)) 0 calc(28 * var(--u)); }

.plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 calc(32 * var(--u)) calc(6 * var(--u));
}
.plan-title {
  font-size: calc(30 * var(--u));
  font-weight: 700;
  color: #1f2740;
}
.plan-more {
  font-size: calc(23 * var(--u));
  color: #3d6deb;
  cursor: pointer;
}
.plan-sub {
  margin: 0 calc(32 * var(--u)) calc(18 * var(--u));
  font-size: calc(22 * var(--u));
  color: #7c869c;
  line-height: 1.4;
}

.plan-scroll {
  display: flex;
  gap: calc(18 * var(--u));
  /* 🔴 padding-top 必须 ≥ 徽标上溢的一半：徽标是 translateY(-50%) 压在卡片上沿，
     而 overflow-x:auto 会让 overflow-y 也变 auto（CSS 不允许 visible+auto 组合），
     padding 只给 4u 的话「最受欢迎」整个被裁掉，卡上只剩「会员」标签。 */
  padding: calc(22 * var(--u)) calc(32 * var(--u)) calc(10 * var(--u));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.plan-scroll::-webkit-scrollbar { display: none; }

.plan-card {
  flex: 0 0 calc(250 * var(--u));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: calc(22 * var(--u));
  background: #fff;
  border: calc(2 * var(--u)) solid #e8edf6;
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(31, 39, 64, 0.05);
  position: relative;
}
.plan-card--hot {
  border-color: #3d6deb;
  box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(61, 109, 235, 0.16);
}
.plan-badge {
  position: absolute;
  top: calc(-2 * var(--u));
  right: calc(18 * var(--u));
  transform: translateY(-50%);
  padding: calc(3 * var(--u)) calc(14 * var(--u));
  border-radius: calc(999 * var(--u));
  background: linear-gradient(90deg, #3d6deb, #5a8df5);
  color: #fff;
  font-size: calc(19 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}

.plan-tag {
  align-self: flex-start;
  padding: calc(2 * var(--u)) calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #eef4ff;
  color: #3d6deb;
  font-size: calc(19 * var(--u));
  font-weight: 600;
}
.plan-name {
  margin-top: calc(12 * var(--u));
  font-size: calc(25 * var(--u));
  font-weight: 700;
  color: #1f2740;
  line-height: 1.35;
  min-height: calc(68 * var(--u));
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--u));
  margin-bottom: calc(14 * var(--u));
}
.plan-price b {
  font-size: calc(42 * var(--u));
  font-weight: 800;
  color: #3d6deb;
  letter-spacing: -1px;
  line-height: 1;
}
.plan-price span {
  font-size: calc(21 * var(--u));
  color: #98a1b3;
}
.plan-feat {
  list-style: none;
  margin: 0 0 calc(18 * var(--u));
  padding: 0;
  flex: 1 1 auto;
}
.plan-feat li {
  position: relative;
  padding-left: calc(24 * var(--u));
  margin-bottom: calc(8 * var(--u));
  font-size: calc(21 * var(--u));
  color: #5c6780;
  line-height: 1.5;
}
.plan-feat li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #3d6deb;
  font-weight: 700;
}
.plan-buy {
  padding: calc(14 * var(--u)) 0;
  border-radius: calc(12 * var(--u));
  background: linear-gradient(90deg, #3d6deb, #5a8df5);
  color: #fff;
  font-size: calc(24 * var(--u));
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.plan-buy--ghost {
  background: #eef4ff;
  color: #3d6deb;
}

/* ─────────── ③ PC 端 ─────────── */
@media (min-width: 1024px) {
  /* 首屏价格条在 PC 上没必要（顶栏已经有「套餐价格」，右栏也有当前选择） */
  .page:has(.color-row) .price-strip { display: none; }

  /* 🔴 只新起第 5 行，前四行一个格子都不碰 */
  .page:has(.color-row) .plan-block {
    grid-column: 1 / -1;
    grid-row: 5;
    margin: 0;
    padding: 16px 18px 18px;
    background: #fff;
    border: 1px solid #e8edf6;
    border-radius: 14px;
    box-sizing: border-box;
  }
  .page:has(.color-row) .plan-head { margin: 0 0 4px; }
  .page:has(.color-row) .plan-title { font-size: 15px; }
  .page:has(.color-row) .plan-more { font-size: 12.5px; }
  .page:has(.color-row) .plan-sub { margin: 0 0 12px; font-size: 12px; }

  .page:has(.color-row) .plan-scroll {
    padding: 4px 0 0;
    gap: 14px;
    overflow: visible;
  }
  .page:has(.color-row) .plan-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 16px 16px;
    border-radius: 12px;
    box-shadow: none;
  }
  .page:has(.color-row) .plan-badge {
    top: 0;
    right: 14px;
    transform: translateY(-50%);
    font-size: 11px;
    padding: 2px 9px;
  }
  .page:has(.color-row) .plan-tag { font-size: 11px; padding: 1px 7px; }
  .page:has(.color-row) .plan-name {
    font-size: 13.5px;
    margin-top: 8px;
    min-height: 38px;
  }
  .page:has(.color-row) .plan-price { margin-bottom: 10px; }
  .page:has(.color-row) .plan-price b { font-size: 24px; }
  .page:has(.color-row) .plan-price span { font-size: 11.5px; }
  .page:has(.color-row) .plan-feat { margin-bottom: 12px; }
  .page:has(.color-row) .plan-feat li {
    padding-left: 15px;
    margin-bottom: 5px;
    font-size: 11.5px;
  }
  .page:has(.color-row) .plan-buy {
    padding: 9px 0;
    border-radius: 8px;
    font-size: 12.5px;
  }
}

/* ─────────── ④ 底部导航新增「套餐价格」的图标 ─────────── */
/* 站内已有的 .ico-crown-dark 是深棕色描边（#5A3B00），放进 tabbar 会跳色，
   这里按 tabbar 的灰/蓝两态各给一份。 */
.ico-price { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2398A1B3'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%2018h20l-1.5-9-5%203.5L12%205%208.5%2012.5l-5-3.5z'%2F%3E%3Cline%20x1%3D'4'%20y1%3D'21'%20x2%3D'20'%20y2%3D'21'%2F%3E%3C%2Fsvg%3E"); }
.tab--on .ico-price { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%233D6DEB'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%2018h20l-1.5-9-5%203.5L12%205%208.5%2012.5l-5-3.5z'%2F%3E%3Cline%20x1%3D'4'%20y1%3D'21'%20x2%3D'20'%20y2%3D'21'%2F%3E%3C%2Fsvg%3E"); }

/* ─────────── ⑤ PC：不挤压工作台 ─────────── */
/* 实测：直接加 `grid-row: 5` 会让第 3 行（1fr）变矮 ⇒ 规格列表少显示 6 条、
   右栏底色卡第二排（三个渐变底）被裁掉。
   改成「页面自然增高 + 允许窗口滚动」，前四行一个像素都不动。 */
@media (min-width: 1024px) {
  .page:has(.color-row) {
    height: auto;
    min-height: 100vh;
    overflow-y: visible;
  }
}