/* ============================================================
   MiraStreet — телефон.

   Всё, что касается узкого экрана, собрано здесь и подключается
   последним: в остальных файлах правила писались под мышь и
   широкое окно, и перебивать их по месту значило бы разносить
   мобильную вёрстку по шести файлам.

   Порог 560px — это телефон в портрете. Планшет и повёрнутый
   телефон ловятся отдельными блоками внизу файла.

   Что тут делается:
     · шапка и плеер перестают наезжать друг на друга и на края;
     · панель раздела идёт во всю ширину — текст больше не зажат
       тремя рамками подряд;
     · шрифт и отступы под узкую колонку;
     · у товара появляется липкая полоса покупки (разметку для неё
       ставит js/catalog.js);
     · любое нажатие — не меньше 44px, поля форм — 16px, иначе
       Safari зумит страницу при фокусе;
     · ховеры выключены: на тач-экране они залипают после тапа.
   ============================================================ */

/* ============================================================
   1. Общее
   ============================================================ */
@media (max-width: 560px) {
  body {
    font-size: 14px;
    line-height: 1.6;
    -webkit-tap-highlight-color: transparent;
  }

}

/* ============================================================
   1б. Тач-экран: размеры под палец

   Отдельно от ширины — и вот почему. Порог 560px ловит телефон в
   портрете, а повёрнутый набок телефон уже 740px шириной, и всё
   мелкое возвращалось. Промахи пальцем от поворота экрана не
   зависят, поэтому меряем не ширину, а способ ввода.

   Правило одно: во что целятся пальцем — не мельче 44px. Внешний
   вид при этом не меняется, растёт только область нажатия.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Safari зумит страницу, если поле мельче 16px, и обратно её уже
     никто не вернёт — держим ровно 16. */
  input, textarea, select { font-size: 16px !important; }

  .btn { min-height: 46px; padding: 10px 18px; }
  .btn.small { min-height: 44px; padding: 6px 14px; font-size: 13px; }
  .btn.icon { width: 46px; }

  /* плеер: кнопки и название (оно разворачивает список) */
  .pl-btn { width: 44px; height: 44px; }
  /* Название — в ту же строку, а не отдельным этажом. Двухэтажным
     плеер был сделан под узкую плашку в 300px; во всю ширину этаж
     лишний, а набок повёрнутый телефон от него становится плакатом
     поверх половины карусели. */
  #pl-bar { flex-wrap: nowrap; }
  .pl-marquee {
    order: 0;
    flex: 1 1 auto;
    flex-basis: auto;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 0;
  }

  /* товар */
  .size-radio span { min-height: 46px; min-width: 50px; }
  .pv-prev, .pv-next { min-width: 46px; min-height: 46px; }
  .tt-zoom { width: 44px; height: 44px; }
  .pz-nav { width: 46px; height: 68px; }

  /* корзина: «минус» и «плюс» количества */
  .q-minus, .q-plus { min-width: 46px; min-height: 46px; padding: 0; }
  /* коробочка согласия была 16px: нажимается вся строка, но целятся в неё */
  .consent input { width: 22px; height: 22px; margin-top: 0; }

  .rv-item { min-height: 44px; }

  /* Подписи-ссылки («нет моего размера», «размерная сетка», название
     вещи в корзине). Растянуть их по высоте нельзя: у них пунктир снизу,
     и он отъехал бы от текста. Поэтому сам текст не трогаем, а область
     нажатия расширяем невидимой накладкой. */
  .size-chart-link,
  .notify-link,
  .desc-toggle,
  .pl-link,
  .tr-ya,
  .ci-name.link { position: relative; }
  .size-chart-link::after,
  .notify-link::after,
  .desc-toggle::after,
  .pl-link::after,
  .tr-ya::after,
  .ci-name.link::after {
    content: "";
    position: absolute;
    inset: -14px -10px;
  }
}

/* Ховер на тач-экране — не наведение, а след от тапа: он остаётся
   висеть на кнопке, пока не нажмёшь другую. Выключаем везде. */
@media (hover: none) {
  .btn:hover,
  .product-card:hover,
  .shelf-item:hover,
  .car-arrow:hover,
  .collection-card:hover {
    transform: none;
    box-shadow: none;
    border-color: inherit;
  }
  .product-card:hover .ph img,
  .shelf-item:hover .ph img { transform: none; }
}

/* ============================================================
   2. Главный экран: шапка, плеер, карусель, подсказки
   ============================================================ */
