/**
 * Шапка сайта.
 */

/*
 * Шапка в два этажа.
 *
 * Липнет только нижний: он рабочий — меню и корзина. Верхний с логотипом
 * и телефоном уезжает вверх при прокрутке. Если липла бы вся шапка, она
 * занимала бы 116 px на каждом экране, а на ноутбуке это десятая часть окна.
 */
/*
 * Сетка три на два:
 *
 *   логотип │ часы, мессенджеры, телефон │ корзина
 *   логотип │ меню по центру             │ корзина
 *
 * Логотип и корзина занимают обе строки — это опоры по краям. Средняя
 * колонка тянется, поэтому меню всегда стоит по центру между ними,
 * какой бы длины ни оказался телефон.
 *
 * Размеры держим скромными: две строки и так выше прежней шапки,
 * и если ещё раздуть элементы, она съест верх экрана.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background: var(--color-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-8);
  padding-block: var(--space-3);
}

.logo {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* Часы, мессенджеры и телефон — одной строкой. В два яруса они занимали
   столько же места, сколько само меню под ними, и первая строка шапки
   выглядела тяжелее второй.
   Выравнивание по центру, а не по базовой линии: у телефона иконка,
   а её базовая линия не совпадает с текстовой — строка «прыгала». */
.site-header__contacts {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
}

/* Разделители точками вместо пустоты: четыре разнородных элемента в строку
   без них выглядят как список без запятых. Точка рисуется псевдоэлементом,
   поэтому не мешает выделению текста и не читается скринридером.
   Точка перед мессенджерами — сама по себе элемент строки (обёртка
   с display:contents), и зазор с обеих сторон ей даёт gap родителя. */
.site-header__contacts > .messengers--header::before {
  content: '·';
  color: var(--color-border-strong);
}

/* Остальные точки живут внутри ссылки, поэтому справа зазор нужен свой:
   снаружи его даёт gap строки, а изнутри ссылка сжимает всё до своего
   мелкого шага между знаком и подписью — его и вычитаем. */
.messengers--header > .messengers__link + .messengers__link::before,
.site-header__contacts > .header-contact__phone::before {
  content: '·';
  margin-right: calc(var(--space-4) - var(--inline-icon-gap));
  color: var(--color-border-strong);
}

/*
 * Обе строки по центру средней колонки, одна под другой. Колонка тянется
 * от логотипа до корзины, поэтому и контакты, и меню стоят ровно посередине
 * шапки независимо от длины телефона — получается общая ось симметрии,
 * а не две строки, разбежавшиеся по разным краям.
 */
.site-nav {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
}

.site-header__actions {
  grid-column: 3;
  grid-row: 1 / 3;

  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/*
 * Телефон — одна строка, поэтому обе строки сетки схлопываются в одну:
 * контакты текстом не влезают, меню уезжает в панель, остаются логотип,
 * иконка звонка, корзина и бургер.
 */
@media (max-width: 63.9375rem) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    padding-block: var(--space-3);
  }

  .logo,
  .site-header__actions {
    grid-row: 1;
  }

  .site-header__contacts {
    display: none;
  }
}

/* Панель WordPress висит поверх всего — сдвигаем шапку под неё */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 48.875rem) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* ── Логотип ─────────────────────────────────────────── */

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-logo, var(--color-primary));
}

/*
 * Знак logo.svg залит currentColor — цвет берётся отсюда.
 * Меняешь --color-logo (или color родителя) — перекрашивается знак.
 */
.logo__mark {
  width: var(--logo-size, 2rem);
  height: var(--logo-size, 2rem);
  flex: none;
}

.logo:hover {
  color: var(--color-primary-dark);
}

/* Имя показываем всегда: «дэнас» короткое и помещается даже на 320px.
   Раньше скрывалось до 1024px — лого без имени выглядело огрызком. */
.logo__text {
  display: block;
}

/* В шапке знака нет — имя и есть логотип, поэтому кегль крупный.
   Трекинг отрицательный: на таком размере стандартные просветы
   рассыпают короткое слово, буквы перестают читаться группой. */
.site-header .logo {
  font-size: clamp(calc(var(--fs-3xl) * 1.5), 5.1vw, calc(var(--fs-5xl) * 1.5));
  letter-spacing: -0.035em;
  line-height: 1;
}

/* В подвале знак своего цвета — тот же файл, другой цвет */
.logo--footer {
  --color-logo: var(--footer-logo, var(--footer-fg-strong));
  --logo-size: 1.5rem;
}

/* ── Меню ────────────────────────────────────────────── */

.site-nav {
  display: none;
}

