/* Меню — компьютер (план §7.2): панель справа, три группы ссылок; при наведении на категорию
   её вещь проявляется в затемнённой части слева. */
.menu .panel__body { display: flex; flex-direction: column; gap: 36px; padding-top: 12px; }
.menu__group { display: grid; gap: 2px; }
.menu__group a, .menu__group button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  width: max-content;
  font-size: var(--fs-m);
  color: var(--ink);
  transition: color var(--dur-state);
}
.menu__group--big a, .menu__group--big button { font-size: var(--fs-m); min-height: 40px; }
.menu__group--small a, .menu__group--small button { font-size: var(--fs-s); color: var(--ink); min-height: 32px; }
.menu__group--util a { font-size: var(--fs-s); color: var(--mute); min-height: 30px; }
.menu__group a:hover, .menu__group button:hover { color: var(--mute); }
.menu__label { font-size: var(--fs-s); color: var(--mute); margin-bottom: 6px; }

.menu__peek {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  right: var(--panel-w);
  z-index: 55;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-out) var(--ease-big);
}
.menu__peek.is-on { opacity: 1; transition: opacity var(--dur-big) var(--ease-big); }
.menu__peek .gm { width: min(44vw, 72vh); height: min(44vw, 72vh); }

@media (max-width: 1023px) { .menu, .menu__peek { display: none; } }