@media (max-width: 560px) {
  #main-screen {
    padding:
      max(10px, env(safe-area-inset-top)) 12px
      max(8px, env(safe-area-inset-bottom));
  }

  /* Шапка: логотип во всю ширину смотрелся плакатом и съедал
     треть экрана — ужимаем и ставим звук вплотную. */
  #ms-header { gap: 10px; align-items: center; }
  #ms-logo { font-size: 25px; letter-spacing: 0.1em; }
  #ms-tagline { font-size: 12px; margin-top: 0; }

  /* Плеер. Был отдельной плашкой, висевшей под кнопкой звука: узкой,
     в две строки и впритык к правому краю. Теперь — одна строка во
     всю ширину сразу под шапкой. */
  #player {
    left: 12px;
    right: 12px;
    width: auto;
    /* под шапкой: её высота плюс отступ сверху устройства */
    top: calc(max(10px, env(safe-area-inset-top)) + 54px);
  }
  #pl-bar {
    gap: 6px;
    padding: 5px 6px;
    background: rgba(10, 10, 13, 0.62);
    border-color: rgba(201, 201, 204, 0.14);
  }
  .pl-cover { width: 34px; height: 34px; }
  /* список треков разворачивается под плашкой на всю ширину */
  .pl-list { max-height: 46vh; }

  /* Карусель начинается под плеером — он висит поверх, в потоке его нет */
  #grid-wrap { margin-top: 56px; }

  /* Стрелки листания. Ужимать их было нельзя — пальцем не попасть,
     поэтому размер оставлен, а чтобы они не спорили с соседними
     иконками, прижаты к самому краю и приглушены. */
  .car-arrow {
    width: 44px;
    height: 58px;
    font-size: 24px;
    opacity: 0.32;
    border-radius: 0 8px 8px 0;
  }
  #car-prev { left: 0; border-left: 0; }
  #car-next { right: 0; border-right: 0; border-radius: 8px 0 0 8px; }

  /* Подписи: на видеофоне серое по светлому не читалось */
  .grid-label {
    font-size: 12px;
    text-shadow: 0 1px 3px #000, 0 0 12px rgba(0, 0, 0, 0.9);
  }
  .grid-label.active {
    font-size: 17px;
    text-shadow: 0 0 16px rgba(138, 30, 45, 0.8), 0 1px 4px #000;
  }

  /* Подсказки внизу: две длинные строки не влезали и обрезались
     краями экрана — оставляем одну короткую, переносимую. */
  #ms-footer { min-height: 0; }
  #ms-hints {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    font-size: 11px;
  }
  #ms-hints .hint-item { font-size: 11px; }
}

/* ============================================================
   3. Разделы: панель во всю ширину
   ============================================================ */