@media (min-width: 64rem) {
  .site-nav { display: block; }
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.site-nav__list li {
  display: flex;
}

.site-nav__list a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.site-nav__list a:hover {
  color: var(--color-primary);
}

/* Подсветка текущего раздела — WordPress сам ставит эти классы */
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

/* ── Выпадающий список категорий ─────────────────────── */

.site-nav__list .menu-item-has-children {
  position: relative;
}

/* Стрелка-указатель рисуется, а не берётся иконкой: одна лишняя иконка
   в шапке не стоит запроса, а поворот показывает состояние. */
.site-nav__list .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: var(--space-2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition);
}

.site-nav__list .sub-menu {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 50%;
  min-width: 15rem;
  padding: var(--space-2);
  list-style: none;

  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgb(15 23 42 / 0.13);

  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.375rem);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

/* Открываем и по наведению, и по фокусу внутри — иначе с клавиатуры не добраться */
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.site-nav__list .menu-item-has-children:hover > a::after,
.site-nav__list .menu-item-has-children:focus-within > a::after {
  transform: translateY(-2px) rotate(225deg);
}

/* Мостик от пункта до выпадашки: без него курсор пересекает зазор
   и меню закрывается на полпути. */
.site-nav__list .sub-menu::before {
  content: '';
  position: absolute;
  top: -0.5rem;
  left: 0;
  width: 100%;
  height: 0.5rem;
}

.site-nav__list .sub-menu li {
  display: block;
}

.site-nav__list .sub-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: normal;
}

.site-nav__list .sub-menu a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-primary);
}

/* Двенадцать зон одной колонкой — это список в половину экрана высотой.
   В две колонки он читается разом, не заставляя вести глазом вниз. */
.site-nav__list .has-wide-menu > .sub-menu {
  min-width: 26rem;
  columns: 2;
  column-gap: var(--space-2);
}

.site-nav__list .has-wide-menu > .sub-menu li {
  break-inside: avoid;
}

/* Подсветка активного пункта в выпадашке: у вложенных ссылок жирность
   ниже, поэтому одного цвета мало — добавляем фон */
.site-nav__list .sub-menu .current-menu-item > a {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ── Бургер ──────────────────────────────────────────── */

.burger {
  display: grid;
  place-content: center;
  gap: 0.3125rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.burger:hover { background: var(--color-surface-subtle); }

@media (min-width: 64rem) {
  .burger { display: none; }
}

.burger__bar {
  width: 1.25rem;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}

/* ── Меню-ниша: страница как крышка ──────────────────── */

/*
 * Двигается страница, а не меню. Меню лежит неподвижной нишей справа,
 * страница уезжает влево и открывает его — как крышку сдвигают с коробки.
 *
 *   закрыто:      [======= страница =======]
 *   тащим:     [===== страница =====]▐меню▌
 *   открыто:  [стр]▐======== меню ========▌
 *
 * Из этого следует всё остальное: у ниши z-index НИЖЕ страницы, страница
 * обязана быть непрозрачной, а её transform делает её точкой отсчёта для
 * position:fixed — потому куки и палитра вынесены из неё в подвале.
 */
.page-shell {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  background: var(--color-surface);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.38s;
}

body.has-drawer-open .page-shell {
  transform: translateX(calc(-1 * var(--drawer-width)));
  box-shadow: 16px 0 36px -6px rgb(15 23 42 / 0.3);
}

/*
 * touch-action в покое не трогаем. Браузер читает его один раз, в момент
 * касания, и `pan-y` на всей странице отобрал бы жест у горизонтальных лент
 * внутри — каталога, галереи товара, карты тела. Направление решает JS
 * на первом же движении. Когда меню открыто или его тащат, лент под пальцем
 * всё равно нет, и вертикаль можно забрать себе.
 */
body.has-drawer-open .page-shell,
body.is-drawer-dragging .page-shell {
  touch-action: none;
}

/* Пока тащим — переход выключен, иначе он борется с пальцем */
body.is-drawer-dragging .page-shell {
  transition: none;
}

/* Во время жеста содержимое не принимает палец: иначе кнопки, над которыми
   он проезжает, моргают состояниями. Сама .page-shell события получает. */
body.is-drawer-dragging .page-shell * {
  pointer-events: none;
}

/*
 * Перехватчик поверх уехавшей страницы: прозрачный, ловит тап на себя.
 * Без него палец попадал бы по ссылкам под ним. z-index выше липкой шапки.
 */
.page-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 60;
  visibility: hidden;
}

body.has-drawer-open .page-shell::after,
body.is-drawer-dragging .page-shell::after {
  visibility: visible;
}

/* Прокрутку страницы гасим прибиванием тела. Смещение проставляет JS:
   при полосе админки оно не равно -scrollY. */
body.has-drawer-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 0;                    /* НИЖЕ страницы — в этом весь смысл */
  width: var(--drawer-width);
  background: var(--color-surface);
  color: var(--color-text);
  visibility: hidden;
  transition: visibility 0.38s;
}

