/* Баннер «Готов продать свои скины» на телефонах — варианты раскладки.
 *
 * Выбираются панелью из ?ctaSkins (home-cta-skins.js) или параметром ?ctaSkin=N; оба
 * ставят на <html> атрибут data-cta-skin. Без атрибута страница выглядит как раньше.
 *
 * Правила живут внутри @media: на десктопе баннер всех устраивает, меняется только
 * узкий экран. Разметку варианты не трогают — у них те же картинки, заголовок и кнопка.
 */

@media (max-width: 767px) {
  /* ---- 1 · Персонажи под текстом ------------------------------------------
   * Заголовок и кнопка сверху во всю ширину, пара стоит по центру на полу баннера.
   * Текст больше ни на кого не наезжает, поэтому его можно не уменьшать. */
  html[data-cta-skin="c1"] .skc-cta { height: 450px }
  html[data-cta-skin="c1"] .skc-cta-body { justify-content: flex-start; padding-top: 26px; gap: 16px }
  html[data-cta-skin="c1"] .skc-cta-title { font-size: 23px; max-width: 300px }
  html[data-cta-skin="c1"] .skc-cta-heroes {
    left: 50%; right: auto; width: 176px; opacity: 1; transform: translateX(-50%);
  }
  html[data-cta-skin="c1"] .skc-cta-art { top: -40px }

  /* ---- 2 · Текст слева, пара справа ---------------------------------------
   * Классическая карточка: колонка текста прижата влево и не доходит до фигур. */
  html[data-cta-skin="c2"] .skc-cta { height: 240px }
  html[data-cta-skin="c2"] .skc-cta-body {
    align-items: flex-start; text-align: left; padding: 0 44% 0 18px; gap: 16px;
  }
  html[data-cta-skin="c2"] .skc-cta-title { font-size: 19px; max-width: none }
  html[data-cta-skin="c2"] .skc-cta-button { padding: 12px 22px; font-size: 12.5px }
  html[data-cta-skin="c2"] .skc-cta-heroes { width: 150px; right: -4px; opacity: 1 }
  html[data-cta-skin="c2"] .skc-cta-art { top: -46px }

  /* ---- 3 · Только текст ----------------------------------------------------
   * Самый компактный: без картинок баннер перестаёт быть «дырой» в ленте. */
  html[data-cta-skin="c3"] .skc-cta { height: 182px }
  html[data-cta-skin="c3"] .skc-cta-art { display: none }
  html[data-cta-skin="c3"] .skc-cta-body { gap: 18px }
  html[data-cta-skin="c3"] .skc-cta-title { font-size: 21px; max-width: 320px }

  /* ---- 4 · Пара фоном ------------------------------------------------------
   * Фигуры крупные и уходят в тень, текст читается поверх них. */
  html[data-cta-skin="c4"] .skc-cta { height: 330px }
  html[data-cta-skin="c4"] .skc-cta-heroes {
    left: 50%; right: auto; width: 250px; opacity: .3; transform: translateX(-50%);
    filter: grayscale(.2) drop-shadow(0 20px 34px rgba(0, 0, 0, .5));
  }
  html[data-cta-skin="c4"] .skc-cta-art { top: -30px }
  html[data-cta-skin="c4"] .skc-cta-art::after { height: 100%; background: linear-gradient(to top, rgba(8, 10, 9, .92), rgba(8, 10, 9, .55)) }
  html[data-cta-skin="c4"] .skc-cta-title { font-size: 24px; max-width: 300px }

  /* ---- 5 · Пара слева, кнопка во всю ширину -------------------------------- */
  html[data-cta-skin="c5"] .skc-cta { height: 250px }
  html[data-cta-skin="c5"] .skc-cta-heroes { left: -14px; right: auto; width: 140px; opacity: 1 }
  html[data-cta-skin="c5"] .skc-cta-art { top: -36px }
  html[data-cta-skin="c5"] .skc-cta-body {
    align-items: flex-end; text-align: right; padding: 0 16px 0 40%; gap: 16px;
  }
  html[data-cta-skin="c5"] .skc-cta-title { font-size: 19px; max-width: none }
  html[data-cta-skin="c5"] .skc-cta-button { width: 100%; padding: 13px 0 }

  /* ---- 6 · Пара сверху по центру -------------------------------------------
   * Картинка работает как шапка карточки, текст и кнопка — её подпись. */
  html[data-cta-skin="c6"] .skc-cta { height: 406px }
  html[data-cta-skin="c6"] .skc-cta-art { top: -44px; bottom: 186px }
  html[data-cta-skin="c6"] .skc-cta-art::after { display: none }
  html[data-cta-skin="c6"] .skc-cta-heroes {
    left: 50%; right: auto; bottom: 0; width: 170px; opacity: 1; transform: translateX(-50%);
  }
  html[data-cta-skin="c6"] .skc-cta-body { justify-content: flex-end; padding-bottom: 26px; gap: 16px }
  html[data-cta-skin="c6"] .skc-cta-title { font-size: 22px; max-width: 300px }

  /* ---- 7 · С оружием --------------------------------------------------------
   * На телефоне нож и винтовка сейчас просто выключены; здесь они возвращаются
   * мелкими в левый нижний угол, а пара уходит вправо. */
  html[data-cta-skin="c7"] .skc-cta { height: 300px }
  html[data-cta-skin="c7"] .skc-cta-awp { display: block; width: 150px; bottom: 60px; left: -34px }
  html[data-cta-skin="c7"] .skc-cta-knife { display: block; width: 100px; bottom: 30px; left: 10px }
  html[data-cta-skin="c7"] .skc-cta-heroes { width: 124px; right: -16px; opacity: .85 }
  html[data-cta-skin="c7"] .skc-cta-art { top: -40px }
  html[data-cta-skin="c7"] .skc-cta-body { justify-content: flex-start; padding: 22px 104px 0 16px; gap: 14px }
  html[data-cta-skin="c7"] .skc-cta-title { font-size: 20px; max-width: 260px }

  /* ---- 8 · Узкая полоса -----------------------------------------------------
   * Баннер высотой с кнопку: текст в две строки слева, пара выглядывает справа. */
  html[data-cta-skin="c8"] .skc-cta { height: 148px }
  html[data-cta-skin="c8"] .skc-cta-body {
    flex-direction: row; align-items: center; justify-content: space-between;
    text-align: left; padding: 0 86px 0 14px; gap: 10px;
  }
  html[data-cta-skin="c8"] .skc-cta-title { font-size: 13.5px; line-height: 1.25; max-width: 186px }
  html[data-cta-skin="c8"] .skc-cta-button { flex: none; padding: 10px 14px; font-size: 11px }
  html[data-cta-skin="c8"] .skc-cta-heroes { width: 82px; right: -6px; opacity: 1 }
  html[data-cta-skin="c8"] .skc-cta-art { top: -4px }
  html[data-cta-skin="c8"] .skc-cta-art::after { display: none }
}
/* Те же раскладки без привязки к ширине экрана: панель примерки включает их на
   десктопе, иначе выбор варианта там ничего не меняет и кажется сломанным. */
  /* ---- 1 · Персонажи под текстом ------------------------------------------
   * Заголовок и кнопка сверху во всю ширину, пара стоит по центру на полу баннера.
   * Текст больше ни на кого не наезжает, поэтому его можно не уменьшать. */
  html[data-cta-force][data-cta-skin="c1"] .skc-cta { height: 450px }
  html[data-cta-force][data-cta-skin="c1"] .skc-cta-body { justify-content: flex-start; padding-top: 26px; gap: 16px }
  html[data-cta-force][data-cta-skin="c1"] .skc-cta-title { font-size: 23px; max-width: 300px }
  html[data-cta-force][data-cta-skin="c1"] .skc-cta-heroes {
    left: 50%; right: auto; width: 176px; opacity: 1; transform: translateX(-50%);
  }
  html[data-cta-force][data-cta-skin="c1"] .skc-cta-art { top: -40px }

  /* ---- 2 · Текст слева, пара справа ---------------------------------------
   * Классическая карточка: колонка текста прижата влево и не доходит до фигур. */
  html[data-cta-force][data-cta-skin="c2"] .skc-cta { height: 240px }
  html[data-cta-force][data-cta-skin="c2"] .skc-cta-body {
    align-items: flex-start; text-align: left; padding: 0 44% 0 18px; gap: 16px;
  }
  html[data-cta-force][data-cta-skin="c2"] .skc-cta-title { font-size: 19px; max-width: none }
  html[data-cta-force][data-cta-skin="c2"] .skc-cta-button { padding: 12px 22px; font-size: 12.5px }
  html[data-cta-force][data-cta-skin="c2"] .skc-cta-heroes { width: 150px; right: -4px; opacity: 1 }
  html[data-cta-force][data-cta-skin="c2"] .skc-cta-art { top: -46px }

  /* ---- 3 · Только текст ----------------------------------------------------
   * Самый компактный: без картинок баннер перестаёт быть «дырой» в ленте. */
  html[data-cta-force][data-cta-skin="c3"] .skc-cta { height: 182px }
  html[data-cta-force][data-cta-skin="c3"] .skc-cta-art { display: none }
  html[data-cta-force][data-cta-skin="c3"] .skc-cta-body { gap: 18px }
  html[data-cta-force][data-cta-skin="c3"] .skc-cta-title { font-size: 21px; max-width: 320px }

  /* ---- 4 · Пара фоном ------------------------------------------------------
   * Фигуры крупные и уходят в тень, текст читается поверх них. */
  html[data-cta-force][data-cta-skin="c4"] .skc-cta { height: 330px }
  html[data-cta-force][data-cta-skin="c4"] .skc-cta-heroes {
    left: 50%; right: auto; width: 250px; opacity: .3; transform: translateX(-50%);
    filter: grayscale(.2) drop-shadow(0 20px 34px rgba(0, 0, 0, .5));
  }
  html[data-cta-force][data-cta-skin="c4"] .skc-cta-art { top: -30px }
  html[data-cta-force][data-cta-skin="c4"] .skc-cta-art::after { height: 100%; background: linear-gradient(to top, rgba(8, 10, 9, .92), rgba(8, 10, 9, .55)) }
  html[data-cta-force][data-cta-skin="c4"] .skc-cta-title { font-size: 24px; max-width: 300px }

  /* ---- 5 · Пара слева, кнопка во всю ширину -------------------------------- */
  html[data-cta-force][data-cta-skin="c5"] .skc-cta { height: 250px }
  html[data-cta-force][data-cta-skin="c5"] .skc-cta-heroes { left: -14px; right: auto; width: 140px; opacity: 1 }
  html[data-cta-force][data-cta-skin="c5"] .skc-cta-art { top: -36px }
  html[data-cta-force][data-cta-skin="c5"] .skc-cta-body {
    align-items: flex-end; text-align: right; padding: 0 16px 0 40%; gap: 16px;
  }
  html[data-cta-force][data-cta-skin="c5"] .skc-cta-title { font-size: 19px; max-width: none }
  html[data-cta-force][data-cta-skin="c5"] .skc-cta-button { width: 100%; padding: 13px 0 }

  /* ---- 6 · Пара сверху по центру -------------------------------------------
   * Картинка работает как шапка карточки, текст и кнопка — её подпись. */
  html[data-cta-force][data-cta-skin="c6"] .skc-cta { height: 406px }
  html[data-cta-force][data-cta-skin="c6"] .skc-cta-art { top: -44px; bottom: 186px }
  html[data-cta-force][data-cta-skin="c6"] .skc-cta-art::after { display: none }
  html[data-cta-force][data-cta-skin="c6"] .skc-cta-heroes {
    left: 50%; right: auto; bottom: 0; width: 170px; opacity: 1; transform: translateX(-50%);
  }
  html[data-cta-force][data-cta-skin="c6"] .skc-cta-body { justify-content: flex-end; padding-bottom: 26px; gap: 16px }
  html[data-cta-force][data-cta-skin="c6"] .skc-cta-title { font-size: 22px; max-width: 300px }

  /* ---- 7 · С оружием --------------------------------------------------------
   * На телефоне нож и винтовка сейчас просто выключены; здесь они возвращаются
   * мелкими в левый нижний угол, а пара уходит вправо. */
  html[data-cta-force][data-cta-skin="c7"] .skc-cta { height: 300px }
  html[data-cta-force][data-cta-skin="c7"] .skc-cta-awp { display: block; width: 150px; bottom: 60px; left: -34px }
  html[data-cta-force][data-cta-skin="c7"] .skc-cta-knife { display: block; width: 100px; bottom: 30px; left: 10px }
  html[data-cta-force][data-cta-skin="c7"] .skc-cta-heroes { width: 124px; right: -16px; opacity: .85 }
  html[data-cta-force][data-cta-skin="c7"] .skc-cta-art { top: -40px }
  html[data-cta-force][data-cta-skin="c7"] .skc-cta-body { justify-content: flex-start; padding: 22px 104px 0 16px; gap: 14px }
  html[data-cta-force][data-cta-skin="c7"] .skc-cta-title { font-size: 20px; max-width: 260px }

  /* ---- 8 · Узкая полоса -----------------------------------------------------
   * Баннер высотой с кнопку: текст в две строки слева, пара выглядывает справа. */
  html[data-cta-force][data-cta-skin="c8"] .skc-cta { height: 148px }
  html[data-cta-force][data-cta-skin="c8"] .skc-cta-body {
    flex-direction: row; align-items: center; justify-content: space-between;
    text-align: left; padding: 0 86px 0 14px; gap: 10px;
  }
  html[data-cta-force][data-cta-skin="c8"] .skc-cta-title { font-size: 13.5px; line-height: 1.25; max-width: 186px }
  html[data-cta-force][data-cta-skin="c8"] .skc-cta-button { flex: none; padding: 10px 14px; font-size: 11px }
  html[data-cta-force][data-cta-skin="c8"] .skc-cta-heroes { width: 82px; right: -6px; opacity: 1 }
  html[data-cta-force][data-cta-skin="c8"] .skc-cta-art { top: -4px }
  html[data-cta-force][data-cta-skin="c8"] .skc-cta-art::after { display: none }

