/*
 * ============================================================
 * BOYKOVDOCS RESPONSIVE LAYER
 * ============================================================
 *
 * Desktop: > 1100px
 * Tablet:  641px - 1100px
 * Mobile:  <= 640px
 *
 * Основной desktop-дизайн не меняем.
 */


/* ============================================================
   BASE SAFETY
   ============================================================ */

html {
  width: 100%;

  overflow-x: hidden;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


body {
  width: 100%;
  min-width: 0;

  overflow-x: hidden;
}


#root {
  width: 100%;
  min-width: 0;
}


img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}


input,
textarea,
select,
button {
  max-width: 100%;
}


input,
textarea,
select {
  min-width: 0;
}


pre,
code {
  max-width: 100%;
}


pre {
  overflow-x: auto;
}


p,
li,
h1,
h2,
h3,
h4,
a,
span {
  overflow-wrap: break-word;
}


table {
  max-width: 100%;
}


/*
 * Минимальная область касания.
 * Только на устройствах без обычной мыши.
 */
@media (hover: none) and (pointer: coarse) {

  button,
  input[type="button"],
  input[type="submit"],
  input[type="checkbox"],
  input[type="radio"],
  a {
    -webkit-tap-highlight-color:
      transparent;
  }


  button,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
  }

}



/* ============================================================
   LARGE TABLET / SMALL LAPTOP
   ============================================================ */

@media (max-width: 1100px) {

  /*
   * Основные page-контейнеры CSS Modules.
   */
  [class*="_page_"] {
    max-width: 100%;

    padding-left: 24px !important;
    padding-right: 24px !important;
  }


  /*
   * Header
   */
  header {
    max-width: 100%;
  }


  [class*="_header_"] {
    max-width: 100%;

    gap: 20px !important;
  }


  /*
   * Hero-блоки.
   */
  [class*="_hero_"] {
    max-width: 100%;

    gap: 28px !important;
  }


  /*
   * Карточные сетки.
   */
  [class*="_grid_"] {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 18px !important;
  }


  /*
   * Страница срочной генерации:
   * текст + форма становятся одной колонкой.
   */
  [class*="_orderSection_"] {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 34px !important;
  }


  /*
   * Административные панели.
   */
  [class*="_actions_"] {
    flex-wrap: wrap;

    gap: 12px !important;
  }


  /*
   * Формы не должны вылезать за экран.
   */
  form {
    min-width: 0;
    max-width: 100%;
  }


  form input,
  form textarea,
  form select {
    width: 100%;
  }

}



/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

  /*
   * Верхняя навигация.
   *
   * Вместо сжатия текста даём горизонтальный
   * свайп — пять разделов остаются читаемыми.
   */
  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) {
    display: flex !important;

    flex-wrap: nowrap !important;

    width: 100%;
    max-width: 100%;

    gap: 18px !important;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 14px;

    scrollbar-width: none;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling:
      touch;
  }


  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  )::-webkit-scrollbar {
    display: none;
  }


  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) > a {
    flex: 0 0 auto;

    white-space: nowrap;

    scroll-snap-align:
      start;
  }


  /*
   * Hero чаще всего удобнее вертикально.
   */
  [class*="_hero_"] {
    flex-direction: column !important;

    align-items:
      flex-start !important;
  }


  /*
   * Большие двухколоночные секции.
   */
  [class*="_content_"] {
    max-width: 100%;
  }


  /*
   * Таблицы администратора.
   */
  table {
    display: block;

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling:
      touch;
  }


  th,
  td {
    white-space: nowrap;
  }


  /*
   * Редактор / формы / панели.
   */
  [class*="_panel_"] {
    max-width: 100%;
  }


  [class*="_form_"] {
    max-width: 100%;
  }


  /*
   * Модальные окна.
   */
  [class*="_modal_"],
  [class*="_modalContent_"],
  [class*="_modalCard_"] {
    max-width:
      calc(100vw - 32px) !important;
  }


  /*
   * Наш TOP-10.
   */
  .boykovTop10 {
    width: 100%;

    margin:
      26px 0 !important;

    padding:
      20px !important;
  }


  .boykovTop10__header {
    align-items:
      flex-start !important;

    flex-direction:
      column;

    gap:
      18px !important;
  }


  .boykovTop10__tabs {
    width: 100%;

    overflow-x: auto;

    flex-wrap: nowrap !important;

    padding-bottom: 4px;

    scrollbar-width: none;
  }


  .boykovTop10__tabs::-webkit-scrollbar {
    display: none;
  }


  .boykovTop10__tab {
    flex: 0 0 auto;
  }


  /*
   * Счётчик просмотров.
   */
  .boykovInstructionViews {
    max-width: 100%;
  }

}



