/* ===========================================================================
   POVOD — мобильная адаптация существующего интерфейса.

   Это НЕ второй сайт и не второй дизайн: файл только переопределяет подачу уже
   существующих блоков index.html / slideshow.css / surprise-themes.css. Цвета,
   радиусы, тени и типографика берутся из тех же переменных :root — мобильный
   POVOD обязан выглядеть тем же продуктом, а не «мобильной версией».

   Подключается ПОСЛЕ основного <style> и после slideshow/surprise — последним в
   каскаде, поэтому обходится почти без !important.

   Порядок разделов:
     1. Мобильные компоненты оболочки (по умолчанию скрыты)
     2. <=1023px — планшет и мобильная оболочка
     3. <=767px  — основной мобильный режим
     4. <=479px  — узкие экраны
     5. Тач-устройства
     6. prefers-reduced-motion
   ======================================================================== */

/* ===========================================================================
   1. МОБИЛЬНЫЕ КОМПОНЕНТЫ ОБОЛОЧКИ

   Всё, чего нет на десктопе, по умолчанию скрыто и включается только внутри
   media query. Так десктоп физически не может «поймать» мобильный элемент.
   ======================================================================== */
.m-menu-btn,
.m-scrim,
.m-drawer,
.m-tabbar,
.m-drawer-primary,
.m-wiz,
.m-wiz-nav,
.m-genre-more { display: none; }

/* Слои. Единая иерархия, чтобы нижняя навигация никогда не оказалась поверх
   открытого модального окна:
     90  — нижняя навигация
     100 — шапка (существующая)
     120 — .sv-overlay (слайдшоу, существующий)
     200 — .support-pop / .sp-modal (существующие)
     250 — затемнение под меню
     251 — выдвижное меню
     300 — .auth-overlay / .tar-overlay / .gr-toast (существующие)          */

/* --- выдвижное меню ------------------------------------------------------ */
.m-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 251;
  width: min(86vw, 340px);
  background: #FCFBF6;
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(120, 90, 60, .26);
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22, .7, .3, 1);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain;
}
.m-drawer.open { transform: none; }
.m-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 12px 12px 18px;
  border-bottom: 1px solid var(--line2);
}
.m-drawer-logo {
  font-family: 'Inter'; font-weight: 900; font-size: 24px; letter-spacing: .5px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m-drawer-close {
  width: 44px; height: 44px; min-width: 44px; border: none; border-radius: 12px;
  background: rgba(141, 141, 138, .12); color: #6b665c;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.m-drawer-close:focus-visible { outline: 3px solid rgba(232, 90, 79, .6); outline-offset: 2px; }
.m-drawer-nav {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.m-drawer-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 50px; padding: 12px 14px;
  font-family: 'Inter'; font-size: 15.5px; font-weight: 600; color: var(--ink);
  text-align: left; background: transparent; border: none; border-radius: 14px;
  cursor: pointer;
}
.m-drawer-link .m-ic { font-size: 19px; width: 26px; flex: none; text-align: center; }
.m-drawer-link[aria-current="true"] { background: rgba(232, 90, 79, .1); color: var(--red); font-weight: 700; }
.m-drawer-link:focus-visible { outline: 3px solid rgba(232, 90, 79, .6); outline-offset: -2px; }
.m-drawer-sep { height: 1px; background: var(--line2); margin: 8px 14px; }
.m-drawer-primary { flex-direction: column; gap: 2px; }
.m-drawer-foot { padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line2); }
.m-drawer-login {
  width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 99px;
  background: rgba(252, 251, 246, .9); color: var(--ink);
  font-family: 'Inter'; font-size: 15px; font-weight: 700; cursor: pointer;
  padding: 12px 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-scrim {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(38, 28, 18, .45); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .24s ease;
  /* Два независимых предохранителя. `display:block` из media query перебивает
     браузерное правило [hidden]{display:none} — без явного правила ниже
     прозрачное затемнение молча перехватывало бы КАЖДОЕ касание страницы.
     pointer-events страхует ещё и на время анимации закрытия. */
  pointer-events: none;
}
.m-scrim[hidden] { display: none; }
.m-scrim.open { opacity: 1; pointer-events: auto; }

/* Блокировка фоновой прокрутки. Позицию восстанавливает mobile.js. */
body.m-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* --- нижняя навигация ---------------------------------------------------- */
.m-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: rgba(234, 231, 220, .95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line2);
  padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
}
.m-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 50px; padding: 5px 2px;
  border: none; background: transparent; cursor: pointer; border-radius: 14px;
  font-family: 'Inter'; color: var(--muted);
}
.m-tab-ic { display: flex; align-items: center; justify-content: center; height: 22px; }
.m-tab-ic svg { display: block; }
.m-tab-l { font-size: 10.5px; font-weight: 700; letter-spacing: .1px; line-height: 1; }
.m-tab[aria-current="page"] { color: var(--red); }
.m-tab:focus-visible { outline: 3px solid rgba(232, 90, 79, .55); outline-offset: -3px; }
/* Главное действие выделено: на телефоне у экрана всегда один очевидный шаг. */
.m-tab.m-tab-primary .m-tab-ic {
  width: 46px; height: 30px; border-radius: 99px;
  background: var(--grad); color: #fff;
  box-shadow: 0 6px 16px rgba(232, 90, 79, .38);
}
.m-tab.m-tab-primary { color: var(--ink); }
.m-tab.m-tab-primary .m-tab-l { font-weight: 800; }