body.has-drawer-open .drawer,
body.is-drawer-dragging .drawer {
  visibility: visible;
}

/* Полоса админки прибита к верху экрана и накрыла бы шапку ниши */
body.admin-bar .drawer { top: 32px; }

@media (max-width: 48.875rem) {
  body.admin-bar .drawer { top: 46px; }
}

/*
 * На узком экране полоса админки стоит position:absolute — то есть едет
 * вместе с документом. Пока тело прибито, её точкой отсчёта становится
 * само тело, и на нулевой прокрутке она встаёт ровно поверх шапки ниши,
 * пряча «Меню» и крестик. На время открытия прибиваем её к экрану, как
 * на широком: тогда она честно занимает свои 46 px сверху, а ниша идёт
 * под ней. Правило видно только администратору — у покупателя полосы нет.
 */
body.has-drawer-open #wpadminbar,
body.is-drawer-dragging #wpadminbar {
  position: fixed;
  top: 0;
}

.drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;                  /* именно ниши, а не окна: ниша уже сдвинута
                                    под полосу админки, и 100dvh дал бы перелёт */
  padding-bottom: env(safe-area-inset-bottom);
  /* Серый прямоугольник по тапу выдаёт «сайт в браузере», а не приложение */
  -webkit-tap-highlight-color: transparent;
}

/* Полупрозрачная шапка с backdrop-filter подмешала бы то, что под ней —
   а под ней теперь меню, и сверху проступало бы светлое пятно */
body.has-drawer-open .site-header,
body.is-drawer-dragging .site-header {
  background: var(--color-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* На широком экране меню стоит строкой в шапке, ниша не нужна вовсе */
@media (min-width: 64rem) {
  .drawer { display: none; }
  .page-shell { transition: none; }
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
}

.nav-drawer__title {
  color: var(--color-text-faint);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-drawer__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--color-text-soft);
  cursor: pointer;
}

.nav-drawer__close:hover {
  background: var(--color-surface-subtle);
  color: var(--color-danger);
}

/* Прокручивается список, а не вся ниша: шапка «Меню» и подвал с телефоном
   остаются на месте, до звонка не надо докручивать тридцать ссылок.
   overscroll-behavior — чтобы докрутив список до конца, не утянуть за собой
   страницу под нишей. */
.nav-drawer__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2) 0;
}

.nav-drawer__list {
  list-style: none;
}

.nav-drawer__list a {
  display: block;
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.nav-drawer__list a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-primary);
}

.nav-drawer__list .current-menu-item > a,
.nav-drawer__list .current_page_item > a {
  background: var(--color-primary-light);
  box-shadow: inset 3px 0 0 var(--color-primary);
  color: var(--color-primary);
}

/* Раскрывашка раздела. Раньше вложенные списки показывались сразу — тогда
   разделов был один и восемь категорий в нём. С четырьмя разделами и тремя
   десятками ссылок раскрытая панель прокручивалась на полторы тысячи
   пикселей, поэтому теперь <details>: открыт только текущий раздел. */
.nav-drawer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);

  cursor: pointer;
  list-style: none;
}

.nav-drawer__summary::-webkit-details-marker {
  display: none;
}

.nav-drawer__summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-text-faint);
  border-bottom: 2px solid var(--color-text-faint);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition);
}

.nav-drawer__group[open] > .nav-drawer__summary::after {
  transform: translateY(2px) rotate(225deg);
}

.nav-drawer__group[open] > .nav-drawer__summary {
  color: var(--color-primary);
}

.nav-drawer__list .sub-menu {
  list-style: none;
  padding-bottom: var(--space-2);
}

.nav-drawer__list .sub-menu a {
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}

.nav-drawer__list .sub-menu a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-primary);
}

/* Свои списки в панели: те же правила видимости, что и у иконок в шапке */
.nav-drawer__lists {
  display: flex;
  flex-direction: column;
}

.nav-drawer__list-link[hidden] {
  display: none;
}

.nav-drawer__list-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);

  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-soft);

  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.nav-drawer__list-link .material-symbols-outlined {
  font-size: 1.375rem;
  color: var(--color-primary);
}