/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

  body {
    background-size:
      20px 20px;
  }


  /*
   * Уменьшаем общий горизонтальный padding.
   */
  [class*="_page_"] {
    padding-left:
      14px !important;

    padding-right:
      14px !important;

    padding-top:
      28px !important;

    padding-bottom:
      56px !important;
  }


  main {
    width: 100%;
    max-width: 100%;
  }


  /*
   * Header.
   */
  header,
  [class*="_header_"] {
    min-width: 0;
    max-width: 100%;
  }


  [class*="_header_"] {
    flex-wrap: wrap;

    gap: 12px !important;

    padding-top:
      14px !important;

    padding-bottom:
      14px !important;
  }


  [class*="_actions_"] {
    width: 100%;

    justify-content:
      flex-start !important;
  }


  /*
   * Основная навигация.
   */
  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) {
    margin-bottom:
      30px !important;

    padding:
      8px 0 14px !important;

    gap:
      16px !important;
  }


  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) > a {
    font-size:
      12px !important;
  }


  /*
   * Типографика.
   */
  main h1 {
    font-size:
      clamp(
        28px,
        9vw,
        36px
      ) !important;

    line-height:
      1.14 !important;
  }


  main h2 {
    font-size:
      clamp(
        22px,
        7vw,
        28px
      ) !important;

    line-height:
      1.22 !important;
  }


  main h3 {
    font-size:
      clamp(
        17px,
        5.5vw,
        21px
      ) !important;
  }


  main p,
  main li {
    line-height:
      1.65;
  }


  /*
   * Все grid-каталоги —
   * одна карточка в строке.
   */
  [class*="_grid_"] {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      14px !important;
  }


  [class*="_card_"] {
    min-width: 0;
    max-width: 100%;
  }


  /*
   * Hero.
   */
  [class*="_hero_"] {
    margin-bottom:
      30px !important;

    gap:
      20px !important;
  }


  /*
   * Срочная генерация.
   */
  [class*="_orderSection_"] {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      24px !important;

    padding-top:
      34px !important;
  }


  [class*="_orderIntro_"] {
    gap:
      12px !important;
  }


  /*
   * Формы.
   *
   * font-size 16px предотвращает автоматический
   * zoom Safari на iPhone при фокусе.
   */
  main input,
  main textarea,
  main select {
    width: 100%;

    font-size:
      16px !important;
  }


  main textarea {
    min-height:
      120px;
  }


  main form button[type="submit"] {
    width: 100%;
  }


  /*
   * Обязательные согласия перед оплатой.
   */
  .boykovPaymentConsent {
    width: 100%;

    margin:
      18px 0 16px !important;

    padding:
      15px !important;
  }


  .boykovPaymentConsent__row {
    grid-template-columns:
      22px
      minmax(0, 1fr) !important;

    gap:
      10px !important;
  }


  .boykovPaymentConsent__text {
    font-size:
      12px !important;

    line-height:
      1.55 !important;
  }


  .boykovPaymentConsent__note,
  .boykovPaymentConsent__error {
    margin-left:
      0 !important;
  }


  /*
   * Кнопки действий.
   */
  [class*="_actions_"] {
    flex-direction:
      column;

    align-items:
      stretch !important;
  }


  [class*="_actions_"] > button,
  [class*="_actions_"] > a {
    width: 100%;
  }


  /*
   * Модальные окна.
   */
  [class*="_modal_"] {
    padding:
      12px !important;
  }


  [class*="_modalContent_"],
  [class*="_modalCard_"] {
    width:
      calc(100vw - 24px) !important;

    max-width:
      calc(100vw - 24px) !important;

    max-height:
      calc(100dvh - 24px) !important;

    overflow-y:
      auto !important;

    padding:
      20px !important;
  }


  /*
   * Редактор инструкции.
   */
  .editorUnifiedSectionTextarea {
    width: 100% !important;

    min-height:
      220px !important;

    font-size:
      16px !important;

    line-height:
      1.6 !important;
  }


  /*
   * Просмотры инструкции.
   */
  .boykovInstructionViews {
    width: 100%;

    margin:
      10px 0 16px !important;

    padding:
      12px 14px !important;
  }


  .boykovInstructionViews__meta {
    width: 100%;

    margin-left:
      0 !important;

    padding:
      9px 0 0 !important;

    border-left:
      0 !important;

    border-top:
      1px solid #e6e9f0;
  }


  /*
   * TOP-10 администратора.
   */
  .boykovTop10 {
    margin:
      20px 0 !important;

    padding:
      16px !important;

    border-radius:
      12px !important;
  }


  .boykovTop10__title {
    font-size:
      21px !important;
  }


  .boykovTop10__description {
    font-size:
      12px !important;
  }


  .boykovTop10__tableWrap {
    overflow-x:
      auto !important;

    -webkit-overflow-scrolling:
      touch;
  }


  .boykovTop10__table {
    min-width:
      720px;
  }


  /*
   * Не сжимаем таблицу до нечитаемого состояния.
   * Пользователь свайпает её горизонтально.
   */
  table {
    display: block;

    width: 100%;

    overflow-x:
      auto;

    -webkit-overflow-scrolling:
      touch;
  }


  /*
   * Изображения.
   */
  main img {
    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
  }


  /*
   * Длинные URL/технические строки.
   */
  main a {
    overflow-wrap:
      anywhere;
  }

}