/* --- шаги анкеты (мастер) ------------------------------------------------ */
.m-wiz { margin: 2px 0 18px; }
.m-wiz-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.m-wiz-pct { font-variant-numeric: tabular-nums; color: var(--red); }
.m-wiz-track {
  margin-top: 7px; height: 6px; border-radius: 99px;
  background: rgba(141, 141, 138, .2); overflow: hidden;
}
.m-wiz-fill {
  height: 100%; width: 25%; border-radius: 99px;
  background: var(--grad); transition: width .28s ease;
}
.m-wiz-nav { gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.m-wiz-nav .m-wiz-back {
  flex: 0 0 auto; min-height: 52px; padding: 14px 20px;
  font-family: 'Inter'; font-size: 15px; font-weight: 700; color: var(--ink);
  background: rgba(252, 251, 246, .8); border: 1px solid var(--line);
  border-radius: 99px; cursor: pointer;
}
.m-wiz-nav .m-wiz-next {
  flex: 1 1 auto; justify-content: center;
  min-height: 52px; padding: 14px 22px; font-size: 16px;
  border: none; border-radius: 99px; cursor: pointer;
  font-family: 'Inter'; font-weight: 800; color: #fff;
  background: var(--grad); box-shadow: 0 12px 28px rgba(232, 90, 79, .3);
  display: inline-flex; align-items: center; gap: 8px;
}
.m-wiz-nav .m-wiz-back:focus-visible,
.m-wiz-nav .m-wiz-next:focus-visible { outline: 3px solid rgba(232, 90, 79, .6); outline-offset: 2px; }
.m-wiz-err {
  flex: 1 1 100%; margin-top: 2px; min-height: 0;
  font-size: 13.5px; color: var(--red); line-height: 1.45;
}
.m-wiz-err:empty { display: none; }

/* --- «показать все жанры» ------------------------------------------------ */
.m-genre-more {
  margin-top: 10px; align-items: center; gap: 7px;
  min-height: 44px; padding: 10px 16px;
  font-family: 'Inter'; font-size: 14px; font-weight: 700; color: var(--red);
  background: rgba(232, 90, 79, .07); border: 1px solid rgba(232, 90, 79, .35);
  border-radius: 99px; cursor: pointer;
}
.m-genre-more:focus-visible { outline: 3px solid rgba(232, 90, 79, .6); outline-offset: 2px; }

/* ===========================================================================
   2. <= 1023px — планшет и мобильная оболочка

   Десктопная лента .hnav требует ~1350px, поэтому уже на планшете она либо
   уезжает за экран, либо превращается в горизонтальную прокрутку. Здесь она
   заменяется компактной шапкой + меню + нижней навигацией; сама раскладка
   контента остаётся «широкой» вплоть до 767px.
   ======================================================================== */
@media (max-width: 1399px) {
  body { padding-top: 58px; }

  /* --- шапка --- */
  .hwrap { height: 58px; padding: 0 14px; gap: 10px; }
  .logo { font-size: 25px; flex: 1 1 auto; min-width: 0; }
  .hnav, .hcta { display: none; }
  .m-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; min-width: 48px; flex: none;
    border: 1px solid var(--line); border-radius: 14px;
    background: rgba(252, 251, 246, .7); color: var(--ink); cursor: pointer;
    padding: 0;
  }
  .m-menu-btn:focus-visible { outline: 3px solid rgba(232, 90, 79, .6); outline-offset: 2px; }

  /* --- оболочка ---
     Нижняя панель — только телефонная (<=767px). На планшете и узком ноутбуке
     остаётся компактная шапка со шторкой: тянуть туда телефонный таббар не за
     чем, а «Создать»/«Заказы» там доступны прямо в меню. */
  .m-drawer { display: flex; }
  .m-scrim { display: block; }
  .m-drawer-primary { display: flex; }

  /* Кнопка поддержки уезжает в меню («Ещё → Поддержка»), вызывая то же самое
     существующее действие toggleSupport(). */
  .support-fab { display: none; }
  .support-pop { right: 16px; left: auto; width: 260px; bottom: 20px; }

  /* Иммерсивная публичная страница-сюрприз: магазина на ней нет вообще. */
  body.sp-public .m-tabbar,
  body.sp-public .m-menu-btn { display: none; }
  body.sp-public .site-foot { padding-bottom: 0; }
}

