/* v8 — телефон ([data-layout="m"]): обложка во весь экран, сторис-лента изделий,
   нижняя панель со счётчиком. Не ужатый компьютер: своя композиция. */

[data-layout="m"] .top { gap: 6px; padding-left: 12px; padding-right: 12px; }
[data-layout="m"] .brand-w { font-size: 20px; }
@media (max-width: 400px) {
  [data-layout="m"] .ad-rest { display: none; }
}
@media (max-width: 340px) {
  [data-layout="m"] .brand-by { display: none; }
}

/* обложка — сторис-кадр: персона сверху, заголовок, история, отсчёт и шкала внизу */
[data-layout="m"] .hero { min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 18px 16px 26px; }
[data-layout="m"] .glow-word { top: 6%; right: -22%; width: 130%; }
[data-layout="m"] .kin { font-size: clamp(46px, 15vw, 70px); }
[data-layout="m"] .story { font-size: 16px; }
[data-layout="m"] .ad-line { font-size: 13px; }
[data-layout="m"] .clock .u b { font-size: clamp(24px, 8.4vw, 34px); }
[data-layout="m"] .clock-d { gap: 6px; }
[data-layout="m"] .hero-cta { width: 100%; margin-top: 16px; }

/* сторис-лента: сцена сверху, под ней карточки свайпом (scroll-snap) */
[data-layout="m"] .drop { padding: 40px 0 8px; }
[data-layout="m"] .drop .sec-h { padding: 0 16px 16px; }
[data-layout="m"] .drop .sec-h h2 { font-size: clamp(28px, 8vw, 38px); font-weight: 900; }
[data-layout="m"] .stage { height: min(62svh, 520px); margin: 0 12px; border-radius: 26px; }
[data-layout="m"] .cards {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 14px 16px 18px; scrollbar-width: none; scroll-padding: 0 16px;
}
[data-layout="m"] .cards::-webkit-scrollbar { display: none; }
[data-layout="m"] .card { flex: 0 0 calc(100% - 40px); scroll-snap-align: center; scroll-snap-stop: always; transition: transform .3s, opacity .3s; }
[data-layout="m"] .card:not(.on) { transform: scale(.96); opacity: .72; }
[data-layout="m"] .c-btns .btn { min-height: 50px; }
[data-layout="m"] .c-clip { flex: 0 0 auto; }

[data-layout="m"] .sec { padding: 44px 16px; }

/* нижняя панель: отсчёт, сколько осталось, «Передзамовити» */
.mbar { display: none; }
[data-layout="m"] .mbar {
  display: flex; align-items: center; gap: 10px; position: fixed; z-index: 35; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom));
  padding: 8px 8px 8px 16px; border-radius: 22px; background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .9, .2, 1);
}
[data-layout="m"] .past-hero .mbar { transform: none; }
[data-layout="m"] .mb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
[data-layout="m"] .mb-clock { font-variant-numeric: tabular-nums; font-size: 15px; }
[data-layout="m"] .mb-left { font-size: 12px; color: var(--muted); }
[data-layout="m"] .mb-cta { flex: none; padding: 12px 16px; min-height: 48px; }
[data-layout="m"] .is-closed .mbar .mb-cta { display: none; }
[data-layout="m"] .toast { bottom: 92px; }
@media (max-width: 350px) {
  [data-layout="m"] .mb-cta { padding: 12px 12px; font-size: 15px; }
  [data-layout="m"] .mb-clock { font-size: 14px; }
}