/* ============================================================
   免费试看效果（demo）
   —— 微信 H5 支付审核驳回原因：「网站中体验不到服务内容」。
      审核员不会上传自己的真人照片，所以必须有**零门槛**的入口：
      不传照片也能看到「原图 → 成品」长什么样，且带上规格/价格/售后。

   🔴 本文件在每页的 <link> 里排在 pc.css / p-*.css **之后**加载
      ⇒ 同特异性天然压过它们，不需要 !important。
   🔴 PC 规则一律加 `.page:has(.color-row)` / `.page:has(.making)` 前缀，
      **绝不碰 pc.css 里已有的 grid-column / grid-row**（285 铁律：
      PC 三栏靠显式 grid 定位，新块只要不抢格子就绝不会打乱版式）。
   🔴 只加视觉，不改任何既有元素的尺寸约束。
   ============================================================ */

/* ─────────── ① 首页入口卡（手机端） ─────────── */
/* 位置：hero 之后（banner 为空时直接压在 hero 下沿，和 banner 的视觉语言一致） */
.demo-entry {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  /* 无 banner 时压住 hero 下沿；有 banner 时由下面的 :has 规则退回正常间距 */
  margin: calc(-56 * var(--u)) calc(32 * var(--u)) calc(22 * var(--u));
  padding: calc(22 * var(--u)) calc(24 * var(--u));
  background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
  border: calc(2 * var(--u)) solid #d9e5fb;
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(24 * var(--u)) rgba(61, 109, 235, 0.10);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 有 banner 时 banner 已经承担了"压住 hero"的角色，这里退回普通间距，避免叠图 */
body:has(.banner) .demo-entry {
  margin-top: calc(24 * var(--u));
}

.demo-entry-thumb {
  flex: 0 0 auto;
  width: calc(96 * var(--u));
  height: calc(128 * var(--u));
  border-radius: calc(12 * var(--u));
  overflow: hidden;
  background: #eef2f9;
  box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(28, 35, 51, 0.12);
}
.demo-entry-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.demo-entry-body {
  flex: 1 1 auto;
  min-width: 0;
}
.demo-entry-title {
  font-size: calc(32 * var(--u));
  font-weight: 700;
  color: #1c2333;
  line-height: 1.4;
}
.demo-entry-badge {
  display: inline-block;
  margin-left: calc(10 * var(--u));
  padding: 0 calc(10 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: calc(32 * var(--u));
  color: #b8791a;
  background: #fdf3e0;
  border-radius: calc(8 * var(--u));
  vertical-align: calc(4 * var(--u));
}
.demo-entry-sub {
  margin-top: calc(10 * var(--u));
  font-size: calc(24 * var(--u));
  color: #5c6780;
  line-height: 1.6;
}
.demo-entry-go {
  flex: 0 0 auto;
  font-size: calc(26 * var(--u));
  font-weight: 600;
  color: #3d6deb;
  white-space: nowrap;
}

/* ─────────── ② 底部按钮条里的次入口（PC 画布用） ─────────── */
.footer-demo {
  display: none;              /* 手机端不显示：上面已有独立入口卡 */
  font-size: calc(24 * var(--u));
  color: #3d6deb;
  cursor: pointer;
}

/* ─────────── ③ 试看浮层 ─────────── */
.demo-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(40 * var(--u));
  background: rgba(18, 24, 38, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.demo-sheet {
  width: 100%;
  max-width: calc(660 * var(--u));
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: calc(36 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));
  background: #fff;
  border-radius: calc(24 * var(--u));
  box-shadow: 0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(10, 16, 30, 0.28);
}
.demo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16 * var(--u));
}
.demo-title {
  font-size: calc(34 * var(--u));
  font-weight: 700;
  color: #1c2333;
  line-height: 1.4;
}
.demo-close {
  flex: 0 0 auto;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  margin: calc(-6 * var(--u)) calc(-8 * var(--u)) 0 0;
  border-radius: 50%;
  background: #f4f6fb;
  color: #8a94a8;
  font-size: calc(28 * var(--u));
  line-height: calc(48 * var(--u));
  text-align: center;
  cursor: pointer;
}
.demo-desc {
  margin-top: calc(10 * var(--u));
  font-size: calc(24 * var(--u));
  color: #8a94a8;
  line-height: 1.6;
}

/* 前后对比 */
.demo-cmp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--u));
  margin-top: calc(26 * var(--u));
}
.demo-ph {
  position: relative;
  flex: 0 1 auto;
  width: calc(210 * var(--u));
  height: calc(282 * var(--u));
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  background: #eef2f9;
  border: calc(2 * var(--u)) solid #e6ecf6;
}
.demo-ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 成品是 295×413 竖图，用 contain 保证不被裁掉头顶/肩膀 */
.demo-ph--after img { object-fit: contain; background: #fff; }
.demo-ph-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(8 * var(--u)) 0;
  font-size: calc(20 * var(--u));
  text-align: center;
  color: #fff;
  background: rgba(28, 35, 51, 0.55);
}
.demo-arrow {
  flex: 0 0 auto;
  font-size: calc(30 * var(--u));
  color: #b9c6dd;
}