/* ===========================================================================
   2b. <= 1023px — планшетный ритм содержимого
   ======================================================================== */
@media (max-width: 1023px) {
  .wrap { padding: 0 20px; }
  .hero-card { padding: 40px 34px 36px; }
  .foot-wrap { grid-template-columns: 1fr 1fr; padding: 42px 20px 26px; }
  .tar-modal { max-width: none; }
}

/* ===========================================================================
   3. <= 767px — ОСНОВНОЙ МОБИЛЬНЫЙ РЕЖИМ
   ======================================================================== */
@media (max-width: 767px) {

  /* --- 3.0 нижняя навигация (только телефон) ----------------------------
     Высота панели зафиксирована переменной: от неё считаются и отступ снизу у
     контента, и «липкая» кнопка оплаты, и всплывашка поддержки — иначе они
     разъезжаются при любой правке паддингов. */
  :root { --m-tabbar-h: 64px; }
  .m-tabbar { display: grid; }
  /* Дубли главных действий в шторке не нужны — они и так в панели. */
  .m-drawer-primary { display: none; }

  /* Место под панель. Тёмный футер продолжается под ней, поэтому кремовой
     полосы между футером и панелью не появляется. */
  .site-foot { padding-bottom: calc(var(--m-tabbar-h) - 6px + env(safe-area-inset-bottom)); }
  #orders .wrap, #slideshow .wrap { padding-bottom: calc(var(--m-tabbar-h) + 10px + env(safe-area-inset-bottom)); }
  .support-pop {
    left: 12px; right: 12px; width: auto;
    bottom: calc(var(--m-tabbar-h) + 14px + env(safe-area-inset-bottom));
  }
  body.sp-public .site-foot { padding-bottom: 0; }

  /* --- 3.1 базовая раскладка ------------------------------------------- */
  .wrap { padding: 0 16px; }
  h2.sec { font-size: clamp(22px, 6.4vw, 28px); margin-bottom: 24px; }
  .label { margin: 48px 0 6px; font-size: 11.5px; letter-spacing: 2px; scroll-margin-top: 70px; }
  .label.big { font-size: 12.5px; }

  /* Декоративные подсветки шире экрана — на телефоне они только раздвигают
     макет. Уменьшаем и убираем самую большую. */
  .glow.g1 { width: 320px; height: 320px; top: -110px; left: -80px; }
  .glow.g2 { width: 300px; height: 300px; bottom: -130px; right: -80px; }
  .glow.g3 { display: none; }

  /* --- 3.2 герой лендинга ---------------------------------------------- */
  .hero { padding: 22px 0 6px; }
  .hero-card { padding: 24px 16px 22px; border-radius: 20px; }
  .hero-card .q { font-size: 54px; }
  .hero-card .q.open { top: 8px; left: 12px; }
  .hero-card .q.close { bottom: 8px; right: 12px; }
  .eyebrow { margin-bottom: 15px; font-size: 11px; padding: 7px 13px; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.1; letter-spacing: -.9px; }
  .hero .sub { margin-top: 14px; font-size: 15.5px; line-height: 1.55; }
  .hero .cta { margin-top: 20px; }
  .dot { display: none; }
  .stats { gap: 18px 26px; margin-top: 26px; }

  /* Главный призыв обязан помещаться целиком даже на 320px. */
  .hero .cta,
  .form-cta > .cta,
  .ord-empty .cta,
  .gr-song-cta .cta,
  .gr-actions-main .cta,
  #pvPay .cta,
  .feat .cta.sm,
  .envelope .ghost,
  #revBtn {
    width: 100%; justify-content: center; min-height: 52px;
    padding-left: 18px; padding-right: 18px;
  }
  .cta { font-size: 16.5px; }
  .cta.sm { font-size: 15px; }

  /* --- 3.3 карточки и секции ------------------------------------------- */
  /* minmax(0,1fr), а не 1fr: у элемента грида минимальная ширина по умолчанию
     равна min-content, и на 320px длинное слово внутри карточки растягивало
     колонку шире экрана. */
  .cards, .steps, .rev-grid, .tariffs { grid-template-columns: minmax(0, 1fr); }
  .cards { gap: 12px; }
  .rev-meta, .rev-text, .ord-title, .sv-song-name { min-width: 0; overflow-wrap: anywhere; }
  .card { padding: 20px 18px; border-radius: 18px; }
  .card h3 { font-size: 17px; }
  .step, .steps .step { padding: 22px 18px; border-radius: 18px; }
  .feat, .feat.rev { flex-direction: column; padding: 20px 16px; border-radius: 20px; gap: 16px; }
  .feat .txt h3 { font-size: 21px; }
  .feat .demo { flex-basis: auto; width: 100%; min-height: 130px; padding: 14px; }
  .demo .qrcard { width: 100%; max-width: 260px; }
  .trust { padding: 20px 18px; }
  .trust .row { gap: 10px 16px; font-size: 12.5px; }
  .envelope { padding: 30px 18px; border-radius: 22px; }
  .envelope h3 { font-size: 21px; }
  .envelope p { font-size: 14.5px; }
  .timer { gap: 8px; }
  .timer div { width: auto; flex: 1 1 0; min-width: 0; padding: 10px 2px; }
  .timer .num { font-size: 20px; }
  .hero-show { gap: 14px; margin-top: 26px; }
  /* Плеер-витрина: подпись трека не сжимается ниже своего самого длинного слова,
     поэтому на узком экране разрешаем ей перейти на вторую строку, а не
     выдавливать карточку за край. */
  .player, .player.big { padding: 16px 14px; gap: 10px 12px; min-width: 0; flex-wrap: wrap; }
  .player .eq, .player.big .eq { flex: 1 1 70px; min-width: 0; }
  .player .meta, .player.big .meta { flex: 0 1 auto; min-width: 0; }
  .player .meta .t1, .player.big .meta .t1 { font-size: 14px; }
  .player .meta .t2 { font-size: 12px; }
  .hero-photo { flex-basis: auto; width: 100%; min-height: 150px; }
  .ex-title { margin: 34px 0 12px; }

  /* --- 3.4 формы -------------------------------------------------------- */
  .form-head { padding: 26px 0 4px; }
  .form-head h1 { font-size: clamp(25px, 7.2vw, 33px); }
  .form-head p { font-size: 14.5px; margin-top: 9px; }
  .panel { margin-top: 18px; padding: 20px 16px 18px; border-radius: 20px; }
  .form-layout { margin-top: 18px; }
  .two-col { grid-template-columns: 1fr; }
  label { font-size: 13.5px; margin: 15px 0 7px; }

  /* iOS Safari масштабирует страницу, если поле мельче 16px. */
  input, textarea, select,
  .gr-textarea, .sp-field input, .sp-field textarea, .chatbar input {
    font-size: 16px;
  }
  input, textarea, .sp-field input, .sp-field textarea { padding: 13px 14px; }
  input[type="text"], input[type="email"], input[type="password"], select { min-height: 48px; }
  textarea { min-height: 96px; }
  /* Глобальное `input{width:100%}` из index.html написано для текстовых полей.
     Флажкам и переключателям возвращаем их естественный размер, иначе они
     растягиваются на всю строку и ломают раскладку (та же правка уже сделана
     для страницы-сюрприза в surprise-themes.css). */
  input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px; min-width: 20px; min-height: 0;
    flex: none; padding: 0; accent-color: var(--red);
  }

  /* Пальцем нужно попадать без прицеливания: у всех основных элементов
     управления на телефоне зона касания не меньше 44px. */
  .chips { gap: 7px; }
  .chips .opt {
    font-size: 13.5px; padding: 10px 14px;
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .mini-tabs { display: flex; width: 100%; margin: 12px 0; }
  .mtab { flex: 1; padding: 11px 8px; font-size: 13px; min-height: 44px; }
  .mode { min-height: 44px; display: inline-flex; align-items: center; }
  .gr-ex, .ss-track { display: inline-flex; align-items: center; min-height: 44px; }
  .auth-close, .sv-modal-close { width: 44px; height: 44px; }
  .foot-col a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; margin-bottom: 2px; }
  .support-pop a { padding: 13px 11px; }
  .play-btn { width: 56px; height: 56px; min-width: 56px; }
  .more-toggle, .gr-reset { min-height: 44px; align-items: center; }
  .scene-hint { font-size: 12.5px; }
  .lock-note { padding: 10px 12px; font-size: 13px; }

  /* --- 3.5 МАСТЕР АНКЕТЫ ------------------------------------------------
     Существующие .vstep НЕ дублируются и не переносятся: мобильный режим
     показывает ровно один из них, остальные прячет. Поля, их id и значения
     остаются теми же — collectSongFormData() продолжает работать как есть.
     Всё скрытие живёт внутри media query, поэтому возврат на десктоп
     автоматически показывает всю анкету целиком. */
  #panel-povod.m-wizard .three { display: none; }
  #panel-povod.m-wizard .steps-v { margin-top: 0; }
  #panel-povod.m-wizard .vstep { display: none; }
  #panel-povod.m-wizard .vstep.m-current {
    display: block; padding-left: 0; padding-bottom: 2px;
  }
  #panel-povod.m-wizard .vstep::before { display: none; }
  #panel-povod.m-wizard .vnum { display: none; }
  #panel-povod.m-wizard .vtitle { padding-top: 0; font-size: 20px; }
  #panel-povod.m-wizard .vdesc { font-size: 13.5px; margin: 5px 0 14px; }
  #panel-povod.m-wizard .vstep label:first-of-type { margin-top: 0; }

  #panel-povod.m-wizard .m-wiz { display: block; }
  #panel-povod.m-wizard .m-wiz-nav { display: flex; }
  /* Настоящая кнопка отправки анкеты видна только на последнем шаге. Мастер её
     не подменяет: на неё по-прежнему навешен goPreview() либо submitRevision()
     — в зависимости от режима, который выставил setSongFormMode(). */
  #panel-povod.m-wizard:not(.m-last) .form-cta { display: none; }
  #panel-povod.m-wizard.m-last .m-wiz-nav .m-wiz-next { display: none; }
  #panel-povod.m-wizard.m-first .m-wiz-nav .m-wiz-back { display: none; }
  #panel-povod.m-wizard.m-last .form-cta { margin-top: 12px; }

  /* Жанров два десятка — сразу показываем самые частые, остальные по кнопке. */
  #chipsGenre.m-collapsed .opt.m-hide { display: none; }
  #panel-povod.m-wizard .m-genre-more { display: inline-flex; }

  /* --- 3.6 «Мои заказы» -------------------------------------------------- */
  .preview-head { padding: 26px 0 4px; }
  .preview-head h1 { font-size: clamp(26px, 7.6vw, 34px); }
  .ord-list { gap: 14px; }
  .ord-card { padding: 18px 15px; border-radius: 18px; }
  .ord-card-top { flex-direction: column; gap: 8px; }
  .ord-badge { align-self: flex-start; }
  .ord-title { font-size: 17.5px; }
  .ord-sub { font-size: 13px; }
  .ord-hint { font-size: 13px; }
  .ord-actions { flex-direction: column; align-items: stretch; }
  .ord-actions .cta,
  .ord-actions .ghost,
  .ord-surprise .cta.sm, .ord-surprise .ghost.sm,
  .ord-karaoke .cta.sm, .ord-karaoke .ghost.sm,
  .ord-revision .cta.sm, .ord-revision .ghost.sm,
  .ss-cta {
    width: 100%; justify-content: center; min-height: 46px;
  }
  .ord-empty { padding: 32px 20px; }
  .ord-empty h3 { font-size: 20px; }
  .trk-ph { padding: 13px 15px; font-size: 13px; gap: 12px; }

  /* Плеер: действия в столбик, полоса перемотки крупная. */
  .pl2 { padding: 15px 14px; }
  .pl-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .pl-actions .ghost, .pl-dl { width: 100%; justify-content: center; min-height: 44px; }
  .pl-state { text-align: center; }
  .pl-seek { height: 48px; }

  /* --- 3.7 превью ------------------------------------------------------- */
  #pvTracks { gap: 12px; }
  .lyrics { margin-top: 20px; font-size: 15.5px; line-height: 1.75; }
  .controls { flex-direction: column; gap: 8px; margin-top: 20px; }
  .controls .ghost, .genre-wrap { width: 100%; }
  .controls .ghost { justify-content: center; min-height: 48px; }
  .genre-pop {
    left: 0; right: 0; width: 100%; min-width: 0;
    transform: translateY(-6px);
  }
  .genre-pop.open { transform: translateY(0); }
  .genre-pop button { padding: 12px 14px; min-height: 46px; }
  .free-badge { font-size: 12.5px; }
  .addons { gap: 8px; }
  .addon { padding: 12px 14px; min-height: 58px; }
  .tar { padding: 20px 18px; }
  .tar .price { font-size: 27px; }

  /* --- 3.8 оплата -------------------------------------------------------
     Кнопка оплаты «липнет» к низу экрана над нижней навигацией. Это sticky, а
     не fixed: блок остаётся в потоке, цена и примечание видны в обычном
     содержимом, ничего не перекрывается, а платёжный flow не меняется. */
  #pvPay.pv-pay {
    position: sticky; z-index: 80;
    /* Замерено: при bottom:66px нижний край блока оказывался на 786px при
       верхней кромке панели 780px — кнопка уходила ПОД навигацию. Считаем от
       той же переменной, что задаёт высоту панели, и без нижнего margin,
       который сдвигал липкую позицию. */
    bottom: calc(var(--m-tabbar-h) + 10px + env(safe-area-inset-bottom));
    margin: 20px -16px 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: rgba(234, 231, 220, .96);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line2);
  }
  #pvPay.pv-pay:empty { display: none; }
  #pvPay .cta-note { margin-top: 8px; font-size: 12px; }
  .k-note { max-width: none; font-size: 11.5px; }

  /* --- 3.9 бесплатное поздравление --------------------------------------
     Никаких фиксированных десктопных высот: поле ввода растёт по содержимому,
     а высота ограничивается динамической высотой окна, чтобы клавиатура не
     выталкивала кнопку отправки за экран. */
  .gr-examples { gap: 7px; margin-bottom: 14px; }
  .gr-ex { font-size: 13px; padding: 10px 14px; }
  .gr-card { padding: 15px 14px; }
  .gr-textarea { max-height: 44vh; max-height: 44dvh; overflow-y: auto; }
  .gr-row { flex-wrap: wrap; gap: 6px; }
  .gr-note { max-width: 100%; order: 2; }
  .gr-counter { order: 1; margin-left: auto; }
  .gr-actions-main { flex-direction: column; align-items: stretch; gap: 8px; }
  .gr-status { text-align: center; }
  .gr-actions { gap: 7px; }
  .gr-actions .ghost.sm { flex: 1 1 46%; justify-content: center; min-height: 44px; }
  .gr-song-cta { padding: 20px 16px; }
  .chatcard { height: auto; min-height: 60vh; min-height: 60dvh; max-height: 78dvh; }
  .chatbox, .chatinput { max-width: none; }
  .cmsg { max-width: 92%; }

  /* --- 3.10 модальные окна → нижние шторки -------------------------------
     На десктопе окна остаются центрированными. На телефоне центрированная
     карточка с внешними отступами и внутренней прокруткой неудобна: шторка от
     нижнего края ближе к пальцу и переживает появление клавиатуры. */
  .auth-overlay, .tar-overlay, .sp-modal, .sv-overlay {
    align-items: flex-end; justify-content: center; padding: 0;
  }
  .auth-modal, .tar-modal, .sp-card, .sv-modal {
    width: 100%; max-width: none; margin: 0;
    border-radius: 22px 22px 0 0;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    animation: m-sheet-up .26s cubic-bezier(.22, .7, .3, 1);
  }
  .auth-modal { padding: 22px 16px calc(20px + env(safe-area-inset-bottom)); }
  .tar-modal { padding: 20px 14px calc(20px + env(safe-area-inset-bottom)); }
  .sp-card { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .sv-modal { padding: 22px 16px calc(20px + env(safe-area-inset-bottom)); }
  @keyframes m-sheet-up { from { transform: translateY(28px); opacity: .4; } to { transform: none; opacity: 1; } }

  .auth-socials { grid-template-columns: 1fr; }
  .soc { padding: 14px; min-height: 50px; }
  .auth-head h3 { font-size: 20px; }
  .auth-tab { min-height: 46px; }
  .auth-check { margin: 14px 0 16px; }
  .tar-modal .addons { grid-template-columns: 1fr; }
  .sp-actions { justify-content: stretch; }
  .sp-actions .cta, .sp-actions .ghost { flex: 1 1 auto; justify-content: center; min-height: 46px; }
  .sp-pick label { padding: 12px; min-height: 52px; }
  .sp-link { font-size: 12px; }
  /* Витрина оформлений (surprise-themes.css) уже адаптивна — добираем только
     размер нажатия у её собственных кнопок. */
  .spx-actions .cta, .spx-actions .ghost { min-height: 46px; }
  .spx-states button { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }

  /* --- 3.11 футер ------------------------------------------------------- */
  .site-foot { margin-top: 48px; }
  .foot-wrap { grid-template-columns: 1fr; gap: 20px; padding: 34px 16px 20px; }
  .foot-col.brand p { max-width: none; }
  .foot-legal { max-width: none; }
  .foot-bottom { padding: 16px; font-size: 12px; }

  /* --- 3.12 «Видео из фотографий» (slideshow.css) ------------------------
     Файл уже адаптирован; здесь только то, чего в нём нет: сетка в две
     колонки и заметно больший «палец» у кнопок на самой фотографии. */
  /* Четыре кнопки на миниатюре в одну строку 44px не влезают: замерено, что в
     ряду они ужимались до 38px, а «×» — до 27px на 390px и до 9px на 320px.
     Раскладываем их сеткой 2×2 в нижнем правом углу: каждая получает полные
     44×44, а блок занимает угол, а не всю ширину фотографии.
     `display:contents` у .left растворяет обёртку, и все четыре кнопки
     становятся прямыми элементами этой сетки — DOM в slideshow.js не меняется. */
  .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sv-cell-bar {
    inset: auto 0 0 auto;
    display: grid; grid-template-columns: repeat(2, 44px);
    gap: 4px; padding: 5px; background: none;
  }
  .sv-cell-bar .left { display: contents; }
  .sv-ico {
    width: 44px; height: 44px; min-width: 44px; font-size: 17px;
    background: rgba(20, 18, 16, .74);
  }
  .sv-title { font-size: clamp(24px, 6.6vw, 30px); }
  .sv-back { min-height: 44px; display: inline-flex; align-items: center; }
  .sv-submit-row .cta, .sv-ready-row .cta, .sv-ready-row .ghost,
  .sv-modal-actions .cta, .sv-modal-actions .ghost {
    width: 100%; justify-content: center; min-height: 46px;
  }
  .ss-tracks .ss-track { width: 100%; justify-content: center; }
}

