/* ==========================================================================
   ВОЛЕЙКОН — адаптив под телефон и планшет.

   Подключается ПОСЛЕДНИМ на всех страницах: правила здесь перекрывают базовые
   при равной специфичности, поэтому мобильную раскладку можно держать в одном
   месте и не искать её по пяти файлам.

   Ступени:
     ≤1024  планшет — сетки в две колонки, поля уже
     ≤860   шапка не помещается → бургер и шторка меню
     ≤620   телефон — витрина в две колонки, компактные карточки, шаги строками
     ≤380   узкий телефон — ужимаем типографику

   Правило для всех правок: движение только через transform и opacity, кликабельное
   не мельче 44 px, ничего не должно вылезать за правый край.
   ========================================================================== */

/* ---------- 1. БАЗА ---------- */

html {
  /* iOS в альбомной ориентации сам раздувает шрифты — из-за этого ломались
     карточки и таблица размеров. Запрещаем, свои размеры мы задали сами. */
  -webkit-text-size-adjust: 100%;
}

body {
  /* серая вспышка по тапу на телефоне выглядит как поломка, гасим её —
     обратную связь даёт :active у кнопок */
  -webkit-tap-highlight-color: transparent;
}

/* Ничто не должно распирать страницу вбок: длинная ссылка, слово или картинка. */
img, svg, video, table { max-width: 100%; }
p, li, h1, h2, h3, dd, dt { overflow-wrap: break-word; }

/* На тач-экране нет курсора, а :hover прилипает после тапа и остаётся
   «зависшим». Отдаём наведение только тем, у кого настоящая мышь. */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: 0 10px 30px -24px #000; }
  .step:hover, .card-mini:hover, .review:hover, .contact:hover,
  .chan:hover, .chip:hover, .filtertab:hover, .brandtab:hover, .sectiontab:hover {
    transform: none;
  }
  .card:hover .card__frame.is-active { transform: scale(1); }
  .card__peek { display: none; }
}

/* ---------- 2. ЛЕНТА РАЗДЕЛОВ ----------

   За бургером разделов не видно: человек не знает, что на сайте есть «Размеры»
   или «Доставка», пока не догадается нажать три полоски. Лента показывает все
   вкладки сразу, прилипает к шапке и листается вбок.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  /* Шапка и лента прилипают вместе: у .header своя sticky, но тогда лента
     уезжала бы вверх отдельно. Липким делаем общую обёртку. */
  #shellHeader { display: block; position: sticky; top: 0; z-index: 40; }
  .header { position: static; }

  .tabs {
    display: block;
    background: rgba(11,11,12,.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    /* край растворяется — видно, что вкладки листаются дальше */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }

  .tabs__row {
    display: flex; gap: 6px;
    /* Справа добавлено место под растворяющийся край: без него последняя
       вкладка в самом конце прокрутки оказывалась под затемнением. */
    padding: 7px calc(var(--pad) + 26px) 8px var(--pad);
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* листание ленты не тянет страницу назад */
  }
  .tabs__row::-webkit-scrollbar { display: none; }

  .tabs__tab {
    flex: none;
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--head); font-size: 13.5px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
    white-space: nowrap;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
  }
  .tabs__tab:active { background: rgba(255,255,255,.06); }

  .tabs__tab.is-current {
    background: var(--accent); color: var(--accent-ink);
    border-color: var(--accent); font-weight: 600;
  }
}

/* ---------- 4. ПЛАНШЕТ (≤1024) ---------- */

@media (max-width: 1024px) {
  .grid { gap: 16px; }
  .section__sub { max-width: none; }
}

/* ---------- 5. ШАПКА (≤860) ---------- */

