/* Значки соцсетей в выпадающем списке «о нас»: рисуются маской в цвет текста ссылки, сеть узнаётся по адресу. */
.menu-group--header .menu-group__sub a[href*="//t.me/"]::before, .menu-group--header .menu-group__sub a[href*="instagram.com/"]::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; background: currentColor; -webkit-mask: var(--social-icon) center / contain no-repeat; mask: var(--social-icon) center / contain no-repeat; }
.menu-group--header .menu-group__sub a[href*="//t.me/"] { --social-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M21.9 4.3 18.6 19.6c-.2 1.1-.9 1.4-1.8.9l-5-3.7-2.4 2.3c-.3.3-.5.5-1 .5l.4-5.1 9.3-8.4c.4-.4-.1-.6-.6-.2L6 13.1l-4.9-1.5c-1.1-.3-1.1-1.1.2-1.6L20.5 2.6c.9-.3 1.7.2 1.4 1.7z%22/%3E%3C/svg%3E"); }
.menu-group--header .menu-group__sub a[href*="instagram.com/"] { --social-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%225%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Ccircle cx=%2217.3%22 cy=%226.7%22 r=%221.3%22/%3E%3C/svg%3E"); }
/* SIAMIYO: выпадающий список пункта шапки («о нас»). Пока шапка горизонтальная (бургер — с 760px и ниже),
   список прижат к правому краю пункта, иначе от последнего пункта он уезжает под корзину. */
@media (min-width: 761px) {
  .menu-group--header .menu-group__sub { display: none; position: absolute; top: 100%; left: auto; right: 0; padding: 14px 16px; background: var(--white); box-shadow: var(--shadow); }
  .menu-group--header:hover .menu-group__sub, .menu-group--header:focus-within .menu-group__sub { display: flex; }
}
/* Обёртка заголовка группы (патч menu-group-click) строчная: без этого отступы ссылки не работают */
.menu-group__head { display: flex; flex-direction: column; }

/* Страница «Сервисы»: правило .services{padding:48px 0 0} идёт после .container и обнуляет его боковые
   отступы — контент прижимался к левому краю экрана. Возвращаем отступы контейнера. */
.container.services { padding-left: 24px; padding-right: 24px; }
/* Промо-баннер (Figma 13:1246, правки Эли 08–12.10.2026): слон у правого края на всю высоту, левый край
   картинки растворяется в чёрном (градиент), текст крупнее, кнопка поверх картинки справа внизу. Разметка
   бандла не меняется: у кнопки инлайновый style (grid-column: 1 / -1; justify-self: start), поэтому !important. */
@media (min-width: 761px) {
  .promo { position: relative; grid-template-columns: minmax(0, 1fr) 40%; gap: 0; padding: 0; min-height: 320px; }
  .promo > div:first-child { position: relative; z-index: 1; padding: 44px 24px 44px 56px; align-self: center; }
  .promo h3 { font-size: clamp(32px, 3.2vw, 44px); max-width: 14ch; line-height: 1.1; }
  .promo__code { margin-top: 22px; font-size: 17px; line-height: 1.4; }
  .promo__art { position: absolute; top: 0; right: 0; width: 56%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; border-radius: 0; justify-self: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32%); mask-image: linear-gradient(to right, transparent 0, #000 32%); }
  .promo .btn { grid-column: 2 !important; justify-self: end !important; align-self: end; position: relative; z-index: 1; margin: 0 32px 32px 0; }
}
/* Мобильная версия (просьба Эли, 09.10.2026):
   — плашки категорий на главной в две колонки рвали слова посередине (overflow-wrap:anywhere) — одна колонка;
   — «Популярные активности» листаются вправо, а не вниз;
   — на странице «Сервисы» выбранный фильтр направления (chip--soft + chip--on) терял фон: правило
     .chip--soft идёт после .chip--on и возвращало прозрачность, текст белым по бежевому не читался. */
.chip.chip--soft.chip--on { background: var(--accent-2); border-color: var(--accent-2); color: var(--white); }
@media (max-width: 760px) {
  .cats__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cat { min-height: 52px; overflow-wrap: normal; }
  .acts { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; align-items: start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; margin-right: -24px; padding-right: 24px; }
  .acts::-webkit-scrollbar { display: none; }
  .acts .act { scroll-snap-align: start; }
}