.nav-drawer__list-count {
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.25rem;

  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.nav-drawer__list-count[hidden] {
  display: none;
}

.nav-drawer__foot {
  display: grid;
  gap: 0.125rem;
  padding: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
}

.nav-drawer__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.nav-drawer__hours {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* ── Контакты ────────────────────────────────────────── */

.header-contact__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--inline-icon-gap);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.header-contact__phone:hover {
  color: var(--color-primary);
}

/* Иконка чуть мельче кегля номера: она метка, а не картинка. В размер
   текста трубка спорила бы с цифрами за внимание. */
.header-contact__phone-icon {
  font-size: 1.125rem;
  color: var(--color-primary);
}

/* Без верхнего регистра: капс в мелком кегле читается хуже и тянет
   на себя внимание, а часы работы — это фон, а не заголовок */
.header-contact__hours {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ── Кнопка-звонок (только узкий экран) ──────────────── */

/* На широком экране телефон виден текстом (.header-contact), на телефоне
   текст не влезает — остаётся круглая кнопка с иконкой, ведёт на tel: */
.header-phone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  color: var(--color-text-soft);
}

.header-phone-btn:hover {
  background: var(--color-surface-subtle);
  color: var(--color-primary);
}

.header-phone-btn .material-symbols-outlined {
  font-size: 1.5rem;
}

@media (min-width: 640px) {
  .header-phone-btn { display: none; }
}

/* ── Корзина ─────────────────────────────────────────── */

.cart-link,
.header-fav,
.header-compare {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  color: var(--color-text-soft);
}

.cart-link:hover,
.header-fav:hover,
.header-compare:hover {
  background: var(--color-surface-subtle);
  color: var(--color-primary);
}

/* На телефоне справа уже стоят телефон, корзина и бургер — четвёртая
   постоянная иконка не влезает, ссылка на избранное остаётся в меню */
.header-fav {
  display: none;
}

@media (min-width: 62rem) {
  .header-fav { display: flex; }
}

/*
 * Сравнение — исключение: оно появляется только когда что-то выбрано,
 * то есть ровно тогда, когда человеку нужен выход к таблице. Пустой
 * иконки, занимающей место просто так, здесь не бывает.
 * Скрытие делает атрибут hidden из JS, поэтому display задаём с оглядкой:
 * [hidden] должен побеждать.
 */
.header-compare[hidden] {
  display: none;
}

.header-compare .material-symbols-outlined {
  font-size: 1.5rem;
}

.header-fav .material-symbols-outlined {
  font-size: 1.625rem;
  font-variation-settings: 'FILL' 1;
}

.header-fav__count,
.header-compare__count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  display: grid;
  place-items: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: 0.25rem;
  background: var(--color-sale);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--color-surface);
  color: var(--color-text-invert);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.header-compare__count {
  background: var(--color-primary);
}

/*
 * Атрибуту hidden нужна помощь: он ставит display:none в стилях браузера,
 * а любое своё display его перебивает. Отсюда «0» в красном кружке на пустом
 * избранном — счётчик был hidden и всё равно рисовался. Селектор с атрибутом
 * специфичнее одного класса, так что порядок правил тут ни при чём.
 */
.header-fav[hidden],
.header-fav__count[hidden],
.header-compare__count[hidden] {
  display: none;
}

/* Корзина чуть крупнее соседних иконок: единственное действие в шапке,
   которое ведёт к деньгам. Чуть — потому что шапка и так в две строки */
.cart-link {
  width: 2.75rem;
  height: 2.75rem;
}

.cart-link__icon {
  font-size: 1.875rem;
  line-height: 1;
}

.cart-link__count {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: var(--space-1);

  background: var(--color-primary);
  color: var(--color-text-invert);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--color-surface), var(--shadow-sm);

  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* ── Мессенджеры ─────────────────────────────────────── */

.messengers {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* В шапке пара мессенджеров — не отдельный блок, а два элемента строки
   наравне с часами и телефоном. Поэтому display:contents: обёртка исчезает
   из раскладки, и все четыре стоят с одним шагом от родителя, без своего
   внутреннего зазора. */
.messengers--header {
  display: contents;
}

.messengers__link {
  display: inline-flex;
  align-items: center;
  gap: var(--inline-icon-gap);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: color var(--transition);
}

.messengers__link:hover {
  color: var(--color-primary);
}

/* Настоящие знаки WhatsApp и MAX вместо материальных «облачков»: чужой
   логотип узнаётся с одного взгляда, а обобщённая иконка чата заставляет
   читать подпись. Знак залит currentColor и перекрашивается вместе с ней. */
.messengers__icon {
  display: inline-flex;
  flex: none;
}

.messengers__glyph {
  width: 1rem;
  height: 1rem;
}

/* В панели ссылки крупнее и с фоном: там это основной способ написать */
.messengers--drawer {
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.messengers--drawer .messengers__link {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  color: var(--color-primary);
}

.messengers--drawer .messengers__glyph {
  width: 1.125rem;
  height: 1.125rem;
}