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

/* ==========================================================================
   Snowflake ice landing (/snowflake-ice-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.
   ========================================================================== */
.bs-page .lhero__plate img {
  width: auto; max-width: 100%; max-height: 560px;
  aspect-ratio: auto; margin: 0 auto;
}
.bs-page .mpanel__stage { padding: 22px 22px 26px; }
.bs-page .mpanel__stage img { aspect-ratio: 4 / 5; }

/* print library: an endless rail of printed faces, no photograph needed */
.bsstrip { margin-top: 46px; }
.bsstrip__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-bottom: 18px; }
.bsstrip__cap b {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.bsstrip__cap span { font-size: 12.5px; color: var(--ink-2); }
.bsstrip__rail { overflow: hidden; padding: 4px 0 8px; }
.bsstrip__track { display: flex; gap: 14px; width: max-content; animation: bsrail 112s linear infinite; }
.bsstrip__i {
  position: relative; display: block; width: 128px; height: 168px; border-radius: 18px;
  background: linear-gradient(158deg,
    hsl(calc(var(--i) * 15) 84% 68%),
    hsl(calc(var(--i) * 15 + 38) 70% 50%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 16px 28px -20px rgba(58, 32, 120, .55);
}
.bsstrip__note { margin-top: 14px; font-size: 11.5px; color: var(--ink-3); }
@keyframes bsrail { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .bsstrip__track { animation: none; } }
@media (max-width: 620px) {
  .bsstrip__i { width: 104px; height: 136px; border-radius: 15px; }
}

/* --- 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 */
.bs-page .lhero__title { font-size: clamp(31px, 3.3vw, 45px); line-height: 1.1; letter-spacing: -.025em; }
.bs-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 */
.bs-page .lhero__plate { padding-top: 46px; }

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

/* 口味带：真实成品图，无卡片底板（参照冰淇淋页 patrail 的处理） */
.bsstrip__i {
  width: 148px; height: 148px; border-radius: 0;
  background: none; box-shadow: none; overflow: visible;
}
.bsstrip__i img { width: 100%; height: 100%; object-fit: contain; padding: 0; }
@media (max-width: 620px) {
  .bsstrip__i { width: 108px; height: 108px; }
}

/* consumables: these two are illustrations, not product photography —
   run the artwork edge to edge across the top instead of letterboxing it */
.bs-page .matgrid .matcard { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.bs-page .matgrid .matcard__media {
  min-height: 232px; border-right: 0; border-bottom: 1px solid var(--line-soft);
  border-radius: 16px 16px 0 0;
}
/* 实拍图：contain + 内边距，产品完整不裁；
   原来是 cover，插画铺满没问题，换成有轮廓的实拍会切掉碗沿 */
.bs-page .matgrid .matcard__media img {
  inset: 0; width: 100%; height: 100%; border-radius: 0;
  object-fit: contain; padding: 16px 18px; box-sizing: border-box;
}

/* 点位卡底部：核心落地指标做成胶囊（与手机壳页同款版式） */
#venues .quote__who { margin-top: 14px; padding-top: 0; border-top: 0; }
#venues .quote__by i {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(124, 92, 252, .075);
  border: 1px solid rgba(124, 92, 252, .16);
  font-style: normal; font-weight: 600; font-size: 11px; line-height: 1.3; color: #4A4460;
}

/* 耗材三张卡：≥960 排成三列，窄屏沿用 style.css 的 820 单列断点 */
@media (min-width: 960px) {
  .bs-page .matgrid { grid-template-columns: repeat(3, 1fr); }
}

/* 产品段：两款机型纵向排（单缸 310 / 双缸 312），用虚线分隔 */
.vspec__var + .vspec__var {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px dashed rgba(30, 20, 60, .12);
}
.vspec__note {
  margin: 5px 0 10px; font-size: 11.5px; line-height: 1.5;
  color: var(--ink-2); letter-spacing: .01em;
}
@media (max-width: 860px) {
  .vspec__var + .vspec__var { margin-top: 22px; padding-top: 22px; }
}

/* 点位卡有场景图时：编号缩成右下角角标，不遮主体 */
#venues .quote__num--badge {
  position: absolute; right: 14px; bottom: 6px;
  font-size: 32px; line-height: 1; color: #fff; opacity: .92;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .55);
  pointer-events: none;
}