/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 390px) {

  [class*="_page_"] {
    padding-left:
      10px !important;

    padding-right:
      10px !important;
  }


  main h1 {
    font-size:
      27px !important;
  }


  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) {
    gap:
      14px !important;
  }


  .boykovPaymentConsent {
    padding:
      13px !important;
  }


  .boykovTop10 {
    padding:
      13px !important;
  }

}



/* ============================================================
   LANDSCAPE PHONE
   ============================================================ */

@media (
  max-width: 900px
) and (
  max-height: 500px
) and (
  orientation: landscape
) {

  [class*="_modalContent_"],
  [class*="_modalCard_"] {
    max-height:
      calc(100dvh - 16px) !important;

    overflow-y:
      auto !important;
  }

}


/* ============================================================
   SAFE AREA — iPhone
   ============================================================ */

@supports (
  padding:
    env(safe-area-inset-bottom)
) {

  @media (max-width: 640px) {

    body {
      padding-bottom:
        env(
          safe-area-inset-bottom
        );
    }

  }

}

/* ===== /BOYKOVDOCS RESPONSIVE LAYER ===== */



/*
 * ============================================================
 * NAVIGATION RESPONSIVE FIX V2
 * ============================================================
 *
 * Не прячем пункты меню за горизонтальным scroll.
 * На планшете и мобильном превращаем меню
 * в адаптивную сетку.
 */


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) {

    display: grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;

    align-items: start !important;

    width: 100% !important;
    max-width: 100% !important;

    gap:
      12px
      22px !important;

    overflow: visible !important;

    padding:
      8px
      0
      18px !important;

    border-bottom:
      1px solid
      rgba(20, 30, 50, .15);

    scrollbar-width: auto;
  }


  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) > a {

    display: block !important;

    min-width: 0 !important;
    width: auto !important;

    white-space: normal !important;

    overflow: visible !important;

    text-overflow: clip !important;

    line-height: 1.4 !important;

    scroll-snap-align:
      unset !important;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      10px
      18px !important;

    margin-bottom:
      32px !important;

    padding:
      6px
      0
      16px !important;
  }


  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) > a {

    padding:
      5px
      0 !important;

    font-size:
      12px !important;

    line-height:
      1.45 !important;
  }

}


