From 6de2dbd6979b8d2b2556b1b60339f339b33309be Mon Sep 17 00:00:00 2001
From: Andrew <ap-pskov@ya.ru>
Date: Fri, 26 Apr 2024 18:15:33 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20he?=
 =?UTF-8?q?ader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/index.html                               |  41 +-
 docs/js/main.js                               | 104 +++-
 docs/js/main.js.map                           |   2 +-
 docs/styles/main.css                          | 509 +++++++++++++++++-
 docs/styles/maps/main.css.map                 |   2 +-
 docs/styles/maps/ui.css.map                   |   2 +-
 docs/styles/maps/users.css.map                |   2 +-
 docs/styles/ui.css                            | 509 +++++++++++++++++-
 docs/styles/users.css                         | 509 +++++++++++++++++-
 docs/ui-colors.html                           |  41 +-
 docs/users.html                               |  41 +-
 src/blocks/components/_components.scss        |   3 +-
 src/blocks/components/catalog/_catalog.scss   | 131 ++++-
 src/blocks/components/menu/_menu.scss         |  56 +-
 src/blocks/components/menu/menu.pug           |   5 +-
 src/blocks/components/n-search/_n-search.scss | 194 +++++++
 src/blocks/components/n-search/n-search.js    |  60 +++
 src/blocks/components/n-search/n-search.pug   |  22 +
 src/blocks/modules/header/header.js           |  26 +
 src/blocks/modules/header/header.pug          |  16 +-
 src/blocks/modules/header/header.scss         | 154 +++++-
 src/js/import/components.js                   |   2 +-
 src/js/import/modules.js                      |   2 +-
 src/styles/helpers/_mixins.scss               |   4 +-
 src/styles/helpers/_variables.scss            |   5 +
 25 files changed, 2379 insertions(+), 63 deletions(-)
 create mode 100644 src/blocks/components/n-search/_n-search.scss
 create mode 100644 src/blocks/components/n-search/n-search.js
 create mode 100644 src/blocks/components/n-search/n-search.pug
 create mode 100644 src/blocks/modules/header/header.js

diff --git a/docs/index.html b/docs/index.html
index b4ceab2..4ec21ce 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -33,9 +33,12 @@
     <header class="header" id="header">
       <div class="l-default">
         <div class="header__wrapper">
+          <div class="header__overlay"></div>
           <div class="header__inner header__inner--logo"><a class="header__logo" href="#"> <img src="./img/svg/ico-logo.svg" alt="title" srcset=""></a></div>
-          <div class="header__inner header__inner--nav"> 
-            <button class="header__btn-nav" type="button"></button>
+          <div class="header__inner header__inner--nav">
+            <div class="header__sub-inner header__sub-inner--logo"> <a class="header__logo" href="#"> <img src="./img/svg/ico-logo.svg" alt="title" srcset=""></a>
+              <button class="header__button-close-menu" type="button"></button>
+            </div>
             <div class="header__sub-inner header__sub-inner--catalog">
               <div class="header__catalog catalog"> 
                 <button class="catalog__btn" type="button">Другие продукты</button>
@@ -48,9 +51,11 @@
             </div>
             <div class="header__sub-inner header__sub-inner--menu">
               <div class="header__menu menu"> 
-                <buttin class="menu__btn" type="button"></buttin>
+                <div class="menu__align">
+                  <buttin class="menu__btn" type="button"></buttin>
+                </div>
                 <ul class="menu__list"> 
-                  <li class="menu__item"> <a class="menu__link" href="#">Разделы</a></li>
+                  <li class="menu__item active"><a class="menu__link" href="#">Разделы</a></li>
                   <li class="menu__item"> <a class="menu__link" href="#">Комментарии</a></li>
                   <li class="menu__item"> <a class="menu__link" href="#">Публикации</a></li>
                   <li class="menu__item"> <a class="menu__link" href="#">Пользователи</a></li>
@@ -60,14 +65,34 @@
               </div>
             </div>
             <div class="header__sub-inner header__sub-inner--search">
-              <div class="header__h-search h-search">
-                <button class="h-search__search" type="button">
-                  <p>1</p>
-                </button>
+              <div class="header__n-search n-search">
+                <form class="n-search__form" action="" method="post"> 
+                  <div class="n-search__align">
+                    <button class="n-search__button" type="submit"></button>
+                  </div>
+                  <div class="n-search__wrapper">
+                    <div class="n-search__inner n-search__inner--select-catalog">
+                      <button class="n-search__button-catalog" type="button">Искать в разделе</button>
+                      <ul class="n-search__list"> 
+                        <li class="n-search__item"> <a class="n-search__link">Разделы</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Комментарии</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Публикации</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Пользователи</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Чат</a></li>
+                      </ul>
+                    </div>
+                    <div class="n-search__inner n-search__inner--search-input">
+                      <input type="hidden" name="category">
+                      <input type="text" name="resource">
+                    </div>
+                    <button class="n-search__button-close" type="button"></button>
+                  </div>
+                </form>
               </div>
             </div>
           </div>
           <div class="header__inner header__inner--auth">
+            <button class="header__button-open-menu" type="button"></button>
             <button class="header__auth" type="button">Войти</button>
           </div>
         </div>
diff --git a/docs/js/main.js b/docs/js/main.js
index ae42e9f..5f2eb87 100644
--- a/docs/js/main.js
+++ b/docs/js/main.js
@@ -1,13 +1,103 @@
 /******/ (function() { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "./src/blocks/components/n-search/n-search.js":
+/*!****************************************************!*\
+  !*** ./src/blocks/components/n-search/n-search.js ***!
+  \****************************************************/
+/***/ (function() {
+
+(function () {
+  var parent = document.querySelector(".n-search");
+  if (!parent) return;
+  var header = document.querySelector(".header");
+  var btnSearch = parent.querySelector(".n-search__button");
+  var btnClose = parent.querySelector(".n-search__button-close");
+  var items = parent.querySelectorAll(".n-search__link");
+  var buttonCatalog = parent.querySelector(".n-search__button-catalog");
+  var inputSearchMain = parent.querySelector(".n-search__inner--search-input [name='resource']");
+  var inputCategory = parent.querySelector(".n-search__inner--search-input [name='category']");
+  var flagOpenSearch = false;
+  function closeSearchWrapper() {
+    if (parent.classList.contains("active")) {
+      parent.classList.remove("active");
+    }
+    buttonCatalog.innerHTML = "Искать в разделе";
+    inputSearchMain.value = "";
+    inputCategory.value = "";
+    flagOpenSearch = false;
+  }
+  function initButtonsSearch() {
+    btnSearch.addEventListener("click", function (e) {
+      if (!flagOpenSearch || inputSearchMain.value == "") e.preventDefault();
+      if (!parent.classList.contains("active")) {
+        parent.classList.add("active");
+      }
+      flagOpenSearch = true;
+    });
+    btnClose.addEventListener("click", function () {
+      closeSearchWrapper();
+    });
+  }
+  function initSearchSelectList() {
+    items.forEach(function (item) {
+      item.addEventListener("click", function () {
+        buttonCatalog.innerHTML = item.innerHTML;
+        inputCategory.value = item.innerHTML;
+      });
+    });
+  }
+  function init(parent) {
+    initButtonsSearch(parent);
+    initSearchSelectList(parent);
+  }
+  init(parent);
+})();
+
+/***/ }),
+
+/***/ "./src/blocks/modules/header/header.js":
+/*!*********************************************!*\
+  !*** ./src/blocks/modules/header/header.js ***!
+  \*********************************************/
+/***/ (function() {
+
+(function () {
+  var header = document.querySelector(".header");
+  if (!header) return;
+  var buttonMenuOpen = header.querySelector(".header__button-open-menu");
+  var buttonMenuClose = header.querySelector(".header__button-close-menu");
+  var headerOverflow = header.querySelector(".header__overlay");
+  buttonMenuOpen.addEventListener("click", function () {
+    if (!header.classList.contains("menu-active")) {
+      header.classList.add("menu-active");
+    }
+  });
+  buttonMenuClose.addEventListener("click", function () {
+    if (header.classList.contains("menu-active")) {
+      header.classList.remove("menu-active");
+    }
+  });
+  headerOverflow.addEventListener("click", function () {
+    if (header.classList.contains("menu-active")) {
+      header.classList.remove("menu-active");
+    }
+  });
+})();
+
+/***/ }),
+
 /***/ "./src/js/import/components.js":
 /*!*************************************!*\
   !*** ./src/js/import/components.js ***!
   \*************************************/
-/***/ (function() {
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_n_search_n_search__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! %components%/n-search/n-search */ "./src/blocks/components/n-search/n-search.js");
+/* harmony import */ var _components_n_search_n_search__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_components_n_search_n_search__WEBPACK_IMPORTED_MODULE_0__);
 
-// import "%components%/sidebar/sidebar";
 
 /***/ }),
 
@@ -15,9 +105,13 @@
 /*!**********************************!*\
   !*** ./src/js/import/modules.js ***!
   \**********************************/
-/***/ (function() {
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _modules_header_header__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! %modules%/header/header */ "./src/blocks/modules/header/header.js");
+/* harmony import */ var _modules_header_header__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_modules_header_header__WEBPACK_IMPORTED_MODULE_0__);
 
-// import "%modules%/header/header";
 // import "%modules%/footer/footer";
 
 /***/ }),
