/* Сворачиваемый сайдбар.
   Принцип: все иконки стоят по центру одной колонки шириной 48 px (сайдбар: отступ 14 px + 48 px + 14 px).
   В обоих состояниях отступы одинаковые, при сворачивании меняется только ширина сайдбара —
   тексты гаснут и обрезаются, иконки остаются на месте и не «пляшут». */

:root { --sidebar-w-collapsed: 76px; --sidebar-icon-col: 48px; }
html.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }

.layout { transition: grid-template-columns .25s ease; }
.modal-panel { transition-property: transform, opacity, left; }
html.sidebar-no-anim .layout,
html.sidebar-no-anim .sidebar * { transition: none !important; }

.sidebar { overflow: visible; min-width: 0; z-index: 30; }  /* выше workspace — иначе подсказки уходят под неё */
.sidebar__logo, .sidebar__nav, .sidebar__contacts { min-width: 0; }

/* --- единая колонка иконок: центр на 14 + 24 = 38 px от края сайдбара --- */
.sidebar__logo-link { padding: 4px 0; gap: 10px; }
.sidebar__logo-mark { width: var(--sidebar-icon-col); height: 48px; display: grid; place-items: center; }
.sidebar-nav__link { padding: 10px 13px; }                  /* 13 + 22/2 = 24 → центр колонки */
.sidebar__contact { padding: 8px 15px; gap: 12px; }          /* 15 + 18/2 = 24 → центр колонки */
/* иконки не сжимаются под длинный текст при узкой ширине — иначе съезжают на пиксель */
.sidebar__contact-icon, .sidebar-nav__icon, .sidebar__logo-mark { flex: none; }
.sidebar__nav { overflow-x: hidden; }

/* тексты: не переносятся, гаснут при сворачивании */
.sidebar__fade { white-space: nowrap; transition: opacity .18s ease; }
.sidebar-nav__link, .sidebar__contact, .sidebar__logo-link { overflow: hidden; }

/* --- пункт «Свернуть меню»: такой же, как пункты меню, иконка в общей колонке --- */
.sidebar__toggle { width: 100%; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; color: var(--muted); }
.sidebar__toggle:hover { color: var(--ink); }
.sidebar__toggle .sidebar-nav__icon svg { transition: transform .25s ease; }
.sidebar-nav__item--toggle { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(15, 17, 22, .06); }
/* черта между «где выбрать» (каталог, горелки, бренды) и «как купить» (доставка, оплата…) */
.sidebar-nav__item--rule { height: 1px; margin: 6px 0; background: rgba(15, 17, 22, .06); }

/* --- свёрнутое состояние --- */
html.sidebar-collapsed .sidebar__fade { opacity: 0; pointer-events: none; }
html.sidebar-collapsed .sidebar__toggle .sidebar-nav__icon svg { transform: rotate(180deg); }
html.sidebar-collapsed .sidebar-nav__link,
html.sidebar-collapsed .sidebar__contact,
html.sidebar-collapsed .sidebar__logo-link { width: var(--sidebar-icon-col); }

/* подсказки справа от иконок (только в свёрнутом виде) */
html.sidebar-collapsed .sidebar [data-tip] { position: relative; overflow: visible; }
/* блок навигации обрезает выходящее за края — в свёрнутом виде подсказки должны вылезать вправо */
html.sidebar-collapsed .sidebar__nav { overflow: visible; }
html.sidebar-collapsed .sidebar [data-tip]::after {
	content: attr(data-tip);
	position: absolute; left: calc(100% + 12px); top: 50%; z-index: 80;
	transform: translate(-4px, -50%); opacity: 0; pointer-events: none;
	padding: 6px 10px; border-radius: var(--radius-md); white-space: nowrap;
	background: var(--ink-hover); color: var(--dark-ink); font-size: 12.5px; font-weight: 500; line-height: 1.3;
	box-shadow: 0 6px 20px rgba(15, 17, 22, .18);
	transition: opacity .12s ease, transform .12s ease;
}
html.sidebar-collapsed .sidebar [data-tip]:hover::after,
html.sidebar-collapsed .sidebar [data-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
html.sidebar-collapsed .sidebar [data-tip] .sidebar__fade { visibility: hidden; }

/* телефон/планшет: сайдбар — блок сверху, сворачивание не нужно */
@media (max-width: 960px) {
	html.sidebar-collapsed { --sidebar-w: 280px; }
	.sidebar-nav__item--toggle { display: none; }
	html.sidebar-collapsed .sidebar__fade,
	html.sidebar-collapsed .sidebar [data-tip] .sidebar__fade { opacity: 1; pointer-events: auto; visibility: visible; }
	html.sidebar-collapsed .sidebar-nav__link,
	html.sidebar-collapsed .sidebar__contact,
	html.sidebar-collapsed .sidebar__logo-link { width: auto; }
	html.sidebar-collapsed .sidebar [data-tip]::after { display: none; }
}

/* --- Пользователь под логотипом: знак как огонёк (48 px), подписи на тех же шрифтах, что слоган сайта --- */
.sidebar__me { min-width: 0; margin: 2px 0 6px; }
.sidebar__me-link { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 4px 0; color: var(--ink); text-decoration: none; border-radius: var(--radius-md); }
.sidebar__me-avatar { flex: none; width: var(--sidebar-icon-col); height: 48px; display: grid; place-items: center; }
.sidebar__me-avatar::before { content: ""; grid-area: 1 / 1; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); transition: background .15s ease; }
.sidebar__me-avatar svg { grid-area: 1 / 1; width: 20px; height: 20px; color: var(--ink-2); position: relative; }
.sidebar__me-link:hover .sidebar__me-avatar::before { background: var(--surface-3); }
.sidebar__me-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 1px; }
.sidebar__me-name { font-size: 13px; line-height: 17px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__me-sub { font-size: 11.5px; line-height: 15px; font-weight: 500; letter-spacing: .01em; color: #9a9ea9; white-space: nowrap; }
.sidebar__me-link.is-guest .sidebar__me-name { color: var(--ink); }
html.sidebar-collapsed .sidebar__me-link { width: var(--sidebar-icon-col); }