@media (max-width: 860px) {
  .header { gap: 10px; }
  .header__logo { margin-right: auto; }
  /* Подпись «Корзина» ниже 420px прячется, и раньше от кнопки оставался
     лаймовый прямоугольник с одной цифрой — непонятно, что это. Значок
     сумки объясняет всё без слов. */
  .cart-btn { padding: 10px 13px; gap: 8px; }
  .header__logo span { font-size: 16px; }

  /* Колонка в гриде по умолчанию не уже своего содержимого, поэтому «1fr»
     разъезжался до ширины самой длинной плитки каналов — герой уезжал
     под правый край и обрезался. minmax(0,…) разрешает колонке сжаться. */
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__inner > * { min-width: 0; }

  /* Плитки каналов в две колонки на телефоне не читаются: подпись переносится
     по букве. Ставим в столбик — так же, как в подвале. */
  .chans, .chans--compact, .chans--big { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 6. ТЕЛЕФОН (≤620) ---------- */

@media (max-width: 620px) {

  /* --- поля и заголовки --- */
  .section { padding-top: clamp(40px, 9vw, 56px); padding-bottom: clamp(40px, 9vw, 56px); }
  .section__head { margin-bottom: 22px; }

  /* --- герой ---
     Высоту текстового блока резервирует js/hero.js по самому длинному слайду:
     без этого страница подпрыгивала на 80 px при каждой смене слайда.
     Свою min-height здесь не задаём, чтобы не спорить с замером. */
  .hero__title { line-height: 1.04; }
  .hero__cta .btn { flex: 1 1 100%; }        /* кнопки во всю ширину — легче попасть */
  .hero__facts { grid-template-columns: minmax(0, 1fr); }
  .hero__media { max-width: none; }

  /* --- витрина в две колонки ---
     37 пар по одной в ряд — это 30 экранов прокрутки. Две колонки с короткой
     карточкой: видно четыре модели сразу, как в любом магазине на телефоне.
     Подробности (описание, размер) остаются на странице пары. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid .card__body { padding: 10px; gap: 5px; }
  .grid .card__title { font-size: 15px; letter-spacing: .01em; }
  .grid .card__sport { font-size: 11px; letter-spacing: .08em; }
  .grid .card__colorway { font-size: 12px; }
  .grid .card__short { display: none; }
  .grid .card__size { font-size: 11px; }
  .grid .card__more { display: none; }
  /* описание скрыто, и без него растяжку низа карточки держать нечему:
     цены в соседних карточках вставали на разной высоте */
  .grid .card__foot { flex-direction: column; align-items: stretch; gap: 8px; margin-top: auto; }
  .grid .card__price { font-size: 19px; }
  .grid .card__add { width: 100%; padding: 11px 8px; font-size: 12px; }
  .grid .badge { top: 8px; left: 8px; padding: 4px 8px; font-size: 11px; }
  /* Точки — единственный знак, что у пары несколько кадров, и единственный
     способ остановиться на нужном. Прятать нельзя, поэтому ужимаем под
     ширину узкой карточки. */
  .grid .card__dots { bottom: 8px; gap: 4px; padding: 5px 8px; }
  .grid .card__dot { width: 12px; height: 3px; }

  /* Карусель на главной шире грид-карточек, там описание помещается —
     компактные правила её не касаются (они все под .grid). */
  .carousel .card { flex: 0 0 min(260px, 78vw); }

  /* --- шаги «как заказать»: иконка слева, текст справа ---
     Столбиком каждый шаг занимал почти пол-экрана, четыре шага — четыре
     экрана ради восьми слов. */
  .steps { gap: 10px; }
  .steps--icons { gap: 10px; }
  .steps--icons .step {
    display: grid; grid-template-columns: 56px minmax(0, 1fr);
    align-items: center; column-gap: 16px; padding: 14px 16px;
  }
  .steps--icons .step__icon { width: 56px; height: 56px; margin: 0; grid-row: 1 / span 2; }
  .steps--icons .step__icon svg { width: 26px; height: 26px; }
  .steps--icons .step h3 { grid-column: 2; align-self: end; margin: 0; font-size: 17px; }
  .steps--icons .step p  { grid-column: 2; align-self: start; font-size: 13.5px; line-height: 1.4; }

  .cards { gap: 12px; }
  .card-mini { padding: 18px; }

  /* --- фильтры каталога ---
     Ряд вкладок листается вбок, а не переносится в три строки: так до товара
     ближе на пол-экрана. Выпадающая панель с вариантами остаётся на месте. */
  .filters__tabs, .filters__section {
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  }
  .filters__tabs::-webkit-scrollbar,
  .filters__section::-webkit-scrollbar { display: none; }
  .filtertab, .sectiontab { flex: none; min-height: 40px; }
  .filtertab__caret { font-size: 11px; }
  .filter-panel { margin-inline: 0; }

  /* Подсказка «листается вбок»: край растворяется вместо того, чтобы резать
     вкладку пополам. Маска живёт на самом контейнере, поэтому не едет вместе
     с содержимым, как поехал бы псевдоэлемент внутри прокрутки. */
  .filters__tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }

  /* --- размерная сетка ---
     Пять колонок в 343 px не влезали, и правый столбец просто обрезался без
     всякого намёка. Ужимаем ячейки, первую колонку приклеиваем — при боковой
     прокрутке видно, к какой длине стопы относится строка. */
  .chart { font-size: 12.5px; min-width: 0; }
  .chart th, .chart td { padding: 9px 8px; }
  .chart th:first-child, .chart td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: #14141A;
  }
  /* После сжатия ячеек сетка помещается целиком даже в 320 px, поэтому подсказки
     о боковой прокрутке здесь нет — она бы только затемняла колонку RU.
     Липкая первая колонка оставлена на случай более широкой сетки в будущем. */

  /* --- подвал --- */
  .footer { padding: 32px var(--pad) calc(32px + env(safe-area-inset-bottom)); }
  .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
  .footer__nav a { padding: 6px 0; }

  /* --- плавающая кнопка ---
     Раньше она стояла впритык к нижнему краю и на айфонах попадала под
     системную полоску, а над подвалом накрывала ссылки. */
  .fab {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    padding: 13px 18px; font-size: 13px;
  }
  .fab span { min-width: 56px; }

  .consult {
    left: 12px; right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto;
  }

  /* --- галерея товара ---
     Стрелки на телефоне лишние: кадры листаются пальцем. Оставляем счётчик,
     чтобы было видно, сколько всего ракурсов. */
  .pdp__nav { display: none; }

  /* --- корзина во весь экран --- */
  .cart { width: 100%; }
  .cart__foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ---------- 7. УЗКИЙ ТЕЛЕФОН (≤380) ---------- */

@media (max-width: 380px) {
  .header__logo span { font-size: 15px; letter-spacing: .08em; }
  .grid { gap: 8px; }
  .grid .card__title { font-size: 14px; }
  .grid .card__price { font-size: 17px; }
  .grid .card__add { font-size: 11px; letter-spacing: .04em; }
  .chart { font-size: 12px; }
  .chart th, .chart td { padding: 8px 6px; }
}

/* ---------- 8. ТЕЛЕФОН ЛЁЖА ---------- */

/* viewport-fit=cover пускает страницу под чёлку — лёжа она съедает левый край.
   Возвращаем отступ там, где система просит, и только по бокам. */
@media (orientation: landscape) {
  .header, .section, .page, .footer, .hero { padding-left: max(var(--pad), env(safe-area-inset-left)); }
  .header, .section, .page, .footer, .hero { padding-right: max(var(--pad), env(safe-area-inset-right)); }
  .fab { right: max(14px, env(safe-area-inset-right)); }
  .tabs__row { padding-left: max(var(--pad), env(safe-area-inset-left));
               padding-right: calc(max(var(--pad), env(safe-area-inset-right)) + 26px); }
}

@media (max-height: 500px) and (orientation: landscape) {
  /* Телефон лёжа — редкий, но неприятный случай: ширины много, высоты почти нет.
     Заголовки заданы через vw и раздувались до половины экрана, а липкая шапка
     съедала ещё треть. Здесь размеры считаем от ВЫСОТЫ (vh) — то есть от того,
     чего не хватает. */
  .header { position: static; padding-top: 8px; padding-bottom: 8px; }
  .header__logo img { width: 28px; height: 28px; }

  .hero { padding-top: 18px; padding-bottom: 22px; }
  .hero__title  { font-size: clamp(28px, 9vh, 56px); }
  .hero__kicker { margin-bottom: 10px; font-size: 12px; }
  .hero__lead   { margin: 12px 0 18px; font-size: 15px; }
  .hero__price  { margin-top: 10px; font-size: clamp(22px, 6vh, 32px); }

  .section { padding-top: 34px; padding-bottom: 34px; }
  .section__title { font-size: clamp(24px, 8vh, 42px); }
  .page__title    { font-size: clamp(24px, 8vh, 42px); }

  /* лёжа лента режет и без того редкие пиксели высоты — ужимаем */
  .tabs__row { padding-top: 5px; padding-bottom: 5px; }
  .tabs__tab { min-height: 32px; font-size: 12.5px; }
}

/* Лёжа ширины хватает на две колонки — возвращаем фото рядом с текстом,
   иначе правая половина экрана остаётся пустой, а фото уезжает под сгиб.
   Высоту фото ограничиваем экраном, а не пропорцией 4:5. */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 700px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: 'copy media' 'controls media' 'facts facts' 'channels channels';
  }
  .hero__media { aspect-ratio: auto; height: min(62vh, 300px); max-width: 340px; }
}

/* ---------- 9. ТАЧ-ЦЕЛИ ---------- */

/* Палец промахивается по всему мельче 44 px. Там, где элемент маленький по
   дизайну, расширяем невидимую область нажатия, а не сам элемент. */
@media (pointer: coarse) {
  .hero__dot, .card__dot {
    position: relative;
  }
  .hero__dot::after, .card__dot::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .cart-item__remove, .icon-btn { min-width: 44px; min-height: 44px; }
  .cart-upsell__add { width: 44px; height: 44px; }
  /* «+» у аксессуара в карусели «с этим часто берут»: кружок оставляем
     маленьким по дизайну, зону нажатия расширяем невидимо */
  .mini__add { position: relative; }
  .mini__add::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* Ссылки-строчки: сама подпись остаётся мелкой, растёт только площадь нажатия. */
  .footer__nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .crumbs { margin-bottom: 16px; }
  .crumbs a { display: inline-block; padding: 8px 0; }
  .header__logo { padding: 4px 0; }
}