/* В режиме примерки баннер сужается до ширины телефона. */
html[data-cta-force] [data-skc-cta] > div { max-width: 390px; margin-left: auto; margin-right: auto }
/* На телефоне стрелки и оружие скрыты своими медиа-правилами; в примерке на широком
   экране они не срабатывают, поэтому повторяем их здесь. У варианта «с оружием»
   селектор точнее, и нож с винтовкой всё равно остаются на месте. */
html[data-cta-force] .skc-cta-arrows,
html[data-cta-force] .skc-cta-awp,
html[data-cta-force] .skc-cta-knife { display: none }


/* Витрина: страница грузится в узкой рамке, скрипт прячет всё кроме баннера. */
html[data-cta-preview] body { margin: 0; padding: 10px 0; overflow-x: hidden; background: #0a0a0a }
/* Обёртки главной держат высоту экрана и отступ под шапку — в рамке это лишний
   воздух вокруг баннера. Сам баннер и его внутренности не трогаем. */
html[data-cta-preview] main,
html[data-cta-preview] main div:not([data-skc-cta]):not([data-skc-cta] div) {
  min-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
html[data-cta-preview] main, html[data-cta-preview] main div { transition: none !important }
html[data-cta-preview] [data-skc-cta] { margin: 0 !important; padding: 0 !important }

/* Нижний баннер почти всегда вне экрана: пока он не виден, анимации стоят. Класс
   снимает рантайм, когда баннер появляется в поле зрения. */
.skc-cta.is-idle, .skc-cta.is-idle *,
.skc-cta.is-idle::before, .skc-cta.is-idle::after,
.skc-cta.is-idle *::before, .skc-cta.is-idle *::after { animation-play-state: paused !important }