/* ============================================================
   VERY SMALL PHONE
   ============================================================ */

@media (max-width: 360px) {

  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) {

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      5px !important;
  }


  nav:has(
    a[href*="boykovgroup.ru/ohrana-truda"]
  ) > a {

    padding:
      7px
      0 !important;

    font-size:
      12.5px !important;
  }

}


/* ===== /NAVIGATION RESPONSIVE FIX V2 ===== */



/* BOYKOVDOCS MOBILE PROFILE HEADER V1 START */


/*
 * ============================================================
 * TABLET
 * ============================================================
 */

@media (max-width: 900px) {

  /*
   * Заголовок и профиль больше
   * не стоят в одной строке.
   */
  header [class*="_profileRow_"] {
    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    gap: 18px !important;
  }


  /*
   * Заголовок занимает всю строку.
   */
  header [class*="_profileRow_"]
  [class*="_titleLink_"] {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    flex:
      0 0 auto !important;

    order: 1 !important;
  }


  /*
   * Сам текст "Инструкции по охране труда".
   */
  header [class*="_profileRow_"]
  [class*="_titleLink_"]
  [class*="_title_"] {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    font-size: 24px !important;
    line-height: 1.25 !important;

    letter-spacing: -0.015em !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;

    hyphens: none !important;
  }


  /*
   * Профиль Николая идёт второй строкой.
   */
  header [class*="_profileRow_"]
  [class*="_profileLink_"] {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    order: 2 !important;
  }


  header [class*="_profileRow_"]
  [class*="_profile_"] {

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
  }

}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 640px) {

  header [class*="_profileRow_"] {
    gap: 14px !important;
  }


  header [class*="_profileRow_"]
  [class*="_titleLink_"]
  [class*="_title_"] {

    /*
     * Намеренно меньше основного desktop-заголовка.
     */
    font-size: 18px !important;

    line-height: 1.3 !important;

    font-weight: 700 !important;

    letter-spacing: -0.01em !important;
  }


  /*
   * Не позволяем профилю Николая
   * выдавливать соседний текст.
   */
  header [class*="_profileLink_"],
  header [class*="_profile_"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }


  /*
   * Фото не должно становиться слишком большим
   * на маленьком экране.
   */
  header img[
    alt*="Николай Бойков"
  ] {
    flex: 0 0 auto;

    max-width: 96px !important;
    max-height: 96px !important;

    object-fit: cover;
  }

}


/*
 * ============================================================
 * SMALL MOBILE
 * ============================================================
 */

@media (max-width: 390px) {

  header [class*="_profileRow_"]
  [class*="_titleLink_"]
  [class*="_title_"] {

    font-size: 17px !important;
  }


  header img[
    alt*="Николай Бойков"
  ] {
    max-width: 84px !important;
    max-height: 84px !important;
  }

}


/* BOYKOVDOCS MOBILE PROFILE HEADER V1 END */


/*
 * ============================================================
 * INSTRUCTION BREADCRUMBS RESPONSIVE V1
 * ============================================================
 */


/*
 * TABLET
 *
 * Одна нормальная строка.
 * Никаких переносов по буквам.
 */