/* 规格 / 价格 / 售后 */
.demo-facts {
  margin-top: calc(24 * var(--u));
  border-top: calc(2 * var(--u)) solid #eef1f7;
}
.demo-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  padding: calc(16 * var(--u)) 0;
  border-bottom: calc(2 * var(--u)) solid #eef1f7;
  font-size: calc(25 * var(--u));
  line-height: 1.5;
}
.demo-fact-k { flex: 0 0 auto; color: #8a94a8; }
.demo-fact-v { flex: 1 1 auto; text-align: right; color: #1c2333; font-weight: 500; }
.demo-fact-v--price { color: #e0463c; font-weight: 700; }

.demo-note {
  margin-top: calc(20 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.7;
  color: #7b5c14;
  background: #fdf8ec;
  border-radius: calc(12 * var(--u));
}
.demo-actions {
  margin-top: calc(26 * var(--u));
}
.demo-actions .btn { width: 100%; }
.demo-actions-sub {
  margin-top: calc(18 * var(--u));
  font-size: calc(24 * var(--u));
  color: #3d6deb;
  text-align: center;
  cursor: pointer;
}

/* 试看 → 「用我的照片做一张」关掉浮层后，给上传按钮一个短促的呼吸高亮，
   把视线带过去（不然关掉浮层用户会愣一下「我刚才点的是啥」） */
@keyframes demo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 109, 235, 0.45); }
  50%      { box-shadow: 0 0 0 calc(14 * var(--u)) rgba(61, 109, 235, 0); }
}
.btn--pulse { animation: demo-pulse 0.8s ease-out 2; }

/* ─────────── ④ 「当前选择」提示条（回归修复） ───────────
   `.current-tip` 在手机端是 `position: fixed`（浮在底部按钮条上方），会一直压着
   滚动内容。原来首页短，初始视口里它正好落在留白区看不出来；新增试看入口卡之后
   内容变长，它就**压在「规格大全/工具箱/服务价格」卡片上**，像排版错乱。

   🔴 手机端直接隐藏：这条信息是**冗余的** —— 选中的规格卡本身有蓝框 + ✓，
      底色卡也有 ✓，试看浮层里还会再显示一次。留着只会一直遮挡内容。
   🔴 PC 端必须保留：pc.css 把它改成右栏的「已选规格」卡片（grid 定位），
      是三栏版式的一部分。所以规则限定 max-width:1023px。
   ⚠️ p-index.css 是 _convert_wxss.py 自动生成的（手改会被覆盖）⇒ 只能在这里覆盖。 */
@media (max-width: 1023px) {
  .page .current-tip { display: none; }
}

/* ─────────── ⑤ 制作失败 / 质检拦截页的出口 ─────────── */
.fail-demo,
.quality-demo {
  margin-top: calc(24 * var(--u));
  padding-top: calc(20 * var(--u));
  border-top: calc(2 * var(--u)) dashed #e6ecf6;
  font-size: calc(25 * var(--u));
  line-height: 1.6;
  color: #3d6deb;
  text-align: center;
  cursor: pointer;
}

/* ============================================================
   PC（≥1024px，与 pc.css 三栏断点完全一致）：入口卡收进中栏画布底部，浮层放大
   ⚠️ 断点必须写 1024px 而不是 900px：900~1023 这段 pc.css 的三栏还没生效，
      页面仍是单列 + 底部固定按钮条，提前套用 PC 规则会把入口卡藏掉、
      又在固定按钮条里多塞一行字（会把「相册选择/开始拍摄」挤变形）。
   ============================================================ */
@media (min-width: 1024px) {
  /* 手机端那张入口卡在 PC 上隐藏 —— PC 的中栏是上传画布，
     再塞一张卡会把「上传照片」挤下去，改由画布里的文字入口承担 */
  .page:has(.color-row) .demo-entry { display: none; }

  /* 画布（.footer）里加一行次入口。order:1 让它排在 ::after 提示文字之后，
     不动 pc.css 里 ::before(order:-3) / 按钮(order:-2,-1) / ::after(order:0) 的既有顺序 */
  .page:has(.color-row) .footer-demo {
    display: block;
    order: 1;
    margin-top: calc(6 * var(--u));
    font-size: 12.5px;
    color: #3d6deb;
  }
  .page:has(.color-row) .footer-demo:hover { text-decoration: underline; }

  .demo-mask { padding: 24px; }
  .demo-sheet {
    max-width: 520px;
    max-height: 86vh;
    padding: 26px 26px 24px;
    border-radius: 18px;
  }
  .demo-title { font-size: 19px; }
  .demo-desc { margin-top: 6px; font-size: 12.5px; }
  .demo-close { width: 30px; height: 30px; font-size: 17px; line-height: 30px; margin: -2px -4px 0 0; }
  .demo-cmp { gap: 14px; margin-top: 18px; }
  .demo-ph { width: 148px; height: 198px; border-radius: 10px; border-width: 1px; }
  .demo-ph-tag { padding: 5px 0; font-size: 11px; }
  .demo-arrow { font-size: 18px; }
  .demo-facts { margin-top: 18px; border-top-width: 1px; }
  .demo-fact { padding: 10px 0; border-bottom-width: 1px; font-size: 12.5px; }
  .demo-note { margin-top: 14px; padding: 10px 12px; font-size: 11.5px; line-height: 1.65; border-radius: 8px; }
  .demo-actions { margin-top: 18px; }
  .demo-actions .btn { height: 42px; line-height: 42px; font-size: 14px; border-radius: 9px; }
  .demo-actions-sub { margin-top: 12px; font-size: 12.5px; }

  .fail-demo,
  .quality-demo { margin-top: 16px; padding-top: 14px; font-size: 12.5px; border-top-width: 1px; }
}