/* ==========================================================================
   /slush-vending-machine/ 页面专属样式
   由 shell.php 按 seo id 自动注入（assets/css/page-<seo-id>.css）。
   ========================================================================== */

/* ==========================================================================
   Slush landing (/slush-vending-machine/)  ·  2026-11-12
   Only what the shared blocks cannot express: a portrait machine shot, the
   flavour rail and the stacked consumables cards. The three-column spec table,
   the text-only why-cards and the numbered placement cards live in style.css
   because three landing pages share them.
   ========================================================================== */
.sl-page .lhero__plate img {
  width: auto; max-width: 100%; max-height: 560px;
  aspect-ratio: auto; margin: 0 auto;
}
.sl-page .mpanel__stage { padding: 22px 22px 26px; }
.sl-page .mpanel__stage img { aspect-ratio: 4 / 5; }

/* print library: an endless rail of printed faces, no photograph needed */
.slstrip { margin-top: 46px; }
.slstrip__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-bottom: 18px; }
.slstrip__cap b {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.slstrip__cap span { font-size: 12.5px; color: var(--ink-2); }
.slstrip__rail { overflow: hidden; padding: 4px 0 8px; }
.slstrip__track { display: flex; gap: 14px; width: max-content; animation: slrail 112s linear infinite; }
/* 口味带：真实成品杯（透明图），无卡片底板 —— 与雪花冰页同口径 */
.slstrip__i {
  position: relative; display: block; width: 148px; height: 148px;
  border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
.slstrip__i img { width: 100%; height: 100%; object-fit: contain; padding: 0; }
.slstrip__note { margin-top: 14px; font-size: 11.5px; color: var(--ink-3); }
@keyframes slrail { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .slstrip__track { animation: none; } }
@media (max-width: 620px) {
  .slstrip__i { width: 108px; height: 108px; }
}

/* --- phone case landing · revisions after first render ------------------- */
/* the H1 carries 64 characters; at 54px it took five lines and pushed the
   hero past a laptop fold */
.sl-page .lhero__title { font-size: clamp(31px, 3.3vw, 45px); line-height: 1.1; letter-spacing: -.025em; }
.sl-page .lhero__lede { margin-top: 18px; }

/* the light box sits at the very top of the machine shot — give the
   "bracket-free printing" pill its own band so it never sits on the artwork */
.sl-page .lhero__plate { padding-top: 46px; }

/* anchored sections used to slide under the sticky nav */
.sl-page section[id] { scroll-margin-top: 92px; }


/* consumables: these two are illustrations, not product photography —
   run the artwork edge to edge across the top instead of letterboxing it */
.sl-page .matgrid .matcard { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.sl-page .matgrid .matcard__media {
  background: linear-gradient(160deg, #FBF7FF 0%, #F3EDFB 100%);
  min-height: 232px; border-right: 0; border-bottom: 1px solid var(--line-soft);
  border-radius: 16px 16px 0 0;
}
.sl-page .matgrid .matcard__media img {
  inset: 0; width: 100%; height: 100%; border-radius: 0;
  /* 这两张是透明底的产品实拍，contain 才能完整露出瓶身与碗沿 */
  object-fit: contain; padding: 6px 10px;
}

/* 首屏四枚徽章固定 2×2 --------------------------------------------------------
   .badgebar 是 flex-wrap，按可用宽度会排成 3+1 —— 最后一行只剩一枚挂在左边。
   用 grid 定死两列，中英文案长短变化都不会破坏首屏节奏。 */
.sl-page .badgebar { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
@media (max-width: 620px) {
  .sl-page .badgebar { grid-template-columns: 1fr; }
}

/* 中文 H1 只允许在标点处换行 ------------------------------------------------
   默认 CJK 任意处可断，24 字的标题会断成「双口 / 味」。keep-all 后只认标点与空格，
   断点落在「：」「、」，两行都读得通；英文 span 不受影响。 */
.sl-page .lhero__title .bi-zh { word-break: keep-all; }

/* 中文 H2 里的型号不能被连字符拆开 --------------------------------------------
   `text-wrap: balance` 偏爱在「CT-」处断行（两行长度更接近），结果把型号拆成
   「CT-」/「XN410」。中文关掉 balance 走贪心换行，再用 keep-all 把断点限制在标点与
   空格，实测断在「：」后的空格 —— 型号完整，两行也读得通。
   英文保持 balance：它本来就断在冒号后，比贪心换行更整齐。 */
body.mode-zh .sl-page #models h2 { text-wrap: wrap; }
body.mode-zh .sl-page #models h2 .bi-zh { word-break: keep-all; }
/* 型号整体不换行：模板里已把 CT-XN410 包进 .nw */
.sl-page .nw { white-space: nowrap; }