@media (
  min-width: 641px
) and (
  max-width: 900px
) {

  nav[aria-label="Хлебные крошки"] {

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin:
      0
      0
      22px !important;

    padding:
      10px
      12px !important;

    overflow: hidden !important;

    border:
      1px solid
      var(--color-border, #e6e9f0);

    border-radius:
      8px;

    background:
      rgba(
        255,
        255,
        255,
        .62
      );

    font-size:
      12px !important;

    line-height:
      1.4 !important;
  }


  nav[aria-label="Хлебные крошки"] a,
  nav[aria-label="Хлебные крошки"] span {

    display: block !important;

    flex:
      0 0 auto !important;

    min-width: 0 !important;

    white-space:
      nowrap !important;

    word-break:
      normal !important;

    overflow-wrap:
      normal !important;

    hyphens:
      none !important;
  }


  /*
   * Последний элемент может быть длинным.
   * Не ломаем его по буквам —
   * аккуратно обрезаем троеточием.
   */
  nav[aria-label="Хлебные крошки"]
  > span:last-child {

    flex:
      1 1 auto !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;

    white-space:
      nowrap !important;
  }


  nav[aria-label="Хлебные крошки"] a {

    color:
      var(--color-primary, #1f66d1) !important;

    text-decoration:
      none !important;
  }

}



/*
 * MOBILE
 *
 * Выше уже есть "← Все инструкции",
 * поэтому полная цепочка дублирует навигацию.
 */
@media (max-width: 640px) {

  nav[aria-label="Хлебные крошки"] {
    display: none !important;
  }

}


/* ===== /INSTRUCTION BREADCRUMBS RESPONSIVE V1 ===== */



/*
 * ============================================================
 * MOBILE INSTRUCTION TYPOGRAPHY V1
 * ============================================================
 */


/* ============================================================
   TABLET
   ============================================================ */

@media (
  min-width: 641px
) and (
  max-width: 900px
) {

  main:has(
    > article.copyProtectedInstruction
  ) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }


  article.copyProtectedInstruction {
    width: 100%;
    min-width: 0;
  }


  article.copyProtectedInstruction > h1 {
    max-width: 900px;

    font-size: 32px !important;
    line-height: 1.25 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
  }


  article.copyProtectedInstruction
  > section:first-of-type {

    width: 100% !important;
    max-width: none !important;

    padding: 24px !important;

    box-sizing: border-box;
  }


  article.copyProtectedInstruction
  > section:first-of-type h2 {

    font-size: 22px !important;
    line-height: 1.35 !important;
  }


  article.copyProtectedInstruction
  > section:first-of-type h3 {

    font-size: 18px !important;
    line-height: 1.4 !important;
  }


  article.copyProtectedInstruction
  > section:first-of-type p,
  article.copyProtectedInstruction
  > section:first-of-type li {

    font-size: 15px !important;
    line-height: 1.7 !important;
  }


  article.copyProtectedInstruction
  section[id^="section-"] h2 {

    font-size: 22px !important;
    line-height: 1.35 !important;
  }


  article.copyProtectedInstruction
  section[id^="section-"] p,
  article.copyProtectedInstruction
  section[id^="section-"] li {

    font-size: 15px !important;
    line-height: 1.72 !important;
  }

}



/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

  /*
   * Самое важное:
   * убираем чрезмерные 30px отступа
   * у основной страницы.
   */
  main:has(
    > article.copyProtectedInstruction
  ) {

    width: 100% !important;
    max-width: 100% !important;

    padding:
      28px
      14px
      64px !important;
  }


  article.copyProtectedInstruction {

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
  }


  /*
   * Главный заголовок инструкции.
   */
  article.copyProtectedInstruction
  > h1 {

    width: 100% !important;
    max-width: 100% !important;

    margin:
      0
      0
      18px !important;

    font-size: 25px !important;
    line-height: 1.24 !important;

    letter-spacing: -.015em;

    word-break: normal !important;
    overflow-wrap: break-word !important;

    hyphens: none !important;
  }


  /*
   * Вводный текст под метаданными.
   */
  article.copyProtectedInstruction
  > p {

    width: 100% !important;
    max-width: 100% !important;

    font-size: 14px !important;
    line-height: 1.68 !important;
  }


  /*
   * ==========================================================
   * SEO / СПРАВОЧНЫЙ БЛОК
   * ==========================================================
   *
   * Это как раз блок со скриншота:
   *
   * "Инструкция по охране труда..."
   * "Кому необходима инструкция"
   * "Что содержит инструкция"
   */
  article.copyProtectedInstruction
  > section:first-of-type {

    width: 100% !important;
    max-width: none !important;

    margin:
      28px
      0
      34px !important;

    padding:
      20px
      16px !important;

    box-sizing:
      border-box;

    border-radius:
      12px !important;
  }


  /*
   * Повторный заголовок внутри блока
   * делаем значительно компактнее.
   */
  article.copyProtectedInstruction
  > section:first-of-type
  > h2 {

    margin:
      0
      0
      20px !important;

    font-size:
      19px !important;

    line-height:
      1.34 !important;

    letter-spacing:
      -.01em;

    word-break:
      normal !important;

    overflow-wrap:
      break-word !important;
  }


  /*
   * Подзаголовки:
   * "Кому необходима инструкция"
   * и т.д.
   */
  article.copyProtectedInstruction
  > section:first-of-type
  > h3 {

    margin:
      26px
      0
      10px !important;

    font-size:
      16px !important;

    line-height:
      1.35 !important;

    font-weight:
      700 !important;
  }


  /*
   * Основной текст информационного блока.
   */
  article.copyProtectedInstruction
  > section:first-of-type
  > p {

    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0
      0
      14px !important;

    font-size:
      13.5px !important;

    line-height:
      1.68 !important;

    word-break:
      normal !important;

    overflow-wrap:
      break-word !important;

    hyphens:
      none !important;
  }


  article.copyProtectedInstruction
  > section:first-of-type
  > ul {

    margin:
      12px
      0
      18px !important;

    padding-left:
      20px !important;
  }


  article.copyProtectedInstruction
  > section:first-of-type
  > ul
  > li {

    margin-bottom:
      7px !important;

    padding-left:
      2px;

    font-size:
      13.5px !important;

    line-height:
      1.65 !important;
  }


  /*
   * ==========================================================
   * САМА ИНСТРУКЦИЯ
   * ==========================================================
   */

  article.copyProtectedInstruction
  section[id^="section-"] {

    width: 100% !important;
    max-width: 100% !important;

    margin-bottom:
      38px !important;
  }


  article.copyProtectedInstruction
  section[id^="section-"]
  h2 {

    margin:
      0
      0
      16px !important;

    font-size:
      18px !important;

    line-height:
      1.38 !important;

    letter-spacing:
      -.005em;

    word-break:
      normal !important;

    overflow-wrap:
      break-word !important;
  }


  article.copyProtectedInstruction
  section[id^="section-"]
  p {

    width: 100% !important;
    max-width: none !important;

    margin:
      0
      0
      12px !important;

    font-size:
      14px !important;

    line-height:
      1.68 !important;

    word-break:
      normal !important;

    overflow-wrap:
      break-word !important;

    hyphens:
      none !important;
  }


  article.copyProtectedInstruction
  section[id^="section-"]
  li {

    font-size:
      14px !important;

    line-height:
      1.68 !important;
  }


  /*
   * Содержание также делаем компактнее.
   */
  article.copyProtectedInstruction
  div:has(
    > a[href^="#section-"]
  ) {

    width: 100% !important;

    padding:
      18px
      16px !important;

    margin-bottom:
      34px !important;
  }


  article.copyProtectedInstruction
  div:has(
    > a[href^="#section-"]
  )
  > h2 {

    font-size:
      18px !important;
  }


  article.copyProtectedInstruction
  div:has(
    > a[href^="#section-"]
  )
  > a {

    margin:
      9px 0 !important;

    font-size:
      13px !important;

    line-height:
      1.45 !important;
  }

}



/* ============================================================
   VERY SMALL PHONE
   ============================================================ */

@media (max-width: 380px) {

  main:has(
    > article.copyProtectedInstruction
  ) {

    padding-left:
      10px !important;

    padding-right:
      10px !important;
  }


  article.copyProtectedInstruction
  > h1 {

    font-size:
      23px !important;
  }


  article.copyProtectedInstruction
  > section:first-of-type {

    padding:
      18px
      14px !important;
  }


  article.copyProtectedInstruction
  > section:first-of-type
  > h2 {

    font-size:
      18px !important;
  }


  article.copyProtectedInstruction
  > section:first-of-type
  > p,
  article.copyProtectedInstruction
  > section:first-of-type
  > li {

    font-size:
      13px !important;
  }


  article.copyProtectedInstruction
  section[id^="section-"]
  p {

    font-size:
      13.5px !important;
  }

}


/* ===== /MOBILE INSTRUCTION TYPOGRAPHY V1 ===== */