@@ -31,9 +125,7 @@
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _import_modules__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./import/modules */ "./src/js/import/modules.js");
-/* harmony import */ var _import_modules__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_import_modules__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _import_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./import/components */ "./src/js/import/components.js");
-/* harmony import */ var _import_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_import_components__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _fancyapps_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fancyapps/ui */ "./node_modules/@fancyapps/ui/dist/index.esm.js");
 
 
diff --git a/docs/js/main.js.map b/docs/js/main.js.map
index a221f7b..acefc91 100644
--- a/docs/js/main.js.map
+++ b/docs/js/main.js.map
@@ -1 +1 @@
-{"version":3,"file":"main.js","mappings":";;;;;;;;;AAAA;;;;;;;;;;ACAA;AACA;;;;;;;;;;;;;;;;;ACD0B;AACG;AAEY;AAEzCA,mDAAQ,CAACC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;;;;;;UCLpC;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;UAEA;UACA;;;;;WCzBA;WACA;WACA;WACA;WACA,+BAA+B,wCAAwC;WACvE;WACA;WACA;WACA;WACA,iBAAiB,qBAAqB;WACtC;WACA;WACA;WACA;WACA,kBAAkB,qBAAqB;WACvC,oHAAoH,iDAAiD;WACrK;WACA,KAAK;WACL;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;;;;WC7BA;WACA;WACA;WACA,eAAe,4BAA4B;WAC3C,eAAe;WACf,iCAAiC,WAAW;WAC5C;WACA;;;;;WCPA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA,8CAA8C;;;;;WCA9C;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;;WAEA;WACA;WACA;WACA;WACA;WACA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA,8CAA8C;;WAE9C;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,iCAAiC,mCAAmC;WACpE;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,MAAM,qBAAqB;WAC3B;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;WACA;WACA;;;;;UElDA;UACA;UACA;UACA,oFAAoF,kDAAkD;UACtI","sources":["webpack://gulp-pug-starter/./src/js/import/components.js","webpack://gulp-pug-starter/./src/js/import/modules.js","webpack://gulp-pug-starter/./src/js/index.js","webpack://gulp-pug-starter/webpack/bootstrap","webpack://gulp-pug-starter/webpack/runtime/chunk loaded","webpack://gulp-pug-starter/webpack/runtime/compat get default export","webpack://gulp-pug-starter/webpack/runtime/define property getters","webpack://gulp-pug-starter/webpack/runtime/hasOwnProperty shorthand","webpack://gulp-pug-starter/webpack/runtime/make namespace object","webpack://gulp-pug-starter/webpack/runtime/jsonp chunk loading","webpack://gulp-pug-starter/webpack/before-startup","webpack://gulp-pug-starter/webpack/startup","webpack://gulp-pug-starter/webpack/after-startup"],"sourcesContent":["// import \"%components%/sidebar/sidebar\";\r\n","// import \"%modules%/header/header\";\r\n// import \"%modules%/footer/footer\";","import \"./import/modules\";\r\nimport \"./import/components\";\r\n\r\nimport { Fancybox } from \"@fancyapps/ui\";\r\n\r\nFancybox.bind(\"[data-fancybox]\", {});","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","var deferred = [];\n__webpack_require__.O = function(result, chunkIds, fn, priority) {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar chunkIds = deferred[i][0];\n\t\tvar fn = deferred[i][1];\n\t\tvar priority = deferred[i][2];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t\"main\": 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = function(parentChunkLoadingFunction, data) {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkgulp_pug_starter\"] = self[\"webpackChunkgulp_pug_starter\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\nvar __webpack_exports__ = __webpack_require__.O(undefined, [\"vendor\"], function() { return __webpack_require__(\"./src/js/index.js\"); })\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n",""],"names":["Fancybox","bind"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"main.js","mappings":"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EACF,CAAC,CAAC;AACJ,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEzB6B;AACjC;;;;;;;;;;;;;;;ACD0B;AACG;AAEY;AAEzCe,mDAAQ,CAACC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;;;;;;UCLpC;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;UAEA;UACA;;;;;WCzBA;WACA;WACA;WACA;WACA,+BAA+B,wCAAwC;WACvE;WACA;WACA;WACA;WACA,iBAAiB,qBAAqB;WACtC;WACA;WACA;WACA;WACA,kBAAkB,qBAAqB;WACvC,oHAAoH,iDAAiD;WACrK;WACA,KAAK;WACL;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;;;;WC7BA;WACA;WACA;WACA,eAAe,4BAA4B;WAC3C,eAAe;WACf,iCAAiC,WAAW;WAC5C;WACA;;;;;WCPA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA,8CAA8C;;;;;WCA9C;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;;WAEA;WACA;WACA;WACA;WACA;WACA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA,8CAA8C;;WAE9C;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,iCAAiC,mCAAmC;WACpE;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,MAAM,qBAAqB;WAC3B;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;WACA;WACA;;;;;UElDA;UACA;UACA;UACA,oFAAoF,kDAAkD;UACtI","sources":["webpack://gulp-pug-starter/./src/blocks/components/n-search/n-search.js","webpack://gulp-pug-starter/./src/blocks/modules/header/header.js","webpack://gulp-pug-starter/./src/js/import/components.js","webpack://gulp-pug-starter/./src/js/import/modules.js","webpack://gulp-pug-starter/./src/js/index.js","webpack://gulp-pug-starter/webpack/bootstrap","webpack://gulp-pug-starter/webpack/runtime/chunk loaded","webpack://gulp-pug-starter/webpack/runtime/compat get default export","webpack://gulp-pug-starter/webpack/runtime/define property getters","webpack://gulp-pug-starter/webpack/runtime/hasOwnProperty shorthand","webpack://gulp-pug-starter/webpack/runtime/make namespace object","webpack://gulp-pug-starter/webpack/runtime/jsonp chunk loading","webpack://gulp-pug-starter/webpack/before-startup","webpack://gulp-pug-starter/webpack/startup","webpack://gulp-pug-starter/webpack/after-startup"],"sourcesContent":["(function () {\r\n  const parent = document.querySelector(\".n-search\");\r\n  if (!parent) return;\r\n\r\n  const header = document.querySelector(\".header\");\r\n  const btnSearch = parent.querySelector(\".n-search__button\");\r\n  const btnClose = parent.querySelector(\".n-search__button-close\");\r\n  const items = parent.querySelectorAll(\".n-search__link\");\r\n  const buttonCatalog = parent.querySelector(\".n-search__button-catalog\");\r\n  const inputSearchMain = parent.querySelector(\r\n    \".n-search__inner--search-input [name='resource']\"\r\n  );\r\n  const inputCategory = parent.querySelector(\r\n    \".n-search__inner--search-input [name='category']\"\r\n  );\r\n  let flagOpenSearch = false;\r\n\r\n  function closeSearchWrapper() {\r\n    if (parent.classList.contains(\"active\")) {\r\n      parent.classList.remove(\"active\");\r\n    }\r\n\r\n    buttonCatalog.innerHTML = \"Искать в разделе\";\r\n    inputSearchMain.value = \"\";\r\n    inputCategory.value = \"\";\r\n    flagOpenSearch = false;\r\n  }\r\n\r\n  function initButtonsSearch() {\r\n    btnSearch.addEventListener(\"click\", (e) => {\r\n      if (!flagOpenSearch || inputSearchMain.value == \"\") e.preventDefault();\r\n\r\n      if (!parent.classList.contains(\"active\")) {\r\n        parent.classList.add(\"active\");\r\n      }\r\n\r\n      flagOpenSearch = true;\r\n    });\r\n\r\n    btnClose.addEventListener(\"click\", () => {\r\n      closeSearchWrapper();\r\n    });\r\n  }\r\n\r\n  function initSearchSelectList() {\r\n    items.forEach((item) => {\r\n      item.addEventListener(\"click\", () => {\r\n        buttonCatalog.innerHTML = item.innerHTML;\r\n        inputCategory.value = item.innerHTML;\r\n      });\r\n    });\r\n  }\r\n\r\n  function init(parent) {\r\n    initButtonsSearch(parent);\r\n    initSearchSelectList(parent);\r\n  }\r\n\r\n  init(parent);\r\n})();\r\n","(function () {\r\n  const header = document.querySelector(\".header\");\r\n  if (!header) return;\r\n\r\n  const buttonMenuOpen = header.querySelector(\".header__button-open-menu\");\r\n  const buttonMenuClose = header.querySelector(\".header__button-close-menu\");\r\n  const headerOverflow = header.querySelector(\".header__overlay\");\r\n\r\n  buttonMenuOpen.addEventListener(\"click\", () => {\r\n    if (!header.classList.contains(\"menu-active\")) {\r\n      header.classList.add(\"menu-active\");\r\n    }\r\n  });\r\n\r\n  buttonMenuClose.addEventListener(\"click\", () => {\r\n    if (header.classList.contains(\"menu-active\")) {\r\n      header.classList.remove(\"menu-active\");\r\n    }\r\n  });\r\n\r\n  headerOverflow.addEventListener(\"click\", () => {\r\n    if (header.classList.contains(\"menu-active\")) {\r\n      header.classList.remove(\"menu-active\");\r\n    }\r\n  });\r\n})();\r\n","import \"%components%/n-search/n-search\";\r\n","import \"%modules%/header/header\";\r\n// import \"%modules%/footer/footer\";","import \"./import/modules\";\r\nimport \"./import/components\";\r\n\r\nimport { Fancybox } from \"@fancyapps/ui\";\r\n\r\nFancybox.bind(\"[data-fancybox]\", {});","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","var deferred = [];\n__webpack_require__.O = function(result, chunkIds, fn, priority) {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar chunkIds = deferred[i][0];\n\t\tvar fn = deferred[i][1];\n\t\tvar priority = deferred[i][2];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t\"main\": 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = function(parentChunkLoadingFunction, data) {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkgulp_pug_starter\"] = self[\"webpackChunkgulp_pug_starter\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\nvar __webpack_exports__ = __webpack_require__.O(undefined, [\"vendor\"], function() { return __webpack_require__(\"./src/js/index.js\"); })\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n",""],"names":["parent","document","querySelector","header","btnSearch","btnClose","items","querySelectorAll","buttonCatalog","inputSearchMain","inputCategory","flagOpenSearch","closeSearchWrapper","classList","contains","remove","innerHTML","value","initButtonsSearch","addEventListener","e","preventDefault","add","initSearchSelectList","forEach","item","init","buttonMenuOpen","buttonMenuClose","headerOverflow","Fancybox","bind"],"sourceRoot":""}
\ No newline at end of file
diff --git a/docs/styles/main.css b/docs/styles/main.css
index a53d478..74b96bf 100644
--- a/docs/styles/main.css
+++ b/docs/styles/main.css
@@ -782,32 +782,365 @@ img {
   color: var(--color-red);
 }
 
+.catalog {
+  position: relative;
+}
+
+.catalog:hover .catalog__btn {
+  color: #999;
+}
+
+.catalog:hover .catalog__btn::before {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.catalog:hover .catalog__list {
+  padding: 16px 20px;
+  padding-top: 60px;
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+}
+
+.catalog__btn {
+  position: relative;
+  z-index: 2;
+  font-family: "Montserrat", sans-serif, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  text-transform: uppercase;
+  line-height: 150%;
+  color: #222222;
+  padding-left: 32px;
+}
+
+.catalog__btn::before {
+  position: absolute;
+  content: "";
+  display: block;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 6H19.5V8H4.5V6Z' fill='black' /%3e%3cpath d='M4.5 11H19.5V13H4.5V11Z' fill='black' /%3e%3cpath d='M4.5 16H19.5V18H4.5V16Z' fill='black' /%3e%3c/svg%3e");
+}
+
 .catalog__list {
+  position: absolute;
+  transition: 0.25s;
+  z-index: 1;
+  top: -14px;
+  left: 50%;
+  border: 4px solid #ebebeb;
+  border-radius: 20px;
+  transform: translateX(-50%);
+  width: calc(100% + 40px);
+  background-color: #fff;
+  padding-top: 60px;
+  box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+  padding: 0;
+}
+
+.catalog__item {
+  text-decoration: none;
+  list-style: none;
+  margin-bottom: 16px;
+}
+
+.catalog__item:last-child {
+  margin-bottom: 0;
+}
+
+.catalog__link img {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 12px;
+  width: 36px;
+  height: 36px;
+}
+
+.catalog__link span {
+  font-family: "Montserrat", sans-serif, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+}
+
+.catalog__link:hover span {
+  text-decoration: underline;
+}
+
+.menu__align {
   display: none;
 }
 
 .menu__item {
+  position: relative;
   display: inline-block;
 }
 
+.menu__item.active .menu__link {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 150%;
+  color: #000;
+}
+
+.menu__item.active::before {
+  position: absolute;
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  transform: translateY(-50%);
+  background-color: #000;
+  border-radius: 50%;
+  top: 50%;
+  left: 0;
+}
+
+.menu__link {
+  display: block;
+  padding: 10px 20px;
+  font-family: "Montserrat", sans-serif, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+  color: #666;
+  transition: 0.25s;
+}
+
+.menu__link:hover {
+  color: #222222;
+}
+
+.n-search {
+  position: relative;
+}
+
+.n-search.active .n-search__wrapper {
+  background-color: #F7F7F7;
+  display: flex;
+}
+
+.n-search.active .n-search__button {
+  background-color: #000;
+}
+
+.n-search__wrapper {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  align-items: center;
+  padding: 7px 16px;
+  padding-right: 50px;
+  border-radius: 12px;
+  left: 20px;
+  top: 50%;
+  transform: translate(-100%, -50%);
+  width: 800px;
+  background-color: #fff;
+}
+
+.n-search__inner--select-catalog {
+  position: relative;
+  min-width: 220px;
+  border-right: 4px solid #ebebeb;
+}
+
+.n-search__inner--select-catalog::after {
+  position: absolute;
+  content: "";
+  top: 100%;
+  width: calc(100% + 20px);
+  left: -20px;
+  height: 20px;
+}
+
+.n-search__inner--select-catalog:hover .n-search__list {
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+  z-index: 3;
+  transition: 0.25s;
+}
+
+.n-search__inner--select-catalog:hover .n-search__button-catalog::before {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.n-search__inner--search-input {
+  flex-grow: 2;
+  padding-left: 20px;
+}
+
+.n-search__inner input {
+  width: 100%;
+  background-color: transparent;
+}
+
+.n-search__list {
+  position: absolute;
+  z-index: 1;
+  top: 46px;
+  left: -20px;
+  border: 4px solid #ebebeb;
+  border-radius: 20px;
+  width: 240px;
+  background-color: #fff;
+  padding: 16px 8px;
+  box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+}
+
+.n-search__item {
+  display: block;
+}
+
+.n-search__link {
+  display: block;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: none;
+}
+
+.n-search__link:hover {
+  background-color: #f1f1f1;
+  color: #363636;
+}
+
+.n-search__link:last-child {
+  margin-bottom: 0;
+}
+
+.n-search__button {
+  position: relative;
+  cursor: pointer;
+  display: block;
+  z-index: 2;
+  width: 60px;
+  height: 44px;
+  border-radius: 16px;
+  transition: 0.25s;
+}
+
+.n-search__button::after {
+  position: absolute;
+  content: "";
+  transition: 0.25s;
+  display: block;
+  top: 50%;
+  left: 50%;
+  width: 32px;
+  height: 32px;
+  transform: translate(-50%, -50%);
+  mask-repeat: no-repeat;
+  mask-position: center center;
+  background-color: #dedee2;
+  mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 9.84871 15.3729 11.551 14.3199 12.9056L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L12.9056 14.3199C11.551 15.3729 9.84871 16 8 16C3.58172 16 0 12.4183 0 8Z' fill='%238B8DA3' /%3e%3c/svg%3e");
+}
+
+.n-search__button:hover {
+  background-color: #000;
+}
+
+.n-search__button:hover:after {
+  background-color: #fff;
+}
+
+.n-search__button-catalog {
+  position: relative;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  padding-left: 32px;
+  padding-right: 16px;
+  line-height: 156%;
+  color: #999;
+}
+
+.n-search__button-catalog::before {
+  position: absolute;
+  content: "";
+  top: 1px;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9.00001L12 15L18 9.00001' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.n-search__button-close {
+  position: absolute;
+  cursor: pointer;
+  top: 10px;
+  right: 40px;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.header {
+  box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  background: #fff;
+  padding: 6px 0;
+  margin: 0 10px;
+  border-radius: 0 0 20px 20px;
+}
+
+.header.menu-active .header__inner--nav {
+  left: 0;
+}
+
+.header.menu-active .header__overlay {
+  display: block;
+}
+
 .header__wrapper {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 }
 
-.header__inner {
-  border: 1px solid gray;
+.header__inner--logo {
+  position: relative;
 }
 
-.header__inner--nav {
+.header__inner--nav,
+.header__inner--auth {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
 }
 
+.header__sub-inner--logo {
+  display: none;
+}
+
+.header__sub-inner--catalog {
+  margin-right: 60px;
+}
+
+.header__sub-inner--search {
+  margin-left: 32px;
+}
+
 .header__logo {
+  position: relative;
   width: 126px;
   height: 30px;
 }
@@ -819,6 +1152,42 @@ img {
   object-position: left center;
 }
 
+.header__auth {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 150%;
+  text-transform: uppercase;
+  height: auto;
+  border-radius: 12px;
+  padding: 10px 20px;
+  color: #222222;
+  background-color: #F7F7F7;
+}
+
+.header__auth:hover {
+  background: #000;
+  color: #fff;
+}
+
+.header__button-open-menu {
+  display: none;
+  margin-right: 20px;
+}
+
+.header__button-close-menu {
+  cursor: pointer;
+  user-select: none;
+  display: block;
+  width: 32px;
+  height: 32px;
+  background: url("../img/svg/ico-list-close.svg") no-repeat center/contain;
+}
+
+.header__overlay {
+  display: none;
+}
+
 .header__btn-nav {
   display: none;
 }
@@ -911,4 +1280,138 @@ img {
     display: none;
   }
 }
+
+@media (max-width: 1439px) {
+  .catalog__btn {
+    font-size: 14px;
+  }
+
+  .menu__item.active .menu__link {
+    font-size: 14px;
+  }
+
+  .menu__link {
+    padding: 8px 12px;
+    font-size: 14px;
+  }
+
+  .n-search__wrapper {
+    width: 610px;
+  }
+
+  .n-search__link {
+    font-size: 14px;
+  }
+
+  .header__sub-inner--catalog {
+    margin-right: 20px;
+  }
+
+  .header__sub-inner--search {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 1279px) {
+  .catalog__btn {
+    display: none;
+  }
+
+  .catalog__list {
+    position: relative;
+    top: 0;
+    left: 0;
+    transform: none;
+    opacity: 1;
+    visibility: visible;
+    height: auto;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  .catalog__link img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .catalog__link span {
+    font-size: 14px;
+  }
+
+  .menu__item {
+    display: block;
+  }
+
+  .header__inner--nav {
+    transition: 0.25s;
+    align-items: flex-start;
+    overflow-y: auto;
+    position: fixed;
+    display: block;
+    z-index: 3;
+    height: 100%;
+    left: -380px;
+    top: 0;
+    padding: 20px 32px 60px;
+    width: 360px;
+    background-color: #fff;
+    box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  }
+
+  .header__sub-inner--logo {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .header__sub-inner--logo .header__logo {
+    display: block;
+    width: 140px;
+    height: 40px;
+  }
+
+  .header__sub-inner--catalog {
+    margin-right: 0;
+  }
+
+  .header__sub-inner--search {
+    display: none;
+  }
+
+  .header__sub-inner {
+    width: 100%;
+    margin-bottom: 32px;
+  }
+
+  .header__sub-inner:last-child {
+    margin-bottom: 0;
+  }
+
+  .header__button-open-menu {
+    display: block;
+    width: 32px;
+    height: 32px;
+    background: url("../img/svg/ico-list-open.svg") no-repeat center/contain;
+  }
+
+  .header__overlay {
+    z-index: 1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(139, 139, 139, 0.2196078431);
+  }
+}
+
+@media (max-width: 768px) {
+  .header__inner--nav {
+    width: 100%;
+    left: -100%;
+  }
+}
 /*# sourceMappingURL=maps/main.css.map */
diff --git a/docs/styles/maps/main.css.map b/docs/styles/maps/main.css.map
index 3279b02..5ffb86b 100644
--- a/docs/styles/maps/main.css.map
+++ b/docs/styles/maps/main.css.map
@@ -1 +1 @@
-{"version":3,"sources":["vendor/import/_normalize.scss","base/_general.scss","helpers/_variables.scss","helpers/_mixins.scss","base/_controls.scss","base/_colors.scss","../blocks/components/user-card/user-card.scss","../blocks/components/catalog/_catalog.scss","../blocks/components/menu/_menu.scss","../blocks/modules/header/header.scss"],"names":[],"mappings":"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;EACA;;AAEA;EATF;IAUI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;IACA;;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAGF;EATF;IAUI;IACA;IACA;;;AAGF;EAfF;IAgBI;;;AAKE;EADF;IAEI;;;AAKN;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;;ACjLF;EACI;;;ACGJ;EACI;;;ACLJ;ENyFA;EACA;EACA;;AMvFA;EACI;;AAEA;ENkFJ;EACA;EACA;EMlFQ;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI","file":"../main.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\r\n\r\n/* Document\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Correct the line height in all browsers.\r\n * 2. Prevent adjustments of font size after orientation changes in iOS.\r\n */\r\n\r\nhtml {\r\n\tline-height: 1.15; /* 1 */\r\n\t-webkit-text-size-adjust: 100%; /* 2 */\r\n}\r\n\r\n/* Sections\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the margin in all browsers.\r\n */\r\n\r\nbody {\r\n\tmargin: 0;\r\n}\r\n\r\n/**\r\n * Render the `main` element consistently in IE.\r\n */\r\n\r\nmain {\r\n\tdisplay: block;\r\n}\r\n\r\n/**\r\n * Correct the font size and margin on `h1` elements within `section` and\r\n * `article` contexts in Chrome, Firefox, and Safari.\r\n */\r\n\r\nh1 {\r\n\tfont-size: 2em;\r\n\tmargin: 0.67em 0;\r\n}\r\n\r\n/* Grouping content\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Add the correct box sizing in Firefox.\r\n * 2. Show the overflow in Edge and IE.\r\n */\r\n\r\nhr {\r\n\tbox-sizing: content-box; /* 1 */\r\n\theight: 0; /* 1 */\r\n\toverflow: visible; /* 2 */\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\npre {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/* Text-level semantics\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the gray background on active links in IE 10.\r\n */\r\n\r\na {\r\n\tbackground-color: transparent;\r\n}\r\n\r\n/**\r\n * 1. Remove the bottom border in Chrome 57-\r\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\r\n */\r\n\r\nabbr[title] {\r\n\tborder-bottom: none; /* 1 */\r\n\ttext-decoration: underline; /* 2 */\r\n\ttext-decoration: underline dotted; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font weight in Chrome, Edge, and Safari.\r\n */\r\n\r\nb,\r\nstrong {\r\n\tfont-weight: bolder;\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\ncode,\r\nkbd,\r\nsamp {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font size in all browsers.\r\n */\r\n\r\nsmall {\r\n\tfont-size: 80%;\r\n}\r\n\r\n/**\r\n * Prevent `sub` and `sup` elements from affecting the line height in\r\n * all browsers.\r\n */\r\n\r\nsub,\r\nsup {\r\n\tfont-size: 75%;\r\n\tline-height: 0;\r\n\tposition: relative;\r\n\tvertical-align: baseline;\r\n}\r\n\r\nsub {\r\n\tbottom: -0.25em;\r\n}\r\n\r\nsup {\r\n\ttop: -0.5em;\r\n}\r\n\r\n/* Embedded content\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the border on images inside links in IE 10.\r\n */\r\n\r\nimg {\r\n\tborder-style: none;\r\n}\r\n\r\n/* Forms\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Change the font styles in all browsers.\r\n * 2. Remove the margin in Firefox and Safari.\r\n */\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n\tfont-family: inherit; /* 1 */\r\n\tfont-size: 100%; /* 1 */\r\n\tline-height: 1.15; /* 1 */\r\n\tmargin: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Show the overflow in IE.\r\n * 1. Show the overflow in Edge.\r\n */\r\n\r\nbutton,\r\ninput { /* 1 */\r\n\toverflow: visible;\r\n}\r\n\r\n/**\r\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\r\n * 1. Remove the inheritance of text transform in Firefox.\r\n */\r\n\r\nbutton,\r\nselect { /* 1 */\r\n\ttext-transform: none;\r\n}\r\n\r\n/**\r\n * Correct the inability to style clickable types in iOS and Safari.\r\n */\r\n\r\nbutton,\r\n[type=\"button\"],\r\n[type=\"reset\"],\r\n[type=\"submit\"] {\r\n\t-webkit-appearance: button;\r\n}\r\n\r\n/**\r\n * Remove the inner border and padding in Firefox.\r\n */\r\n\r\nbutton::-moz-focus-inner,\r\n[type=\"button\"]::-moz-focus-inner,\r\n[type=\"reset\"]::-moz-focus-inner,\r\n[type=\"submit\"]::-moz-focus-inner {\r\n\tborder-style: none;\r\n\tpadding: 0;\r\n}\r\n\r\n/**\r\n * Restore the focus styles unset by the previous rule.\r\n */\r\n\r\nbutton:-moz-focusring,\r\n[type=\"button\"]:-moz-focusring,\r\n[type=\"reset\"]:-moz-focusring,\r\n[type=\"submit\"]:-moz-focusring {\r\n\toutline: 1px dotted ButtonText;\r\n}\r\n\r\n/**\r\n * Correct the padding in Firefox.\r\n */\r\n\r\nfieldset {\r\n\tpadding: 0.35em 0.75em 0.625em;\r\n}\r\n\r\n/**\r\n * 1. Correct the text wrapping in Edge and IE.\r\n * 2. Correct the color inheritance from `fieldset` elements in IE.\r\n * 3. Remove the padding so developers are not caught out when they zero out\r\n *    `fieldset` elements in all browsers.\r\n */\r\n\r\nlegend {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tcolor: inherit; /* 2 */\r\n\tdisplay: table; /* 1 */\r\n\tmax-width: 100%; /* 1 */\r\n\tpadding: 0; /* 3 */\r\n\twhite-space: normal; /* 1 */\r\n}\r\n\r\n/**\r\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\r\n */\r\n\r\nprogress {\r\n\tvertical-align: baseline;\r\n}\r\n\r\n/**\r\n * Remove the default vertical scrollbar in IE 10+.\r\n */\r\n\r\ntextarea {\r\n\toverflow: auto;\r\n}\r\n\r\n/**\r\n * 1. Add the correct box sizing in IE 10.\r\n * 2. Remove the padding in IE 10.\r\n */\r\n\r\n[type=\"checkbox\"],\r\n[type=\"radio\"] {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tpadding: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Correct the cursor style of increment and decrement buttons in Chrome.\r\n */\r\n\r\n[type=\"number\"]::-webkit-inner-spin-button,\r\n[type=\"number\"]::-webkit-outer-spin-button {\r\n\theight: auto;\r\n}\r\n\r\n/**\r\n * 1. Correct the odd appearance in Chrome and Safari.\r\n * 2. Correct the outline style in Safari.\r\n */\r\n\r\n[type=\"search\"] {\r\n\t-webkit-appearance: textfield; /* 1 */\r\n\toutline-offset: -2px; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove the inner padding in Chrome and Safari on macOS.\r\n */\r\n\r\n[type=\"search\"]::-webkit-search-decoration {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\n/**\r\n * 1. Correct the inability to style clickable types in iOS and Safari.\r\n * 2. Change font properties to `inherit` in Safari.\r\n */\r\n\r\n::-webkit-file-upload-button {\r\n\t-webkit-appearance: button; /* 1 */\r\n\tfont: inherit; /* 2 */\r\n}\r\n\r\n/* Interactive\r\n   ========================================================================== */\r\n\r\n/*\r\n * Add the correct display in Edge, IE 10+, and Firefox.\r\n */\r\n\r\ndetails {\r\n\tdisplay: block;\r\n}\r\n\r\n/*\r\n * Add the correct display in all browsers.\r\n */\r\n\r\nsummary {\r\n\tdisplay: list-item;\r\n}\r\n\r\n/* Misc\r\n   ========================================================================== */\r\n\r\n/**\r\n * Add the correct display in IE 10+.\r\n */\r\n\r\ntemplate {\r\n\tdisplay: none;\r\n}\r\n\r\n/**\r\n * Add the correct display in IE 10.\r\n */\r\n\r\n[hidden] {\r\n\tdisplay: none;\r\n}","h1, h2, h3, h4, h5, h6, ul {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n*{\r\n  box-sizing: border-box;\r\n}\r\n\r\nbutton,textarea{\r\n  -webkit-appearance: none;\r\n}\r\n\r\nhtml, body {\r\n  min-width: 320px;\r\n  scroll-behavior: smooth;\r\n  overflow-x: clip !important;\r\n}\r\n\r\nbody {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  height: 100%;\r\n  min-height: 100vh;\r\n  min-width: 320px;\r\n  font-family: $primary_font;\r\n  font-size: 16px;\r\n  line-height: 120%;\r\n  color: var(--color-black);\r\n  font-style: normal;\r\n  letter-spacing: normal;\r\n  flex-direction: column;\r\n\r\n  &.on-scroll {\r\n      margin-top: 76px;\r\n  }\r\n}\r\n\r\n.main {\r\n    z-index: z(\"l-default\");\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n}\r\n\r\n.l {\r\n    &-default {\r\n        margin: 0 auto;\r\n        padding: 0 to-rem(10);\r\n        transition: all .4s ease-in-out;\r\n\r\n        @media (min-width: 640px) {\r\n            padding: 0 to-rem(20);\r\n        }\r\n\r\n        @media (min-width: 1024px) {\r\n            max-width: to-rem(1200);\r\n        }\r\n\r\n        @media (min-width: 1200px) {\r\n            max-width: to-rem(1440);\r\n        }\r\n\r\n        @media (min-width: 1500px) {\r\n            padding: 0;\r\n        }\r\n    }\r\n\r\n    &-main {\r\n\r\n    }\r\n\r\n    &-page {\r\n      &__title {\r\n        margin-bottom: to-rem(24);\r\n\r\n        @media (min-width: 1024px) {\r\n          margin-bottom: to-rem(32);\r\n        }\r\n      }\r\n    }\r\n}\r\n\r\n.lazy  {\r\n    opacity: 0;\r\n}\r\n\r\n.loading,\r\n.loaded,\r\n[data-was-processed=\"true\"],\r\n[data-ll-status=\"entered\"] {\r\n    opacity: 1;\r\n    @include tr(all);\r\n}\r\n\r\n.hidden {\r\n    display: none !important;\r\n    opacity: 0 !important;\r\n}\r\n\r\n.show,\r\n.show_btn {\r\n    display: flex !important;\r\n}\r\n\r\ntextarea,\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    text-decoration: none;\r\n    color: inherit;\r\n    outline: none;\r\n    @include tr(all);\r\n}\r\n\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    cursor: pointer;\r\n}\r\n\r\ninput[type=\"submit\"]:disabled {\r\n    cursor: not-allowed;\r\n    opacity: .5;\r\n}\r\n\r\nbutton {\r\n    background: none;\r\n    border: none;\r\n}\r\n\r\ninput,\r\nvideo {\r\n    border: none;\r\n    outline: none;\r\n}\r\n\r\n.fancybox-content{\r\n    padding: 0;\r\n}\r\n\r\ninput, textarea {\r\n    &::placeholder {\r\n        @include tr(\"all\");\r\n    }\r\n    &:focus {\r\n        &::placeholder {\r\n            opacity: 0 !important;\r\n        }\r\n    }\r\n}\r\n\r\ninput,\r\ntextarea,\r\nbutton,\r\nselect,\r\na {\r\n\t-webkit-tap-highlight-color: transparent;\r\n}\r\n\r\ninput::-webkit-outer-spin-button,\r\ninput::-webkit-inner-spin-button {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\nimg {\r\n\tpointer-events: none;\r\n\timage-rendering: -webkit-optimize-contrast !important;\r\n}\r\n\r\nsub {\r\n\tvertical-align: baseline;\r\n\tposition: relative;\r\n\tbottom: -0.4em;\r\n}\r\n\r\nimg {\r\n    display: block;\r\n    max-width: 100%;\r\n}\r\n\r\n.loader {\r\n    z-index: z(\"loader\");\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100vh;\r\n    background: #fff;\r\n}\r\n\r\n.fancybox-content {\r\n    z-index: 99994;\r\n    background: none;\r\n}\r\n\r\n.overflow-y-hidden {\r\n    overflow-y: hidden !important;\r\n}\r\n\r\n@keyframes show {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}","$primary_font: \"Montserrat\", sans-serif;\r\n","// миксин для создания масштабируемых элементов, чтобы поддерживать соотношение. @include responsive-ratio(16,9)\r\n@mixin responsive-ratio($x, $y, $pseudo: false) {\r\n    $padding: unquote(($y / $x) * 100 + \"%\");\r\n    @if $pseudo {\r\n      &:before {\r\n        @include pseudo($pos: relative);\r\n        width: 100%;\r\n        padding-top: $padding;\r\n      }\r\n    } @else {\r\n      padding-top: $padding;\r\n    }\r\n  }\r\n  \r\n  //css треугольники\r\n  @mixin css-triangle(\r\n    $color,\r\n    $direction,\r\n    $size: 6px,\r\n    $position: absolute,\r\n    $round: false\r\n  ) {\r\n    @include pseudo($pos: $position);\r\n    width: 0;\r\n    height: 0;\r\n    @if $round {\r\n      border-radius: 3px;\r\n    }\r\n    @if $direction == down {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-top: $size solid $color;\r\n      margin-top: 0 - round($size / 2.5);\r\n    } @else if $direction == up {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-bottom: $size solid $color;\r\n      margin-bottom: 0 - round($size / 2.5);\r\n    } @else if $direction == right {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-left: $size solid $color;\r\n      margin-right: -$size;\r\n    } @else if $direction == left {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-right: $size solid $color;\r\n      margin-left: -$size;\r\n    }\r\n  }\r\n  \r\n  //transition\r\n  @mixin tr($properties...) {\r\n    $declarations: ();\r\n  \r\n    @each $declaration in $properties {\r\n        $duration: .4s;\r\n        $delay: false;\r\n        $timing-function: ease;\r\n        $property: all;\r\n  \r\n        @if type-of($declaration) == 'map' {\r\n            $duration: if(map_get($declaration, 'duration'), #{map_get($declaration, 'duration')}, $duration);\r\n            $delay: if(map_get($declaration, 'delay'), #{map_get($declaration, 'delay')}, $delay);\r\n            $timing-function: if(map_get($declaration, 'timing-function'), #{map_get($declaration, 'timing-function')}, $timing-function);\r\n            $property: if(map_get($declaration, 'property'), #{map_get($declaration, 'property')}, $property);\r\n        } @else {\r\n            $property: $declaration;\r\n        }\r\n        \r\n        $delayValue: if($delay, ' ' + $delay, '');\r\n        $declarations: append($declarations, #{$property + ' ' + $duration + $delayValue + ' ' + $timing-function}, comma);\r\n    }\r\n  \r\n    transition: $declarations;\r\n  }\r\n\r\n\r\n  @mixin scale($css, $value, $tabletValue) {\r\n    #{$css}: calc($value / 1920) * 100 + vw;\r\n\r\n    @include for-large {\r\n        #{$css}: $value + px;\r\n    }\r\n\r\n    @include for-tablet {\r\n        #{$css}: $tabletValue + px;\r\n    }\r\n}\r\n  \r\n@mixin flex-wrapper {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n}\r\n  \r\n\r\n@mixin for-mobile {\r\n    @media (max-width: 768px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-tablet {\r\n    @media (max-width: 992px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-sm-desktop {\r\n    @media (max-width: 1280px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-desktop {\r\n    @media (max-width: 1440px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-large {\r\n    @media(min-width: 2000px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@function vw($value) {\r\n    @return calc($value / 1920) * 100 + vw;\r\n}\r\n  ",".f {\r\n    &-bold {\r\n        font-weight: 700;\r\n    }\r\n\r\n    &-semibold {\r\n        font-weight: 600;\r\n    }\r\n\r\n    &-medium {\r\n        font-weight: 500;\r\n    }\r\n\r\n    &-h1 {\r\n        font-size: to-rem(40);\r\n        font-weight: 700;\r\n        line-height: to-rem(48);\r\n\r\n        @media (min-width: 992px) {\r\n            font-size: to-rem(48);\r\n            line-height: to-rem(52);\r\n        }\r\n    }\r\n\r\n    &-h2 {\r\n        font-size: to-rem(32);\r\n        font-weight: 700;\r\n        line-height: to-rem(40);\r\n    }\r\n\r\n    &-h3 {\r\n        font-size: to-rem(24);\r\n        font-weight: 700;\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-xl {\r\n        font-size: to-rem(20);\r\n        line-height: to-rem(32);\r\n    }\r\n\r\n    &-l {\r\n        font-size: to-rem(18);\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-m {\r\n        font-size: to-rem(16);\r\n        line-height: to-rem(24);\r\n    }\r\n\r\n    &-s {\r\n        font-size: to-rem(14);\r\n        line-height: to-rem(20);\r\n    }\r\n\r\n    &-xs {\r\n        font-size: to-rem(12);\r\n        line-height: to-rem(16);\r\n    }\r\n}",":root {\r\n    --color-l-blue: #DFEBF4;\r\n    --color-l-green: #DFF3E5;\r\n    --color-l-orange: #FFEBCC;\r\n    --color-l-red: #FDDAE0;\r\n    --color-l-purple: #F1CCE5;\r\n    --color-l-brown: #EEE3DA;\r\n\r\n    --color-blue: #609DC8;\r\n    --color-green: #5FC37B;\r\n    --color-orange: #FF9900;\r\n    --color-red: #F44565;\r\n    --color-purple: #B9027B;\r\n    --color-brown: #A97444;\r\n\r\n    --color-black: #000000;\r\n    --color-black-80: #333333;\r\n    --color-black-60: #666666;\r\n    --color-black-40: #999999;\r\n    --color-black-20: #cccccc;\r\n    --color-black-8: #ebebeb;\r\n    --color-black-3: #f7f7f7;\r\n    --color-white: #ffffff;\r\n}\r\n\r\n// на случай если CSS Properties не срабатывает с градиентом и прозрачностью\r\n// $grey_gradient: linear-gradient(127.8deg, #C7CBD7 -5.9%, #484D5C 98.01%);\r\n",".user-card {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  height: fit-content;\r\n  padding: to-rem(12);\r\n  flex-direction: column;\r\n\r\n  @media (min-width: 1336px) {\r\n    flex-direction: row;\r\n  }\r\n\r\n  &__content {\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin-bottom: to-rem(16);\r\n    flex: none;\r\n\r\n    @media (min-width: 1336px) {\r\n      width: fit-content;\r\n      margin-bottom: 0;\r\n    }\r\n  }\r\n\r\n  &__number {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: to-rem(70);\r\n    padding-right: to-rem(16);\r\n    flex: none;\r\n  }\r\n\r\n  &__border {\r\n    position: relative;\r\n    display: block;\r\n    height: 100%;\r\n\r\n    &::before {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 0;\r\n      display: block;\r\n      width: to-rem(4);\r\n      height: 80%;\r\n      transform: translateY(-50%);\r\n      content: \" \";\r\n      background-color: var(--color-black-3);\r\n    }\r\n  }\r\n\r\n  &__box {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n\r\n  &__info {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: to-rem(0, 10);\r\n\r\n    @media (min-width: 1336px) {\r\n      padding: to-rem(0, 16);\r\n    }\r\n  }\r\n\r\n  &__avatar {\r\n    overflow: hidden;\r\n    display: block;\r\n    width: to-rem(72);\r\n    height: to-rem(72);\r\n    margin-right: to-rem(16);\r\n    border: to-rem(3) solid var(--color-black-3);\r\n    border-radius: 100%;\r\n    flex: none;\r\n\r\n    @media (min-width: 1440px) {\r\n      width: to-rem(92);\r\n      height: to-rem(92);\r\n    }\r\n\r\n    img {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &__name {\r\n    margin-bottom: to-rem(4);\r\n  }\r\n\r\n  &__statistics {\r\n    display: grid;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    grid-template-columns: repeat(3, 1fr);\r\n\r\n    @media (min-width: 1336px) {\r\n      display: flex;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n\r\n      @media (min-width: 670px) {\r\n        margin-right: to-rem(4);\r\n      }\r\n    }\r\n\r\n    &-col {\r\n      height: 100%;\r\n      padding: to-rem(0, 16);\r\n\r\n      @media (min-width: 670px) {\r\n        display: flex;\r\n        align-items: center;\r\n      }\r\n\r\n      @media (min-width: 1336px) {\r\n        align-items: flex-start;\r\n        justify-content: flex-start;\r\n        flex-direction: column;\r\n      }\r\n\r\n      @media (min-width: 1440px) {\r\n        min-width: to-rem(150);\r\n      }\r\n\r\n      &:first-child {\r\n        &::before {\r\n          @media (max-width: 1440px) {\r\n            display: none;\r\n          }\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        height: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__line {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n    }\r\n\r\n    &-value {\r\n      margin-left: to-rem(5);\r\n      color: var(--color-black-40);\r\n    }\r\n  }\r\n\r\n  &__accepting-orders {\r\n    color: var(--color-green);\r\n\r\n    &--not {\r\n      color: var(--color-orange);\r\n    }\r\n  }\r\n\r\n  &__rating {\r\n    color: var(--color-orange);\r\n\r\n    &--positive {\r\n      color: var(--color-green);\r\n    }\r\n\r\n    &--negative {\r\n      color: var(--color-red);\r\n    }\r\n  }\r\n}",".catalog {\r\n\r\n    &__list {\r\n        display: none;\r\n    }\r\n}",".menu {\r\n\r\n    &__list {\r\n\r\n    }\r\n\r\n    &__item {\r\n        display: inline-block;\r\n    }\r\n}",".header {\r\n\r\n    &__wrapper{\r\n        @include flex-wrapper();\r\n    }\r\n\r\n    &__inner {\r\n        border: 1px solid gray;\r\n\r\n        &--nav {\r\n            @include flex-wrapper();\r\n            align-items: center;\r\n        }\r\n    }\r\n\r\n    &__logo {\r\n        width: 126px;\r\n        height: 30px;\r\n\r\n        img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: contain;\r\n            object-position: left center;\r\n        }\r\n    }\r\n\r\n    &__btn-nav {\r\n        display: none;\r\n    }\r\n}"]}
\ No newline at end of file
+{"version":3,"sources":["vendor/import/_normalize.scss","base/_general.scss","helpers/_variables.scss","helpers/_mixins.scss","base/_controls.scss","base/_colors.scss","../blocks/components/user-card/user-card.scss","../blocks/components/catalog/_catalog.scss","../blocks/components/menu/_menu.scss","../blocks/components/n-search/_n-search.scss","../blocks/modules/header/header.scss"],"names":[],"mappings":"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;EACA;;AAEA;EATF;IAUI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;IACA;;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAGF;EATF;IAUI;IACA;IACA;;;AAGF;EAfF;IAgBI;;;AAKE;EADF;IAEI;;;AAKN;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;;ACnLN;EACI;;AAIQ;EACI,OLJA;;AKMA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OL9BS;EK+BT;;AJoFJ;EI7FA;IAYQ;;;AJ2ER;EIvFA;IAgBQ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA,YLxDK;EKyDL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBL/DA;EKgEA;EACA;EACA;EACA;EACA;EACA;;AJqCJ;EIrDA;IAmBQ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAMJ;EACI;EACA;EACA;EACA;EACA;;AJCR;EINI;IAQQ;IACA;;;AAIR;EACI;EACA;EACA;EACA;;AJXR;EIOI;IAOQ;;;AAKJ;EACI;;;ACjIZ;EACI;;AAGJ;EACI;EACA;;AAGI;EACI;EACA;EACA;EACA;;ALsGZ;EK1GQ;IAOQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AL+EZ;EKzGA;IA+BQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YN7CK;;ACiHT;EK5EA;IAWQ;IACA;;;AAGJ;EACI,ONvDK;;;AODjB;EACI;;AAIQ;EACI,kBPDJ;EOEI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ANwFJ;EMpGA;IAeQ;;;AAMJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAKI;EACI;EACA;EACA;EACA;EACA,YPvDX;;AO2DW;EACI;;AAOpB;EACI;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBPrFA;EOsFA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAIJ;EACI;EACA;EACA;EACA;;ANUJ;EMdA;IAOQ;;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YP/HK;;AOiIL;EACI;EACA;EACA,YPpIC;EOqID;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI,kBPpJR;;AOyJJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/LR;EACI;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAGJ;EACI;;AAIR;EP0EA;EACA;EACA;;AOtEI;EACI;;AAGJ;EPgEJ;EACA;EACA;EO/DQ;;APgFR;EO7EI;IAEQ,YRhCH;IQiCG;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;APmDZ;EOjEI;IAkBQ;IACA;;;AAOR;EACI;;APkDR;EOnDI;IAIQ;IACA;;EAEA;IACI;IACA;IACA;;;AAKZ;EACI;;APyCR;EO1CI;IAIQ;;;APgCZ;EOpCI;IAQQ;;;AAIR;EACI;;AP6BR;EO9BI;IAIQ;;;APoBZ;EOxBI;IAQQ;;;APgBZ;EOpDA;IAyCQ;IACA;;EAEA;IACI;;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,ORjIS;EQkIT;;AAEA;EACI;EACA,ORnIJ;;AQuIJ;EACI;EACA;;AP/BJ;EO6BA;IAKQ;IAEA;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;APpDJ;EOmDA;IAIQ;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIR;EACI","file":"../main.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\r\n\r\n/* Document\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Correct the line height in all browsers.\r\n * 2. Prevent adjustments of font size after orientation changes in iOS.\r\n */\r\n\r\nhtml {\r\n\tline-height: 1.15; /* 1 */\r\n\t-webkit-text-size-adjust: 100%; /* 2 */\r\n}\r\n\r\n/* Sections\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the margin in all browsers.\r\n */\r\n\r\nbody {\r\n\tmargin: 0;\r\n}\r\n\r\n/**\r\n * Render the `main` element consistently in IE.\r\n */\r\n\r\nmain {\r\n\tdisplay: block;\r\n}\r\n\r\n/**\r\n * Correct the font size and margin on `h1` elements within `section` and\r\n * `article` contexts in Chrome, Firefox, and Safari.\r\n */\r\n\r\nh1 {\r\n\tfont-size: 2em;\r\n\tmargin: 0.67em 0;\r\n}\r\n\r\n/* Grouping content\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Add the correct box sizing in Firefox.\r\n * 2. Show the overflow in Edge and IE.\r\n */\r\n\r\nhr {\r\n\tbox-sizing: content-box; /* 1 */\r\n\theight: 0; /* 1 */\r\n\toverflow: visible; /* 2 */\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\npre {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/* Text-level semantics\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the gray background on active links in IE 10.\r\n */\r\n\r\na {\r\n\tbackground-color: transparent;\r\n}\r\n\r\n/**\r\n * 1. Remove the bottom border in Chrome 57-\r\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\r\n */\r\n\r\nabbr[title] {\r\n\tborder-bottom: none; /* 1 */\r\n\ttext-decoration: underline; /* 2 */\r\n\ttext-decoration: underline dotted; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font weight in Chrome, Edge, and Safari.\r\n */\r\n\r\nb,\r\nstrong {\r\n\tfont-weight: bolder;\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\ncode,\r\nkbd,\r\nsamp {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font size in all browsers.\r\n */\r\n\r\nsmall {\r\n\tfont-size: 80%;\r\n}\r\n\r\n/**\r\n * Prevent `sub` and `sup` elements from affecting the line height in\r\n * all browsers.\r\n */\r\n\r\nsub,\r\nsup {\r\n\tfont-size: 75%;\r\n\tline-height: 0;\r\n\tposition: relative;\r\n\tvertical-align: baseline;\r\n}\r\n\r\nsub {\r\n\tbottom: -0.25em;\r\n}\r\n\r\nsup {\r\n\ttop: -0.5em;\r\n}\r\n\r\n/* Embedded content\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the border on images inside links in IE 10.\r\n */\r\n\r\nimg {\r\n\tborder-style: none;\r\n}\r\n\r\n/* Forms\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Change the font styles in all browsers.\r\n * 2. Remove the margin in Firefox and Safari.\r\n */\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n\tfont-family: inherit; /* 1 */\r\n\tfont-size: 100%; /* 1 */\r\n\tline-height: 1.15; /* 1 */\r\n\tmargin: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Show the overflow in IE.\r\n * 1. Show the overflow in Edge.\r\n */\r\n\r\nbutton,\r\ninput { /* 1 */\r\n\toverflow: visible;\r\n}\r\n\r\n/**\r\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\r\n * 1. Remove the inheritance of text transform in Firefox.\r\n */\r\n\r\nbutton,\r\nselect { /* 1 */\r\n\ttext-transform: none;\r\n}\r\n\r\n/**\r\n * Correct the inability to style clickable types in iOS and Safari.\r\n */\r\n\r\nbutton,\r\n[type=\"button\"],\r\n[type=\"reset\"],\r\n[type=\"submit\"] {\r\n\t-webkit-appearance: button;\r\n}\r\n\r\n/**\r\n * Remove the inner border and padding in Firefox.\r\n */\r\n\r\nbutton::-moz-focus-inner,\r\n[type=\"button\"]::-moz-focus-inner,\r\n[type=\"reset\"]::-moz-focus-inner,\r\n[type=\"submit\"]::-moz-focus-inner {\r\n\tborder-style: none;\r\n\tpadding: 0;\r\n}\r\n\r\n/**\r\n * Restore the focus styles unset by the previous rule.\r\n */\r\n\r\nbutton:-moz-focusring,\r\n[type=\"button\"]:-moz-focusring,\r\n[type=\"reset\"]:-moz-focusring,\r\n[type=\"submit\"]:-moz-focusring {\r\n\toutline: 1px dotted ButtonText;\r\n}\r\n\r\n/**\r\n * Correct the padding in Firefox.\r\n */\r\n\r\nfieldset {\r\n\tpadding: 0.35em 0.75em 0.625em;\r\n}\r\n\r\n/**\r\n * 1. Correct the text wrapping in Edge and IE.\r\n * 2. Correct the color inheritance from `fieldset` elements in IE.\r\n * 3. Remove the padding so developers are not caught out when they zero out\r\n *    `fieldset` elements in all browsers.\r\n */\r\n\r\nlegend {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tcolor: inherit; /* 2 */\r\n\tdisplay: table; /* 1 */\r\n\tmax-width: 100%; /* 1 */\r\n\tpadding: 0; /* 3 */\r\n\twhite-space: normal; /* 1 */\r\n}\r\n\r\n/**\r\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\r\n */\r\n\r\nprogress {\r\n\tvertical-align: baseline;\r\n}\r\n\r\n/**\r\n * Remove the default vertical scrollbar in IE 10+.\r\n */\r\n\r\ntextarea {\r\n\toverflow: auto;\r\n}\r\n\r\n/**\r\n * 1. Add the correct box sizing in IE 10.\r\n * 2. Remove the padding in IE 10.\r\n */\r\n\r\n[type=\"checkbox\"],\r\n[type=\"radio\"] {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tpadding: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Correct the cursor style of increment and decrement buttons in Chrome.\r\n */\r\n\r\n[type=\"number\"]::-webkit-inner-spin-button,\r\n[type=\"number\"]::-webkit-outer-spin-button {\r\n\theight: auto;\r\n}\r\n\r\n/**\r\n * 1. Correct the odd appearance in Chrome and Safari.\r\n * 2. Correct the outline style in Safari.\r\n */\r\n\r\n[type=\"search\"] {\r\n\t-webkit-appearance: textfield; /* 1 */\r\n\toutline-offset: -2px; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove the inner padding in Chrome and Safari on macOS.\r\n */\r\n\r\n[type=\"search\"]::-webkit-search-decoration {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\n/**\r\n * 1. Correct the inability to style clickable types in iOS and Safari.\r\n * 2. Change font properties to `inherit` in Safari.\r\n */\r\n\r\n::-webkit-file-upload-button {\r\n\t-webkit-appearance: button; /* 1 */\r\n\tfont: inherit; /* 2 */\r\n}\r\n\r\n/* Interactive\r\n   ========================================================================== */\r\n\r\n/*\r\n * Add the correct display in Edge, IE 10+, and Firefox.\r\n */\r\n\r\ndetails {\r\n\tdisplay: block;\r\n}\r\n\r\n/*\r\n * Add the correct display in all browsers.\r\n */\r\n\r\nsummary {\r\n\tdisplay: list-item;\r\n}\r\n\r\n/* Misc\r\n   ========================================================================== */\r\n\r\n/**\r\n * Add the correct display in IE 10+.\r\n */\r\n\r\ntemplate {\r\n\tdisplay: none;\r\n}\r\n\r\n/**\r\n * Add the correct display in IE 10.\r\n */\r\n\r\n[hidden] {\r\n\tdisplay: none;\r\n}","h1, h2, h3, h4, h5, h6, ul {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n*{\r\n  box-sizing: border-box;\r\n}\r\n\r\nbutton,textarea{\r\n  -webkit-appearance: none;\r\n}\r\n\r\nhtml, body {\r\n  min-width: 320px;\r\n  scroll-behavior: smooth;\r\n  overflow-x: clip !important;\r\n}\r\n\r\nbody {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  height: 100%;\r\n  min-height: 100vh;\r\n  min-width: 320px;\r\n  font-family: $primary_font;\r\n  font-size: 16px;\r\n  line-height: 120%;\r\n  color: var(--color-black);\r\n  font-style: normal;\r\n  letter-spacing: normal;\r\n  flex-direction: column;\r\n\r\n  &.on-scroll {\r\n      margin-top: 76px;\r\n  }\r\n}\r\n\r\n.main {\r\n    z-index: z(\"l-default\");\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n}\r\n\r\n.l {\r\n    &-default {\r\n        margin: 0 auto;\r\n        padding: 0 to-rem(10);\r\n        transition: all .4s ease-in-out;\r\n\r\n        @media (min-width: 640px) {\r\n            padding: 0 to-rem(20);\r\n        }\r\n\r\n        @media (min-width: 1024px) {\r\n            max-width: to-rem(1200);\r\n        }\r\n\r\n        @media (min-width: 1200px) {\r\n            max-width: to-rem(1440);\r\n        }\r\n\r\n        @media (min-width: 1500px) {\r\n            padding: 0;\r\n        }\r\n    }\r\n\r\n    &-main {\r\n\r\n    }\r\n\r\n    &-page {\r\n      &__title {\r\n        margin-bottom: to-rem(24);\r\n\r\n        @media (min-width: 1024px) {\r\n          margin-bottom: to-rem(32);\r\n        }\r\n      }\r\n    }\r\n}\r\n\r\n.lazy  {\r\n    opacity: 0;\r\n}\r\n\r\n.loading,\r\n.loaded,\r\n[data-was-processed=\"true\"],\r\n[data-ll-status=\"entered\"] {\r\n    opacity: 1;\r\n    @include tr(all);\r\n}\r\n\r\n.hidden {\r\n    display: none !important;\r\n    opacity: 0 !important;\r\n}\r\n\r\n.show,\r\n.show_btn {\r\n    display: flex !important;\r\n}\r\n\r\ntextarea,\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    text-decoration: none;\r\n    color: inherit;\r\n    outline: none;\r\n    @include tr(all);\r\n}\r\n\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    cursor: pointer;\r\n}\r\n\r\ninput[type=\"submit\"]:disabled {\r\n    cursor: not-allowed;\r\n    opacity: .5;\r\n}\r\n\r\nbutton {\r\n    background: none;\r\n    border: none;\r\n}\r\n\r\ninput,\r\nvideo {\r\n    border: none;\r\n    outline: none;\r\n}\r\n\r\n.fancybox-content{\r\n    padding: 0;\r\n}\r\n\r\ninput, textarea {\r\n    &::placeholder {\r\n        @include tr(\"all\");\r\n    }\r\n    &:focus {\r\n        &::placeholder {\r\n            opacity: 0 !important;\r\n        }\r\n    }\r\n}\r\n\r\ninput,\r\ntextarea,\r\nbutton,\r\nselect,\r\na {\r\n\t-webkit-tap-highlight-color: transparent;\r\n}\r\n\r\ninput::-webkit-outer-spin-button,\r\ninput::-webkit-inner-spin-button {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\nimg {\r\n\tpointer-events: none;\r\n\timage-rendering: -webkit-optimize-contrast !important;\r\n}\r\n\r\nsub {\r\n\tvertical-align: baseline;\r\n\tposition: relative;\r\n\tbottom: -0.4em;\r\n}\r\n\r\nimg {\r\n    display: block;\r\n    max-width: 100%;\r\n}\r\n\r\n.loader {\r\n    z-index: z(\"loader\");\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100vh;\r\n    background: #fff;\r\n}\r\n\r\n.fancybox-content {\r\n    z-index: 99994;\r\n    background: none;\r\n}\r\n\r\n.overflow-y-hidden {\r\n    overflow-y: hidden !important;\r\n}\r\n\r\n@keyframes show {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}","$primary_font: \"Montserrat\", sans-serif;\r\n$blackTextColor: #222222;\r\n$grayTextColor: #999;\r\n$transition: 0.25s;\r\n$white: #fff;\r\n$bgNSearch: #F7F7F7;","// миксин для создания масштабируемых элементов, чтобы поддерживать соотношение. @include responsive-ratio(16,9)\r\n@mixin responsive-ratio($x, $y, $pseudo: false) {\r\n    $padding: unquote(($y / $x) * 100 + \"%\");\r\n    @if $pseudo {\r\n      &:before {\r\n        @include pseudo($pos: relative);\r\n        width: 100%;\r\n        padding-top: $padding;\r\n      }\r\n    } @else {\r\n      padding-top: $padding;\r\n    }\r\n  }\r\n  \r\n  //css треугольники\r\n  @mixin css-triangle(\r\n    $color,\r\n    $direction,\r\n    $size: 6px,\r\n    $position: absolute,\r\n    $round: false\r\n  ) {\r\n    @include pseudo($pos: $position);\r\n    width: 0;\r\n    height: 0;\r\n    @if $round {\r\n      border-radius: 3px;\r\n    }\r\n    @if $direction == down {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-top: $size solid $color;\r\n      margin-top: 0 - round($size / 2.5);\r\n    } @else if $direction == up {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-bottom: $size solid $color;\r\n      margin-bottom: 0 - round($size / 2.5);\r\n    } @else if $direction == right {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-left: $size solid $color;\r\n      margin-right: -$size;\r\n    } @else if $direction == left {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-right: $size solid $color;\r\n      margin-left: -$size;\r\n    }\r\n  }\r\n  \r\n  //transition\r\n  @mixin tr($properties...) {\r\n    $declarations: ();\r\n  \r\n    @each $declaration in $properties {\r\n        $duration: .4s;\r\n        $delay: false;\r\n        $timing-function: ease;\r\n        $property: all;\r\n  \r\n        @if type-of($declaration) == 'map' {\r\n            $duration: if(map_get($declaration, 'duration'), #{map_get($declaration, 'duration')}, $duration);\r\n            $delay: if(map_get($declaration, 'delay'), #{map_get($declaration, 'delay')}, $delay);\r\n            $timing-function: if(map_get($declaration, 'timing-function'), #{map_get($declaration, 'timing-function')}, $timing-function);\r\n            $property: if(map_get($declaration, 'property'), #{map_get($declaration, 'property')}, $property);\r\n        } @else {\r\n            $property: $declaration;\r\n        }\r\n        \r\n        $delayValue: if($delay, ' ' + $delay, '');\r\n        $declarations: append($declarations, #{$property + ' ' + $duration + $delayValue + ' ' + $timing-function}, comma);\r\n    }\r\n  \r\n    transition: $declarations;\r\n  }\r\n\r\n\r\n  @mixin scale($css, $value, $tabletValue) {\r\n    #{$css}: calc($value / 1920) * 100 + vw;\r\n\r\n    @include for-large {\r\n        #{$css}: $value + px;\r\n    }\r\n\r\n    @include for-tablet {\r\n        #{$css}: $tabletValue + px;\r\n    }\r\n}\r\n  \r\n@mixin flex-wrapper {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n}\r\n  \r\n\r\n@mixin for-mobile {\r\n    @media (max-width: 768px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-tablet {\r\n    @media (max-width: 992px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-sm-desktop {\r\n    @media (max-width: 1279px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-desktop {\r\n    @media (max-width: 1439px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-large {\r\n    @media(min-width: 2000px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@function vw($value) {\r\n    @return calc($value / 1920) * 100 + vw;\r\n}\r\n  ",".f {\r\n    &-bold {\r\n        font-weight: 700;\r\n    }\r\n\r\n    &-semibold {\r\n        font-weight: 600;\r\n    }\r\n\r\n    &-medium {\r\n        font-weight: 500;\r\n    }\r\n\r\n    &-h1 {\r\n        font-size: to-rem(40);\r\n        font-weight: 700;\r\n        line-height: to-rem(48);\r\n\r\n        @media (min-width: 992px) {\r\n            font-size: to-rem(48);\r\n            line-height: to-rem(52);\r\n        }\r\n    }\r\n\r\n    &-h2 {\r\n        font-size: to-rem(32);\r\n        font-weight: 700;\r\n        line-height: to-rem(40);\r\n    }\r\n\r\n    &-h3 {\r\n        font-size: to-rem(24);\r\n        font-weight: 700;\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-xl {\r\n        font-size: to-rem(20);\r\n        line-height: to-rem(32);\r\n    }\r\n\r\n    &-l {\r\n        font-size: to-rem(18);\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-m {\r\n        font-size: to-rem(16);\r\n        line-height: to-rem(24);\r\n    }\r\n\r\n    &-s {\r\n        font-size: to-rem(14);\r\n        line-height: to-rem(20);\r\n    }\r\n\r\n    &-xs {\r\n        font-size: to-rem(12);\r\n        line-height: to-rem(16);\r\n    }\r\n}",":root {\r\n    --color-l-blue: #DFEBF4;\r\n    --color-l-green: #DFF3E5;\r\n    --color-l-orange: #FFEBCC;\r\n    --color-l-red: #FDDAE0;\r\n    --color-l-purple: #F1CCE5;\r\n    --color-l-brown: #EEE3DA;\r\n\r\n    --color-blue: #609DC8;\r\n    --color-green: #5FC37B;\r\n    --color-orange: #FF9900;\r\n    --color-red: #F44565;\r\n    --color-purple: #B9027B;\r\n    --color-brown: #A97444;\r\n\r\n    --color-black: #000000;\r\n    --color-black-80: #333333;\r\n    --color-black-60: #666666;\r\n    --color-black-40: #999999;\r\n    --color-black-20: #cccccc;\r\n    --color-black-8: #ebebeb;\r\n    --color-black-3: #f7f7f7;\r\n    --color-white: #ffffff;\r\n}\r\n\r\n// на случай если CSS Properties не срабатывает с градиентом и прозрачностью\r\n// $grey_gradient: linear-gradient(127.8deg, #C7CBD7 -5.9%, #484D5C 98.01%);\r\n",".user-card {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  height: fit-content;\r\n  padding: to-rem(12);\r\n  flex-direction: column;\r\n\r\n  @media (min-width: 1336px) {\r\n    flex-direction: row;\r\n  }\r\n\r\n  &__content {\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin-bottom: to-rem(16);\r\n    flex: none;\r\n\r\n    @media (min-width: 1336px) {\r\n      width: fit-content;\r\n      margin-bottom: 0;\r\n    }\r\n  }\r\n\r\n  &__number {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: to-rem(70);\r\n    padding-right: to-rem(16);\r\n    flex: none;\r\n  }\r\n\r\n  &__border {\r\n    position: relative;\r\n    display: block;\r\n    height: 100%;\r\n\r\n    &::before {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 0;\r\n      display: block;\r\n      width: to-rem(4);\r\n      height: 80%;\r\n      transform: translateY(-50%);\r\n      content: \" \";\r\n      background-color: var(--color-black-3);\r\n    }\r\n  }\r\n\r\n  &__box {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n\r\n  &__info {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: to-rem(0, 10);\r\n\r\n    @media (min-width: 1336px) {\r\n      padding: to-rem(0, 16);\r\n    }\r\n  }\r\n\r\n  &__avatar {\r\n    overflow: hidden;\r\n    display: block;\r\n    width: to-rem(72);\r\n    height: to-rem(72);\r\n    margin-right: to-rem(16);\r\n    border: to-rem(3) solid var(--color-black-3);\r\n    border-radius: 100%;\r\n    flex: none;\r\n\r\n    @media (min-width: 1440px) {\r\n      width: to-rem(92);\r\n      height: to-rem(92);\r\n    }\r\n\r\n    img {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &__name {\r\n    margin-bottom: to-rem(4);\r\n  }\r\n\r\n  &__statistics {\r\n    display: grid;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    grid-template-columns: repeat(3, 1fr);\r\n\r\n    @media (min-width: 1336px) {\r\n      display: flex;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n\r\n      @media (min-width: 670px) {\r\n        margin-right: to-rem(4);\r\n      }\r\n    }\r\n\r\n    &-col {\r\n      height: 100%;\r\n      padding: to-rem(0, 16);\r\n\r\n      @media (min-width: 670px) {\r\n        display: flex;\r\n        align-items: center;\r\n      }\r\n\r\n      @media (min-width: 1336px) {\r\n        align-items: flex-start;\r\n        justify-content: flex-start;\r\n        flex-direction: column;\r\n      }\r\n\r\n      @media (min-width: 1440px) {\r\n        min-width: to-rem(150);\r\n      }\r\n\r\n      &:first-child {\r\n        &::before {\r\n          @media (max-width: 1440px) {\r\n            display: none;\r\n          }\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        height: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__line {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n    }\r\n\r\n    &-value {\r\n      margin-left: to-rem(5);\r\n      color: var(--color-black-40);\r\n    }\r\n  }\r\n\r\n  &__accepting-orders {\r\n    color: var(--color-green);\r\n\r\n    &--not {\r\n      color: var(--color-orange);\r\n    }\r\n  }\r\n\r\n  &__rating {\r\n    color: var(--color-orange);\r\n\r\n    &--positive {\r\n      color: var(--color-green);\r\n    }\r\n\r\n    &--negative {\r\n      color: var(--color-red);\r\n    }\r\n  }\r\n}",".catalog {\r\n    position: relative;\r\n\r\n    &:hover {\r\n        .catalog {\r\n            &__btn {\r\n                color: $grayTextColor;\r\n\r\n                &::before {\r\n                    background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n                }\r\n            }\r\n\r\n            &__list {\r\n                padding: 16px 20px;\r\n                padding-top: 60px;\r\n                opacity: 1;\r\n                visibility: visible;\r\n                height: auto;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__btn {\r\n        position: relative;\r\n        z-index: 2;\r\n        font-family: $primary_font, sans-serif;\r\n        font-weight: 500;\r\n        font-size: 16px;\r\n        text-transform: uppercase;\r\n        line-height: 150%;\r\n        color: $blackTextColor;\r\n        padding-left: 32px;\r\n\r\n        @include for-desktop {\r\n            font-size: 14px;\r\n        }\r\n\r\n        @include for-sm-desktop {\r\n            display: none;\r\n        }\r\n\r\n        &::before {\r\n            position: absolute;\r\n            content: \"\";\r\n            display: block;\r\n            top: 0;\r\n            left: 0;\r\n            width: 24px;\r\n            height: 24px;\r\n            background-repeat: no-repeat;\r\n            background-size: 100% 100%;\r\n            background-position: center;\r\n            background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 6H19.5V8H4.5V6Z' fill='black' /%3e%3cpath d='M4.5 11H19.5V13H4.5V11Z' fill='black' /%3e%3cpath d='M4.5 16H19.5V18H4.5V16Z' fill='black' /%3e%3c/svg%3e\");\r\n        }\r\n    }\r\n\r\n    &__list {\r\n        position: absolute;\r\n        transition: $transition;\r\n        z-index: 1;\r\n        top: -14px;\r\n        left: 50%;\r\n        border: 4px solid #ebebeb;\r\n        border-radius: 20px;\r\n        transform: translateX(-50%);\r\n        width: calc(100% + 40px);\r\n        background-color: $white;\r\n        padding-top: 60px;\r\n        box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        height: 0;\r\n        padding: 0;\r\n\r\n        @include for-sm-desktop {\r\n            position: relative;\r\n            top: 0;\r\n            left: 0;\r\n            transform: none;\r\n            opacity: 1;\r\n            visibility: visible;\r\n            height: auto;\r\n            width: 100%;\r\n            border: none;\r\n            box-shadow: none;\r\n            background-color: transparent;\r\n            padding-left: 0;\r\n            margin: 0;\r\n        }\r\n    }\r\n\r\n    &__item {\r\n        text-decoration: none;\r\n        list-style: none;\r\n        margin-bottom: 16px;\r\n\r\n        &:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n    }\r\n\r\n    &__link {\r\n\r\n        img {\r\n            display: inline-block;\r\n            vertical-align: middle;\r\n            margin-right: 12px;\r\n            width: 36px;\r\n            height: 36px;\r\n\r\n            @include for-sm-desktop {\r\n                width: 26px;\r\n                height: 26px;\r\n            }\r\n        }\r\n\r\n        span {\r\n            font-family: $primary_font, sans-serif;\r\n            font-weight: 400;\r\n            font-size: 16px;\r\n            line-height: 150%;\r\n\r\n            @include for-sm-desktop {\r\n                font-size: 14px;\r\n            }\r\n        }\r\n\r\n        &:hover {\r\n            span {\r\n                text-decoration: underline;\r\n            }\r\n        }\r\n    }\r\n}",".menu {\r\n    &__align {\r\n        display: none;\r\n    }\r\n\r\n    &__item {\r\n        position: relative;\r\n        display: inline-block;\r\n\r\n        &.active {\r\n            .menu__link {\r\n                font-weight: 700;\r\n                font-size: 16px;\r\n                line-height: 150%;\r\n                color: #000;\r\n\r\n                @include for-desktop {\r\n                    font-size: 14px;\r\n                }\r\n            }\r\n\r\n            &::before {\r\n                position: absolute;\r\n                content: \"\";\r\n                display: block;\r\n                width: 6px;\r\n                height: 6px;\r\n                transform: translateY(-50%);\r\n                background-color: #000;\r\n                border-radius: 50%;\r\n                top: 50%;\r\n                left: 0;\r\n            }\r\n        }\r\n\r\n        @include for-sm-desktop {\r\n            display: block;\r\n        }\r\n    }\r\n\r\n    &__link {\r\n        display: block;\r\n        padding: 10px 20px;\r\n        font-family: $primary_font, sans-serif;\r\n        font-weight: 400;\r\n        font-size: 16px;\r\n        line-height: 150%;\r\n        color: #666;\r\n        transition: $transition;\r\n\r\n        @include for-desktop {\r\n            padding: 8px 12px;\r\n            font-size: 14px;\r\n        }\r\n\r\n        &:hover {\r\n            color: $blackTextColor;\r\n        }\r\n    }\r\n}",".n-search {\r\n    position: relative;\r\n\r\n    &.active {\r\n        .n-search {\r\n            &__wrapper {\r\n                background-color: $bgNSearch;\r\n                display: flex;\r\n            }\r\n\r\n            &__button {\r\n                background-color: #000;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__wrapper {\r\n        position: absolute;\r\n        z-index: 1;\r\n        display: none;\r\n        align-items: center;\r\n        padding: 7px 16px;\r\n        padding-right: 50px;\r\n        border-radius: 12px;\r\n        left: 20px;\r\n        top: 50%;\r\n        transform: translate(-100%, -50%);\r\n        width: 800px;\r\n        background-color: #fff;\r\n\r\n        @include for-desktop {\r\n            width: 610px;\r\n        }\r\n    }\r\n\r\n    &__inner {\r\n\r\n        &--select-catalog {\r\n            position: relative;\r\n            min-width: 220px;\r\n            border-right: 4px solid #ebebeb;\r\n\r\n            &::after {\r\n                position: absolute;\r\n                content: \"\";\r\n                top: 100%;\r\n                width: calc(100% + 20px);\r\n                left: -20px;\r\n                height: 20px;\r\n            }\r\n\r\n            &:hover {\r\n                .n-search {\r\n                    &__list {\r\n                        opacity: 1;\r\n                        visibility: visible;\r\n                        height: auto;\r\n                        z-index: 3;\r\n                        transition: $transition;\r\n                    }\r\n\r\n                    &__button-catalog {\r\n                        &::before {\r\n                            background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        &--search-input {\r\n            flex-grow: 2;\r\n            padding-left: 20px;\r\n        }\r\n\r\n        input {\r\n            width: 100%;\r\n            background-color: transparent;\r\n        }\r\n    }\r\n\r\n    &__list {\r\n        position: absolute;\r\n        z-index: 1;\r\n        top: 46px;\r\n        left: -20px;\r\n        border: 4px solid #ebebeb;\r\n        border-radius: 20px;\r\n        width: 240px;\r\n        background-color: $white;\r\n        padding: 16px 8px;\r\n        box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        height: 0;\r\n    }\r\n\r\n    &__item {\r\n        display: block;\r\n        \r\n    }\r\n\r\n    &__link {\r\n        display: block;\r\n        padding: 8px 12px;\r\n        border-radius: 4px;\r\n        transition: none;\r\n\r\n        @include for-desktop {\r\n            font-size: 14px;\r\n        }\r\n\r\n        &:hover {\r\n            background-color: #f1f1f1;\r\n            color: #363636;\r\n        }\r\n\r\n        &:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n    }\r\n\r\n    &__button {\r\n        position: relative;\r\n        cursor: pointer;\r\n        display: block;\r\n        z-index: 2;\r\n        width: 60px;\r\n        height: 44px;\r\n        border-radius: 16px;\r\n        transition: $transition;\r\n\r\n        &::after {\r\n            position: absolute;\r\n            content: \"\";\r\n            transition: $transition;\r\n            display: block;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 32px;\r\n            height: 32px;\r\n            transform: translate(-50%, -50%);\r\n            mask-repeat: no-repeat;\r\n            mask-position: center center;\r\n            background-color: #dedee2;\r\n            mask-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 9.84871 15.3729 11.551 14.3199 12.9056L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L12.9056 14.3199C11.551 15.3729 9.84871 16 8 16C3.58172 16 0 12.4183 0 8Z' fill='%238B8DA3' /%3e%3c/svg%3e\");\r\n        }\r\n\r\n        &:hover {\r\n            background-color: #000;\r\n\r\n            &:after {\r\n                background-color: $white;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__button-catalog {\r\n        position: relative;\r\n        font-family: \"Montserrat\", sans-serif;\r\n        font-weight: 400;\r\n        font-size: 16px;\r\n        padding-left: 32px;\r\n        padding-right: 16px;\r\n        line-height: 156%;\r\n        color: #999;\r\n\r\n        &::before {\r\n            position: absolute;\r\n            content: \"\";\r\n            top: 1px;\r\n            left: 0;\r\n            width: 24px;\r\n            height: 24px;\r\n            background-repeat: no-repeat;\r\n            background-size: contain;\r\n            background-position: center center;\r\n            background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9.00001L12 15L18 9.00001' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n        }\r\n    }\r\n\r\n    &__button-close {\r\n        position: absolute;\r\n        cursor: pointer;\r\n        top: 10px;\r\n        right: 40px;\r\n        width: 24px;\r\n        height: 24px;\r\n        background-repeat: no-repeat;\r\n        background-size: contain;\r\n        background-position: center center;\r\n        background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n    }\r\n}",".header {\r\n    box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n    background: #fff;\r\n    padding: 6px 0;\r\n    margin: 0 10px;\r\n    border-radius: 0 0 20px 20px;\r\n\r\n    &.menu-active {\r\n        .header__inner--nav {\r\n            left: 0;\r\n        }\r\n\r\n        .header__overlay {\r\n            display: block;\r\n        }\r\n    }\r\n\r\n    &__wrapper {\r\n        @include flex-wrapper();\r\n    }\r\n\r\n    &__inner {\r\n\r\n        &--logo {\r\n            position: relative;\r\n        }\r\n\r\n        &--nav,\r\n        &--auth {\r\n            @include flex-wrapper();\r\n            align-items: center;\r\n        }\r\n\r\n        &--nav {\r\n            @include for-sm-desktop {\r\n                transition: $transition;\r\n                align-items: flex-start;\r\n                overflow-y: auto;\r\n                position: fixed;\r\n                display: block;\r\n                z-index: 3;\r\n                height: 100%;\r\n                left: -380px;\r\n                top: 0;\r\n                padding: 20px 32px 60px;\r\n                width: 360px;\r\n                background-color: #fff;\r\n                box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n            }\r\n\r\n            @include for-mobile {\r\n                width: 100%;\r\n                left: -100%;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &__sub-inner {\r\n        &--logo  {\r\n            display: none;\r\n\r\n            @include for-sm-desktop {\r\n                display: flex;\r\n                justify-content: space-between;\r\n\r\n                .header__logo {\r\n                    display: block;\r\n                    width: 140px;\r\n                    height: 40px;\r\n                }\r\n            }\r\n        }\r\n\r\n        &--catalog {\r\n            margin-right: 60px;\r\n\r\n            @include for-desktop {\r\n                margin-right: 20px;\r\n            }\r\n\r\n            @include for-sm-desktop {\r\n                margin-right: 0;\r\n            }\r\n        }\r\n\r\n        &--search {\r\n            margin-left: 32px;\r\n\r\n            @include for-desktop {\r\n                margin-left: 0;\r\n            }\r\n\r\n            @include for-sm-desktop {\r\n                display: none;\r\n            }\r\n        }\r\n\r\n        @include for-sm-desktop {\r\n            width: 100%;\r\n            margin-bottom: 32px;\r\n\r\n            &:last-child {\r\n                margin-bottom: 0;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__logo {\r\n        position: relative;\r\n        width: 126px;\r\n        height: 30px;\r\n\r\n        img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: contain;\r\n            object-position: left center;\r\n        }\r\n    }\r\n\r\n    &__auth {\r\n        font-family: \"Montserrat\", sans-serif;\r\n        font-weight: 500;\r\n        font-size: 14px;\r\n        line-height: 150%;\r\n        text-transform: uppercase;\r\n        height: auto;\r\n        border-radius: 12px;\r\n        padding: 10px 20px;\r\n        color: $blackTextColor;\r\n        background-color: #F7F7F7;\r\n\r\n        &:hover {\r\n            background: #000;\r\n            color: $white;\r\n        }\r\n    }\r\n\r\n    &__button-open-menu {\r\n        display: none;\r\n        margin-right: 20px;\r\n\r\n        @include for-sm-desktop {\r\n            display: block;\r\n\r\n            width: 32px;\r\n            height: 32px;\r\n            background: url('../img/svg/ico-list-open.svg') no-repeat center / contain;\r\n        }\r\n    }\r\n\r\n    &__button-close-menu {\r\n        cursor: pointer;\r\n        user-select: none;\r\n        display: block;\r\n        width: 32px;\r\n        height: 32px;\r\n        background: url('../img/svg/ico-list-close.svg') no-repeat center / contain;\r\n    }\r\n\r\n    &__overlay {\r\n        display: none;\r\n\r\n        @include for-sm-desktop {\r\n            z-index: 1;\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: #8b8b8b38;\r\n        }\r\n    }\r\n\r\n    &__btn-nav {\r\n        display: none;\r\n    }\r\n}"]}
\ No newline at end of file
diff --git a/docs/styles/maps/ui.css.map b/docs/styles/maps/ui.css.map
index 4ad3cbc..9e2e1a7 100644
--- a/docs/styles/maps/ui.css.map
+++ b/docs/styles/maps/ui.css.map
@@ -1 +1 @@
-{"version":3,"sources":["vendor/import/_normalize.scss","base/_general.scss","helpers/_variables.scss","helpers/_mixins.scss","base/_controls.scss","base/_colors.scss","../blocks/components/user-card/user-card.scss","../blocks/components/catalog/_catalog.scss","../blocks/components/menu/_menu.scss","../blocks/modules/header/header.scss","../blocks/modules/ui-colors-list/ui-colors-list.scss"],"names":[],"mappings":"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;EACA;;AAEA;EATF;IAUI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;IACA;;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAGF;EATF;IAUI;IACA;IACA;;;AAGF;EAfF;IAgBI;;;AAKE;EADF;IAEI;;;AAKN;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;;ACjLF;EACI;;;ACGJ;EACI;;;ACLJ;ENyFA;EACA;EACA;;AMvFA;EACI;;AAEA;ENkFJ;EACA;EACA;EMlFQ;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;;;AC3BN;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA","file":"../ui.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\r\n\r\n/* Document\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Correct the line height in all browsers.\r\n * 2. Prevent adjustments of font size after orientation changes in iOS.\r\n */\r\n\r\nhtml {\r\n\tline-height: 1.15; /* 1 */\r\n\t-webkit-text-size-adjust: 100%; /* 2 */\r\n}\r\n\r\n/* Sections\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the margin in all browsers.\r\n */\r\n\r\nbody {\r\n\tmargin: 0;\r\n}\r\n\r\n/**\r\n * Render the `main` element consistently in IE.\r\n */\r\n\r\nmain {\r\n\tdisplay: block;\r\n}\r\n\r\n/**\r\n * Correct the font size and margin on `h1` elements within `section` and\r\n * `article` contexts in Chrome, Firefox, and Safari.\r\n */\r\n\r\nh1 {\r\n\tfont-size: 2em;\r\n\tmargin: 0.67em 0;\r\n}\r\n\r\n/* Grouping content\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Add the correct box sizing in Firefox.\r\n * 2. Show the overflow in Edge and IE.\r\n */\r\n\r\nhr {\r\n\tbox-sizing: content-box; /* 1 */\r\n\theight: 0; /* 1 */\r\n\toverflow: visible; /* 2 */\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\npre {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/* Text-level semantics\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the gray background on active links in IE 10.\r\n */\r\n\r\na {\r\n\tbackground-color: transparent;\r\n}\r\n\r\n/**\r\n * 1. Remove the bottom border in Chrome 57-\r\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\r\n */\r\n\r\nabbr[title] {\r\n\tborder-bottom: none; /* 1 */\r\n\ttext-decoration: underline; /* 2 */\r\n\ttext-decoration: underline dotted; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font weight in Chrome, Edge, and Safari.\r\n */\r\n\r\nb,\r\nstrong {\r\n\tfont-weight: bolder;\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\ncode,\r\nkbd,\r\nsamp {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font size in all browsers.\r\n */\r\n\r\nsmall {\r\n\tfont-size: 80%;\r\n}\r\n\r\n/**\r\n * Prevent `sub` and `sup` elements from affecting the line height in\r\n * all browsers.\r\n */\r\n\r\nsub,\r\nsup {\r\n\tfont-size: 75%;\r\n\tline-height: 0;\r\n\tposition: relative;\r\n\tvertical-align: baseline;\r\n}\r\n\r\nsub {\r\n\tbottom: -0.25em;\r\n}\r\n\r\nsup {\r\n\ttop: -0.5em;\r\n}\r\n\r\n/* Embedded content\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the border on images inside links in IE 10.\r\n */\r\n\r\nimg {\r\n\tborder-style: none;\r\n}\r\n\r\n/* Forms\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Change the font styles in all browsers.\r\n * 2. Remove the margin in Firefox and Safari.\r\n */\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n\tfont-family: inherit; /* 1 */\r\n\tfont-size: 100%; /* 1 */\r\n\tline-height: 1.15; /* 1 */\r\n\tmargin: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Show the overflow in IE.\r\n * 1. Show the overflow in Edge.\r\n */\r\n\r\nbutton,\r\ninput { /* 1 */\r\n\toverflow: visible;\r\n}\r\n\r\n/**\r\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\r\n * 1. Remove the inheritance of text transform in Firefox.\r\n */\r\n\r\nbutton,\r\nselect { /* 1 */\r\n\ttext-transform: none;\r\n}\r\n\r\n/**\r\n * Correct the inability to style clickable types in iOS and Safari.\r\n */\r\n\r\nbutton,\r\n[type=\"button\"],\r\n[type=\"reset\"],\r\n[type=\"submit\"] {\r\n\t-webkit-appearance: button;\r\n}\r\n\r\n/**\r\n * Remove the inner border and padding in Firefox.\r\n */\r\n\r\nbutton::-moz-focus-inner,\r\n[type=\"button\"]::-moz-focus-inner,\r\n[type=\"reset\"]::-moz-focus-inner,\r\n[type=\"submit\"]::-moz-focus-inner {\r\n\tborder-style: none;\r\n\tpadding: 0;\r\n}\r\n\r\n/**\r\n * Restore the focus styles unset by the previous rule.\r\n */\r\n\r\nbutton:-moz-focusring,\r\n[type=\"button\"]:-moz-focusring,\r\n[type=\"reset\"]:-moz-focusring,\r\n[type=\"submit\"]:-moz-focusring {\r\n\toutline: 1px dotted ButtonText;\r\n}\r\n\r\n/**\r\n * Correct the padding in Firefox.\r\n */\r\n\r\nfieldset {\r\n\tpadding: 0.35em 0.75em 0.625em;\r\n}\r\n\r\n/**\r\n * 1. Correct the text wrapping in Edge and IE.\r\n * 2. Correct the color inheritance from `fieldset` elements in IE.\r\n * 3. Remove the padding so developers are not caught out when they zero out\r\n *    `fieldset` elements in all browsers.\r\n */\r\n\r\nlegend {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tcolor: inherit; /* 2 */\r\n\tdisplay: table; /* 1 */\r\n\tmax-width: 100%; /* 1 */\r\n\tpadding: 0; /* 3 */\r\n\twhite-space: normal; /* 1 */\r\n}\r\n\r\n/**\r\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\r\n */\r\n\r\nprogress {\r\n\tvertical-align: baseline;\r\n}\r\n\r\n/**\r\n * Remove the default vertical scrollbar in IE 10+.\r\n */\r\n\r\ntextarea {\r\n\toverflow: auto;\r\n}\r\n\r\n/**\r\n * 1. Add the correct box sizing in IE 10.\r\n * 2. Remove the padding in IE 10.\r\n */\r\n\r\n[type=\"checkbox\"],\r\n[type=\"radio\"] {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tpadding: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Correct the cursor style of increment and decrement buttons in Chrome.\r\n */\r\n\r\n[type=\"number\"]::-webkit-inner-spin-button,\r\n[type=\"number\"]::-webkit-outer-spin-button {\r\n\theight: auto;\r\n}\r\n\r\n/**\r\n * 1. Correct the odd appearance in Chrome and Safari.\r\n * 2. Correct the outline style in Safari.\r\n */\r\n\r\n[type=\"search\"] {\r\n\t-webkit-appearance: textfield; /* 1 */\r\n\toutline-offset: -2px; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove the inner padding in Chrome and Safari on macOS.\r\n */\r\n\r\n[type=\"search\"]::-webkit-search-decoration {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\n/**\r\n * 1. Correct the inability to style clickable types in iOS and Safari.\r\n * 2. Change font properties to `inherit` in Safari.\r\n */\r\n\r\n::-webkit-file-upload-button {\r\n\t-webkit-appearance: button; /* 1 */\r\n\tfont: inherit; /* 2 */\r\n}\r\n\r\n/* Interactive\r\n   ========================================================================== */\r\n\r\n/*\r\n * Add the correct display in Edge, IE 10+, and Firefox.\r\n */\r\n\r\ndetails {\r\n\tdisplay: block;\r\n}\r\n\r\n/*\r\n * Add the correct display in all browsers.\r\n */\r\n\r\nsummary {\r\n\tdisplay: list-item;\r\n}\r\n\r\n/* Misc\r\n   ========================================================================== */\r\n\r\n/**\r\n * Add the correct display in IE 10+.\r\n */\r\n\r\ntemplate {\r\n\tdisplay: none;\r\n}\r\n\r\n/**\r\n * Add the correct display in IE 10.\r\n */\r\n\r\n[hidden] {\r\n\tdisplay: none;\r\n}","h1, h2, h3, h4, h5, h6, ul {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n*{\r\n  box-sizing: border-box;\r\n}\r\n\r\nbutton,textarea{\r\n  -webkit-appearance: none;\r\n}\r\n\r\nhtml, body {\r\n  min-width: 320px;\r\n  scroll-behavior: smooth;\r\n  overflow-x: clip !important;\r\n}\r\n\r\nbody {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  height: 100%;\r\n  min-height: 100vh;\r\n  min-width: 320px;\r\n  font-family: $primary_font;\r\n  font-size: 16px;\r\n  line-height: 120%;\r\n  color: var(--color-black);\r\n  font-style: normal;\r\n  letter-spacing: normal;\r\n  flex-direction: column;\r\n\r\n  &.on-scroll {\r\n      margin-top: 76px;\r\n  }\r\n}\r\n\r\n.main {\r\n    z-index: z(\"l-default\");\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n}\r\n\r\n.l {\r\n    &-default {\r\n        margin: 0 auto;\r\n        padding: 0 to-rem(10);\r\n        transition: all .4s ease-in-out;\r\n\r\n        @media (min-width: 640px) {\r\n            padding: 0 to-rem(20);\r\n        }\r\n\r\n        @media (min-width: 1024px) {\r\n            max-width: to-rem(1200);\r\n        }\r\n\r\n        @media (min-width: 1200px) {\r\n            max-width: to-rem(1440);\r\n        }\r\n\r\n        @media (min-width: 1500px) {\r\n            padding: 0;\r\n        }\r\n    }\r\n\r\n    &-main {\r\n\r\n    }\r\n\r\n    &-page {\r\n      &__title {\r\n        margin-bottom: to-rem(24);\r\n\r\n        @media (min-width: 1024px) {\r\n          margin-bottom: to-rem(32);\r\n        }\r\n      }\r\n    }\r\n}\r\n\r\n.lazy  {\r\n    opacity: 0;\r\n}\r\n\r\n.loading,\r\n.loaded,\r\n[data-was-processed=\"true\"],\r\n[data-ll-status=\"entered\"] {\r\n    opacity: 1;\r\n    @include tr(all);\r\n}\r\n\r\n.hidden {\r\n    display: none !important;\r\n    opacity: 0 !important;\r\n}\r\n\r\n.show,\r\n.show_btn {\r\n    display: flex !important;\r\n}\r\n\r\ntextarea,\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    text-decoration: none;\r\n    color: inherit;\r\n    outline: none;\r\n    @include tr(all);\r\n}\r\n\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    cursor: pointer;\r\n}\r\n\r\ninput[type=\"submit\"]:disabled {\r\n    cursor: not-allowed;\r\n    opacity: .5;\r\n}\r\n\r\nbutton {\r\n    background: none;\r\n    border: none;\r\n}\r\n\r\ninput,\r\nvideo {\r\n    border: none;\r\n    outline: none;\r\n}\r\n\r\n.fancybox-content{\r\n    padding: 0;\r\n}\r\n\r\ninput, textarea {\r\n    &::placeholder {\r\n        @include tr(\"all\");\r\n    }\r\n    &:focus {\r\n        &::placeholder {\r\n            opacity: 0 !important;\r\n        }\r\n    }\r\n}\r\n\r\ninput,\r\ntextarea,\r\nbutton,\r\nselect,\r\na {\r\n\t-webkit-tap-highlight-color: transparent;\r\n}\r\n\r\ninput::-webkit-outer-spin-button,\r\ninput::-webkit-inner-spin-button {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\nimg {\r\n\tpointer-events: none;\r\n\timage-rendering: -webkit-optimize-contrast !important;\r\n}\r\n\r\nsub {\r\n\tvertical-align: baseline;\r\n\tposition: relative;\r\n\tbottom: -0.4em;\r\n}\r\n\r\nimg {\r\n    display: block;\r\n    max-width: 100%;\r\n}\r\n\r\n.loader {\r\n    z-index: z(\"loader\");\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100vh;\r\n    background: #fff;\r\n}\r\n\r\n.fancybox-content {\r\n    z-index: 99994;\r\n    background: none;\r\n}\r\n\r\n.overflow-y-hidden {\r\n    overflow-y: hidden !important;\r\n}\r\n\r\n@keyframes show {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}","$primary_font: \"Montserrat\", sans-serif;\r\n","// миксин для создания масштабируемых элементов, чтобы поддерживать соотношение. @include responsive-ratio(16,9)\r\n@mixin responsive-ratio($x, $y, $pseudo: false) {\r\n    $padding: unquote(($y / $x) * 100 + \"%\");\r\n    @if $pseudo {\r\n      &:before {\r\n        @include pseudo($pos: relative);\r\n        width: 100%;\r\n        padding-top: $padding;\r\n      }\r\n    } @else {\r\n      padding-top: $padding;\r\n    }\r\n  }\r\n  \r\n  //css треугольники\r\n  @mixin css-triangle(\r\n    $color,\r\n    $direction,\r\n    $size: 6px,\r\n    $position: absolute,\r\n    $round: false\r\n  ) {\r\n    @include pseudo($pos: $position);\r\n    width: 0;\r\n    height: 0;\r\n    @if $round {\r\n      border-radius: 3px;\r\n    }\r\n    @if $direction == down {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-top: $size solid $color;\r\n      margin-top: 0 - round($size / 2.5);\r\n    } @else if $direction == up {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-bottom: $size solid $color;\r\n      margin-bottom: 0 - round($size / 2.5);\r\n    } @else if $direction == right {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-left: $size solid $color;\r\n      margin-right: -$size;\r\n    } @else if $direction == left {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-right: $size solid $color;\r\n      margin-left: -$size;\r\n    }\r\n  }\r\n  \r\n  //transition\r\n  @mixin tr($properties...) {\r\n    $declarations: ();\r\n  \r\n    @each $declaration in $properties {\r\n        $duration: .4s;\r\n        $delay: false;\r\n        $timing-function: ease;\r\n        $property: all;\r\n  \r\n        @if type-of($declaration) == 'map' {\r\n            $duration: if(map_get($declaration, 'duration'), #{map_get($declaration, 'duration')}, $duration);\r\n            $delay: if(map_get($declaration, 'delay'), #{map_get($declaration, 'delay')}, $delay);\r\n            $timing-function: if(map_get($declaration, 'timing-function'), #{map_get($declaration, 'timing-function')}, $timing-function);\r\n            $property: if(map_get($declaration, 'property'), #{map_get($declaration, 'property')}, $property);\r\n        } @else {\r\n            $property: $declaration;\r\n        }\r\n        \r\n        $delayValue: if($delay, ' ' + $delay, '');\r\n        $declarations: append($declarations, #{$property + ' ' + $duration + $delayValue + ' ' + $timing-function}, comma);\r\n    }\r\n  \r\n    transition: $declarations;\r\n  }\r\n\r\n\r\n  @mixin scale($css, $value, $tabletValue) {\r\n    #{$css}: calc($value / 1920) * 100 + vw;\r\n\r\n    @include for-large {\r\n        #{$css}: $value + px;\r\n    }\r\n\r\n    @include for-tablet {\r\n        #{$css}: $tabletValue + px;\r\n    }\r\n}\r\n  \r\n@mixin flex-wrapper {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n}\r\n  \r\n\r\n@mixin for-mobile {\r\n    @media (max-width: 768px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-tablet {\r\n    @media (max-width: 992px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-sm-desktop {\r\n    @media (max-width: 1280px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-desktop {\r\n    @media (max-width: 1440px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-large {\r\n    @media(min-width: 2000px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@function vw($value) {\r\n    @return calc($value / 1920) * 100 + vw;\r\n}\r\n  ",".f {\r\n    &-bold {\r\n        font-weight: 700;\r\n    }\r\n\r\n    &-semibold {\r\n        font-weight: 600;\r\n    }\r\n\r\n    &-medium {\r\n        font-weight: 500;\r\n    }\r\n\r\n    &-h1 {\r\n        font-size: to-rem(40);\r\n        font-weight: 700;\r\n        line-height: to-rem(48);\r\n\r\n        @media (min-width: 992px) {\r\n            font-size: to-rem(48);\r\n            line-height: to-rem(52);\r\n        }\r\n    }\r\n\r\n    &-h2 {\r\n        font-size: to-rem(32);\r\n        font-weight: 700;\r\n        line-height: to-rem(40);\r\n    }\r\n\r\n    &-h3 {\r\n        font-size: to-rem(24);\r\n        font-weight: 700;\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-xl {\r\n        font-size: to-rem(20);\r\n        line-height: to-rem(32);\r\n    }\r\n\r\n    &-l {\r\n        font-size: to-rem(18);\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-m {\r\n        font-size: to-rem(16);\r\n        line-height: to-rem(24);\r\n    }\r\n\r\n    &-s {\r\n        font-size: to-rem(14);\r\n        line-height: to-rem(20);\r\n    }\r\n\r\n    &-xs {\r\n        font-size: to-rem(12);\r\n        line-height: to-rem(16);\r\n    }\r\n}",":root {\r\n    --color-l-blue: #DFEBF4;\r\n    --color-l-green: #DFF3E5;\r\n    --color-l-orange: #FFEBCC;\r\n    --color-l-red: #FDDAE0;\r\n    --color-l-purple: #F1CCE5;\r\n    --color-l-brown: #EEE3DA;\r\n\r\n    --color-blue: #609DC8;\r\n    --color-green: #5FC37B;\r\n    --color-orange: #FF9900;\r\n    --color-red: #F44565;\r\n    --color-purple: #B9027B;\r\n    --color-brown: #A97444;\r\n\r\n    --color-black: #000000;\r\n    --color-black-80: #333333;\r\n    --color-black-60: #666666;\r\n    --color-black-40: #999999;\r\n    --color-black-20: #cccccc;\r\n    --color-black-8: #ebebeb;\r\n    --color-black-3: #f7f7f7;\r\n    --color-white: #ffffff;\r\n}\r\n\r\n// на случай если CSS Properties не срабатывает с градиентом и прозрачностью\r\n// $grey_gradient: linear-gradient(127.8deg, #C7CBD7 -5.9%, #484D5C 98.01%);\r\n",".user-card {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  height: fit-content;\r\n  padding: to-rem(12);\r\n  flex-direction: column;\r\n\r\n  @media (min-width: 1336px) {\r\n    flex-direction: row;\r\n  }\r\n\r\n  &__content {\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin-bottom: to-rem(16);\r\n    flex: none;\r\n\r\n    @media (min-width: 1336px) {\r\n      width: fit-content;\r\n      margin-bottom: 0;\r\n    }\r\n  }\r\n\r\n  &__number {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: to-rem(70);\r\n    padding-right: to-rem(16);\r\n    flex: none;\r\n  }\r\n\r\n  &__border {\r\n    position: relative;\r\n    display: block;\r\n    height: 100%;\r\n\r\n    &::before {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 0;\r\n      display: block;\r\n      width: to-rem(4);\r\n      height: 80%;\r\n      transform: translateY(-50%);\r\n      content: \" \";\r\n      background-color: var(--color-black-3);\r\n    }\r\n  }\r\n\r\n  &__box {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n\r\n  &__info {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: to-rem(0, 10);\r\n\r\n    @media (min-width: 1336px) {\r\n      padding: to-rem(0, 16);\r\n    }\r\n  }\r\n\r\n  &__avatar {\r\n    overflow: hidden;\r\n    display: block;\r\n    width: to-rem(72);\r\n    height: to-rem(72);\r\n    margin-right: to-rem(16);\r\n    border: to-rem(3) solid var(--color-black-3);\r\n    border-radius: 100%;\r\n    flex: none;\r\n\r\n    @media (min-width: 1440px) {\r\n      width: to-rem(92);\r\n      height: to-rem(92);\r\n    }\r\n\r\n    img {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &__name {\r\n    margin-bottom: to-rem(4);\r\n  }\r\n\r\n  &__statistics {\r\n    display: grid;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    grid-template-columns: repeat(3, 1fr);\r\n\r\n    @media (min-width: 1336px) {\r\n      display: flex;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n\r\n      @media (min-width: 670px) {\r\n        margin-right: to-rem(4);\r\n      }\r\n    }\r\n\r\n    &-col {\r\n      height: 100%;\r\n      padding: to-rem(0, 16);\r\n\r\n      @media (min-width: 670px) {\r\n        display: flex;\r\n        align-items: center;\r\n      }\r\n\r\n      @media (min-width: 1336px) {\r\n        align-items: flex-start;\r\n        justify-content: flex-start;\r\n        flex-direction: column;\r\n      }\r\n\r\n      @media (min-width: 1440px) {\r\n        min-width: to-rem(150);\r\n      }\r\n\r\n      &:first-child {\r\n        &::before {\r\n          @media (max-width: 1440px) {\r\n            display: none;\r\n          }\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        height: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__line {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n    }\r\n\r\n    &-value {\r\n      margin-left: to-rem(5);\r\n      color: var(--color-black-40);\r\n    }\r\n  }\r\n\r\n  &__accepting-orders {\r\n    color: var(--color-green);\r\n\r\n    &--not {\r\n      color: var(--color-orange);\r\n    }\r\n  }\r\n\r\n  &__rating {\r\n    color: var(--color-orange);\r\n\r\n    &--positive {\r\n      color: var(--color-green);\r\n    }\r\n\r\n    &--negative {\r\n      color: var(--color-red);\r\n    }\r\n  }\r\n}",".catalog {\r\n\r\n    &__list {\r\n        display: none;\r\n    }\r\n}",".menu {\r\n\r\n    &__list {\r\n\r\n    }\r\n\r\n    &__item {\r\n        display: inline-block;\r\n    }\r\n}",".header {\r\n\r\n    &__wrapper{\r\n        @include flex-wrapper();\r\n    }\r\n\r\n    &__inner {\r\n        border: 1px solid gray;\r\n\r\n        &--nav {\r\n            @include flex-wrapper();\r\n            align-items: center;\r\n        }\r\n    }\r\n\r\n    &__logo {\r\n        width: 126px;\r\n        height: 30px;\r\n\r\n        img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: contain;\r\n            object-position: left center;\r\n        }\r\n    }\r\n\r\n    &__btn-nav {\r\n        display: none;\r\n    }\r\n}",".ui-colors-list {\r\n  &__title {\r\n    margin-bottom: to-rem(24);\r\n  }\r\n\r\n  &__items {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: to-rem(16);\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: to-rem(32);\r\n      padding-bottom: to-rem(32);\r\n      border-bottom: to-rem(3) solid rgba(247, 248, 249, 1);\r\n    }\r\n  }\r\n\r\n  &__item {\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    &:not(:last-child) {\r\n      margin-right: to-rem(8);\r\n    }\r\n\r\n    &-name {\r\n      margin-bottom: to-rem(4);\r\n    }\r\n\r\n    &-box {\r\n      width: to-rem(100);\r\n      height: to-rem(100);\r\n      border: to-rem(3) solid rgba(247, 247, 247, 1);\r\n      border-radius: to-rem(20);\r\n    }\r\n  }\r\n}"]}
\ No newline at end of file
+{"version":3,"sources":["vendor/import/_normalize.scss","base/_general.scss","helpers/_variables.scss","helpers/_mixins.scss","base/_controls.scss","base/_colors.scss","../blocks/components/user-card/user-card.scss","../blocks/components/catalog/_catalog.scss","../blocks/components/menu/_menu.scss","../blocks/components/n-search/_n-search.scss","../blocks/modules/header/header.scss","../blocks/modules/ui-colors-list/ui-colors-list.scss"],"names":[],"mappings":"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;EACA;;AAEA;EATF;IAUI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;IACA;;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAGF;EATF;IAUI;IACA;IACA;;;AAGF;EAfF;IAgBI;;;AAKE;EADF;IAEI;;;AAKN;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;;ACnLN;EACI;;AAIQ;EACI,OLJA;;AKMA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OL9BS;EK+BT;;AJoFJ;EI7FA;IAYQ;;;AJ2ER;EIvFA;IAgBQ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA,YLxDK;EKyDL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBL/DA;EKgEA;EACA;EACA;EACA;EACA;EACA;;AJqCJ;EIrDA;IAmBQ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAMJ;EACI;EACA;EACA;EACA;EACA;;AJCR;EINI;IAQQ;IACA;;;AAIR;EACI;EACA;EACA;EACA;;AJXR;EIOI;IAOQ;;;AAKJ;EACI;;;ACjIZ;EACI;;AAGJ;EACI;EACA;;AAGI;EACI;EACA;EACA;EACA;;ALsGZ;EK1GQ;IAOQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AL+EZ;EKzGA;IA+BQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YN7CK;;ACiHT;EK5EA;IAWQ;IACA;;;AAGJ;EACI,ONvDK;;;AODjB;EACI;;AAIQ;EACI,kBPDJ;EOEI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ANwFJ;EMpGA;IAeQ;;;AAMJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAKI;EACI;EACA;EACA;EACA;EACA,YPvDX;;AO2DW;EACI;;AAOpB;EACI;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBPrFA;EOsFA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAIJ;EACI;EACA;EACA;EACA;;ANUJ;EMdA;IAOQ;;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YP/HK;;AOiIL;EACI;EACA;EACA,YPpIC;EOqID;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI,kBPpJR;;AOyJJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/LR;EACI;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAGJ;EACI;;AAIR;EP0EA;EACA;EACA;;AOtEI;EACI;;AAGJ;EPgEJ;EACA;EACA;EO/DQ;;APgFR;EO7EI;IAEQ,YRhCH;IQiCG;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;APmDZ;EOjEI;IAkBQ;IACA;;;AAOR;EACI;;APkDR;EOnDI;IAIQ;IACA;;EAEA;IACI;IACA;IACA;;;AAKZ;EACI;;APyCR;EO1CI;IAIQ;;;APgCZ;EOpCI;IAQQ;;;AAIR;EACI;;AP6BR;EO9BI;IAIQ;;;APoBZ;EOxBI;IAQQ;;;APgBZ;EOpDA;IAyCQ;IACA;;EAEA;IACI;;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,ORjIS;EQkIT;;AAEA;EACI;EACA,ORnIJ;;AQuIJ;EACI;EACA;;AP/BJ;EO6BA;IAKQ;IAEA;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;APpDJ;EOmDA;IAIQ;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIR;EACI;;;AC/KN;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA","file":"../ui.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\r\n\r\n/* Document\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Correct the line height in all browsers.\r\n * 2. Prevent adjustments of font size after orientation changes in iOS.\r\n */\r\n\r\nhtml {\r\n\tline-height: 1.15; /* 1 */\r\n\t-webkit-text-size-adjust: 100%; /* 2 */\r\n}\r\n\r\n/* Sections\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the margin in all browsers.\r\n */\r\n\r\nbody {\r\n\tmargin: 0;\r\n}\r\n\r\n/**\r\n * Render the `main` element consistently in IE.\r\n */\r\n\r\nmain {\r\n\tdisplay: block;\r\n}\r\n\r\n/**\r\n * Correct the font size and margin on `h1` elements within `section` and\r\n * `article` contexts in Chrome, Firefox, and Safari.\r\n */\r\n\r\nh1 {\r\n\tfont-size: 2em;\r\n\tmargin: 0.67em 0;\r\n}\r\n\r\n/* Grouping content\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Add the correct box sizing in Firefox.\r\n * 2. Show the overflow in Edge and IE.\r\n */\r\n\r\nhr {\r\n\tbox-sizing: content-box; /* 1 */\r\n\theight: 0; /* 1 */\r\n\toverflow: visible; /* 2 */\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\npre {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/* Text-level semantics\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the gray background on active links in IE 10.\r\n */\r\n\r\na {\r\n\tbackground-color: transparent;\r\n}\r\n\r\n/**\r\n * 1. Remove the bottom border in Chrome 57-\r\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\r\n */\r\n\r\nabbr[title] {\r\n\tborder-bottom: none; /* 1 */\r\n\ttext-decoration: underline; /* 2 */\r\n\ttext-decoration: underline dotted; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font weight in Chrome, Edge, and Safari.\r\n */\r\n\r\nb,\r\nstrong {\r\n\tfont-weight: bolder;\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\ncode,\r\nkbd,\r\nsamp {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font size in all browsers.\r\n */\r\n\r\nsmall {\r\n\tfont-size: 80%;\r\n}\r\n\r\n/**\r\n * Prevent `sub` and `sup` elements from affecting the line height in\r\n * all browsers.\r\n */\r\n\r\nsub,\r\nsup {\r\n\tfont-size: 75%;\r\n\tline-height: 0;\r\n\tposition: relative;\r\n\tvertical-align: baseline;\r\n}\r\n\r\nsub {\r\n\tbottom: -0.25em;\r\n}\r\n\r\nsup {\r\n\ttop: -0.5em;\r\n}\r\n\r\n/* Embedded content\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the border on images inside links in IE 10.\r\n */\r\n\r\nimg {\r\n\tborder-style: none;\r\n}\r\n\r\n/* Forms\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Change the font styles in all browsers.\r\n * 2. Remove the margin in Firefox and Safari.\r\n */\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n\tfont-family: inherit; /* 1 */\r\n\tfont-size: 100%; /* 1 */\r\n\tline-height: 1.15; /* 1 */\r\n\tmargin: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Show the overflow in IE.\r\n * 1. Show the overflow in Edge.\r\n */\r\n\r\nbutton,\r\ninput { /* 1 */\r\n\toverflow: visible;\r\n}\r\n\r\n/**\r\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\r\n * 1. Remove the inheritance of text transform in Firefox.\r\n */\r\n\r\nbutton,\r\nselect { /* 1 */\r\n\ttext-transform: none;\r\n}\r\n\r\n/**\r\n * Correct the inability to style clickable types in iOS and Safari.\r\n */\r\n\r\nbutton,\r\n[type=\"button\"],\r\n[type=\"reset\"],\r\n[type=\"submit\"] {\r\n\t-webkit-appearance: button;\r\n}\r\n\r\n/**\r\n * Remove the inner border and padding in Firefox.\r\n */\r\n\r\nbutton::-moz-focus-inner,\r\n[type=\"button\"]::-moz-focus-inner,\r\n[type=\"reset\"]::-moz-focus-inner,\r\n[type=\"submit\"]::-moz-focus-inner {\r\n\tborder-style: none;\r\n\tpadding: 0;\r\n}\r\n\r\n/**\r\n * Restore the focus styles unset by the previous rule.\r\n */\r\n\r\nbutton:-moz-focusring,\r\n[type=\"button\"]:-moz-focusring,\r\n[type=\"reset\"]:-moz-focusring,\r\n[type=\"submit\"]:-moz-focusring {\r\n\toutline: 1px dotted ButtonText;\r\n}\r\n\r\n/**\r\n * Correct the padding in Firefox.\r\n */\r\n\r\nfieldset {\r\n\tpadding: 0.35em 0.75em 0.625em;\r\n}\r\n\r\n/**\r\n * 1. Correct the text wrapping in Edge and IE.\r\n * 2. Correct the color inheritance from `fieldset` elements in IE.\r\n * 3. Remove the padding so developers are not caught out when they zero out\r\n *    `fieldset` elements in all browsers.\r\n */\r\n\r\nlegend {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tcolor: inherit; /* 2 */\r\n\tdisplay: table; /* 1 */\r\n\tmax-width: 100%; /* 1 */\r\n\tpadding: 0; /* 3 */\r\n\twhite-space: normal; /* 1 */\r\n}\r\n\r\n/**\r\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\r\n */\r\n\r\nprogress {\r\n\tvertical-align: baseline;\r\n}\r\n\r\n/**\r\n * Remove the default vertical scrollbar in IE 10+.\r\n */\r\n\r\ntextarea {\r\n\toverflow: auto;\r\n}\r\n\r\n/**\r\n * 1. Add the correct box sizing in IE 10.\r\n * 2. Remove the padding in IE 10.\r\n */\r\n\r\n[type=\"checkbox\"],\r\n[type=\"radio\"] {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tpadding: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Correct the cursor style of increment and decrement buttons in Chrome.\r\n */\r\n\r\n[type=\"number\"]::-webkit-inner-spin-button,\r\n[type=\"number\"]::-webkit-outer-spin-button {\r\n\theight: auto;\r\n}\r\n\r\n/**\r\n * 1. Correct the odd appearance in Chrome and Safari.\r\n * 2. Correct the outline style in Safari.\r\n */\r\n\r\n[type=\"search\"] {\r\n\t-webkit-appearance: textfield; /* 1 */\r\n\toutline-offset: -2px; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove the inner padding in Chrome and Safari on macOS.\r\n */\r\n\r\n[type=\"search\"]::-webkit-search-decoration {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\n/**\r\n * 1. Correct the inability to style clickable types in iOS and Safari.\r\n * 2. Change font properties to `inherit` in Safari.\r\n */\r\n\r\n::-webkit-file-upload-button {\r\n\t-webkit-appearance: button; /* 1 */\r\n\tfont: inherit; /* 2 */\r\n}\r\n\r\n/* Interactive\r\n   ========================================================================== */\r\n\r\n/*\r\n * Add the correct display in Edge, IE 10+, and Firefox.\r\n */\r\n\r\ndetails {\r\n\tdisplay: block;\r\n}\r\n\r\n/*\r\n * Add the correct display in all browsers.\r\n */\r\n\r\nsummary {\r\n\tdisplay: list-item;\r\n}\r\n\r\n/* Misc\r\n   ========================================================================== */\r\n\r\n/**\r\n * Add the correct display in IE 10+.\r\n */\r\n\r\ntemplate {\r\n\tdisplay: none;\r\n}\r\n\r\n/**\r\n * Add the correct display in IE 10.\r\n */\r\n\r\n[hidden] {\r\n\tdisplay: none;\r\n}","h1, h2, h3, h4, h5, h6, ul {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n*{\r\n  box-sizing: border-box;\r\n}\r\n\r\nbutton,textarea{\r\n  -webkit-appearance: none;\r\n}\r\n\r\nhtml, body {\r\n  min-width: 320px;\r\n  scroll-behavior: smooth;\r\n  overflow-x: clip !important;\r\n}\r\n\r\nbody {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  height: 100%;\r\n  min-height: 100vh;\r\n  min-width: 320px;\r\n  font-family: $primary_font;\r\n  font-size: 16px;\r\n  line-height: 120%;\r\n  color: var(--color-black);\r\n  font-style: normal;\r\n  letter-spacing: normal;\r\n  flex-direction: column;\r\n\r\n  &.on-scroll {\r\n      margin-top: 76px;\r\n  }\r\n}\r\n\r\n.main {\r\n    z-index: z(\"l-default\");\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n}\r\n\r\n.l {\r\n    &-default {\r\n        margin: 0 auto;\r\n        padding: 0 to-rem(10);\r\n        transition: all .4s ease-in-out;\r\n\r\n        @media (min-width: 640px) {\r\n            padding: 0 to-rem(20);\r\n        }\r\n\r\n        @media (min-width: 1024px) {\r\n            max-width: to-rem(1200);\r\n        }\r\n\r\n        @media (min-width: 1200px) {\r\n            max-width: to-rem(1440);\r\n        }\r\n\r\n        @media (min-width: 1500px) {\r\n            padding: 0;\r\n        }\r\n    }\r\n\r\n    &-main {\r\n\r\n    }\r\n\r\n    &-page {\r\n      &__title {\r\n        margin-bottom: to-rem(24);\r\n\r\n        @media (min-width: 1024px) {\r\n          margin-bottom: to-rem(32);\r\n        }\r\n      }\r\n    }\r\n}\r\n\r\n.lazy  {\r\n    opacity: 0;\r\n}\r\n\r\n.loading,\r\n.loaded,\r\n[data-was-processed=\"true\"],\r\n[data-ll-status=\"entered\"] {\r\n    opacity: 1;\r\n    @include tr(all);\r\n}\r\n\r\n.hidden {\r\n    display: none !important;\r\n    opacity: 0 !important;\r\n}\r\n\r\n.show,\r\n.show_btn {\r\n    display: flex !important;\r\n}\r\n\r\ntextarea,\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    text-decoration: none;\r\n    color: inherit;\r\n    outline: none;\r\n    @include tr(all);\r\n}\r\n\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    cursor: pointer;\r\n}\r\n\r\ninput[type=\"submit\"]:disabled {\r\n    cursor: not-allowed;\r\n    opacity: .5;\r\n}\r\n\r\nbutton {\r\n    background: none;\r\n    border: none;\r\n}\r\n\r\ninput,\r\nvideo {\r\n    border: none;\r\n    outline: none;\r\n}\r\n\r\n.fancybox-content{\r\n    padding: 0;\r\n}\r\n\r\ninput, textarea {\r\n    &::placeholder {\r\n        @include tr(\"all\");\r\n    }\r\n    &:focus {\r\n        &::placeholder {\r\n            opacity: 0 !important;\r\n        }\r\n    }\r\n}\r\n\r\ninput,\r\ntextarea,\r\nbutton,\r\nselect,\r\na {\r\n\t-webkit-tap-highlight-color: transparent;\r\n}\r\n\r\ninput::-webkit-outer-spin-button,\r\ninput::-webkit-inner-spin-button {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\nimg {\r\n\tpointer-events: none;\r\n\timage-rendering: -webkit-optimize-contrast !important;\r\n}\r\n\r\nsub {\r\n\tvertical-align: baseline;\r\n\tposition: relative;\r\n\tbottom: -0.4em;\r\n}\r\n\r\nimg {\r\n    display: block;\r\n    max-width: 100%;\r\n}\r\n\r\n.loader {\r\n    z-index: z(\"loader\");\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100vh;\r\n    background: #fff;\r\n}\r\n\r\n.fancybox-content {\r\n    z-index: 99994;\r\n    background: none;\r\n}\r\n\r\n.overflow-y-hidden {\r\n    overflow-y: hidden !important;\r\n}\r\n\r\n@keyframes show {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}","$primary_font: \"Montserrat\", sans-serif;\r\n$blackTextColor: #222222;\r\n$grayTextColor: #999;\r\n$transition: 0.25s;\r\n$white: #fff;\r\n$bgNSearch: #F7F7F7;","// миксин для создания масштабируемых элементов, чтобы поддерживать соотношение. @include responsive-ratio(16,9)\r\n@mixin responsive-ratio($x, $y, $pseudo: false) {\r\n    $padding: unquote(($y / $x) * 100 + \"%\");\r\n    @if $pseudo {\r\n      &:before {\r\n        @include pseudo($pos: relative);\r\n        width: 100%;\r\n        padding-top: $padding;\r\n      }\r\n    } @else {\r\n      padding-top: $padding;\r\n    }\r\n  }\r\n  \r\n  //css треугольники\r\n  @mixin css-triangle(\r\n    $color,\r\n    $direction,\r\n    $size: 6px,\r\n    $position: absolute,\r\n    $round: false\r\n  ) {\r\n    @include pseudo($pos: $position);\r\n    width: 0;\r\n    height: 0;\r\n    @if $round {\r\n      border-radius: 3px;\r\n    }\r\n    @if $direction == down {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-top: $size solid $color;\r\n      margin-top: 0 - round($size / 2.5);\r\n    } @else if $direction == up {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-bottom: $size solid $color;\r\n      margin-bottom: 0 - round($size / 2.5);\r\n    } @else if $direction == right {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-left: $size solid $color;\r\n      margin-right: -$size;\r\n    } @else if $direction == left {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-right: $size solid $color;\r\n      margin-left: -$size;\r\n    }\r\n  }\r\n  \r\n  //transition\r\n  @mixin tr($properties...) {\r\n    $declarations: ();\r\n  \r\n    @each $declaration in $properties {\r\n        $duration: .4s;\r\n        $delay: false;\r\n        $timing-function: ease;\r\n        $property: all;\r\n  \r\n        @if type-of($declaration) == 'map' {\r\n            $duration: if(map_get($declaration, 'duration'), #{map_get($declaration, 'duration')}, $duration);\r\n            $delay: if(map_get($declaration, 'delay'), #{map_get($declaration, 'delay')}, $delay);\r\n            $timing-function: if(map_get($declaration, 'timing-function'), #{map_get($declaration, 'timing-function')}, $timing-function);\r\n            $property: if(map_get($declaration, 'property'), #{map_get($declaration, 'property')}, $property);\r\n        } @else {\r\n            $property: $declaration;\r\n        }\r\n        \r\n        $delayValue: if($delay, ' ' + $delay, '');\r\n        $declarations: append($declarations, #{$property + ' ' + $duration + $delayValue + ' ' + $timing-function}, comma);\r\n    }\r\n  \r\n    transition: $declarations;\r\n  }\r\n\r\n\r\n  @mixin scale($css, $value, $tabletValue) {\r\n    #{$css}: calc($value / 1920) * 100 + vw;\r\n\r\n    @include for-large {\r\n        #{$css}: $value + px;\r\n    }\r\n\r\n    @include for-tablet {\r\n        #{$css}: $tabletValue + px;\r\n    }\r\n}\r\n  \r\n@mixin flex-wrapper {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n}\r\n  \r\n\r\n@mixin for-mobile {\r\n    @media (max-width: 768px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-tablet {\r\n    @media (max-width: 992px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-sm-desktop {\r\n    @media (max-width: 1279px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-desktop {\r\n    @media (max-width: 1439px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-large {\r\n    @media(min-width: 2000px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@function vw($value) {\r\n    @return calc($value / 1920) * 100 + vw;\r\n}\r\n  ",".f {\r\n    &-bold {\r\n        font-weight: 700;\r\n    }\r\n\r\n    &-semibold {\r\n        font-weight: 600;\r\n    }\r\n\r\n    &-medium {\r\n        font-weight: 500;\r\n    }\r\n\r\n    &-h1 {\r\n        font-size: to-rem(40);\r\n        font-weight: 700;\r\n        line-height: to-rem(48);\r\n\r\n        @media (min-width: 992px) {\r\n            font-size: to-rem(48);\r\n            line-height: to-rem(52);\r\n        }\r\n    }\r\n\r\n    &-h2 {\r\n        font-size: to-rem(32);\r\n        font-weight: 700;\r\n        line-height: to-rem(40);\r\n    }\r\n\r\n    &-h3 {\r\n        font-size: to-rem(24);\r\n        font-weight: 700;\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-xl {\r\n        font-size: to-rem(20);\r\n        line-height: to-rem(32);\r\n    }\r\n\r\n    &-l {\r\n        font-size: to-rem(18);\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-m {\r\n        font-size: to-rem(16);\r\n        line-height: to-rem(24);\r\n    }\r\n\r\n    &-s {\r\n        font-size: to-rem(14);\r\n        line-height: to-rem(20);\r\n    }\r\n\r\n    &-xs {\r\n        font-size: to-rem(12);\r\n        line-height: to-rem(16);\r\n    }\r\n}",":root {\r\n    --color-l-blue: #DFEBF4;\r\n    --color-l-green: #DFF3E5;\r\n    --color-l-orange: #FFEBCC;\r\n    --color-l-red: #FDDAE0;\r\n    --color-l-purple: #F1CCE5;\r\n    --color-l-brown: #EEE3DA;\r\n\r\n    --color-blue: #609DC8;\r\n    --color-green: #5FC37B;\r\n    --color-orange: #FF9900;\r\n    --color-red: #F44565;\r\n    --color-purple: #B9027B;\r\n    --color-brown: #A97444;\r\n\r\n    --color-black: #000000;\r\n    --color-black-80: #333333;\r\n    --color-black-60: #666666;\r\n    --color-black-40: #999999;\r\n    --color-black-20: #cccccc;\r\n    --color-black-8: #ebebeb;\r\n    --color-black-3: #f7f7f7;\r\n    --color-white: #ffffff;\r\n}\r\n\r\n// на случай если CSS Properties не срабатывает с градиентом и прозрачностью\r\n// $grey_gradient: linear-gradient(127.8deg, #C7CBD7 -5.9%, #484D5C 98.01%);\r\n",".user-card {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  height: fit-content;\r\n  padding: to-rem(12);\r\n  flex-direction: column;\r\n\r\n  @media (min-width: 1336px) {\r\n    flex-direction: row;\r\n  }\r\n\r\n  &__content {\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin-bottom: to-rem(16);\r\n    flex: none;\r\n\r\n    @media (min-width: 1336px) {\r\n      width: fit-content;\r\n      margin-bottom: 0;\r\n    }\r\n  }\r\n\r\n  &__number {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: to-rem(70);\r\n    padding-right: to-rem(16);\r\n    flex: none;\r\n  }\r\n\r\n  &__border {\r\n    position: relative;\r\n    display: block;\r\n    height: 100%;\r\n\r\n    &::before {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 0;\r\n      display: block;\r\n      width: to-rem(4);\r\n      height: 80%;\r\n      transform: translateY(-50%);\r\n      content: \" \";\r\n      background-color: var(--color-black-3);\r\n    }\r\n  }\r\n\r\n  &__box {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n\r\n  &__info {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: to-rem(0, 10);\r\n\r\n    @media (min-width: 1336px) {\r\n      padding: to-rem(0, 16);\r\n    }\r\n  }\r\n\r\n  &__avatar {\r\n    overflow: hidden;\r\n    display: block;\r\n    width: to-rem(72);\r\n    height: to-rem(72);\r\n    margin-right: to-rem(16);\r\n    border: to-rem(3) solid var(--color-black-3);\r\n    border-radius: 100%;\r\n    flex: none;\r\n\r\n    @media (min-width: 1440px) {\r\n      width: to-rem(92);\r\n      height: to-rem(92);\r\n    }\r\n\r\n    img {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &__name {\r\n    margin-bottom: to-rem(4);\r\n  }\r\n\r\n  &__statistics {\r\n    display: grid;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    grid-template-columns: repeat(3, 1fr);\r\n\r\n    @media (min-width: 1336px) {\r\n      display: flex;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n\r\n      @media (min-width: 670px) {\r\n        margin-right: to-rem(4);\r\n      }\r\n    }\r\n\r\n    &-col {\r\n      height: 100%;\r\n      padding: to-rem(0, 16);\r\n\r\n      @media (min-width: 670px) {\r\n        display: flex;\r\n        align-items: center;\r\n      }\r\n\r\n      @media (min-width: 1336px) {\r\n        align-items: flex-start;\r\n        justify-content: flex-start;\r\n        flex-direction: column;\r\n      }\r\n\r\n      @media (min-width: 1440px) {\r\n        min-width: to-rem(150);\r\n      }\r\n\r\n      &:first-child {\r\n        &::before {\r\n          @media (max-width: 1440px) {\r\n            display: none;\r\n          }\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        height: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__line {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n    }\r\n\r\n    &-value {\r\n      margin-left: to-rem(5);\r\n      color: var(--color-black-40);\r\n    }\r\n  }\r\n\r\n  &__accepting-orders {\r\n    color: var(--color-green);\r\n\r\n    &--not {\r\n      color: var(--color-orange);\r\n    }\r\n  }\r\n\r\n  &__rating {\r\n    color: var(--color-orange);\r\n\r\n    &--positive {\r\n      color: var(--color-green);\r\n    }\r\n\r\n    &--negative {\r\n      color: var(--color-red);\r\n    }\r\n  }\r\n}",".catalog {\r\n    position: relative;\r\n\r\n    &:hover {\r\n        .catalog {\r\n            &__btn {\r\n                color: $grayTextColor;\r\n\r\n                &::before {\r\n                    background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n                }\r\n            }\r\n\r\n            &__list {\r\n                padding: 16px 20px;\r\n                padding-top: 60px;\r\n                opacity: 1;\r\n                visibility: visible;\r\n                height: auto;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__btn {\r\n        position: relative;\r\n        z-index: 2;\r\n        font-family: $primary_font, sans-serif;\r\n        font-weight: 500;\r\n        font-size: 16px;\r\n        text-transform: uppercase;\r\n        line-height: 150%;\r\n        color: $blackTextColor;\r\n        padding-left: 32px;\r\n\r\n        @include for-desktop {\r\n            font-size: 14px;\r\n        }\r\n\r\n        @include for-sm-desktop {\r\n            display: none;\r\n        }\r\n\r\n        &::before {\r\n            position: absolute;\r\n            content: \"\";\r\n            display: block;\r\n            top: 0;\r\n            left: 0;\r\n            width: 24px;\r\n            height: 24px;\r\n            background-repeat: no-repeat;\r\n            background-size: 100% 100%;\r\n            background-position: center;\r\n            background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 6H19.5V8H4.5V6Z' fill='black' /%3e%3cpath d='M4.5 11H19.5V13H4.5V11Z' fill='black' /%3e%3cpath d='M4.5 16H19.5V18H4.5V16Z' fill='black' /%3e%3c/svg%3e\");\r\n        }\r\n    }\r\n\r\n    &__list {\r\n        position: absolute;\r\n        transition: $transition;\r\n        z-index: 1;\r\n        top: -14px;\r\n        left: 50%;\r\n        border: 4px solid #ebebeb;\r\n        border-radius: 20px;\r\n        transform: translateX(-50%);\r\n        width: calc(100% + 40px);\r\n        background-color: $white;\r\n        padding-top: 60px;\r\n        box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        height: 0;\r\n        padding: 0;\r\n\r\n        @include for-sm-desktop {\r\n            position: relative;\r\n            top: 0;\r\n            left: 0;\r\n            transform: none;\r\n            opacity: 1;\r\n            visibility: visible;\r\n            height: auto;\r\n            width: 100%;\r\n            border: none;\r\n            box-shadow: none;\r\n            background-color: transparent;\r\n            padding-left: 0;\r\n            margin: 0;\r\n        }\r\n    }\r\n\r\n    &__item {\r\n        text-decoration: none;\r\n        list-style: none;\r\n        margin-bottom: 16px;\r\n\r\n        &:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n    }\r\n\r\n    &__link {\r\n\r\n        img {\r\n            display: inline-block;\r\n            vertical-align: middle;\r\n            margin-right: 12px;\r\n            width: 36px;\r\n            height: 36px;\r\n\r\n            @include for-sm-desktop {\r\n                width: 26px;\r\n                height: 26px;\r\n            }\r\n        }\r\n\r\n        span {\r\n            font-family: $primary_font, sans-serif;\r\n            font-weight: 400;\r\n            font-size: 16px;\r\n            line-height: 150%;\r\n\r\n            @include for-sm-desktop {\r\n                font-size: 14px;\r\n            }\r\n        }\r\n\r\n        &:hover {\r\n            span {\r\n                text-decoration: underline;\r\n            }\r\n        }\r\n    }\r\n}",".menu {\r\n    &__align {\r\n        display: none;\r\n    }\r\n\r\n    &__item {\r\n        position: relative;\r\n        display: inline-block;\r\n\r\n        &.active {\r\n            .menu__link {\r\n                font-weight: 700;\r\n                font-size: 16px;\r\n                line-height: 150%;\r\n                color: #000;\r\n\r\n                @include for-desktop {\r\n                    font-size: 14px;\r\n                }\r\n            }\r\n\r\n            &::before {\r\n                position: absolute;\r\n                content: \"\";\r\n                display: block;\r\n                width: 6px;\r\n                height: 6px;\r\n                transform: translateY(-50%);\r\n                background-color: #000;\r\n                border-radius: 50%;\r\n                top: 50%;\r\n                left: 0;\r\n            }\r\n        }\r\n\r\n        @include for-sm-desktop {\r\n            display: block;\r\n        }\r\n    }\r\n\r\n    &__link {\r\n        display: block;\r\n        padding: 10px 20px;\r\n        font-family: $primary_font, sans-serif;\r\n        font-weight: 400;\r\n        font-size: 16px;\r\n        line-height: 150%;\r\n        color: #666;\r\n        transition: $transition;\r\n\r\n        @include for-desktop {\r\n            padding: 8px 12px;\r\n            font-size: 14px;\r\n        }\r\n\r\n        &:hover {\r\n            color: $blackTextColor;\r\n        }\r\n    }\r\n}",".n-search {\r\n    position: relative;\r\n\r\n    &.active {\r\n        .n-search {\r\n            &__wrapper {\r\n                background-color: $bgNSearch;\r\n                display: flex;\r\n            }\r\n\r\n            &__button {\r\n                background-color: #000;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__wrapper {\r\n        position: absolute;\r\n        z-index: 1;\r\n        display: none;\r\n        align-items: center;\r\n        padding: 7px 16px;\r\n        padding-right: 50px;\r\n        border-radius: 12px;\r\n        left: 20px;\r\n        top: 50%;\r\n        transform: translate(-100%, -50%);\r\n        width: 800px;\r\n        background-color: #fff;\r\n\r\n        @include for-desktop {\r\n            width: 610px;\r\n        }\r\n    }\r\n\r\n    &__inner {\r\n\r\n        &--select-catalog {\r\n            position: relative;\r\n            min-width: 220px;\r\n            border-right: 4px solid #ebebeb;\r\n\r\n            &::after {\r\n                position: absolute;\r\n                content: \"\";\r\n                top: 100%;\r\n                width: calc(100% + 20px);\r\n                left: -20px;\r\n                height: 20px;\r\n            }\r\n\r\n            &:hover {\r\n                .n-search {\r\n                    &__list {\r\n                        opacity: 1;\r\n                        visibility: visible;\r\n                        height: auto;\r\n                        z-index: 3;\r\n                        transition: $transition;\r\n                    }\r\n\r\n                    &__button-catalog {\r\n                        &::before {\r\n                            background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        &--search-input {\r\n            flex-grow: 2;\r\n            padding-left: 20px;\r\n        }\r\n\r\n        input {\r\n            width: 100%;\r\n            background-color: transparent;\r\n        }\r\n    }\r\n\r\n    &__list {\r\n        position: absolute;\r\n        z-index: 1;\r\n        top: 46px;\r\n        left: -20px;\r\n        border: 4px solid #ebebeb;\r\n        border-radius: 20px;\r\n        width: 240px;\r\n        background-color: $white;\r\n        padding: 16px 8px;\r\n        box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        height: 0;\r\n    }\r\n\r\n    &__item {\r\n        display: block;\r\n        \r\n    }\r\n\r\n    &__link {\r\n        display: block;\r\n        padding: 8px 12px;\r\n        border-radius: 4px;\r\n        transition: none;\r\n\r\n        @include for-desktop {\r\n            font-size: 14px;\r\n        }\r\n\r\n        &:hover {\r\n            background-color: #f1f1f1;\r\n            color: #363636;\r\n        }\r\n\r\n        &:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n    }\r\n\r\n    &__button {\r\n        position: relative;\r\n        cursor: pointer;\r\n        display: block;\r\n        z-index: 2;\r\n        width: 60px;\r\n        height: 44px;\r\n        border-radius: 16px;\r\n        transition: $transition;\r\n\r\n        &::after {\r\n            position: absolute;\r\n            content: \"\";\r\n            transition: $transition;\r\n            display: block;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 32px;\r\n            height: 32px;\r\n            transform: translate(-50%, -50%);\r\n            mask-repeat: no-repeat;\r\n            mask-position: center center;\r\n            background-color: #dedee2;\r\n            mask-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 9.84871 15.3729 11.551 14.3199 12.9056L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L12.9056 14.3199C11.551 15.3729 9.84871 16 8 16C3.58172 16 0 12.4183 0 8Z' fill='%238B8DA3' /%3e%3c/svg%3e\");\r\n        }\r\n\r\n        &:hover {\r\n            background-color: #000;\r\n\r\n            &:after {\r\n                background-color: $white;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__button-catalog {\r\n        position: relative;\r\n        font-family: \"Montserrat\", sans-serif;\r\n        font-weight: 400;\r\n        font-size: 16px;\r\n        padding-left: 32px;\r\n        padding-right: 16px;\r\n        line-height: 156%;\r\n        color: #999;\r\n\r\n        &::before {\r\n            position: absolute;\r\n            content: \"\";\r\n            top: 1px;\r\n            left: 0;\r\n            width: 24px;\r\n            height: 24px;\r\n            background-repeat: no-repeat;\r\n            background-size: contain;\r\n            background-position: center center;\r\n            background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9.00001L12 15L18 9.00001' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n        }\r\n    }\r\n\r\n    &__button-close {\r\n        position: absolute;\r\n        cursor: pointer;\r\n        top: 10px;\r\n        right: 40px;\r\n        width: 24px;\r\n        height: 24px;\r\n        background-repeat: no-repeat;\r\n        background-size: contain;\r\n        background-position: center center;\r\n        background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n    }\r\n}",".header {\r\n    box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n    background: #fff;\r\n    padding: 6px 0;\r\n    margin: 0 10px;\r\n    border-radius: 0 0 20px 20px;\r\n\r\n    &.menu-active {\r\n        .header__inner--nav {\r\n            left: 0;\r\n        }\r\n\r\n        .header__overlay {\r\n            display: block;\r\n        }\r\n    }\r\n\r\n    &__wrapper {\r\n        @include flex-wrapper();\r\n    }\r\n\r\n    &__inner {\r\n\r\n        &--logo {\r\n            position: relative;\r\n        }\r\n\r\n        &--nav,\r\n        &--auth {\r\n            @include flex-wrapper();\r\n            align-items: center;\r\n        }\r\n\r\n        &--nav {\r\n            @include for-sm-desktop {\r\n                transition: $transition;\r\n                align-items: flex-start;\r\n                overflow-y: auto;\r\n                position: fixed;\r\n                display: block;\r\n                z-index: 3;\r\n                height: 100%;\r\n                left: -380px;\r\n                top: 0;\r\n                padding: 20px 32px 60px;\r\n                width: 360px;\r\n                background-color: #fff;\r\n                box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n            }\r\n\r\n            @include for-mobile {\r\n                width: 100%;\r\n                left: -100%;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &__sub-inner {\r\n        &--logo  {\r\n            display: none;\r\n\r\n            @include for-sm-desktop {\r\n                display: flex;\r\n                justify-content: space-between;\r\n\r\n                .header__logo {\r\n                    display: block;\r\n                    width: 140px;\r\n                    height: 40px;\r\n                }\r\n            }\r\n        }\r\n\r\n        &--catalog {\r\n            margin-right: 60px;\r\n\r\n            @include for-desktop {\r\n                margin-right: 20px;\r\n            }\r\n\r\n            @include for-sm-desktop {\r\n                margin-right: 0;\r\n            }\r\n        }\r\n\r\n        &--search {\r\n            margin-left: 32px;\r\n\r\n            @include for-desktop {\r\n                margin-left: 0;\r\n            }\r\n\r\n            @include for-sm-desktop {\r\n                display: none;\r\n            }\r\n        }\r\n\r\n        @include for-sm-desktop {\r\n            width: 100%;\r\n            margin-bottom: 32px;\r\n\r\n            &:last-child {\r\n                margin-bottom: 0;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__logo {\r\n        position: relative;\r\n        width: 126px;\r\n        height: 30px;\r\n\r\n        img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: contain;\r\n            object-position: left center;\r\n        }\r\n    }\r\n\r\n    &__auth {\r\n        font-family: \"Montserrat\", sans-serif;\r\n        font-weight: 500;\r\n        font-size: 14px;\r\n        line-height: 150%;\r\n        text-transform: uppercase;\r\n        height: auto;\r\n        border-radius: 12px;\r\n        padding: 10px 20px;\r\n        color: $blackTextColor;\r\n        background-color: #F7F7F7;\r\n\r\n        &:hover {\r\n            background: #000;\r\n            color: $white;\r\n        }\r\n    }\r\n\r\n    &__button-open-menu {\r\n        display: none;\r\n        margin-right: 20px;\r\n\r\n        @include for-sm-desktop {\r\n            display: block;\r\n\r\n            width: 32px;\r\n            height: 32px;\r\n            background: url('../img/svg/ico-list-open.svg') no-repeat center / contain;\r\n        }\r\n    }\r\n\r\n    &__button-close-menu {\r\n        cursor: pointer;\r\n        user-select: none;\r\n        display: block;\r\n        width: 32px;\r\n        height: 32px;\r\n        background: url('../img/svg/ico-list-close.svg') no-repeat center / contain;\r\n    }\r\n\r\n    &__overlay {\r\n        display: none;\r\n\r\n        @include for-sm-desktop {\r\n            z-index: 1;\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: #8b8b8b38;\r\n        }\r\n    }\r\n\r\n    &__btn-nav {\r\n        display: none;\r\n    }\r\n}",".ui-colors-list {\r\n  &__title {\r\n    margin-bottom: to-rem(24);\r\n  }\r\n\r\n  &__items {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: to-rem(16);\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: to-rem(32);\r\n      padding-bottom: to-rem(32);\r\n      border-bottom: to-rem(3) solid rgba(247, 248, 249, 1);\r\n    }\r\n  }\r\n\r\n  &__item {\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    &:not(:last-child) {\r\n      margin-right: to-rem(8);\r\n    }\r\n\r\n    &-name {\r\n      margin-bottom: to-rem(4);\r\n    }\r\n\r\n    &-box {\r\n      width: to-rem(100);\r\n      height: to-rem(100);\r\n      border: to-rem(3) solid rgba(247, 247, 247, 1);\r\n      border-radius: to-rem(20);\r\n    }\r\n  }\r\n}"]}
\ No newline at end of file
diff --git a/docs/styles/maps/users.css.map b/docs/styles/maps/users.css.map
index a890630..89185dd 100644
--- a/docs/styles/maps/users.css.map
+++ b/docs/styles/maps/users.css.map
@@ -1 +1 @@
-{"version":3,"sources":["vendor/import/_normalize.scss","base/_general.scss","helpers/_variables.scss","helpers/_mixins.scss","base/_controls.scss","base/_colors.scss","../blocks/components/user-card/user-card.scss","../blocks/components/catalog/_catalog.scss","../blocks/components/menu/_menu.scss","../blocks/modules/header/header.scss","../blocks/modules/users/users.scss"],"names":[],"mappings":"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;EACA;;AAEA;EATF;IAUI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;IACA;;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAGF;EATF;IAUI;IACA;IACA;;;AAGF;EAfF;IAgBI;;;AAKE;EADF;IAEI;;;AAKN;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;;ACjLF;EACI;;;ACGJ;EACI;;;ACLJ;ENyFA;EACA;EACA;;AMvFA;EACI;;AAEA;ENkFJ;EACA;EACA;EMlFQ;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;;;AC3BN;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EAVF;IAWI;;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA","file":"../users.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\r\n\r\n/* Document\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Correct the line height in all browsers.\r\n * 2. Prevent adjustments of font size after orientation changes in iOS.\r\n */\r\n\r\nhtml {\r\n\tline-height: 1.15; /* 1 */\r\n\t-webkit-text-size-adjust: 100%; /* 2 */\r\n}\r\n\r\n/* Sections\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the margin in all browsers.\r\n */\r\n\r\nbody {\r\n\tmargin: 0;\r\n}\r\n\r\n/**\r\n * Render the `main` element consistently in IE.\r\n */\r\n\r\nmain {\r\n\tdisplay: block;\r\n}\r\n\r\n/**\r\n * Correct the font size and margin on `h1` elements within `section` and\r\n * `article` contexts in Chrome, Firefox, and Safari.\r\n */\r\n\r\nh1 {\r\n\tfont-size: 2em;\r\n\tmargin: 0.67em 0;\r\n}\r\n\r\n/* Grouping content\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Add the correct box sizing in Firefox.\r\n * 2. Show the overflow in Edge and IE.\r\n */\r\n\r\nhr {\r\n\tbox-sizing: content-box; /* 1 */\r\n\theight: 0; /* 1 */\r\n\toverflow: visible; /* 2 */\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\npre {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/* Text-level semantics\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the gray background on active links in IE 10.\r\n */\r\n\r\na {\r\n\tbackground-color: transparent;\r\n}\r\n\r\n/**\r\n * 1. Remove the bottom border in Chrome 57-\r\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\r\n */\r\n\r\nabbr[title] {\r\n\tborder-bottom: none; /* 1 */\r\n\ttext-decoration: underline; /* 2 */\r\n\ttext-decoration: underline dotted; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font weight in Chrome, Edge, and Safari.\r\n */\r\n\r\nb,\r\nstrong {\r\n\tfont-weight: bolder;\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\ncode,\r\nkbd,\r\nsamp {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font size in all browsers.\r\n */\r\n\r\nsmall {\r\n\tfont-size: 80%;\r\n}\r\n\r\n/**\r\n * Prevent `sub` and `sup` elements from affecting the line height in\r\n * all browsers.\r\n */\r\n\r\nsub,\r\nsup {\r\n\tfont-size: 75%;\r\n\tline-height: 0;\r\n\tposition: relative;\r\n\tvertical-align: baseline;\r\n}\r\n\r\nsub {\r\n\tbottom: -0.25em;\r\n}\r\n\r\nsup {\r\n\ttop: -0.5em;\r\n}\r\n\r\n/* Embedded content\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the border on images inside links in IE 10.\r\n */\r\n\r\nimg {\r\n\tborder-style: none;\r\n}\r\n\r\n/* Forms\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Change the font styles in all browsers.\r\n * 2. Remove the margin in Firefox and Safari.\r\n */\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n\tfont-family: inherit; /* 1 */\r\n\tfont-size: 100%; /* 1 */\r\n\tline-height: 1.15; /* 1 */\r\n\tmargin: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Show the overflow in IE.\r\n * 1. Show the overflow in Edge.\r\n */\r\n\r\nbutton,\r\ninput { /* 1 */\r\n\toverflow: visible;\r\n}\r\n\r\n/**\r\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\r\n * 1. Remove the inheritance of text transform in Firefox.\r\n */\r\n\r\nbutton,\r\nselect { /* 1 */\r\n\ttext-transform: none;\r\n}\r\n\r\n/**\r\n * Correct the inability to style clickable types in iOS and Safari.\r\n */\r\n\r\nbutton,\r\n[type=\"button\"],\r\n[type=\"reset\"],\r\n[type=\"submit\"] {\r\n\t-webkit-appearance: button;\r\n}\r\n\r\n/**\r\n * Remove the inner border and padding in Firefox.\r\n */\r\n\r\nbutton::-moz-focus-inner,\r\n[type=\"button\"]::-moz-focus-inner,\r\n[type=\"reset\"]::-moz-focus-inner,\r\n[type=\"submit\"]::-moz-focus-inner {\r\n\tborder-style: none;\r\n\tpadding: 0;\r\n}\r\n\r\n/**\r\n * Restore the focus styles unset by the previous rule.\r\n */\r\n\r\nbutton:-moz-focusring,\r\n[type=\"button\"]:-moz-focusring,\r\n[type=\"reset\"]:-moz-focusring,\r\n[type=\"submit\"]:-moz-focusring {\r\n\toutline: 1px dotted ButtonText;\r\n}\r\n\r\n/**\r\n * Correct the padding in Firefox.\r\n */\r\n\r\nfieldset {\r\n\tpadding: 0.35em 0.75em 0.625em;\r\n}\r\n\r\n/**\r\n * 1. Correct the text wrapping in Edge and IE.\r\n * 2. Correct the color inheritance from `fieldset` elements in IE.\r\n * 3. Remove the padding so developers are not caught out when they zero out\r\n *    `fieldset` elements in all browsers.\r\n */\r\n\r\nlegend {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tcolor: inherit; /* 2 */\r\n\tdisplay: table; /* 1 */\r\n\tmax-width: 100%; /* 1 */\r\n\tpadding: 0; /* 3 */\r\n\twhite-space: normal; /* 1 */\r\n}\r\n\r\n/**\r\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\r\n */\r\n\r\nprogress {\r\n\tvertical-align: baseline;\r\n}\r\n\r\n/**\r\n * Remove the default vertical scrollbar in IE 10+.\r\n */\r\n\r\ntextarea {\r\n\toverflow: auto;\r\n}\r\n\r\n/**\r\n * 1. Add the correct box sizing in IE 10.\r\n * 2. Remove the padding in IE 10.\r\n */\r\n\r\n[type=\"checkbox\"],\r\n[type=\"radio\"] {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tpadding: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Correct the cursor style of increment and decrement buttons in Chrome.\r\n */\r\n\r\n[type=\"number\"]::-webkit-inner-spin-button,\r\n[type=\"number\"]::-webkit-outer-spin-button {\r\n\theight: auto;\r\n}\r\n\r\n/**\r\n * 1. Correct the odd appearance in Chrome and Safari.\r\n * 2. Correct the outline style in Safari.\r\n */\r\n\r\n[type=\"search\"] {\r\n\t-webkit-appearance: textfield; /* 1 */\r\n\toutline-offset: -2px; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove the inner padding in Chrome and Safari on macOS.\r\n */\r\n\r\n[type=\"search\"]::-webkit-search-decoration {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\n/**\r\n * 1. Correct the inability to style clickable types in iOS and Safari.\r\n * 2. Change font properties to `inherit` in Safari.\r\n */\r\n\r\n::-webkit-file-upload-button {\r\n\t-webkit-appearance: button; /* 1 */\r\n\tfont: inherit; /* 2 */\r\n}\r\n\r\n/* Interactive\r\n   ========================================================================== */\r\n\r\n/*\r\n * Add the correct display in Edge, IE 10+, and Firefox.\r\n */\r\n\r\ndetails {\r\n\tdisplay: block;\r\n}\r\n\r\n/*\r\n * Add the correct display in all browsers.\r\n */\r\n\r\nsummary {\r\n\tdisplay: list-item;\r\n}\r\n\r\n/* Misc\r\n   ========================================================================== */\r\n\r\n/**\r\n * Add the correct display in IE 10+.\r\n */\r\n\r\ntemplate {\r\n\tdisplay: none;\r\n}\r\n\r\n/**\r\n * Add the correct display in IE 10.\r\n */\r\n\r\n[hidden] {\r\n\tdisplay: none;\r\n}","h1, h2, h3, h4, h5, h6, ul {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n*{\r\n  box-sizing: border-box;\r\n}\r\n\r\nbutton,textarea{\r\n  -webkit-appearance: none;\r\n}\r\n\r\nhtml, body {\r\n  min-width: 320px;\r\n  scroll-behavior: smooth;\r\n  overflow-x: clip !important;\r\n}\r\n\r\nbody {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  height: 100%;\r\n  min-height: 100vh;\r\n  min-width: 320px;\r\n  font-family: $primary_font;\r\n  font-size: 16px;\r\n  line-height: 120%;\r\n  color: var(--color-black);\r\n  font-style: normal;\r\n  letter-spacing: normal;\r\n  flex-direction: column;\r\n\r\n  &.on-scroll {\r\n      margin-top: 76px;\r\n  }\r\n}\r\n\r\n.main {\r\n    z-index: z(\"l-default\");\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n}\r\n\r\n.l {\r\n    &-default {\r\n        margin: 0 auto;\r\n        padding: 0 to-rem(10);\r\n        transition: all .4s ease-in-out;\r\n\r\n        @media (min-width: 640px) {\r\n            padding: 0 to-rem(20);\r\n        }\r\n\r\n        @media (min-width: 1024px) {\r\n            max-width: to-rem(1200);\r\n        }\r\n\r\n        @media (min-width: 1200px) {\r\n            max-width: to-rem(1440);\r\n        }\r\n\r\n        @media (min-width: 1500px) {\r\n            padding: 0;\r\n        }\r\n    }\r\n\r\n    &-main {\r\n\r\n    }\r\n\r\n    &-page {\r\n      &__title {\r\n        margin-bottom: to-rem(24);\r\n\r\n        @media (min-width: 1024px) {\r\n          margin-bottom: to-rem(32);\r\n        }\r\n      }\r\n    }\r\n}\r\n\r\n.lazy  {\r\n    opacity: 0;\r\n}\r\n\r\n.loading,\r\n.loaded,\r\n[data-was-processed=\"true\"],\r\n[data-ll-status=\"entered\"] {\r\n    opacity: 1;\r\n    @include tr(all);\r\n}\r\n\r\n.hidden {\r\n    display: none !important;\r\n    opacity: 0 !important;\r\n}\r\n\r\n.show,\r\n.show_btn {\r\n    display: flex !important;\r\n}\r\n\r\ntextarea,\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    text-decoration: none;\r\n    color: inherit;\r\n    outline: none;\r\n    @include tr(all);\r\n}\r\n\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    cursor: pointer;\r\n}\r\n\r\ninput[type=\"submit\"]:disabled {\r\n    cursor: not-allowed;\r\n    opacity: .5;\r\n}\r\n\r\nbutton {\r\n    background: none;\r\n    border: none;\r\n}\r\n\r\ninput,\r\nvideo {\r\n    border: none;\r\n    outline: none;\r\n}\r\n\r\n.fancybox-content{\r\n    padding: 0;\r\n}\r\n\r\ninput, textarea {\r\n    &::placeholder {\r\n        @include tr(\"all\");\r\n    }\r\n    &:focus {\r\n        &::placeholder {\r\n            opacity: 0 !important;\r\n        }\r\n    }\r\n}\r\n\r\ninput,\r\ntextarea,\r\nbutton,\r\nselect,\r\na {\r\n\t-webkit-tap-highlight-color: transparent;\r\n}\r\n\r\ninput::-webkit-outer-spin-button,\r\ninput::-webkit-inner-spin-button {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\nimg {\r\n\tpointer-events: none;\r\n\timage-rendering: -webkit-optimize-contrast !important;\r\n}\r\n\r\nsub {\r\n\tvertical-align: baseline;\r\n\tposition: relative;\r\n\tbottom: -0.4em;\r\n}\r\n\r\nimg {\r\n    display: block;\r\n    max-width: 100%;\r\n}\r\n\r\n.loader {\r\n    z-index: z(\"loader\");\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100vh;\r\n    background: #fff;\r\n}\r\n\r\n.fancybox-content {\r\n    z-index: 99994;\r\n    background: none;\r\n}\r\n\r\n.overflow-y-hidden {\r\n    overflow-y: hidden !important;\r\n}\r\n\r\n@keyframes show {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}","$primary_font: \"Montserrat\", sans-serif;\r\n","// миксин для создания масштабируемых элементов, чтобы поддерживать соотношение. @include responsive-ratio(16,9)\r\n@mixin responsive-ratio($x, $y, $pseudo: false) {\r\n    $padding: unquote(($y / $x) * 100 + \"%\");\r\n    @if $pseudo {\r\n      &:before {\r\n        @include pseudo($pos: relative);\r\n        width: 100%;\r\n        padding-top: $padding;\r\n      }\r\n    } @else {\r\n      padding-top: $padding;\r\n    }\r\n  }\r\n  \r\n  //css треугольники\r\n  @mixin css-triangle(\r\n    $color,\r\n    $direction,\r\n    $size: 6px,\r\n    $position: absolute,\r\n    $round: false\r\n  ) {\r\n    @include pseudo($pos: $position);\r\n    width: 0;\r\n    height: 0;\r\n    @if $round {\r\n      border-radius: 3px;\r\n    }\r\n    @if $direction == down {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-top: $size solid $color;\r\n      margin-top: 0 - round($size / 2.5);\r\n    } @else if $direction == up {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-bottom: $size solid $color;\r\n      margin-bottom: 0 - round($size / 2.5);\r\n    } @else if $direction == right {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-left: $size solid $color;\r\n      margin-right: -$size;\r\n    } @else if $direction == left {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-right: $size solid $color;\r\n      margin-left: -$size;\r\n    }\r\n  }\r\n  \r\n  //transition\r\n  @mixin tr($properties...) {\r\n    $declarations: ();\r\n  \r\n    @each $declaration in $properties {\r\n        $duration: .4s;\r\n        $delay: false;\r\n        $timing-function: ease;\r\n        $property: all;\r\n  \r\n        @if type-of($declaration) == 'map' {\r\n            $duration: if(map_get($declaration, 'duration'), #{map_get($declaration, 'duration')}, $duration);\r\n            $delay: if(map_get($declaration, 'delay'), #{map_get($declaration, 'delay')}, $delay);\r\n            $timing-function: if(map_get($declaration, 'timing-function'), #{map_get($declaration, 'timing-function')}, $timing-function);\r\n            $property: if(map_get($declaration, 'property'), #{map_get($declaration, 'property')}, $property);\r\n        } @else {\r\n            $property: $declaration;\r\n        }\r\n        \r\n        $delayValue: if($delay, ' ' + $delay, '');\r\n        $declarations: append($declarations, #{$property + ' ' + $duration + $delayValue + ' ' + $timing-function}, comma);\r\n    }\r\n  \r\n    transition: $declarations;\r\n  }\r\n\r\n\r\n  @mixin scale($css, $value, $tabletValue) {\r\n    #{$css}: calc($value / 1920) * 100 + vw;\r\n\r\n    @include for-large {\r\n        #{$css}: $value + px;\r\n    }\r\n\r\n    @include for-tablet {\r\n        #{$css}: $tabletValue + px;\r\n    }\r\n}\r\n  \r\n@mixin flex-wrapper {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n}\r\n  \r\n\r\n@mixin for-mobile {\r\n    @media (max-width: 768px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-tablet {\r\n    @media (max-width: 992px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-sm-desktop {\r\n    @media (max-width: 1280px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-desktop {\r\n    @media (max-width: 1440px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-large {\r\n    @media(min-width: 2000px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@function vw($value) {\r\n    @return calc($value / 1920) * 100 + vw;\r\n}\r\n  ",".f {\r\n    &-bold {\r\n        font-weight: 700;\r\n    }\r\n\r\n    &-semibold {\r\n        font-weight: 600;\r\n    }\r\n\r\n    &-medium {\r\n        font-weight: 500;\r\n    }\r\n\r\n    &-h1 {\r\n        font-size: to-rem(40);\r\n        font-weight: 700;\r\n        line-height: to-rem(48);\r\n\r\n        @media (min-width: 992px) {\r\n            font-size: to-rem(48);\r\n            line-height: to-rem(52);\r\n        }\r\n    }\r\n\r\n    &-h2 {\r\n        font-size: to-rem(32);\r\n        font-weight: 700;\r\n        line-height: to-rem(40);\r\n    }\r\n\r\n    &-h3 {\r\n        font-size: to-rem(24);\r\n        font-weight: 700;\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-xl {\r\n        font-size: to-rem(20);\r\n        line-height: to-rem(32);\r\n    }\r\n\r\n    &-l {\r\n        font-size: to-rem(18);\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-m {\r\n        font-size: to-rem(16);\r\n        line-height: to-rem(24);\r\n    }\r\n\r\n    &-s {\r\n        font-size: to-rem(14);\r\n        line-height: to-rem(20);\r\n    }\r\n\r\n    &-xs {\r\n        font-size: to-rem(12);\r\n        line-height: to-rem(16);\r\n    }\r\n}",":root {\r\n    --color-l-blue: #DFEBF4;\r\n    --color-l-green: #DFF3E5;\r\n    --color-l-orange: #FFEBCC;\r\n    --color-l-red: #FDDAE0;\r\n    --color-l-purple: #F1CCE5;\r\n    --color-l-brown: #EEE3DA;\r\n\r\n    --color-blue: #609DC8;\r\n    --color-green: #5FC37B;\r\n    --color-orange: #FF9900;\r\n    --color-red: #F44565;\r\n    --color-purple: #B9027B;\r\n    --color-brown: #A97444;\r\n\r\n    --color-black: #000000;\r\n    --color-black-80: #333333;\r\n    --color-black-60: #666666;\r\n    --color-black-40: #999999;\r\n    --color-black-20: #cccccc;\r\n    --color-black-8: #ebebeb;\r\n    --color-black-3: #f7f7f7;\r\n    --color-white: #ffffff;\r\n}\r\n\r\n// на случай если CSS Properties не срабатывает с градиентом и прозрачностью\r\n// $grey_gradient: linear-gradient(127.8deg, #C7CBD7 -5.9%, #484D5C 98.01%);\r\n",".user-card {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  height: fit-content;\r\n  padding: to-rem(12);\r\n  flex-direction: column;\r\n\r\n  @media (min-width: 1336px) {\r\n    flex-direction: row;\r\n  }\r\n\r\n  &__content {\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin-bottom: to-rem(16);\r\n    flex: none;\r\n\r\n    @media (min-width: 1336px) {\r\n      width: fit-content;\r\n      margin-bottom: 0;\r\n    }\r\n  }\r\n\r\n  &__number {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: to-rem(70);\r\n    padding-right: to-rem(16);\r\n    flex: none;\r\n  }\r\n\r\n  &__border {\r\n    position: relative;\r\n    display: block;\r\n    height: 100%;\r\n\r\n    &::before {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 0;\r\n      display: block;\r\n      width: to-rem(4);\r\n      height: 80%;\r\n      transform: translateY(-50%);\r\n      content: \" \";\r\n      background-color: var(--color-black-3);\r\n    }\r\n  }\r\n\r\n  &__box {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n\r\n  &__info {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: to-rem(0, 10);\r\n\r\n    @media (min-width: 1336px) {\r\n      padding: to-rem(0, 16);\r\n    }\r\n  }\r\n\r\n  &__avatar {\r\n    overflow: hidden;\r\n    display: block;\r\n    width: to-rem(72);\r\n    height: to-rem(72);\r\n    margin-right: to-rem(16);\r\n    border: to-rem(3) solid var(--color-black-3);\r\n    border-radius: 100%;\r\n    flex: none;\r\n\r\n    @media (min-width: 1440px) {\r\n      width: to-rem(92);\r\n      height: to-rem(92);\r\n    }\r\n\r\n    img {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &__name {\r\n    margin-bottom: to-rem(4);\r\n  }\r\n\r\n  &__statistics {\r\n    display: grid;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    grid-template-columns: repeat(3, 1fr);\r\n\r\n    @media (min-width: 1336px) {\r\n      display: flex;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n\r\n      @media (min-width: 670px) {\r\n        margin-right: to-rem(4);\r\n      }\r\n    }\r\n\r\n    &-col {\r\n      height: 100%;\r\n      padding: to-rem(0, 16);\r\n\r\n      @media (min-width: 670px) {\r\n        display: flex;\r\n        align-items: center;\r\n      }\r\n\r\n      @media (min-width: 1336px) {\r\n        align-items: flex-start;\r\n        justify-content: flex-start;\r\n        flex-direction: column;\r\n      }\r\n\r\n      @media (min-width: 1440px) {\r\n        min-width: to-rem(150);\r\n      }\r\n\r\n      &:first-child {\r\n        &::before {\r\n          @media (max-width: 1440px) {\r\n            display: none;\r\n          }\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        height: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__line {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n    }\r\n\r\n    &-value {\r\n      margin-left: to-rem(5);\r\n      color: var(--color-black-40);\r\n    }\r\n  }\r\n\r\n  &__accepting-orders {\r\n    color: var(--color-green);\r\n\r\n    &--not {\r\n      color: var(--color-orange);\r\n    }\r\n  }\r\n\r\n  &__rating {\r\n    color: var(--color-orange);\r\n\r\n    &--positive {\r\n      color: var(--color-green);\r\n    }\r\n\r\n    &--negative {\r\n      color: var(--color-red);\r\n    }\r\n  }\r\n}",".catalog {\r\n\r\n    &__list {\r\n        display: none;\r\n    }\r\n}",".menu {\r\n\r\n    &__list {\r\n\r\n    }\r\n\r\n    &__item {\r\n        display: inline-block;\r\n    }\r\n}",".header {\r\n\r\n    &__wrapper{\r\n        @include flex-wrapper();\r\n    }\r\n\r\n    &__inner {\r\n        border: 1px solid gray;\r\n\r\n        &--nav {\r\n            @include flex-wrapper();\r\n            align-items: center;\r\n        }\r\n    }\r\n\r\n    &__logo {\r\n        width: 126px;\r\n        height: 30px;\r\n\r\n        img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: contain;\r\n            object-position: left center;\r\n        }\r\n    }\r\n\r\n    &__btn-nav {\r\n        display: none;\r\n    }\r\n}",".users {\r\n  &__content {\r\n    display: grid;\r\n    margin: 0 auto;\r\n    grid-template-columns: 1fr auto;\r\n    grid-gap: to-rem(20);\r\n\r\n    @media (max-width: 992px) {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    @media (min-width: 1440px) {\r\n      grid-gap: to-rem(48);\r\n    }\r\n  }\r\n\r\n  &__items {\r\n    width: 100%;\r\n    min-width: 0;\r\n  }\r\n\r\n  &__list {\r\n    display: grid;\r\n    background: var(--color-white);\r\n    border: to-rem(4) solid var(--color-black-3);\r\n    border-radius: to-rem(20);\r\n    grid-template-columns: repeat(1, 1fr);\r\n\r\n    .user-card {\r\n      &:not(:last-child) {\r\n        border-bottom: to-rem(4) solid var(--color-black-3);\r\n      }\r\n    }\r\n  }\r\n\r\n  &-selection {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    height: fit-content;\r\n    max-width: 480px;\r\n    min-width: 0;\r\n    padding: to-rem(24);\r\n    background: var(--color-white);\r\n    border: to-rem(4) solid var(--color-black-3);\r\n    border-radius: to-rem(20);\r\n    flex-direction: column;\r\n\r\n    &__item {\r\n      width: 100%;\r\n\r\n      &:not(:last-child) {\r\n        margin-bottom: to-rem(24);\r\n      }\r\n\r\n      &-title {\r\n        margin-bottom: to-rem(10);\r\n\r\n        @media (min-width: 1024px) {\r\n          margin-bottom: to-rem(24);\r\n        }\r\n      }\r\n\r\n      &-inputs {\r\n        display: grid;\r\n        width: 100%;\r\n        gap: to-rem(12);\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n\r\n      &-button {\r\n        display: inline-block;\r\n        width: 100%;\r\n      }\r\n\r\n      &-input {\r\n        display: none;\r\n      }\r\n\r\n      &-label {\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 100%;\r\n        height: to-rem(44);\r\n        text-align: center;\r\n        border-radius: to-rem(12);\r\n        transition: background-color 0.2s ease-out, color 0.2s ease-out;\r\n        background-color: var(--color-black-8);\r\n\r\n        &:hover {\r\n          background-color: var(--color-black-20);\r\n        }\r\n      }\r\n\r\n      input[type=\"radio\"]:checked + label {\r\n        color: #fff;\r\n        background-color: var(--color-black);\r\n      }\r\n    }\r\n  }\r\n}"]}
\ No newline at end of file
+{"version":3,"sources":["vendor/import/_normalize.scss","base/_general.scss","helpers/_variables.scss","helpers/_mixins.scss","base/_controls.scss","base/_colors.scss","../blocks/components/user-card/user-card.scss","../blocks/components/catalog/_catalog.scss","../blocks/components/menu/_menu.scss","../blocks/components/n-search/_n-search.scss","../blocks/modules/header/header.scss","../blocks/modules/users/users.scss"],"names":[],"mappings":"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;EACA;;AAEA;EATF;IAUI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;IACA;;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAGF;EATF;IAUI;IACA;IACA;;;AAGF;EAfF;IAgBI;;;AAKE;EADF;IAEI;;;AAKN;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;;ACnLN;EACI;;AAIQ;EACI,OLJA;;AKMA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OL9BS;EK+BT;;AJoFJ;EI7FA;IAYQ;;;AJ2ER;EIvFA;IAgBQ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA,YLxDK;EKyDL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBL/DA;EKgEA;EACA;EACA;EACA;EACA;EACA;;AJqCJ;EIrDA;IAmBQ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAMJ;EACI;EACA;EACA;EACA;EACA;;AJCR;EINI;IAQQ;IACA;;;AAIR;EACI;EACA;EACA;EACA;;AJXR;EIOI;IAOQ;;;AAKJ;EACI;;;ACjIZ;EACI;;AAGJ;EACI;EACA;;AAGI;EACI;EACA;EACA;EACA;;ALsGZ;EK1GQ;IAOQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AL+EZ;EKzGA;IA+BQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YN7CK;;ACiHT;EK5EA;IAWQ;IACA;;;AAGJ;EACI,ONvDK;;;AODjB;EACI;;AAIQ;EACI,kBPDJ;EOEI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ANwFJ;EMpGA;IAeQ;;;AAMJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAKI;EACI;EACA;EACA;EACA;EACA,YPvDX;;AO2DW;EACI;;AAOpB;EACI;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBPrFA;EOsFA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAIJ;EACI;EACA;EACA;EACA;;ANUJ;EMdA;IAOQ;;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YP/HK;;AOiIL;EACI;EACA;EACA,YPpIC;EOqID;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI,kBPpJR;;AOyJJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/LR;EACI;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAGJ;EACI;;AAIR;EP0EA;EACA;EACA;;AOtEI;EACI;;AAGJ;EPgEJ;EACA;EACA;EO/DQ;;APgFR;EO7EI;IAEQ,YRhCH;IQiCG;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;APmDZ;EOjEI;IAkBQ;IACA;;;AAOR;EACI;;APkDR;EOnDI;IAIQ;IACA;;EAEA;IACI;IACA;IACA;;;AAKZ;EACI;;APyCR;EO1CI;IAIQ;;;APgCZ;EOpCI;IAQQ;;;AAIR;EACI;;AP6BR;EO9BI;IAIQ;;;APoBZ;EOxBI;IAQQ;;;APgBZ;EOpDA;IAyCQ;IACA;;EAEA;IACI;;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,ORjIS;EQkIT;;AAEA;EACI;EACA,ORnIJ;;AQuIJ;EACI;EACA;;AP/BJ;EO6BA;IAKQ;IAEA;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;APpDJ;EOmDA;IAIQ;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIR;EACI;;;AC/KN;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EAVF;IAWI;;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA","file":"../users.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\r\n\r\n/* Document\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Correct the line height in all browsers.\r\n * 2. Prevent adjustments of font size after orientation changes in iOS.\r\n */\r\n\r\nhtml {\r\n\tline-height: 1.15; /* 1 */\r\n\t-webkit-text-size-adjust: 100%; /* 2 */\r\n}\r\n\r\n/* Sections\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the margin in all browsers.\r\n */\r\n\r\nbody {\r\n\tmargin: 0;\r\n}\r\n\r\n/**\r\n * Render the `main` element consistently in IE.\r\n */\r\n\r\nmain {\r\n\tdisplay: block;\r\n}\r\n\r\n/**\r\n * Correct the font size and margin on `h1` elements within `section` and\r\n * `article` contexts in Chrome, Firefox, and Safari.\r\n */\r\n\r\nh1 {\r\n\tfont-size: 2em;\r\n\tmargin: 0.67em 0;\r\n}\r\n\r\n/* Grouping content\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Add the correct box sizing in Firefox.\r\n * 2. Show the overflow in Edge and IE.\r\n */\r\n\r\nhr {\r\n\tbox-sizing: content-box; /* 1 */\r\n\theight: 0; /* 1 */\r\n\toverflow: visible; /* 2 */\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\npre {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/* Text-level semantics\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the gray background on active links in IE 10.\r\n */\r\n\r\na {\r\n\tbackground-color: transparent;\r\n}\r\n\r\n/**\r\n * 1. Remove the bottom border in Chrome 57-\r\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\r\n */\r\n\r\nabbr[title] {\r\n\tborder-bottom: none; /* 1 */\r\n\ttext-decoration: underline; /* 2 */\r\n\ttext-decoration: underline dotted; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font weight in Chrome, Edge, and Safari.\r\n */\r\n\r\nb,\r\nstrong {\r\n\tfont-weight: bolder;\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\ncode,\r\nkbd,\r\nsamp {\r\n\tfont-family: monospace, monospace; /* 1 */\r\n\tfont-size: 1em; /* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font size in all browsers.\r\n */\r\n\r\nsmall {\r\n\tfont-size: 80%;\r\n}\r\n\r\n/**\r\n * Prevent `sub` and `sup` elements from affecting the line height in\r\n * all browsers.\r\n */\r\n\r\nsub,\r\nsup {\r\n\tfont-size: 75%;\r\n\tline-height: 0;\r\n\tposition: relative;\r\n\tvertical-align: baseline;\r\n}\r\n\r\nsub {\r\n\tbottom: -0.25em;\r\n}\r\n\r\nsup {\r\n\ttop: -0.5em;\r\n}\r\n\r\n/* Embedded content\r\n   ========================================================================== */\r\n\r\n/**\r\n * Remove the border on images inside links in IE 10.\r\n */\r\n\r\nimg {\r\n\tborder-style: none;\r\n}\r\n\r\n/* Forms\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Change the font styles in all browsers.\r\n * 2. Remove the margin in Firefox and Safari.\r\n */\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n\tfont-family: inherit; /* 1 */\r\n\tfont-size: 100%; /* 1 */\r\n\tline-height: 1.15; /* 1 */\r\n\tmargin: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Show the overflow in IE.\r\n * 1. Show the overflow in Edge.\r\n */\r\n\r\nbutton,\r\ninput { /* 1 */\r\n\toverflow: visible;\r\n}\r\n\r\n/**\r\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\r\n * 1. Remove the inheritance of text transform in Firefox.\r\n */\r\n\r\nbutton,\r\nselect { /* 1 */\r\n\ttext-transform: none;\r\n}\r\n\r\n/**\r\n * Correct the inability to style clickable types in iOS and Safari.\r\n */\r\n\r\nbutton,\r\n[type=\"button\"],\r\n[type=\"reset\"],\r\n[type=\"submit\"] {\r\n\t-webkit-appearance: button;\r\n}\r\n\r\n/**\r\n * Remove the inner border and padding in Firefox.\r\n */\r\n\r\nbutton::-moz-focus-inner,\r\n[type=\"button\"]::-moz-focus-inner,\r\n[type=\"reset\"]::-moz-focus-inner,\r\n[type=\"submit\"]::-moz-focus-inner {\r\n\tborder-style: none;\r\n\tpadding: 0;\r\n}\r\n\r\n/**\r\n * Restore the focus styles unset by the previous rule.\r\n */\r\n\r\nbutton:-moz-focusring,\r\n[type=\"button\"]:-moz-focusring,\r\n[type=\"reset\"]:-moz-focusring,\r\n[type=\"submit\"]:-moz-focusring {\r\n\toutline: 1px dotted ButtonText;\r\n}\r\n\r\n/**\r\n * Correct the padding in Firefox.\r\n */\r\n\r\nfieldset {\r\n\tpadding: 0.35em 0.75em 0.625em;\r\n}\r\n\r\n/**\r\n * 1. Correct the text wrapping in Edge and IE.\r\n * 2. Correct the color inheritance from `fieldset` elements in IE.\r\n * 3. Remove the padding so developers are not caught out when they zero out\r\n *    `fieldset` elements in all browsers.\r\n */\r\n\r\nlegend {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tcolor: inherit; /* 2 */\r\n\tdisplay: table; /* 1 */\r\n\tmax-width: 100%; /* 1 */\r\n\tpadding: 0; /* 3 */\r\n\twhite-space: normal; /* 1 */\r\n}\r\n\r\n/**\r\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\r\n */\r\n\r\nprogress {\r\n\tvertical-align: baseline;\r\n}\r\n\r\n/**\r\n * Remove the default vertical scrollbar in IE 10+.\r\n */\r\n\r\ntextarea {\r\n\toverflow: auto;\r\n}\r\n\r\n/**\r\n * 1. Add the correct box sizing in IE 10.\r\n * 2. Remove the padding in IE 10.\r\n */\r\n\r\n[type=\"checkbox\"],\r\n[type=\"radio\"] {\r\n\tbox-sizing: border-box; /* 1 */\r\n\tpadding: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Correct the cursor style of increment and decrement buttons in Chrome.\r\n */\r\n\r\n[type=\"number\"]::-webkit-inner-spin-button,\r\n[type=\"number\"]::-webkit-outer-spin-button {\r\n\theight: auto;\r\n}\r\n\r\n/**\r\n * 1. Correct the odd appearance in Chrome and Safari.\r\n * 2. Correct the outline style in Safari.\r\n */\r\n\r\n[type=\"search\"] {\r\n\t-webkit-appearance: textfield; /* 1 */\r\n\toutline-offset: -2px; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove the inner padding in Chrome and Safari on macOS.\r\n */\r\n\r\n[type=\"search\"]::-webkit-search-decoration {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\n/**\r\n * 1. Correct the inability to style clickable types in iOS and Safari.\r\n * 2. Change font properties to `inherit` in Safari.\r\n */\r\n\r\n::-webkit-file-upload-button {\r\n\t-webkit-appearance: button; /* 1 */\r\n\tfont: inherit; /* 2 */\r\n}\r\n\r\n/* Interactive\r\n   ========================================================================== */\r\n\r\n/*\r\n * Add the correct display in Edge, IE 10+, and Firefox.\r\n */\r\n\r\ndetails {\r\n\tdisplay: block;\r\n}\r\n\r\n/*\r\n * Add the correct display in all browsers.\r\n */\r\n\r\nsummary {\r\n\tdisplay: list-item;\r\n}\r\n\r\n/* Misc\r\n   ========================================================================== */\r\n\r\n/**\r\n * Add the correct display in IE 10+.\r\n */\r\n\r\ntemplate {\r\n\tdisplay: none;\r\n}\r\n\r\n/**\r\n * Add the correct display in IE 10.\r\n */\r\n\r\n[hidden] {\r\n\tdisplay: none;\r\n}","h1, h2, h3, h4, h5, h6, ul {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n*{\r\n  box-sizing: border-box;\r\n}\r\n\r\nbutton,textarea{\r\n  -webkit-appearance: none;\r\n}\r\n\r\nhtml, body {\r\n  min-width: 320px;\r\n  scroll-behavior: smooth;\r\n  overflow-x: clip !important;\r\n}\r\n\r\nbody {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  height: 100%;\r\n  min-height: 100vh;\r\n  min-width: 320px;\r\n  font-family: $primary_font;\r\n  font-size: 16px;\r\n  line-height: 120%;\r\n  color: var(--color-black);\r\n  font-style: normal;\r\n  letter-spacing: normal;\r\n  flex-direction: column;\r\n\r\n  &.on-scroll {\r\n      margin-top: 76px;\r\n  }\r\n}\r\n\r\n.main {\r\n    z-index: z(\"l-default\");\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n}\r\n\r\n.l {\r\n    &-default {\r\n        margin: 0 auto;\r\n        padding: 0 to-rem(10);\r\n        transition: all .4s ease-in-out;\r\n\r\n        @media (min-width: 640px) {\r\n            padding: 0 to-rem(20);\r\n        }\r\n\r\n        @media (min-width: 1024px) {\r\n            max-width: to-rem(1200);\r\n        }\r\n\r\n        @media (min-width: 1200px) {\r\n            max-width: to-rem(1440);\r\n        }\r\n\r\n        @media (min-width: 1500px) {\r\n            padding: 0;\r\n        }\r\n    }\r\n\r\n    &-main {\r\n\r\n    }\r\n\r\n    &-page {\r\n      &__title {\r\n        margin-bottom: to-rem(24);\r\n\r\n        @media (min-width: 1024px) {\r\n          margin-bottom: to-rem(32);\r\n        }\r\n      }\r\n    }\r\n}\r\n\r\n.lazy  {\r\n    opacity: 0;\r\n}\r\n\r\n.loading,\r\n.loaded,\r\n[data-was-processed=\"true\"],\r\n[data-ll-status=\"entered\"] {\r\n    opacity: 1;\r\n    @include tr(all);\r\n}\r\n\r\n.hidden {\r\n    display: none !important;\r\n    opacity: 0 !important;\r\n}\r\n\r\n.show,\r\n.show_btn {\r\n    display: flex !important;\r\n}\r\n\r\ntextarea,\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    text-decoration: none;\r\n    color: inherit;\r\n    outline: none;\r\n    @include tr(all);\r\n}\r\n\r\na,\r\nbutton,\r\ninput[type=\"submit\"] {\r\n    cursor: pointer;\r\n}\r\n\r\ninput[type=\"submit\"]:disabled {\r\n    cursor: not-allowed;\r\n    opacity: .5;\r\n}\r\n\r\nbutton {\r\n    background: none;\r\n    border: none;\r\n}\r\n\r\ninput,\r\nvideo {\r\n    border: none;\r\n    outline: none;\r\n}\r\n\r\n.fancybox-content{\r\n    padding: 0;\r\n}\r\n\r\ninput, textarea {\r\n    &::placeholder {\r\n        @include tr(\"all\");\r\n    }\r\n    &:focus {\r\n        &::placeholder {\r\n            opacity: 0 !important;\r\n        }\r\n    }\r\n}\r\n\r\ninput,\r\ntextarea,\r\nbutton,\r\nselect,\r\na {\r\n\t-webkit-tap-highlight-color: transparent;\r\n}\r\n\r\ninput::-webkit-outer-spin-button,\r\ninput::-webkit-inner-spin-button {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\nimg {\r\n\tpointer-events: none;\r\n\timage-rendering: -webkit-optimize-contrast !important;\r\n}\r\n\r\nsub {\r\n\tvertical-align: baseline;\r\n\tposition: relative;\r\n\tbottom: -0.4em;\r\n}\r\n\r\nimg {\r\n    display: block;\r\n    max-width: 100%;\r\n}\r\n\r\n.loader {\r\n    z-index: z(\"loader\");\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100vh;\r\n    background: #fff;\r\n}\r\n\r\n.fancybox-content {\r\n    z-index: 99994;\r\n    background: none;\r\n}\r\n\r\n.overflow-y-hidden {\r\n    overflow-y: hidden !important;\r\n}\r\n\r\n@keyframes show {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}","$primary_font: \"Montserrat\", sans-serif;\r\n$blackTextColor: #222222;\r\n$grayTextColor: #999;\r\n$transition: 0.25s;\r\n$white: #fff;\r\n$bgNSearch: #F7F7F7;","// миксин для создания масштабируемых элементов, чтобы поддерживать соотношение. @include responsive-ratio(16,9)\r\n@mixin responsive-ratio($x, $y, $pseudo: false) {\r\n    $padding: unquote(($y / $x) * 100 + \"%\");\r\n    @if $pseudo {\r\n      &:before {\r\n        @include pseudo($pos: relative);\r\n        width: 100%;\r\n        padding-top: $padding;\r\n      }\r\n    } @else {\r\n      padding-top: $padding;\r\n    }\r\n  }\r\n  \r\n  //css треугольники\r\n  @mixin css-triangle(\r\n    $color,\r\n    $direction,\r\n    $size: 6px,\r\n    $position: absolute,\r\n    $round: false\r\n  ) {\r\n    @include pseudo($pos: $position);\r\n    width: 0;\r\n    height: 0;\r\n    @if $round {\r\n      border-radius: 3px;\r\n    }\r\n    @if $direction == down {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-top: $size solid $color;\r\n      margin-top: 0 - round($size / 2.5);\r\n    } @else if $direction == up {\r\n      border-left: $size solid transparent;\r\n      border-right: $size solid transparent;\r\n      border-bottom: $size solid $color;\r\n      margin-bottom: 0 - round($size / 2.5);\r\n    } @else if $direction == right {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-left: $size solid $color;\r\n      margin-right: -$size;\r\n    } @else if $direction == left {\r\n      border-top: $size solid transparent;\r\n      border-bottom: $size solid transparent;\r\n      border-right: $size solid $color;\r\n      margin-left: -$size;\r\n    }\r\n  }\r\n  \r\n  //transition\r\n  @mixin tr($properties...) {\r\n    $declarations: ();\r\n  \r\n    @each $declaration in $properties {\r\n        $duration: .4s;\r\n        $delay: false;\r\n        $timing-function: ease;\r\n        $property: all;\r\n  \r\n        @if type-of($declaration) == 'map' {\r\n            $duration: if(map_get($declaration, 'duration'), #{map_get($declaration, 'duration')}, $duration);\r\n            $delay: if(map_get($declaration, 'delay'), #{map_get($declaration, 'delay')}, $delay);\r\n            $timing-function: if(map_get($declaration, 'timing-function'), #{map_get($declaration, 'timing-function')}, $timing-function);\r\n            $property: if(map_get($declaration, 'property'), #{map_get($declaration, 'property')}, $property);\r\n        } @else {\r\n            $property: $declaration;\r\n        }\r\n        \r\n        $delayValue: if($delay, ' ' + $delay, '');\r\n        $declarations: append($declarations, #{$property + ' ' + $duration + $delayValue + ' ' + $timing-function}, comma);\r\n    }\r\n  \r\n    transition: $declarations;\r\n  }\r\n\r\n\r\n  @mixin scale($css, $value, $tabletValue) {\r\n    #{$css}: calc($value / 1920) * 100 + vw;\r\n\r\n    @include for-large {\r\n        #{$css}: $value + px;\r\n    }\r\n\r\n    @include for-tablet {\r\n        #{$css}: $tabletValue + px;\r\n    }\r\n}\r\n  \r\n@mixin flex-wrapper {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n}\r\n  \r\n\r\n@mixin for-mobile {\r\n    @media (max-width: 768px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-tablet {\r\n    @media (max-width: 992px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-sm-desktop {\r\n    @media (max-width: 1279px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-desktop {\r\n    @media (max-width: 1439px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@mixin for-large {\r\n    @media(min-width: 2000px) {\r\n        @content;\r\n    }\r\n}\r\n\r\n@function vw($value) {\r\n    @return calc($value / 1920) * 100 + vw;\r\n}\r\n  ",".f {\r\n    &-bold {\r\n        font-weight: 700;\r\n    }\r\n\r\n    &-semibold {\r\n        font-weight: 600;\r\n    }\r\n\r\n    &-medium {\r\n        font-weight: 500;\r\n    }\r\n\r\n    &-h1 {\r\n        font-size: to-rem(40);\r\n        font-weight: 700;\r\n        line-height: to-rem(48);\r\n\r\n        @media (min-width: 992px) {\r\n            font-size: to-rem(48);\r\n            line-height: to-rem(52);\r\n        }\r\n    }\r\n\r\n    &-h2 {\r\n        font-size: to-rem(32);\r\n        font-weight: 700;\r\n        line-height: to-rem(40);\r\n    }\r\n\r\n    &-h3 {\r\n        font-size: to-rem(24);\r\n        font-weight: 700;\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-xl {\r\n        font-size: to-rem(20);\r\n        line-height: to-rem(32);\r\n    }\r\n\r\n    &-l {\r\n        font-size: to-rem(18);\r\n        line-height: to-rem(28);\r\n    }\r\n\r\n    &-m {\r\n        font-size: to-rem(16);\r\n        line-height: to-rem(24);\r\n    }\r\n\r\n    &-s {\r\n        font-size: to-rem(14);\r\n        line-height: to-rem(20);\r\n    }\r\n\r\n    &-xs {\r\n        font-size: to-rem(12);\r\n        line-height: to-rem(16);\r\n    }\r\n}",":root {\r\n    --color-l-blue: #DFEBF4;\r\n    --color-l-green: #DFF3E5;\r\n    --color-l-orange: #FFEBCC;\r\n    --color-l-red: #FDDAE0;\r\n    --color-l-purple: #F1CCE5;\r\n    --color-l-brown: #EEE3DA;\r\n\r\n    --color-blue: #609DC8;\r\n    --color-green: #5FC37B;\r\n    --color-orange: #FF9900;\r\n    --color-red: #F44565;\r\n    --color-purple: #B9027B;\r\n    --color-brown: #A97444;\r\n\r\n    --color-black: #000000;\r\n    --color-black-80: #333333;\r\n    --color-black-60: #666666;\r\n    --color-black-40: #999999;\r\n    --color-black-20: #cccccc;\r\n    --color-black-8: #ebebeb;\r\n    --color-black-3: #f7f7f7;\r\n    --color-white: #ffffff;\r\n}\r\n\r\n// на случай если CSS Properties не срабатывает с градиентом и прозрачностью\r\n// $grey_gradient: linear-gradient(127.8deg, #C7CBD7 -5.9%, #484D5C 98.01%);\r\n",".user-card {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  height: fit-content;\r\n  padding: to-rem(12);\r\n  flex-direction: column;\r\n\r\n  @media (min-width: 1336px) {\r\n    flex-direction: row;\r\n  }\r\n\r\n  &__content {\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin-bottom: to-rem(16);\r\n    flex: none;\r\n\r\n    @media (min-width: 1336px) {\r\n      width: fit-content;\r\n      margin-bottom: 0;\r\n    }\r\n  }\r\n\r\n  &__number {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: to-rem(70);\r\n    padding-right: to-rem(16);\r\n    flex: none;\r\n  }\r\n\r\n  &__border {\r\n    position: relative;\r\n    display: block;\r\n    height: 100%;\r\n\r\n    &::before {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 0;\r\n      display: block;\r\n      width: to-rem(4);\r\n      height: 80%;\r\n      transform: translateY(-50%);\r\n      content: \" \";\r\n      background-color: var(--color-black-3);\r\n    }\r\n  }\r\n\r\n  &__box {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n\r\n  &__info {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: to-rem(0, 10);\r\n\r\n    @media (min-width: 1336px) {\r\n      padding: to-rem(0, 16);\r\n    }\r\n  }\r\n\r\n  &__avatar {\r\n    overflow: hidden;\r\n    display: block;\r\n    width: to-rem(72);\r\n    height: to-rem(72);\r\n    margin-right: to-rem(16);\r\n    border: to-rem(3) solid var(--color-black-3);\r\n    border-radius: 100%;\r\n    flex: none;\r\n\r\n    @media (min-width: 1440px) {\r\n      width: to-rem(92);\r\n      height: to-rem(92);\r\n    }\r\n\r\n    img {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &__name {\r\n    margin-bottom: to-rem(4);\r\n  }\r\n\r\n  &__statistics {\r\n    display: grid;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    grid-template-columns: repeat(3, 1fr);\r\n\r\n    @media (min-width: 1336px) {\r\n      display: flex;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n\r\n      @media (min-width: 670px) {\r\n        margin-right: to-rem(4);\r\n      }\r\n    }\r\n\r\n    &-col {\r\n      height: 100%;\r\n      padding: to-rem(0, 16);\r\n\r\n      @media (min-width: 670px) {\r\n        display: flex;\r\n        align-items: center;\r\n      }\r\n\r\n      @media (min-width: 1336px) {\r\n        align-items: flex-start;\r\n        justify-content: flex-start;\r\n        flex-direction: column;\r\n      }\r\n\r\n      @media (min-width: 1440px) {\r\n        min-width: to-rem(150);\r\n      }\r\n\r\n      &:first-child {\r\n        &::before {\r\n          @media (max-width: 1440px) {\r\n            display: none;\r\n          }\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        height: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__line {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    &-name {\r\n      color: var(--color-black-40);\r\n    }\r\n\r\n    &-value {\r\n      margin-left: to-rem(5);\r\n      color: var(--color-black-40);\r\n    }\r\n  }\r\n\r\n  &__accepting-orders {\r\n    color: var(--color-green);\r\n\r\n    &--not {\r\n      color: var(--color-orange);\r\n    }\r\n  }\r\n\r\n  &__rating {\r\n    color: var(--color-orange);\r\n\r\n    &--positive {\r\n      color: var(--color-green);\r\n    }\r\n\r\n    &--negative {\r\n      color: var(--color-red);\r\n    }\r\n  }\r\n}",".catalog {\r\n    position: relative;\r\n\r\n    &:hover {\r\n        .catalog {\r\n            &__btn {\r\n                color: $grayTextColor;\r\n\r\n                &::before {\r\n                    background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n                }\r\n            }\r\n\r\n            &__list {\r\n                padding: 16px 20px;\r\n                padding-top: 60px;\r\n                opacity: 1;\r\n                visibility: visible;\r\n                height: auto;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__btn {\r\n        position: relative;\r\n        z-index: 2;\r\n        font-family: $primary_font, sans-serif;\r\n        font-weight: 500;\r\n        font-size: 16px;\r\n        text-transform: uppercase;\r\n        line-height: 150%;\r\n        color: $blackTextColor;\r\n        padding-left: 32px;\r\n\r\n        @include for-desktop {\r\n            font-size: 14px;\r\n        }\r\n\r\n        @include for-sm-desktop {\r\n            display: none;\r\n        }\r\n\r\n        &::before {\r\n            position: absolute;\r\n            content: \"\";\r\n            display: block;\r\n            top: 0;\r\n            left: 0;\r\n            width: 24px;\r\n            height: 24px;\r\n            background-repeat: no-repeat;\r\n            background-size: 100% 100%;\r\n            background-position: center;\r\n            background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 6H19.5V8H4.5V6Z' fill='black' /%3e%3cpath d='M4.5 11H19.5V13H4.5V11Z' fill='black' /%3e%3cpath d='M4.5 16H19.5V18H4.5V16Z' fill='black' /%3e%3c/svg%3e\");\r\n        }\r\n    }\r\n\r\n    &__list {\r\n        position: absolute;\r\n        transition: $transition;\r\n        z-index: 1;\r\n        top: -14px;\r\n        left: 50%;\r\n        border: 4px solid #ebebeb;\r\n        border-radius: 20px;\r\n        transform: translateX(-50%);\r\n        width: calc(100% + 40px);\r\n        background-color: $white;\r\n        padding-top: 60px;\r\n        box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        height: 0;\r\n        padding: 0;\r\n\r\n        @include for-sm-desktop {\r\n            position: relative;\r\n            top: 0;\r\n            left: 0;\r\n            transform: none;\r\n            opacity: 1;\r\n            visibility: visible;\r\n            height: auto;\r\n            width: 100%;\r\n            border: none;\r\n            box-shadow: none;\r\n            background-color: transparent;\r\n            padding-left: 0;\r\n            margin: 0;\r\n        }\r\n    }\r\n\r\n    &__item {\r\n        text-decoration: none;\r\n        list-style: none;\r\n        margin-bottom: 16px;\r\n\r\n        &:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n    }\r\n\r\n    &__link {\r\n\r\n        img {\r\n            display: inline-block;\r\n            vertical-align: middle;\r\n            margin-right: 12px;\r\n            width: 36px;\r\n            height: 36px;\r\n\r\n            @include for-sm-desktop {\r\n                width: 26px;\r\n                height: 26px;\r\n            }\r\n        }\r\n\r\n        span {\r\n            font-family: $primary_font, sans-serif;\r\n            font-weight: 400;\r\n            font-size: 16px;\r\n            line-height: 150%;\r\n\r\n            @include for-sm-desktop {\r\n                font-size: 14px;\r\n            }\r\n        }\r\n\r\n        &:hover {\r\n            span {\r\n                text-decoration: underline;\r\n            }\r\n        }\r\n    }\r\n}",".menu {\r\n    &__align {\r\n        display: none;\r\n    }\r\n\r\n    &__item {\r\n        position: relative;\r\n        display: inline-block;\r\n\r\n        &.active {\r\n            .menu__link {\r\n                font-weight: 700;\r\n                font-size: 16px;\r\n                line-height: 150%;\r\n                color: #000;\r\n\r\n                @include for-desktop {\r\n                    font-size: 14px;\r\n                }\r\n            }\r\n\r\n            &::before {\r\n                position: absolute;\r\n                content: \"\";\r\n                display: block;\r\n                width: 6px;\r\n                height: 6px;\r\n                transform: translateY(-50%);\r\n                background-color: #000;\r\n                border-radius: 50%;\r\n                top: 50%;\r\n                left: 0;\r\n            }\r\n        }\r\n\r\n        @include for-sm-desktop {\r\n            display: block;\r\n        }\r\n    }\r\n\r\n    &__link {\r\n        display: block;\r\n        padding: 10px 20px;\r\n        font-family: $primary_font, sans-serif;\r\n        font-weight: 400;\r\n        font-size: 16px;\r\n        line-height: 150%;\r\n        color: #666;\r\n        transition: $transition;\r\n\r\n        @include for-desktop {\r\n            padding: 8px 12px;\r\n            font-size: 14px;\r\n        }\r\n\r\n        &:hover {\r\n            color: $blackTextColor;\r\n        }\r\n    }\r\n}",".n-search {\r\n    position: relative;\r\n\r\n    &.active {\r\n        .n-search {\r\n            &__wrapper {\r\n                background-color: $bgNSearch;\r\n                display: flex;\r\n            }\r\n\r\n            &__button {\r\n                background-color: #000;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__wrapper {\r\n        position: absolute;\r\n        z-index: 1;\r\n        display: none;\r\n        align-items: center;\r\n        padding: 7px 16px;\r\n        padding-right: 50px;\r\n        border-radius: 12px;\r\n        left: 20px;\r\n        top: 50%;\r\n        transform: translate(-100%, -50%);\r\n        width: 800px;\r\n        background-color: #fff;\r\n\r\n        @include for-desktop {\r\n            width: 610px;\r\n        }\r\n    }\r\n\r\n    &__inner {\r\n\r\n        &--select-catalog {\r\n            position: relative;\r\n            min-width: 220px;\r\n            border-right: 4px solid #ebebeb;\r\n\r\n            &::after {\r\n                position: absolute;\r\n                content: \"\";\r\n                top: 100%;\r\n                width: calc(100% + 20px);\r\n                left: -20px;\r\n                height: 20px;\r\n            }\r\n\r\n            &:hover {\r\n                .n-search {\r\n                    &__list {\r\n                        opacity: 1;\r\n                        visibility: visible;\r\n                        height: auto;\r\n                        z-index: 3;\r\n                        transition: $transition;\r\n                    }\r\n\r\n                    &__button-catalog {\r\n                        &::before {\r\n                            background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        &--search-input {\r\n            flex-grow: 2;\r\n            padding-left: 20px;\r\n        }\r\n\r\n        input {\r\n            width: 100%;\r\n            background-color: transparent;\r\n        }\r\n    }\r\n\r\n    &__list {\r\n        position: absolute;\r\n        z-index: 1;\r\n        top: 46px;\r\n        left: -20px;\r\n        border: 4px solid #ebebeb;\r\n        border-radius: 20px;\r\n        width: 240px;\r\n        background-color: $white;\r\n        padding: 16px 8px;\r\n        box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        height: 0;\r\n    }\r\n\r\n    &__item {\r\n        display: block;\r\n        \r\n    }\r\n\r\n    &__link {\r\n        display: block;\r\n        padding: 8px 12px;\r\n        border-radius: 4px;\r\n        transition: none;\r\n\r\n        @include for-desktop {\r\n            font-size: 14px;\r\n        }\r\n\r\n        &:hover {\r\n            background-color: #f1f1f1;\r\n            color: #363636;\r\n        }\r\n\r\n        &:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n    }\r\n\r\n    &__button {\r\n        position: relative;\r\n        cursor: pointer;\r\n        display: block;\r\n        z-index: 2;\r\n        width: 60px;\r\n        height: 44px;\r\n        border-radius: 16px;\r\n        transition: $transition;\r\n\r\n        &::after {\r\n            position: absolute;\r\n            content: \"\";\r\n            transition: $transition;\r\n            display: block;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 32px;\r\n            height: 32px;\r\n            transform: translate(-50%, -50%);\r\n            mask-repeat: no-repeat;\r\n            mask-position: center center;\r\n            background-color: #dedee2;\r\n            mask-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 9.84871 15.3729 11.551 14.3199 12.9056L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L12.9056 14.3199C11.551 15.3729 9.84871 16 8 16C3.58172 16 0 12.4183 0 8Z' fill='%238B8DA3' /%3e%3c/svg%3e\");\r\n        }\r\n\r\n        &:hover {\r\n            background-color: #000;\r\n\r\n            &:after {\r\n                background-color: $white;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__button-catalog {\r\n        position: relative;\r\n        font-family: \"Montserrat\", sans-serif;\r\n        font-weight: 400;\r\n        font-size: 16px;\r\n        padding-left: 32px;\r\n        padding-right: 16px;\r\n        line-height: 156%;\r\n        color: #999;\r\n\r\n        &::before {\r\n            position: absolute;\r\n            content: \"\";\r\n            top: 1px;\r\n            left: 0;\r\n            width: 24px;\r\n            height: 24px;\r\n            background-repeat: no-repeat;\r\n            background-size: contain;\r\n            background-position: center center;\r\n            background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9.00001L12 15L18 9.00001' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n        }\r\n    }\r\n\r\n    &__button-close {\r\n        position: absolute;\r\n        cursor: pointer;\r\n        top: 10px;\r\n        right: 40px;\r\n        width: 24px;\r\n        height: 24px;\r\n        background-repeat: no-repeat;\r\n        background-size: contain;\r\n        background-position: center center;\r\n        background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e\");\r\n    }\r\n}",".header {\r\n    box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n    background: #fff;\r\n    padding: 6px 0;\r\n    margin: 0 10px;\r\n    border-radius: 0 0 20px 20px;\r\n\r\n    &.menu-active {\r\n        .header__inner--nav {\r\n            left: 0;\r\n        }\r\n\r\n        .header__overlay {\r\n            display: block;\r\n        }\r\n    }\r\n\r\n    &__wrapper {\r\n        @include flex-wrapper();\r\n    }\r\n\r\n    &__inner {\r\n\r\n        &--logo {\r\n            position: relative;\r\n        }\r\n\r\n        &--nav,\r\n        &--auth {\r\n            @include flex-wrapper();\r\n            align-items: center;\r\n        }\r\n\r\n        &--nav {\r\n            @include for-sm-desktop {\r\n                transition: $transition;\r\n                align-items: flex-start;\r\n                overflow-y: auto;\r\n                position: fixed;\r\n                display: block;\r\n                z-index: 3;\r\n                height: 100%;\r\n                left: -380px;\r\n                top: 0;\r\n                padding: 20px 32px 60px;\r\n                width: 360px;\r\n                background-color: #fff;\r\n                box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);\r\n            }\r\n\r\n            @include for-mobile {\r\n                width: 100%;\r\n                left: -100%;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &__sub-inner {\r\n        &--logo  {\r\n            display: none;\r\n\r\n            @include for-sm-desktop {\r\n                display: flex;\r\n                justify-content: space-between;\r\n\r\n                .header__logo {\r\n                    display: block;\r\n                    width: 140px;\r\n                    height: 40px;\r\n                }\r\n            }\r\n        }\r\n\r\n        &--catalog {\r\n            margin-right: 60px;\r\n\r\n            @include for-desktop {\r\n                margin-right: 20px;\r\n            }\r\n\r\n            @include for-sm-desktop {\r\n                margin-right: 0;\r\n            }\r\n        }\r\n\r\n        &--search {\r\n            margin-left: 32px;\r\n\r\n            @include for-desktop {\r\n                margin-left: 0;\r\n            }\r\n\r\n            @include for-sm-desktop {\r\n                display: none;\r\n            }\r\n        }\r\n\r\n        @include for-sm-desktop {\r\n            width: 100%;\r\n            margin-bottom: 32px;\r\n\r\n            &:last-child {\r\n                margin-bottom: 0;\r\n            }\r\n        }\r\n    }\r\n\r\n    &__logo {\r\n        position: relative;\r\n        width: 126px;\r\n        height: 30px;\r\n\r\n        img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: contain;\r\n            object-position: left center;\r\n        }\r\n    }\r\n\r\n    &__auth {\r\n        font-family: \"Montserrat\", sans-serif;\r\n        font-weight: 500;\r\n        font-size: 14px;\r\n        line-height: 150%;\r\n        text-transform: uppercase;\r\n        height: auto;\r\n        border-radius: 12px;\r\n        padding: 10px 20px;\r\n        color: $blackTextColor;\r\n        background-color: #F7F7F7;\r\n\r\n        &:hover {\r\n            background: #000;\r\n            color: $white;\r\n        }\r\n    }\r\n\r\n    &__button-open-menu {\r\n        display: none;\r\n        margin-right: 20px;\r\n\r\n        @include for-sm-desktop {\r\n            display: block;\r\n\r\n            width: 32px;\r\n            height: 32px;\r\n            background: url('../img/svg/ico-list-open.svg') no-repeat center / contain;\r\n        }\r\n    }\r\n\r\n    &__button-close-menu {\r\n        cursor: pointer;\r\n        user-select: none;\r\n        display: block;\r\n        width: 32px;\r\n        height: 32px;\r\n        background: url('../img/svg/ico-list-close.svg') no-repeat center / contain;\r\n    }\r\n\r\n    &__overlay {\r\n        display: none;\r\n\r\n        @include for-sm-desktop {\r\n            z-index: 1;\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: #8b8b8b38;\r\n        }\r\n    }\r\n\r\n    &__btn-nav {\r\n        display: none;\r\n    }\r\n}",".users {\r\n  &__content {\r\n    display: grid;\r\n    margin: 0 auto;\r\n    grid-template-columns: 1fr auto;\r\n    grid-gap: to-rem(20);\r\n\r\n    @media (max-width: 992px) {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    @media (min-width: 1440px) {\r\n      grid-gap: to-rem(48);\r\n    }\r\n  }\r\n\r\n  &__items {\r\n    width: 100%;\r\n    min-width: 0;\r\n  }\r\n\r\n  &__list {\r\n    display: grid;\r\n    background: var(--color-white);\r\n    border: to-rem(4) solid var(--color-black-3);\r\n    border-radius: to-rem(20);\r\n    grid-template-columns: repeat(1, 1fr);\r\n\r\n    .user-card {\r\n      &:not(:last-child) {\r\n        border-bottom: to-rem(4) solid var(--color-black-3);\r\n      }\r\n    }\r\n  }\r\n\r\n  &-selection {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    height: fit-content;\r\n    max-width: 480px;\r\n    min-width: 0;\r\n    padding: to-rem(24);\r\n    background: var(--color-white);\r\n    border: to-rem(4) solid var(--color-black-3);\r\n    border-radius: to-rem(20);\r\n    flex-direction: column;\r\n\r\n    &__item {\r\n      width: 100%;\r\n\r\n      &:not(:last-child) {\r\n        margin-bottom: to-rem(24);\r\n      }\r\n\r\n      &-title {\r\n        margin-bottom: to-rem(10);\r\n\r\n        @media (min-width: 1024px) {\r\n          margin-bottom: to-rem(24);\r\n        }\r\n      }\r\n\r\n      &-inputs {\r\n        display: grid;\r\n        width: 100%;\r\n        gap: to-rem(12);\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n\r\n      &-button {\r\n        display: inline-block;\r\n        width: 100%;\r\n      }\r\n\r\n      &-input {\r\n        display: none;\r\n      }\r\n\r\n      &-label {\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 100%;\r\n        height: to-rem(44);\r\n        text-align: center;\r\n        border-radius: to-rem(12);\r\n        transition: background-color 0.2s ease-out, color 0.2s ease-out;\r\n        background-color: var(--color-black-8);\r\n\r\n        &:hover {\r\n          background-color: var(--color-black-20);\r\n        }\r\n      }\r\n\r\n      input[type=\"radio\"]:checked + label {\r\n        color: #fff;\r\n        background-color: var(--color-black);\r\n      }\r\n    }\r\n  }\r\n}"]}
\ No newline at end of file
diff --git a/docs/styles/ui.css b/docs/styles/ui.css
index 100ad05..95a29cc 100644
--- a/docs/styles/ui.css
+++ b/docs/styles/ui.css
@@ -782,32 +782,365 @@ img {
   color: var(--color-red);
 }
 
+.catalog {
+  position: relative;
+}
+
+.catalog:hover .catalog__btn {
+  color: #999;
+}
+
+.catalog:hover .catalog__btn::before {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.catalog:hover .catalog__list {
+  padding: 16px 20px;
+  padding-top: 60px;
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+}
+
+.catalog__btn {
+  position: relative;
+  z-index: 2;
+  font-family: "Montserrat", sans-serif, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  text-transform: uppercase;
+  line-height: 150%;
+  color: #222222;
+  padding-left: 32px;
+}
+
+.catalog__btn::before {
+  position: absolute;
+  content: "";
+  display: block;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 6H19.5V8H4.5V6Z' fill='black' /%3e%3cpath d='M4.5 11H19.5V13H4.5V11Z' fill='black' /%3e%3cpath d='M4.5 16H19.5V18H4.5V16Z' fill='black' /%3e%3c/svg%3e");
+}
+
 .catalog__list {
+  position: absolute;
+  transition: 0.25s;
+  z-index: 1;
+  top: -14px;
+  left: 50%;
+  border: 4px solid #ebebeb;
+  border-radius: 20px;
+  transform: translateX(-50%);
+  width: calc(100% + 40px);
+  background-color: #fff;
+  padding-top: 60px;
+  box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+  padding: 0;
+}
+
+.catalog__item {
+  text-decoration: none;
+  list-style: none;
+  margin-bottom: 16px;
+}
+
+.catalog__item:last-child {
+  margin-bottom: 0;
+}
+
+.catalog__link img {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 12px;
+  width: 36px;
+  height: 36px;
+}
+
+.catalog__link span {
+  font-family: "Montserrat", sans-serif, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+}
+
+.catalog__link:hover span {
+  text-decoration: underline;
+}
+
+.menu__align {
   display: none;
 }
 
 .menu__item {
+  position: relative;
   display: inline-block;
 }
 
+.menu__item.active .menu__link {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 150%;
+  color: #000;
+}
+
+.menu__item.active::before {
+  position: absolute;
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  transform: translateY(-50%);
+  background-color: #000;
+  border-radius: 50%;
+  top: 50%;
+  left: 0;
+}
+
+.menu__link {
+  display: block;
+  padding: 10px 20px;
+  font-family: "Montserrat", sans-serif, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+  color: #666;
+  transition: 0.25s;
+}
+
+.menu__link:hover {
+  color: #222222;
+}
+
+.n-search {
+  position: relative;
+}
+
+.n-search.active .n-search__wrapper {
+  background-color: #F7F7F7;
+  display: flex;
+}
+
+.n-search.active .n-search__button {
+  background-color: #000;
+}
+
+.n-search__wrapper {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  align-items: center;
+  padding: 7px 16px;
+  padding-right: 50px;
+  border-radius: 12px;
+  left: 20px;
+  top: 50%;
+  transform: translate(-100%, -50%);
+  width: 800px;
+  background-color: #fff;
+}
+
+.n-search__inner--select-catalog {
+  position: relative;
+  min-width: 220px;
+  border-right: 4px solid #ebebeb;
+}
+
+.n-search__inner--select-catalog::after {
+  position: absolute;
+  content: "";
+  top: 100%;
+  width: calc(100% + 20px);
+  left: -20px;
+  height: 20px;
+}
+
+.n-search__inner--select-catalog:hover .n-search__list {
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+  z-index: 3;
+  transition: 0.25s;
+}
+
+.n-search__inner--select-catalog:hover .n-search__button-catalog::before {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.n-search__inner--search-input {
+  flex-grow: 2;
+  padding-left: 20px;
+}
+
+.n-search__inner input {
+  width: 100%;
+  background-color: transparent;
+}
+
+.n-search__list {
+  position: absolute;
+  z-index: 1;
+  top: 46px;
+  left: -20px;
+  border: 4px solid #ebebeb;
+  border-radius: 20px;
+  width: 240px;
+  background-color: #fff;
+  padding: 16px 8px;
+  box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+}
+
+.n-search__item {
+  display: block;
+}
+
+.n-search__link {
+  display: block;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: none;
+}
+
+.n-search__link:hover {
+  background-color: #f1f1f1;
+  color: #363636;
+}
+
+.n-search__link:last-child {
+  margin-bottom: 0;
+}
+
+.n-search__button {
+  position: relative;
+  cursor: pointer;
+  display: block;
+  z-index: 2;
+  width: 60px;
+  height: 44px;
+  border-radius: 16px;
+  transition: 0.25s;
+}
+
+.n-search__button::after {
+  position: absolute;
+  content: "";
+  transition: 0.25s;
+  display: block;
+  top: 50%;
+  left: 50%;
+  width: 32px;
+  height: 32px;
+  transform: translate(-50%, -50%);
+  mask-repeat: no-repeat;
+  mask-position: center center;
+  background-color: #dedee2;
+  mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 9.84871 15.3729 11.551 14.3199 12.9056L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L12.9056 14.3199C11.551 15.3729 9.84871 16 8 16C3.58172 16 0 12.4183 0 8Z' fill='%238B8DA3' /%3e%3c/svg%3e");
+}
+
+.n-search__button:hover {
+  background-color: #000;
+}
+
+.n-search__button:hover:after {
+  background-color: #fff;
+}
+
+.n-search__button-catalog {
+  position: relative;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  padding-left: 32px;
+  padding-right: 16px;
+  line-height: 156%;
+  color: #999;
+}
+
+.n-search__button-catalog::before {
+  position: absolute;
+  content: "";
+  top: 1px;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9.00001L12 15L18 9.00001' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.n-search__button-close {
+  position: absolute;
+  cursor: pointer;
+  top: 10px;
+  right: 40px;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.header {
+  box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  background: #fff;
+  padding: 6px 0;
+  margin: 0 10px;
+  border-radius: 0 0 20px 20px;
+}
+
+.header.menu-active .header__inner--nav {
+  left: 0;
+}
+
+.header.menu-active .header__overlay {
+  display: block;
+}
+
 .header__wrapper {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 }
 
-.header__inner {
-  border: 1px solid gray;
+.header__inner--logo {
+  position: relative;
 }
 
-.header__inner--nav {
+.header__inner--nav,
+.header__inner--auth {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
 }
 
+.header__sub-inner--logo {
+  display: none;
+}
+
+.header__sub-inner--catalog {
+  margin-right: 60px;
+}
+
+.header__sub-inner--search {
+  margin-left: 32px;
+}
+
 .header__logo {
+  position: relative;
   width: 126px;
   height: 30px;
 }
@@ -819,6 +1152,42 @@ img {
   object-position: left center;
 }
 
+.header__auth {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 150%;
+  text-transform: uppercase;
+  height: auto;
+  border-radius: 12px;
+  padding: 10px 20px;
+  color: #222222;
+  background-color: #F7F7F7;
+}
+
+.header__auth:hover {
+  background: #000;
+  color: #fff;
+}
+
+.header__button-open-menu {
+  display: none;
+  margin-right: 20px;
+}
+
+.header__button-close-menu {
+  cursor: pointer;
+  user-select: none;
+  display: block;
+  width: 32px;
+  height: 32px;
+  background: url("../img/svg/ico-list-close.svg") no-repeat center/contain;
+}
+
+.header__overlay {
+  display: none;
+}
+
 .header__btn-nav {
   display: none;
 }
@@ -947,4 +1316,138 @@ img {
     display: none;
   }
 }
+
+@media (max-width: 1439px) {
+  .catalog__btn {
+    font-size: 14px;
+  }
+
+  .menu__item.active .menu__link {
+    font-size: 14px;
+  }
+
+  .menu__link {
+    padding: 8px 12px;
+    font-size: 14px;
+  }
+
+  .n-search__wrapper {
+    width: 610px;
+  }
+
+  .n-search__link {
+    font-size: 14px;
+  }
+
+  .header__sub-inner--catalog {
+    margin-right: 20px;
+  }
+
+  .header__sub-inner--search {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 1279px) {
+  .catalog__btn {
+    display: none;
+  }
+
+  .catalog__list {
+    position: relative;
+    top: 0;
+    left: 0;
+    transform: none;
+    opacity: 1;
+    visibility: visible;
+    height: auto;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  .catalog__link img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .catalog__link span {
+    font-size: 14px;
+  }
+
+  .menu__item {
+    display: block;
+  }
+
+  .header__inner--nav {
+    transition: 0.25s;
+    align-items: flex-start;
+    overflow-y: auto;
+    position: fixed;
+    display: block;
+    z-index: 3;
+    height: 100%;
+    left: -380px;
+    top: 0;
+    padding: 20px 32px 60px;
+    width: 360px;
+    background-color: #fff;
+    box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  }
+
+  .header__sub-inner--logo {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .header__sub-inner--logo .header__logo {
+    display: block;
+    width: 140px;
+    height: 40px;
+  }
+
+  .header__sub-inner--catalog {
+    margin-right: 0;
+  }
+
+  .header__sub-inner--search {
+    display: none;
+  }
+
+  .header__sub-inner {
+    width: 100%;
+    margin-bottom: 32px;
+  }
+
+  .header__sub-inner:last-child {
+    margin-bottom: 0;
+  }
+
+  .header__button-open-menu {
+    display: block;
+    width: 32px;
+    height: 32px;
+    background: url("../img/svg/ico-list-open.svg") no-repeat center/contain;
+  }
+
+  .header__overlay {
+    z-index: 1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(139, 139, 139, 0.2196078431);
+  }
+}
+
+@media (max-width: 768px) {
+  .header__inner--nav {
+    width: 100%;
+    left: -100%;
+  }
+}
 /*# sourceMappingURL=maps/ui.css.map */
diff --git a/docs/styles/users.css b/docs/styles/users.css
index ff1f8c9..6479113 100644
--- a/docs/styles/users.css
+++ b/docs/styles/users.css
@@ -782,32 +782,365 @@ img {
   color: var(--color-red);
 }
 
+.catalog {
+  position: relative;
+}
+
+.catalog:hover .catalog__btn {
+  color: #999;
+}
+
+.catalog:hover .catalog__btn::before {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.catalog:hover .catalog__list {
+  padding: 16px 20px;
+  padding-top: 60px;
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+}
+
+.catalog__btn {
+  position: relative;
+  z-index: 2;
+  font-family: "Montserrat", sans-serif, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  text-transform: uppercase;
+  line-height: 150%;
+  color: #222222;
+  padding-left: 32px;
+}
+
+.catalog__btn::before {
+  position: absolute;
+  content: "";
+  display: block;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 6H19.5V8H4.5V6Z' fill='black' /%3e%3cpath d='M4.5 11H19.5V13H4.5V11Z' fill='black' /%3e%3cpath d='M4.5 16H19.5V18H4.5V16Z' fill='black' /%3e%3c/svg%3e");
+}
+
 .catalog__list {
+  position: absolute;
+  transition: 0.25s;
+  z-index: 1;
+  top: -14px;
+  left: 50%;
+  border: 4px solid #ebebeb;
+  border-radius: 20px;
+  transform: translateX(-50%);
+  width: calc(100% + 40px);
+  background-color: #fff;
+  padding-top: 60px;
+  box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+  padding: 0;
+}
+
+.catalog__item {
+  text-decoration: none;
+  list-style: none;
+  margin-bottom: 16px;
+}
+
+.catalog__item:last-child {
+  margin-bottom: 0;
+}
+
+.catalog__link img {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 12px;
+  width: 36px;
+  height: 36px;
+}
+
+.catalog__link span {
+  font-family: "Montserrat", sans-serif, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+}
+
+.catalog__link:hover span {
+  text-decoration: underline;
+}
+
+.menu__align {
   display: none;
 }
 
 .menu__item {
+  position: relative;
   display: inline-block;
 }
 
+.menu__item.active .menu__link {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 150%;
+  color: #000;
+}
+
+.menu__item.active::before {
+  position: absolute;
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  transform: translateY(-50%);
+  background-color: #000;
+  border-radius: 50%;
+  top: 50%;
+  left: 0;
+}
+
+.menu__link {
+  display: block;
+  padding: 10px 20px;
+  font-family: "Montserrat", sans-serif, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+  color: #666;
+  transition: 0.25s;
+}
+
+.menu__link:hover {
+  color: #222222;
+}
+
+.n-search {
+  position: relative;
+}
+
+.n-search.active .n-search__wrapper {
+  background-color: #F7F7F7;
+  display: flex;
+}
+
+.n-search.active .n-search__button {
+  background-color: #000;
+}
+
+.n-search__wrapper {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  align-items: center;
+  padding: 7px 16px;
+  padding-right: 50px;
+  border-radius: 12px;
+  left: 20px;
+  top: 50%;
+  transform: translate(-100%, -50%);
+  width: 800px;
+  background-color: #fff;
+}
+
+.n-search__inner--select-catalog {
+  position: relative;
+  min-width: 220px;
+  border-right: 4px solid #ebebeb;
+}
+
+.n-search__inner--select-catalog::after {
+  position: absolute;
+  content: "";
+  top: 100%;
+  width: calc(100% + 20px);
+  left: -20px;
+  height: 20px;
+}
+
+.n-search__inner--select-catalog:hover .n-search__list {
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+  z-index: 3;
+  transition: 0.25s;
+}
+
+.n-search__inner--select-catalog:hover .n-search__button-catalog::before {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.n-search__inner--search-input {
+  flex-grow: 2;
+  padding-left: 20px;
+}
+
+.n-search__inner input {
+  width: 100%;
+  background-color: transparent;
+}
+
+.n-search__list {
+  position: absolute;
+  z-index: 1;
+  top: 46px;
+  left: -20px;
+  border: 4px solid #ebebeb;
+  border-radius: 20px;
+  width: 240px;
+  background-color: #fff;
+  padding: 16px 8px;
+  box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+}
+
+.n-search__item {
+  display: block;
+}
+
+.n-search__link {
+  display: block;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: none;
+}
+
+.n-search__link:hover {
+  background-color: #f1f1f1;
+  color: #363636;
+}
+
+.n-search__link:last-child {
+  margin-bottom: 0;
+}
+
+.n-search__button {
+  position: relative;
+  cursor: pointer;
+  display: block;
+  z-index: 2;
+  width: 60px;
+  height: 44px;
+  border-radius: 16px;
+  transition: 0.25s;
+}
+
+.n-search__button::after {
+  position: absolute;
+  content: "";
+  transition: 0.25s;
+  display: block;
+  top: 50%;
+  left: 50%;
+  width: 32px;
+  height: 32px;
+  transform: translate(-50%, -50%);
+  mask-repeat: no-repeat;
+  mask-position: center center;
+  background-color: #dedee2;
+  mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 9.84871 15.3729 11.551 14.3199 12.9056L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L12.9056 14.3199C11.551 15.3729 9.84871 16 8 16C3.58172 16 0 12.4183 0 8Z' fill='%238B8DA3' /%3e%3c/svg%3e");
+}
+
+.n-search__button:hover {
+  background-color: #000;
+}
+
+.n-search__button:hover:after {
+  background-color: #fff;
+}
+
+.n-search__button-catalog {
+  position: relative;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  padding-left: 32px;
+  padding-right: 16px;
+  line-height: 156%;
+  color: #999;
+}
+
+.n-search__button-catalog::before {
+  position: absolute;
+  content: "";
+  top: 1px;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9.00001L12 15L18 9.00001' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.n-search__button-close {
+  position: absolute;
+  cursor: pointer;
+  top: 10px;
+  right: 40px;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+}
+
+.header {
+  box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  background: #fff;
+  padding: 6px 0;
+  margin: 0 10px;
+  border-radius: 0 0 20px 20px;
+}
+
+.header.menu-active .header__inner--nav {
+  left: 0;
+}
+
+.header.menu-active .header__overlay {
+  display: block;
+}
+
 .header__wrapper {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 }
 
-.header__inner {
-  border: 1px solid gray;
+.header__inner--logo {
+  position: relative;
 }
 
-.header__inner--nav {
+.header__inner--nav,
+.header__inner--auth {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
 }
 
+.header__sub-inner--logo {
+  display: none;
+}
+
+.header__sub-inner--catalog {
+  margin-right: 60px;
+}
+
+.header__sub-inner--search {
+  margin-left: 32px;
+}
+
 .header__logo {
+  position: relative;
   width: 126px;
   height: 30px;
 }
@@ -819,6 +1152,42 @@ img {
   object-position: left center;
 }
 
+.header__auth {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 150%;
+  text-transform: uppercase;
+  height: auto;
+  border-radius: 12px;
+  padding: 10px 20px;
+  color: #222222;
+  background-color: #F7F7F7;
+}
+
+.header__auth:hover {
+  background: #000;
+  color: #fff;
+}
+
+.header__button-open-menu {
+  display: none;
+  margin-right: 20px;
+}
+
+.header__button-close-menu {
+  cursor: pointer;
+  user-select: none;
+  display: block;
+  width: 32px;
+  height: 32px;
+  background: url("../img/svg/ico-list-close.svg") no-repeat center/contain;
+}
+
+.header__overlay {
+  display: none;
+}
+
 .header__btn-nav {
   display: none;
 }
@@ -1007,9 +1376,143 @@ img {
   }
 }
 
+@media (max-width: 1439px) {
+  .catalog__btn {
+    font-size: 14px;
+  }
+
+  .menu__item.active .menu__link {
+    font-size: 14px;
+  }
+
+  .menu__link {
+    padding: 8px 12px;
+    font-size: 14px;
+  }
+
+  .n-search__wrapper {
+    width: 610px;
+  }
+
+  .n-search__link {
+    font-size: 14px;
+  }
+
+  .header__sub-inner--catalog {
+    margin-right: 20px;
+  }
+
+  .header__sub-inner--search {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 1279px) {
+  .catalog__btn {
+    display: none;
+  }
+
+  .catalog__list {
+    position: relative;
+    top: 0;
+    left: 0;
+    transform: none;
+    opacity: 1;
+    visibility: visible;
+    height: auto;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  .catalog__link img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .catalog__link span {
+    font-size: 14px;
+  }
+
+  .menu__item {
+    display: block;
+  }
+
+  .header__inner--nav {
+    transition: 0.25s;
+    align-items: flex-start;
+    overflow-y: auto;
+    position: fixed;
+    display: block;
+    z-index: 3;
+    height: 100%;
+    left: -380px;
+    top: 0;
+    padding: 20px 32px 60px;
+    width: 360px;
+    background-color: #fff;
+    box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+  }
+
+  .header__sub-inner--logo {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .header__sub-inner--logo .header__logo {
+    display: block;
+    width: 140px;
+    height: 40px;
+  }
+
+  .header__sub-inner--catalog {
+    margin-right: 0;
+  }
+
+  .header__sub-inner--search {
+    display: none;
+  }
+
+  .header__sub-inner {
+    width: 100%;
+    margin-bottom: 32px;
+  }
+
+  .header__sub-inner:last-child {
+    margin-bottom: 0;
+  }
+
+  .header__button-open-menu {
+    display: block;
+    width: 32px;
+    height: 32px;
+    background: url("../img/svg/ico-list-open.svg") no-repeat center/contain;
+  }
+
+  .header__overlay {
+    z-index: 1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(139, 139, 139, 0.2196078431);
+  }
+}
+
 @media (max-width: 992px) {
   .users__content {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 768px) {
+  .header__inner--nav {
+    width: 100%;
+    left: -100%;
+  }
+}
 /*# sourceMappingURL=maps/users.css.map */
diff --git a/docs/ui-colors.html b/docs/ui-colors.html
index 19b696e..f57909e 100644
--- a/docs/ui-colors.html
+++ b/docs/ui-colors.html
@@ -33,9 +33,12 @@
     <header class="header" id="header">
       <div class="l-default">
         <div class="header__wrapper">
+          <div class="header__overlay"></div>
           <div class="header__inner header__inner--logo"><a class="header__logo" href="#"> <img src="./img/svg/ico-logo.svg" alt="title" srcset=""></a></div>
-          <div class="header__inner header__inner--nav"> 
-            <button class="header__btn-nav" type="button"></button>
+          <div class="header__inner header__inner--nav">
+            <div class="header__sub-inner header__sub-inner--logo"> <a class="header__logo" href="#"> <img src="./img/svg/ico-logo.svg" alt="title" srcset=""></a>
+              <button class="header__button-close-menu" type="button"></button>
+            </div>
             <div class="header__sub-inner header__sub-inner--catalog">
               <div class="header__catalog catalog"> 
                 <button class="catalog__btn" type="button">Другие продукты</button>
@@ -48,9 +51,11 @@
             </div>
             <div class="header__sub-inner header__sub-inner--menu">
               <div class="header__menu menu"> 
-                <buttin class="menu__btn" type="button"></buttin>
+                <div class="menu__align">
+                  <buttin class="menu__btn" type="button"></buttin>
+                </div>
                 <ul class="menu__list"> 
-                  <li class="menu__item"> <a class="menu__link" href="#">Разделы</a></li>
+                  <li class="menu__item active"><a class="menu__link" href="#">Разделы</a></li>
                   <li class="menu__item"> <a class="menu__link" href="#">Комментарии</a></li>
                   <li class="menu__item"> <a class="menu__link" href="#">Публикации</a></li>
                   <li class="menu__item"> <a class="menu__link" href="#">Пользователи</a></li>
@@ -60,14 +65,34 @@
               </div>
             </div>
             <div class="header__sub-inner header__sub-inner--search">
-              <div class="header__h-search h-search">
-                <button class="h-search__search" type="button">
-                  <p>1</p>
-                </button>
+              <div class="header__n-search n-search">
+                <form class="n-search__form" action="" method="post"> 
+                  <div class="n-search__align">
+                    <button class="n-search__button" type="submit"></button>
+                  </div>
+                  <div class="n-search__wrapper">
+                    <div class="n-search__inner n-search__inner--select-catalog">
+                      <button class="n-search__button-catalog" type="button">Искать в разделе</button>
+                      <ul class="n-search__list"> 
+                        <li class="n-search__item"> <a class="n-search__link">Разделы</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Комментарии</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Публикации</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Пользователи</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Чат</a></li>
+                      </ul>
+                    </div>
+                    <div class="n-search__inner n-search__inner--search-input">
+                      <input type="hidden" name="category">
+                      <input type="text" name="resource">
+                    </div>
+                    <button class="n-search__button-close" type="button"></button>
+                  </div>
+                </form>
               </div>
             </div>
           </div>
           <div class="header__inner header__inner--auth">
+            <button class="header__button-open-menu" type="button"></button>
             <button class="header__auth" type="button">Войти</button>
           </div>
         </div>
diff --git a/docs/users.html b/docs/users.html
index 7509b7c..2a11b99 100644
--- a/docs/users.html
+++ b/docs/users.html
@@ -33,9 +33,12 @@
     <header class="header" id="header">
       <div class="l-default">
         <div class="header__wrapper">
+          <div class="header__overlay"></div>
           <div class="header__inner header__inner--logo"><a class="header__logo" href="#"> <img src="./img/svg/ico-logo.svg" alt="title" srcset=""></a></div>
-          <div class="header__inner header__inner--nav"> 
-            <button class="header__btn-nav" type="button"></button>
+          <div class="header__inner header__inner--nav">
+            <div class="header__sub-inner header__sub-inner--logo"> <a class="header__logo" href="#"> <img src="./img/svg/ico-logo.svg" alt="title" srcset=""></a>
+              <button class="header__button-close-menu" type="button"></button>
+            </div>
             <div class="header__sub-inner header__sub-inner--catalog">
               <div class="header__catalog catalog"> 
                 <button class="catalog__btn" type="button">Другие продукты</button>
@@ -48,9 +51,11 @@
             </div>
             <div class="header__sub-inner header__sub-inner--menu">
               <div class="header__menu menu"> 
-                <buttin class="menu__btn" type="button"></buttin>
+                <div class="menu__align">
+                  <buttin class="menu__btn" type="button"></buttin>
+                </div>
                 <ul class="menu__list"> 
-                  <li class="menu__item"> <a class="menu__link" href="#">Разделы</a></li>
+                  <li class="menu__item active"><a class="menu__link" href="#">Разделы</a></li>
                   <li class="menu__item"> <a class="menu__link" href="#">Комментарии</a></li>
                   <li class="menu__item"> <a class="menu__link" href="#">Публикации</a></li>
                   <li class="menu__item"> <a class="menu__link" href="#">Пользователи</a></li>
@@ -60,14 +65,34 @@
               </div>
             </div>
             <div class="header__sub-inner header__sub-inner--search">
-              <div class="header__h-search h-search">
-                <button class="h-search__search" type="button">
-                  <p>1</p>
-                </button>
+              <div class="header__n-search n-search">
+                <form class="n-search__form" action="" method="post"> 
+                  <div class="n-search__align">
+                    <button class="n-search__button" type="submit"></button>
+                  </div>
+                  <div class="n-search__wrapper">
+                    <div class="n-search__inner n-search__inner--select-catalog">
+                      <button class="n-search__button-catalog" type="button">Искать в разделе</button>
+                      <ul class="n-search__list"> 
+                        <li class="n-search__item"> <a class="n-search__link">Разделы</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Комментарии</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Публикации</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Пользователи</a></li>
+                        <li class="n-search__item"> <a class="n-search__link">Чат</a></li>
+                      </ul>
+                    </div>
+                    <div class="n-search__inner n-search__inner--search-input">
+                      <input type="hidden" name="category">
+                      <input type="text" name="resource">
+                    </div>
+                    <button class="n-search__button-close" type="button"></button>
+                  </div>
+                </form>
               </div>
             </div>
           </div>
           <div class="header__inner header__inner--auth">
+            <button class="header__button-open-menu" type="button"></button>
             <button class="header__auth" type="button">Войти</button>
           </div>
         </div>
diff --git a/src/blocks/components/_components.scss b/src/blocks/components/_components.scss
index 07fccb0..77a473c 100644
--- a/src/blocks/components/_components.scss
+++ b/src/blocks/components/_components.scss
@@ -1,3 +1,4 @@
 @import "user-card/user-card";
 @import "catalog/catalog";
-@import "menu/menu";
\ No newline at end of file
+@import "menu/menu";
+@import "n-search/n-search";
\ No newline at end of file
diff --git a/src/blocks/components/catalog/_catalog.scss b/src/blocks/components/catalog/_catalog.scss
index 72006f1..1dfd819 100644
--- a/src/blocks/components/catalog/_catalog.scss
+++ b/src/blocks/components/catalog/_catalog.scss
@@ -1,6 +1,135 @@
 .catalog {
+    position: relative;
+
+    &:hover {
+        .catalog {
+            &__btn {
+                color: $grayTextColor;
+
+                &::before {
+                    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+                }
+            }
+
+            &__list {
+                padding: 16px 20px;
+                padding-top: 60px;
+                opacity: 1;
+                visibility: visible;
+                height: auto;
+            }
+        }
+    }
+
+    &__btn {
+        position: relative;
+        z-index: 2;
+        font-family: $primary_font, sans-serif;
+        font-weight: 500;
+        font-size: 16px;
+        text-transform: uppercase;
+        line-height: 150%;
+        color: $blackTextColor;
+        padding-left: 32px;
+
+        @include for-desktop {
+            font-size: 14px;
+        }
+
+        @include for-sm-desktop {
+            display: none;
+        }
+
+        &::before {
+            position: absolute;
+            content: "";
+            display: block;
+            top: 0;
+            left: 0;
+            width: 24px;
+            height: 24px;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            background-position: center;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 6H19.5V8H4.5V6Z' fill='black' /%3e%3cpath d='M4.5 11H19.5V13H4.5V11Z' fill='black' /%3e%3cpath d='M4.5 16H19.5V18H4.5V16Z' fill='black' /%3e%3c/svg%3e");
+        }
+    }
 
     &__list {
-        display: none;
+        position: absolute;
+        transition: $transition;
+        z-index: 1;
+        top: -14px;
+        left: 50%;
+        border: 4px solid #ebebeb;
+        border-radius: 20px;
+        transform: translateX(-50%);
+        width: calc(100% + 40px);
+        background-color: $white;
+        padding-top: 60px;
+        box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+        opacity: 0;
+        visibility: hidden;
+        height: 0;
+        padding: 0;
+
+        @include for-sm-desktop {
+            position: relative;
+            top: 0;
+            left: 0;
+            transform: none;
+            opacity: 1;
+            visibility: visible;
+            height: auto;
+            width: 100%;
+            border: none;
+            box-shadow: none;
+            background-color: transparent;
+            padding-left: 0;
+            margin: 0;
+        }
+    }
+
+    &__item {
+        text-decoration: none;
+        list-style: none;
+        margin-bottom: 16px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    &__link {
+
+        img {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 12px;
+            width: 36px;
+            height: 36px;
+
+            @include for-sm-desktop {
+                width: 26px;
+                height: 26px;
+            }
+        }
+
+        span {
+            font-family: $primary_font, sans-serif;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 150%;
+
+            @include for-sm-desktop {
+                font-size: 14px;
+            }
+        }
+
+        &:hover {
+            span {
+                text-decoration: underline;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/blocks/components/menu/_menu.scss b/src/blocks/components/menu/_menu.scss
index 8c7de9e..a6affa7 100644
--- a/src/blocks/components/menu/_menu.scss
+++ b/src/blocks/components/menu/_menu.scss
@@ -1,10 +1,60 @@
 .menu {
-
-    &__list {
-
+    &__align {
+        display: none;
     }
 
     &__item {
+        position: relative;
         display: inline-block;
+
+        &.active {
+            .menu__link {
+                font-weight: 700;
+                font-size: 16px;
+                line-height: 150%;
+                color: #000;
+
+                @include for-desktop {
+                    font-size: 14px;
+                }
+            }
+
+            &::before {
+                position: absolute;
+                content: "";
+                display: block;
+                width: 6px;
+                height: 6px;
+                transform: translateY(-50%);
+                background-color: #000;
+                border-radius: 50%;
+                top: 50%;
+                left: 0;
+            }
+        }
+
+        @include for-sm-desktop {
+            display: block;
+        }
+    }
+
+    &__link {
+        display: block;
+        padding: 10px 20px;
+        font-family: $primary_font, sans-serif;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 150%;
+        color: #666;
+        transition: $transition;
+
+        @include for-desktop {
+            padding: 8px 12px;
+            font-size: 14px;
+        }
+
+        &:hover {
+            color: $blackTextColor;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/blocks/components/menu/menu.pug b/src/blocks/components/menu/menu.pug
index 2e5de8c..b0e4bb1 100644
--- a/src/blocks/components/menu/menu.pug
+++ b/src/blocks/components/menu/menu.pug
@@ -1,6 +1,7 @@
-buttin(type="button").menu__btn
+.menu__align
+    buttin(type="button").menu__btn
 ul.menu__list 
-    li.menu__item 
+    li.menu__item.active
         a(href="#").menu__link Разделы
     li.menu__item 
         a(href="#").menu__link Комментарии
diff --git a/src/blocks/components/n-search/_n-search.scss b/src/blocks/components/n-search/_n-search.scss
new file mode 100644
index 0000000..e977526
--- /dev/null
+++ b/src/blocks/components/n-search/_n-search.scss
@@ -0,0 +1,194 @@
+.n-search {
+    position: relative;
+
+    &.active {
+        .n-search {
+            &__wrapper {
+                background-color: $bgNSearch;
+                display: flex;
+            }
+
+            &__button {
+                background-color: #000;
+            }
+        }
+    }
+
+    &__wrapper {
+        position: absolute;
+        z-index: 1;
+        display: none;
+        align-items: center;
+        padding: 7px 16px;
+        padding-right: 50px;
+        border-radius: 12px;
+        left: 20px;
+        top: 50%;
+        transform: translate(-100%, -50%);
+        width: 800px;
+        background-color: #fff;
+
+        @include for-desktop {
+            width: 610px;
+        }
+    }
+
+    &__inner {
+
+        &--select-catalog {
+            position: relative;
+            min-width: 220px;
+            border-right: 4px solid #ebebeb;
+
+            &::after {
+                position: absolute;
+                content: "";
+                top: 100%;
+                width: calc(100% + 20px);
+                left: -20px;
+                height: 20px;
+            }
+
+            &:hover {
+                .n-search {
+                    &__list {
+                        opacity: 1;
+                        visibility: visible;
+                        height: auto;
+                        z-index: 3;
+                        transition: $transition;
+                    }
+
+                    &__button-catalog {
+                        &::before {
+                            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+                        }
+                    }
+                }
+            }
+        }
+
+        &--search-input {
+            flex-grow: 2;
+            padding-left: 20px;
+        }
+
+        input {
+            width: 100%;
+            background-color: transparent;
+        }
+    }
+
+    &__list {
+        position: absolute;
+        z-index: 1;
+        top: 46px;
+        left: -20px;
+        border: 4px solid #ebebeb;
+        border-radius: 20px;
+        width: 240px;
+        background-color: $white;
+        padding: 16px 8px;
+        box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+        opacity: 0;
+        visibility: hidden;
+        height: 0;
+    }
+
+    &__item {
+        display: block;
+        
+    }
+
+    &__link {
+        display: block;
+        padding: 8px 12px;
+        border-radius: 4px;
+        transition: none;
+
+        @include for-desktop {
+            font-size: 14px;
+        }
+
+        &:hover {
+            background-color: #f1f1f1;
+            color: #363636;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    &__button {
+        position: relative;
+        cursor: pointer;
+        display: block;
+        z-index: 2;
+        width: 60px;
+        height: 44px;
+        border-radius: 16px;
+        transition: $transition;
+
+        &::after {
+            position: absolute;
+            content: "";
+            transition: $transition;
+            display: block;
+            top: 50%;
+            left: 50%;
+            width: 32px;
+            height: 32px;
+            transform: translate(-50%, -50%);
+            mask-repeat: no-repeat;
+            mask-position: center center;
+            background-color: #dedee2;
+            mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 9.84871 15.3729 11.551 14.3199 12.9056L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L12.9056 14.3199C11.551 15.3729 9.84871 16 8 16C3.58172 16 0 12.4183 0 8Z' fill='%238B8DA3' /%3e%3c/svg%3e");
+        }
+
+        &:hover {
+            background-color: #000;
+
+            &:after {
+                background-color: $white;
+            }
+        }
+    }
+
+    &__button-catalog {
+        position: relative;
+        font-family: "Montserrat", sans-serif;
+        font-weight: 400;
+        font-size: 16px;
+        padding-left: 32px;
+        padding-right: 16px;
+        line-height: 156%;
+        color: #999;
+
+        &::before {
+            position: absolute;
+            content: "";
+            top: 1px;
+            left: 0;
+            width: 24px;
+            height: 24px;
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-position: center center;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9.00001L12 15L18 9.00001' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+        }
+    }
+
+    &__button-close {
+        position: absolute;
+        cursor: pointer;
+        top: 10px;
+        right: 40px;
+        width: 24px;
+        height: 24px;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center center;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 7L12 12M17 17L12 12M12 12L17 7L7 17' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
+    }
+}
\ No newline at end of file
diff --git a/src/blocks/components/n-search/n-search.js b/src/blocks/components/n-search/n-search.js
new file mode 100644
index 0000000..13e10b5
--- /dev/null
+++ b/src/blocks/components/n-search/n-search.js
@@ -0,0 +1,60 @@
+(function () {
+  const parent = document.querySelector(".n-search");
+  if (!parent) return;
+
+  const header = document.querySelector(".header");
+  const btnSearch = parent.querySelector(".n-search__button");
+  const btnClose = parent.querySelector(".n-search__button-close");
+  const items = parent.querySelectorAll(".n-search__link");
+  const buttonCatalog = parent.querySelector(".n-search__button-catalog");
+  const inputSearchMain = parent.querySelector(
+    ".n-search__inner--search-input [name='resource']"
+  );
+  const inputCategory = parent.querySelector(
+    ".n-search__inner--search-input [name='category']"
+  );
+  let flagOpenSearch = false;
+
+  function closeSearchWrapper() {
+    if (parent.classList.contains("active")) {
+      parent.classList.remove("active");
+    }
+
+    buttonCatalog.innerHTML = "Искать в разделе";
+    inputSearchMain.value = "";
+    inputCategory.value = "";
+    flagOpenSearch = false;
+  }
+
+  function initButtonsSearch() {
+    btnSearch.addEventListener("click", (e) => {
+      if (!flagOpenSearch || inputSearchMain.value == "") e.preventDefault();
+
+      if (!parent.classList.contains("active")) {
+        parent.classList.add("active");
+      }
+
+      flagOpenSearch = true;
+    });
+
+    btnClose.addEventListener("click", () => {
+      closeSearchWrapper();
+    });
+  }
+
+  function initSearchSelectList() {
+    items.forEach((item) => {
+      item.addEventListener("click", () => {
+        buttonCatalog.innerHTML = item.innerHTML;
+        inputCategory.value = item.innerHTML;
+      });
+    });
+  }
+
+  function init(parent) {
+    initButtonsSearch(parent);
+    initSearchSelectList(parent);
+  }
+
+  init(parent);
+})();
diff --git a/src/blocks/components/n-search/n-search.pug b/src/blocks/components/n-search/n-search.pug
new file mode 100644
index 0000000..95268ae
--- /dev/null
+++ b/src/blocks/components/n-search/n-search.pug
@@ -0,0 +1,22 @@
+
+form.n-search__form(action="" method="post") 
+    .n-search__align
+        button(type="submit").n-search__button
+    .n-search__wrapper
+        .n-search__inner.n-search__inner--select-catalog
+            button(type="button").n-search__button-catalog Искать в разделе
+            ul.n-search__list 
+                li.n-search__item 
+                    a.n-search__link Разделы
+                li.n-search__item 
+                    a.n-search__link Комментарии
+                li.n-search__item 
+                    a.n-search__link Публикации
+                li.n-search__item 
+                    a.n-search__link Пользователи
+                li.n-search__item 
+                    a.n-search__link Чат
+        .n-search__inner.n-search__inner--search-input
+            input(type="hidden", name="category")
+            input(type="text" name="resource")
+        button(type="button").n-search__button-close
\ No newline at end of file
diff --git a/src/blocks/modules/header/header.js b/src/blocks/modules/header/header.js
new file mode 100644
index 0000000..cf4411e
--- /dev/null
+++ b/src/blocks/modules/header/header.js
@@ -0,0 +1,26 @@
+(function () {
+  const header = document.querySelector(".header");
+  if (!header) return;
+
+  const buttonMenuOpen = header.querySelector(".header__button-open-menu");
+  const buttonMenuClose = header.querySelector(".header__button-close-menu");
+  const headerOverflow = header.querySelector(".header__overlay");
+
+  buttonMenuOpen.addEventListener("click", () => {
+    if (!header.classList.contains("menu-active")) {
+      header.classList.add("menu-active");
+    }
+  });
+
+  buttonMenuClose.addEventListener("click", () => {
+    if (header.classList.contains("menu-active")) {
+      header.classList.remove("menu-active");
+    }
+  });
+
+  headerOverflow.addEventListener("click", () => {
+    if (header.classList.contains("menu-active")) {
+      header.classList.remove("menu-active");
+    }
+  });
+})();
diff --git a/src/blocks/modules/header/header.pug b/src/blocks/modules/header/header.pug
index ec335e2..ada90c5 100644
--- a/src/blocks/modules/header/header.pug
+++ b/src/blocks/modules/header/header.pug
@@ -1,11 +1,15 @@
 header.header#header
     .l-default
         .header__wrapper
+            .header__overlay
             .header__inner.header__inner--logo
                 a(href="#").header__logo 
                     img(src="./img/svg/ico-logo.svg" alt="title" srcset="")
-            .header__inner.header__inner--nav 
-                button(type="button").header__btn-nav
+            .header__inner.header__inner--nav
+                .header__sub-inner.header__sub-inner--logo 
+                    a(href="#").header__logo 
+                        img(src="./img/svg/ico-logo.svg" alt="title" srcset="")
+                    button(type="button").header__button-close-menu
                 .header__sub-inner.header__sub-inner--catalog
                     .header__catalog.catalog 
                         include ../../components/catalog/catalog.pug
@@ -13,8 +17,8 @@ header.header#header
                     .header__menu.menu 
                         include ../../components/menu/menu.pug
                 .header__sub-inner.header__sub-inner--search
-                    .header__h-search.h-search
-                        button(type="button").h-search__search
-                            p 1
+                    .header__n-search.n-search
+                        include ../../components/n-search/n-search.pug
             .header__inner.header__inner--auth
-                button(type="button").header__auth Войти
+                button(type="button").header__button-open-menu
+                button(type="button").header__auth Войти
\ No newline at end of file
diff --git a/src/blocks/modules/header/header.scss b/src/blocks/modules/header/header.scss
index 3e7b1f8..a1c6b3f 100644
--- a/src/blocks/modules/header/header.scss
+++ b/src/blocks/modules/header/header.scss
@@ -1,19 +1,113 @@
 .header {
+    box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+    background: #fff;
+    padding: 6px 0;
+    margin: 0 10px;
+    border-radius: 0 0 20px 20px;
 
-    &__wrapper{
+    &.menu-active {
+        .header__inner--nav {
+            left: 0;
+        }
+
+        .header__overlay {
+            display: block;
+        }
+    }
+
+    &__wrapper {
         @include flex-wrapper();
     }
 
     &__inner {
-        border: 1px solid gray;
 
-        &--nav {
+        &--logo {
+            position: relative;
+        }
+
+        &--nav,
+        &--auth {
             @include flex-wrapper();
             align-items: center;
         }
+
+        &--nav {
+            @include for-sm-desktop {
+                transition: $transition;
+                align-items: flex-start;
+                overflow-y: auto;
+                position: fixed;
+                display: block;
+                z-index: 3;
+                height: 100%;
+                left: -380px;
+                top: 0;
+                padding: 20px 32px 60px;
+                width: 360px;
+                background-color: #fff;
+                box-shadow: 0 4px 15px 0 rgba(47, 63, 147, 0.08);
+            }
+
+            @include for-mobile {
+                width: 100%;
+                left: -100%;
+            }
+        }
+
+    }
+
+    &__sub-inner {
+        &--logo  {
+            display: none;
+
+            @include for-sm-desktop {
+                display: flex;
+                justify-content: space-between;
+
+                .header__logo {
+                    display: block;
+                    width: 140px;
+                    height: 40px;
+                }
+            }
+        }
+
+        &--catalog {
+            margin-right: 60px;
+
+            @include for-desktop {
+                margin-right: 20px;
+            }
+
+            @include for-sm-desktop {
+                margin-right: 0;
+            }
+        }
+
+        &--search {
+            margin-left: 32px;
+
+            @include for-desktop {
+                margin-left: 0;
+            }
+
+            @include for-sm-desktop {
+                display: none;
+            }
+        }
+
+        @include for-sm-desktop {
+            width: 100%;
+            margin-bottom: 32px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
     }
 
     &__logo {
+        position: relative;
         width: 126px;
         height: 30px;
 
@@ -25,6 +119,60 @@
         }
     }
 
+    &__auth {
+        font-family: "Montserrat", sans-serif;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 150%;
+        text-transform: uppercase;
+        height: auto;
+        border-radius: 12px;
+        padding: 10px 20px;
+        color: $blackTextColor;
+        background-color: #F7F7F7;
+
+        &:hover {
+            background: #000;
+            color: $white;
+        }
+    }
+
+    &__button-open-menu {
+        display: none;
+        margin-right: 20px;
+
+        @include for-sm-desktop {
+            display: block;
+
+            width: 32px;
+            height: 32px;
+            background: url('../img/svg/ico-list-open.svg') no-repeat center / contain;
+        }
+    }
+
+    &__button-close-menu {
+        cursor: pointer;
+        user-select: none;
+        display: block;
+        width: 32px;
+        height: 32px;
+        background: url('../img/svg/ico-list-close.svg') no-repeat center / contain;
+    }
+
+    &__overlay {
+        display: none;
+
+        @include for-sm-desktop {
+            z-index: 1;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #8b8b8b38;
+        }
+    }
+
     &__btn-nav {
         display: none;
     }
diff --git a/src/js/import/components.js b/src/js/import/components.js
index 58a845c..7a62d8f 100644
--- a/src/js/import/components.js
+++ b/src/js/import/components.js
@@ -1 +1 @@
-// import "%components%/sidebar/sidebar";
+import "%components%/n-search/n-search";
diff --git a/src/js/import/modules.js b/src/js/import/modules.js
index 5fbd3d2..2593ac3 100644
--- a/src/js/import/modules.js
+++ b/src/js/import/modules.js
@@ -1,2 +1,2 @@
-// import "%modules%/header/header";
+import "%modules%/header/header";
 // import "%modules%/footer/footer";
\ No newline at end of file
diff --git a/src/styles/helpers/_mixins.scss b/src/styles/helpers/_mixins.scss
index 73ef8ac..e91a6a9 100644
--- a/src/styles/helpers/_mixins.scss
+++ b/src/styles/helpers/_mixins.scss
@@ -108,13 +108,13 @@
 }
 
 @mixin for-sm-desktop {
-    @media (max-width: 1280px) {
+    @media (max-width: 1279px) {
         @content;
     }
 }
 
 @mixin for-desktop {
-    @media (max-width: 1440px) {
+    @media (max-width: 1439px) {
         @content;
     }
 }
diff --git a/src/styles/helpers/_variables.scss b/src/styles/helpers/_variables.scss
index bb80bb3..f041ce0 100644
--- a/src/styles/helpers/_variables.scss
+++ b/src/styles/helpers/_variables.scss
@@ -1 +1,6 @@
 $primary_font: "Montserrat", sans-serif;
+$blackTextColor: #222222;
+$grayTextColor: #999;
+$transition: 0.25s;
+$white: #fff;
+$bgNSearch: #F7F7F7;
\ No newline at end of file