@media (max-width: 560px) {
  /* Панель раздела была вставлена в поля, а внутри неё ещё поля, а
     внутри карточки — свои. От ширины экрана до текста уходило под
     60px с каждой стороны. Панель ставим во всю ширину, поля
     оставляем только у содержимого. */
  .section { padding: max(8px, env(safe-area-inset-top)) 0 0; }
  .sec-header {
    padding: 0 12px;
    gap: 10px;
    margin-bottom: 10px;
  }
  .sec-title { font-size: 19px; letter-spacing: 0.06em; }

  /* Кадр прилёта под панелью. На телефоне панель идёт во всю ширину и
     закрывает почти весь экран — от пролёта оставалась бы полоска
     шапки, и та чёрная. Затемнение приглушаем: кадр читается в шапке и
     по краю панели, а текст на нём по-прежнему разборчив за счёт
     размытия самой панели. */
  #section-layer { background: rgba(6, 6, 9, 0.42); }
  .bg-transition.held { filter: brightness(0.55) saturate(0.95); }

  .sec-panel {
    width: 100%;
    border-radius: 12px 12px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .sec-content {
    padding: 14px 12px calc(20px + env(safe-area-inset-bottom));
  }

  /* Каталог: плитки плотнее, метка «единственный экземпляр» мельче */
  .catalog-grid { gap: 9px; }
  .product-card .product-name { font-size: 14px; padding: 0 9px 3px; }
  .product-card .price { padding: 0 9px; font-size: 14px; }
  .ooo-badge { font-size: 9.5px; padding: 2px 6px; letter-spacing: 0.1em; }
  .cat-group-title { font-size: 11.5px; letter-spacing: 0.18em; }

  /* Корзина */
  .cart-item .thumb { width: 56px; height: 56px; }
  .ci-name { font-size: 14px; }
  /* Согласиям нужен воздух: их две подряд, и без них заказ не уйдёт */
  .consent { padding: 12px; gap: 12px; font-size: 12.5px; }
  .consent + .consent { margin-top: 0; }

  /* Длинные тексты разделов */
  .home-slogan { font-size: 20px; }
  .music-intro, .catalog-blurb { font-size: 12px; }
}

/* ============================================================
   4. Товар: обложка, покупка
   ============================================================ */
@media (max-width: 560px) {
  /* Корешок «коробки» отнимал 34px ширины ради повёрнутой надписи,
     которая и так есть заголовком ниже. На телефоне его нет. */
  .case-spine { display: none; }
  .case-topbar { font-size: 10px; letter-spacing: 0.24em; padding: 6px 4px; }

  .case-back { padding: 14px 12px 40px; gap: 12px; }
  .cb-name { font-size: 19px; }
  .cb-desc { font-size: 14px; }

  /* Кнопка покупки во всю ширину — в неё труднее не попасть */
  .product-actions { display: flex; }
  .product-actions .btn { flex: 1; }

  .sizes-row { gap: 8px; }

  /* Размерная сетка. Таблица шире окна: последний столбец («длина
     рукава») уезжал за край, а что её можно листать вбок — ниоткуда
     не видно. Ужимаем так, чтобы влезала целиком. */
  .dialog.size-chart { padding: 18px 14px 16px; }
  .sc-table th, .sc-table td { padding: 5px 4px; white-space: normal; }
  .sc-table { font-size: 12px; }
  .sc-table thead th { font-size: 10px; letter-spacing: 0.02em; padding: 5px 3px; }
  .sc-table thead th b { font-size: 12px; }
  .sc-table thead th span { font-size: 9px; letter-spacing: 0; }

  /* Просмотр съёмки на весь экран: счётчик кадров стоял у самой
     кромки и попадал под системную полосу «домой». */
  .pz-count { bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* Липкая полоса покупки: цена и «в корзину» всегда под рукой.
     Появляется, когда настоящая кнопка ушла за экран (класс ставит
     js/catalog.js), — иначе две одинаковые кнопки рядом. */
  .buy-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(10, 10, 13, 0.86), rgba(10, 10, 13, 0.97));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(201, 201, 204, 0.22);
    transform: translateY(110%);
    transition: transform 0.22s ease-out;
    pointer-events: none;
  }
  .buy-dock.on { transform: translateY(0); pointer-events: auto; }
  /* Полоса висит поверх страницы, значит конец содержимого оказался бы
     под ней. Место под неё освобождаем у самого низа прокрутки. */
  .sec-content:has(.buy-dock) { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  /* Пока открыт просмотр съёмки или любое окно, полосу убираем: она
     рисуется поверх и перекрывала счётчик кадров и кнопки. */
  .section:has(.photo-zoom) .buy-dock,
  body:has(#dialog-layer:not([hidden])) .buy-dock {
    transform: translateY(110%);
    pointer-events: none;
  }
  .bd-price {
    flex: none;
    font-family: var(--font-type);
    font-size: 16px;
    color: var(--text);
    white-space: nowrap;
  }
  .bd-size {
    display: block;
    font-family: var(--font-sys);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--silver);
  }
  .bd-btn { flex: 1; min-height: 46px; }
}
/* на широком экране полосы нет вовсе */
@media (min-width: 561px) {
  .buy-dock { display: none; }
}

/* ============================================================
   5. Планшет и телефон в альбоме
   ============================================================ */
@media (min-width: 561px) and (max-width: 900px) {
  .sec-content { padding: 18px 16px; }
  .case-layout { grid-template-columns: minmax(220px, 300px) 1fr; }
}

/* Телефон положили набок: экран низкий, вертикали мало.
   Шапку и подсказки сжимаем, чтобы карусель не схлопнулась, а плеер
   ужимаем — в свою полную ширину он накрывал половину карусели. */
@media (max-height: 460px) and (orientation: landscape) {
  #ms-logo { font-size: 20px; }
  #ms-tagline { display: none; }
  #ms-footer { display: none; }
  .sec-header { margin-bottom: 6px; }

  /* right — чтобы не залезть на кнопку звука, она правее */
  #player {
    width: min(380px, calc(100vw - 130px));
    right: 66px;
    top: max(8px, env(safe-area-inset-top));
  }
  .pl-list { max-height: 60vh; }
}