/* ============================================================
   /demo —— 产品走查页。site.css 之后加载，只补这一页需要的版式。
   变量全部沿用 site.css 的 :root，不另立一套色板。
   ============================================================ */

.demo-hero { padding-bottom: 28px; }
.demo-hero .lead { max-width: 46rem; }

/* ---------- 亲自试一次 ---------- */

.demo-try-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.demo-try-card {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo-order-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* 号本身是这一屏的主角：等宽字体 + 可选中。字号大到能隔着一臂距离
   照着手机敲进去 —— 访客的下一个动作就是这个。 */
.demo-order {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: clamp(1.25rem, 4.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fg);
  user-select: all;
  /* 生成前这里是空的。给一个最小高度，否则脚本一写入内容整块就往下跳一行。 */
  min-height: 2.2rem;
}

.demo-order-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.demo-order-actions .btn { padding: 8px 16px; font-size: 0.9rem; }

/* 「已复制」只换文字不换尺寸 —— 换宽度会让旁边的「换一个」跳位。 */
.demo-order-actions .btn.is-copied {
  color: var(--success);
  border-color: var(--success);
}

.demo-open { margin-top: auto; text-align: center; }

.demo-qr-card { align-items: center; text-align: center; }
.demo-qr-card h3 { margin: 0; font-size: 1.05rem; }
.demo-qr-card img {
  width: 200px;
  height: 200px;
  max-width: 100%;
  border-radius: var(--radius);
  background: #fff;
}
.demo-qr-note { margin: 0; font-size: 0.9rem; color: var(--fg-muted); }

/* 演示性质声明。规格要求它与订单号**同屏**，所以它挨着上面那张卡，
   不进页脚、不折叠。 */
.demo-note {
  margin: 22px auto 0;
  max-width: 52rem;
  padding: 14px 18px;
  border-left: 3px solid var(--electric);
  background: var(--ink-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.94rem;
  color: var(--fg-soft);
}

/* ---------- 买家侧六屏 ---------- */

/* 窄屏：横向滑动。手机上横滑是自然手势，不需要额外提示。 */
.demo-strip {
  list-style: none;
  margin: 0;
  padding: 4px 4px 18px;
  display: grid;
  grid-auto-flow: column;
  /* 78vw 让下一屏露出一角，那是横滑最可靠的可滚提示。但必须封顶：
     实测 560px 宽下 78vw 是 437px，一张手机截图被放大到比视口还高 ——
     滑动变成"一次只能看一屏的一部分"。300px 之后各档宽度表现一致。 */
  grid-auto-columns: min(78vw, 300px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

/* 桌面：3×2 网格，六屏全部可见。
   第一版桌面也用横滑，实测 1280 下容器 1092px 而内容 1428px —— **只有 4/6 屏
   可见**，另外两屏要横滚 336px 才看得到，且没有任何可滚提示。桌面上的横滚条
   就是「隐藏内容」：读者不会去找，只会以为图条被截断了。
   而这六屏是一条**序列**，看不全等于故事没讲完。 */
@media (min-width: 861px) {
  .demo-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 30px 26px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  /* 单元格比图宽，图居中并限宽 —— 让它撑满会把手机截图拉成一块巨大的色块，
     喧宾夺主，也让两行之间的说明文字离得太远。 */
  .demo-shot img { max-width: 288px; margin-inline: auto; }
  .demo-shot p { max-width: 288px; margin-inline: auto; }
  .demo-shot-num { left: calc(50% - 144px + 10px); }
}

.demo-shot { scroll-snap-align: start; position: relative; }

.demo-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--ink-line);
  box-shadow: var(--shadow-md);
  background: var(--ink-soft);
}

.demo-shot p {
  margin: 12px 2px 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fg-soft);
}

.demo-shot-num {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------- 留评邀请（只有图） ---------- */

.demo-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px;
  align-items: center;
}
.demo-review-grid h2 { margin-top: 0; }
.demo-review-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--ink-line);
  box-shadow: var(--shadow-md);
}

/* 「为什么这里只有图」—— 说出代价的那一段，压低但不藏。 */
.demo-why {
  font-size: 0.92rem;
  color: var(--fg-muted);
  border-top: 1px solid var(--ink-line);
  padding-top: 14px;
}

/* ---------- 卖家侧 ---------- */

.demo-seller-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.demo-seller-grid figure { margin: 0; }
.demo-seller-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--ink-line);
  box-shadow: var(--shadow-md);
}
.demo-seller-grid figcaption {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--fg-soft);
}

.demo-cta-btn { text-align: center; margin-top: 8px; }

/* ---------- 窄屏 ---------- */

@media (max-width: 860px) {
  .demo-try-grid,
  .demo-review-grid,
  .demo-seller-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 二维码在窄屏上排到最后：手上就是手机的人不需要扫自己的屏幕，
     真正要用的是上面那个「打开买家页」。 */
  .demo-qr-card { order: 2; }
  .demo-review-grid img { max-width: 260px; justify-self: center; }
}

@media (max-width: 560px) {
  .demo-try-card { padding: 22px 18px; }
}