/* ===========================================================================
   4. <= 479px — узкие экраны (320–430px)
   ======================================================================== */
@media (max-width: 479px) {
  .wrap { padding: 0 14px; }
  .hero-card { padding: 22px 14px 20px; }
  .hero h1 { letter-spacing: -.6px; }
  .panel { padding: 18px 14px 16px; }
  .card, .step, .steps .step { padding: 18px 15px; }
  .feat { padding: 18px 14px; }
  .ord-card { padding: 16px 13px; }
  .m-tab-l { font-size: 10px; }
  .timer div { padding: 9px 2px; }
  .timer .num { font-size: 18px; }
  .timer .lbl { font-size: 10px; }
  .chips .opt { font-size: 13px; padding: 10px 12px; }
  .gr-actions .ghost.sm { flex: 1 1 100%; }
  /* .sv-ico здесь НЕ уменьшаем: сетка 2×2 держит 44px и на 320px. */
  .vinyl-wrap { width: 220px; height: 220px; }
  #pvPay.pv-pay { margin-left: -14px; margin-right: -14px; }
}

/* ===========================================================================
   5. ТАЧ-УСТРОЙСТВА

   Размеры зон касания заданы выше, по ширине экрана: так они проверяемы и не
   зависят от того, как браузер отвечает на pointer-запрос. Здесь остаётся
   только то, что действительно относится к отсутствию мыши — выбранное
   состояние не должно держаться на :hover, а сам :hover на тач-экране
   «залипает» после нажатия.
   ======================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Планшет шире 767px тоже пальцевый: те же зоны касания, что и на телефоне. */
  .chips .opt, .gr-ex, .ss-track, .mode {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .mtab, .auth-tab, .spx-states button { min-height: 44px; }
  .auth-close, .sv-modal-close { width: 44px; height: 44px; }
  .foot-col a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; }
  .support-pop a { padding: 13px 11px; }
  .sv-back, .more-toggle, .gr-reset { min-height: 44px; align-items: center; }
  .ghost.sm, .cta.sm { min-height: 44px; }
  /* Та же сетка 2×2, что и на телефоне: в один ряд четыре кнопки по 44px не
     помещаются и на планшетной миниатюре. */
  .sv-cell-bar {
    inset: auto 0 0 auto;
    display: grid; grid-template-columns: repeat(2, 44px);
    gap: 4px; padding: 5px; background: none;
  }
  .sv-cell-bar .left { display: contents; }
  .sv-ico { width: 44px; height: 44px; min-width: 44px; background: rgba(20, 18, 16, .74); }

  .chips .opt.on { box-shadow: 0 6px 16px rgba(232, 90, 79, .28); }
  .card:hover, .tar:hover, .review:hover, .cta:hover, .play-btn:hover,
  .support-fab:hover, .spx-card:hover, .ss-cta:hover { transform: none; }
  .card:hover { box-shadow: var(--shadow-sm); }
  .chips .opt:hover, .mode:hover { border-color: var(--line); }
  .chips .opt.on:hover { border-color: transparent; }
  .m-drawer-link:active, .m-tab:active { background: rgba(232, 90, 79, .1); }
  .chips .opt:active { border-color: var(--red); }
}

/* ===========================================================================
   6. ОГРАНИЧЕННАЯ АНИМАЦИЯ

   Отключаем только декоративное. Функциональные переходы (прогресс мастера,
   выдвижение меню) остаются — без них состояние становится непонятным.
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .glow, .dot, .pola, .env-icon, .kmic, .eq i, .prev-wave i,
  .demo-karaoke .kline, .trk-ph .ph-dot { animation: none !important; }
  .screen { animation: none; }
  .card:hover, .cta:hover, .tar:hover, .review:hover, .play-btn:hover { transform: none; }
  .m-drawer { transition: none; }
  .m-scrim { transition: none; }
  .m-wiz-fill { transition: none; }
  .auth-modal, .tar-modal, .sp-card, .sv-modal { animation: none; }
  .support-pop.open { animation: none; }
}