/* Факты в шапке услуги: строка через разделители вместо «пилюль».

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

   Шапки услуг на всех страницах тёмные — фотография под затемняющей
   подложкой, — поэтому текст строки светлый. Наследовать цвет от контейнера
   нельзя: у большинства шапок он тёмный, светлым его делают отдельные
   правила для лида. Красная иконка оставлена как акцент.

   Селекторы начинаются с html и дублируют класс: базовые правила капсул
   заданы в общих файлах через !important. */

html body#top .svc-pills.svc-pills,
html body#top .cargo-pills.cargo-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 28px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body#top .svc-pill.svc-pill,
html body#top .cargo-pill.cargo-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: rgba(245, 246, 250, 0.96) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  white-space: normal !important;
}

html body#top .svc-pill.svc-pill i,
html body#top .cargo-pill.cargo-pill i {
  color: var(--etl-red, var(--c-accent)) !important;
  font-size: 15px !important;
  opacity: 1;
}

/* На узком экране факты идут столбцом.

   grid-auto-flow и grid-auto-columns здесь обязательны. Для страниц услуг
   в global_nav_footer_theme.css с давних пор стоит правило
   `@media (max-width:768px) body#top.service-page .svc-pills { display:grid
   !important; grid-auto-flow:column !important; grid-auto-columns:max-content
   !important }` — остаток от горизонтальной ленты с прокруткой. Одного
   grid-template-columns мало: направление потока это отдельное свойство,
   и сетка продолжала раскладывать пункты в строку, добавляя неявные
   колонки, — факты уезжали за правый край экрана.

   Порог 768, а не 760: иначе между 761 и 768 остаётся полоса, где действует
   только старое правило. */
@media (max-width: 768px) {
  html body#top .svc-pills.svc-pills,
  html body#top .cargo-pills.cargo-pills {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    gap: 8px 0 !important;
    overflow: visible !important;
  }
  html body#top .svc-pill.svc-pill,
  html body#top .cargo-pill.cargo-pill {
    padding: 0 !important;
    max-width: 100% !important;
  }
}