/* шапка */
:root {
  /* Фон шапки */
  --header__bg: #EEEDE9; /* цвет фона верхней шапки */
  --header-top-bg-color: #EEEDE9; /* цвет фона верхней шапки (legacy) */
  --header-bottom__bg: #EEEDE9; /* цвет фона нижней шапки */
  --header-bg-color: #EEEDE9; /* цвет фона нижней шапки (legacy) */

  /* Кнопка "Каталог товаров" */
  --catalog-btn__bg: #AEAEAE; /* цвет фона */
  --catalog-menu-button_bg: #EEEDE9; /* цвет фона (legacy) */
  --catalog-btn__borderColor: #808080; /* цвет рамки */
  --catalog-btn__color: #808080; /* цвет текста */
  --catalog-btn__burgerColor: #808080; /* цвет бургера в кнопке - каталог товаров  */
  --header-buttons-font-color: #333333; /* цвет бургера в кнопке - каталог товаров (legacy) */
  --catalog-btn__bg--hover: #808080; /* цвет фон при наведении */
  --catalog-btn__borderColor--hover: #2363d1; /* цвет фона при наведении */
  --catalog-btn__color--hover: #fff; /* цвет текста при наведении */
  --catalog-btn__burgerColor--hover: #fff; /* цвет бургера в кнопке при наведении */

  /* Поле поиска */
  --search-box__bg: #fff; /* фон */
  --search-field-bg-color: #fff; /* цвет фона (legacy) */
  --search-box__borderColor: #AEAEAE; /* обводка */
  --search-field-border-color: #AEAEAE; /* обводка (legacy) */
  --search-box__color: #000; /* цвет текста */
  --search-field-font-color: #000; /* цвет текста (legacy) */
  --search-box__placeholderColor: #AEAEAE; /* цвет placeholder */
  --search-field-placeholder-font-color: #FFFFFF; /* цвет placeholder (legacy) */

  /* кнопка в поле поиск  */
  --search-box-submit__bg: #dadada; /* фон */
  --search-field-btn-color: #FFFFFF; /* цвет (legacy) */
  --search-box-submit__borderColor: #F10000; /* обводка */
  --search-box-submit__bg--hover: #808080; /* фон */
  --search-box-submit__borderColor--hover: #2363d1; /* обводка */

  /* Выпадающие результаты поиска */
  --search-box-item__bg: #fff; /* фон */
  --search-box-item__borderBottomColor: rgba(
    0,
    0,
    0,
    0.13
  ); /* обводка с низу */
  --search-box-item__color: #000; /* цвет текста */
  --search-box-item__priceColor: #1c52ac; /* цвет текста цены */

  /* после ховера - результат товара в поле поиск  */
  --search-box-item__bg--hover: rgba(0, 0, 0, 0.048); /* фон */

  /* кнопка "все каталоги" в результате товара из поле поиск  */
  --search-box-all-item__bg: #333333; /* фон */
  --search-box-all-item__color: #fff; /* цвет текста */

  /* Верхнее меню */
  --nav-item__color: #333333; /* цвет */
  --header-top-menu-font-color: #333333; /* цвет (legacy) */
  --nav-item-active__color--active--hover: #F10000; /* цвет */
  --header-top-menu-font-hover-color: #333333; /* цвет (legacy) */

  /* Счетчик корзины и сравнения */
  --option-item__color: #333333; /* цвет */
  --option-item__bg: #2363d1; /* фон (в дефолтной шапке) */
  --main-elements-color: #F10000; /* фон (в дефолтной шапке) (legacy) */
  --option-item__color--active--hover: #2363d1; /* цвет */
  --main-elements-hover-color: #333333; /* цвет при наведении (legacy) */

  /* Вход в ЛК */
  --accounts-item__color: #333333; /* цвет */
  --accounts-item__color--hover: #2363d1; /* цвет */

  /* Телефон в шапке */
  --contact-box-text__color: #333333; /* цвет текста "Показать..." */
  --color: #767676; /* цвет текста "Показать..." (legacy) */
  --contact-box-text-circle__color: #2363d1; /* цвет мигающий точка */
  --contact-box-tel__color: #333333; /* цвет текста телефона */
  --header-top-phone-font-color: #767676; /* цвет текста телефона (legacy) */
  --contact-box-text__color--hover: #333333; /* цвет текста */
  --color-hover: #2363d1; /* цвет текста (legacy) */
  --contact-box-tel__color--hover: #333333; /* цвет текста телефона */

  /* Заказать звонок */
  --contact-box-call-link__color: #333333; /* цвет текста */
  --color-button-callme-text: #333333; /* цвет текста (legacy) */
  --contact-box-call-link__bg: #fff; /* фон */
  --color-button-callme-background: #fff; /* фон (legacy) */
  --contact-box-call-link__borderColor: #333333; /* обводка */
  --color-button-callme-border: #333333; /* обводка (legacy) */
  --contact-box-call-link__bg--hover: #EEEDE9; /* фон */
  --color-button-callme-background-hover: #EEEDE9; /* фон (legacy) */
  --contact-box-call-link__color--hover: #353232; /* цвет текста */
  --color-button-callme-text-hover: #353232; /* цвет текста (legacy) */
  --contact-box-call-link__borderColor--hover: #353232; /* обводка */
  --color-button-callme-border-hover: #353232; /* обводка (legacy) */

  /* Выпадающее меню каталога */
  --menu-box_catalog-box__bg: #EEEDE9; /* фон */
  --menu-box_catalog-box-ul-a__color: #333333; /* цвет текста пунктов */
  --menu-box_catalog-box-ul-a__color--hover: #333333; /* цвет текста пунктов */
  --category-menu-font-highlight-color: #333333; /* цвет текста пунктов (legacy) */
  --menu-box_catalog-box-ul-a__underlineColor--hover: #F10000; /* цвет подчеркивания если есть при наведении */
  --category-menu-underline-highlight-color: #F10000; /* цвет подчеркивания если есть (legacy) */
  --catalog-menu-bg-color: #eeede9; /* Фон меню каталога (legacy) */
  --catalog-menu-hover-bg-color: #FFFFFF; /* фон меню при наведении (legacy) */
  --catalog-menu-border-color: #ffffff; /* цвет рамки (legacy) */
  --catalog-menu-font-hover-color: #333333; /* цвет текста при наведении (legacy) */
  --catalog-menu-burger-color: #F10000; /* цвет бургера (legacy) */
  --catalog-menu-link-hover: #333333; /* цвет ссылки при наведении (legacy) */
  --catalog-menu-arrow-color: #F10000; /* цвет стрелок (legacy) */

  /* Кнопка меню для шапки v3 */
  --menu-btn__bg: #dadada; /* фон */
  --menu-btn__borderColor: #333333; /* обводка */
  --menu-btn__color: #fff; /* цвет текста */
  --menu-btn__bg--hover: #2363d1; /* фон */
  --menu-btn__borderColor--hover: #2363d1; /* обводка */
  --menu-btn__color--hover: #fff; /* цвет текста */

   /* ФОН Меню и ФОН Каталога  */
   --menu-box_catalog-box__bg: #434343; /* фон */
   --menu-box_catalog-box-ul-a__color: #fff; /* цвет текста пунктов */
   --menu-box_catalog-box-ul-a__color--hover: #2363d1; /* цвет текста пунктов */
   --menu-box_catalog-box-ul-a__underlineColor--hover: #2363d1; /* цвет подчеркивания если есть */

   /* Пункты меню для шапок версий fat-v2 */
  --fat-v2-nav-ul-li-a__color: #fff; /* цвет текста */
  --fat-v2-nav-ul-li-a__bg--hover: #222222; /* фон */
  --fat-v2-nav-ul-li-a__color--hover: #fff; /* цвет текста */
  --fat-v2-nav-ul-li-a__color--active: #2363d1; /* цвет текста */
  --fat-v2-nav-ul-li-ul-li__bg: #222222; /* фон */
  --fat-v2-nav-ul-li-ul-li-a__color: #fff; /* цвет текста */
  --fat-v2-nav-ul-li-ul-li-a__color--hover: #2363d1; /* цвет текста */
  --fat-v2-nav-ul-li-ul-li__bg--hover: #333333; /* фон */
}

/* шапка в адаптиве */
:root {
  /* Фон */
  --mob-header__bg: #fff; /* Фон шапки  */
  --mob-header_bottom__bg: #000; /* Фон нижной части шапки или фиксированный ниже */
  --mob-header_bottom__borderColor: #000; /* Цвет Обводки с верху  */

  /* Поле поиска */
  --mob-search-box__bg: #fff; /* фон */
  --mob-search-box__borderColor: #333333; /* обводка */
  --mob-search-box__color: #000; /* цвет текста */
  --mob-search-box__placeholderColor: #333333; /* цвет placeholder */
  --mob-search-box-submit__bg: #dadada; /* фон */
  --mob-search-box-submit__borderColor: #333333; /* обводка */
  --mob-search-box-submit__bg--hover: #2363d1; /* фон */
  --mob-search-box-submit__borderColor--hover: #2363d1; /* обводка */

  /* Результаты поиска */
  --mob-search-box-item__bg: #fff; /* фон */
  --mob-search-box-item__borderBottomColor: rgba(0, 0, 0, 0.13); /* обводка с низу */
  --mob-search-box-item__color: #000; /* цвет текста */
  --mob-search-box-item__priceColor: #1c52ac; /* цвет текста цены */
  --mob-search-box-item__bg--hover: rgba(0, 0, 0, 0.048); /* фон */

  /* Кнопка "каталог товаров" */
  --mob-catalog-btn__bg: #EEEDE9; /* фон */
  --mob-catalog-btn__borderColor: #333333; /* обводка */
  --mob-catalog-btn__color: #333333; /* цвет текста */
  --catalog-menu-font-color: #333333; /* цвет текста (legacy) */
  --mob-catalog-btn__burgerColor: #333333; /* цвет бургера в кнопке - каталог товаров  */
  --mob-catalog-btn__bg--hover: #2363d1; /*  фон */
  --mob-catalog-btn__borderColor--hover: #2363d1; /* обводка */
  --mob-catalog-btn__color--hover: #fff; /* цвет текста */
  --mob-catalog-btn__burgerColor--hover: #fff; /* цвет бургера в кнопке */

  /* Бургер мобильного меню */
  --mob-burger-btn__color: #f10000; /* цвет */
  --header-top-icon-color: #f10000; /* цвет (legacy) */

  /* Телефоны */
  --mob-contact-box-phone__color: #333333; /* цвет текста */
  --mob-contact-box-phone__bg: transparent; /* фон (если есть)*/
  --mob-contact-box-phone__borderColor: #2363d1; /* обводка (если есть)*/
  --mob-contact-box-phone__color--hover: #fff; /* цвет текста */
  --mob-contact-box-phone__bg--hover: #2363d1; /* фон (если есть)*/
  --mob-contact-box-phone__borderColor--hover: #2363d1; /* обводка (если есть)*/

  /* Заказать звонок */
  --mob-contact-box-order-call__color: #333333; /* цвет текста */
  --mob-contact-box-order-call__bg: transparent; /* фон (если есть)*/
  --mob-contact-box-order-call__borderColor: #2363d1; /* обводка (если есть)*/
  --mob-contact-box-order-call__color--hover: #fff; /* цвет текста */
  --mob-contact-box-order-call__bg--hover: #2363d1; /* фон (если есть)*/
  --mob-contact-box-order-call__borderColor--hover: #2363d1; /* обводка (если есть)*/

  /* Корзина */
  --mob-cart-number__color: #333333; /* цвет текста */
  --mob-cart-number__bg: #fff; /* фон (если есть)*/
  --mob-cart-number__borderColor: #2363d1; /* обводка (если есть)*/
  --mob-cart-number__color--hover: #fff; /* цвет текста */
  --mob-cart-number__bg--hover: #2363d1; /* фон при наведении (если есть)*/
  --mob-cart-number__borderColor--hover: #2363d1; /* обводка (если есть)*/

  /* Элементы выпадающего меню */
  --mm-navbar-title__color: #fff; /* цвет вверхного заголовка */
  --mm-navbar__bg: #000; /* фон вверхного заголовка */
  --mm-navbar-button-icons__color: #fff; /* цвет крестика и стрелки вверхнем заголовке */
  --mm-panels-mobile-menu__bg: #e7e7e7; /* фон */
  --mm-listitem__bg: #fff; /* фон */
  --mm-listitem__color: #000; /* цвет */
  --mm-listitem-button-icons__color: #000; /* цвет стрелки */
  --mm-other-options__color: #000; /* Цвет */
  --mm-login__color: #000; /* Цвет */
  --register-arrow__color: #000; /* Цвет стрелки авторизации в деф. шапке в моб. */
}


/* Остальные переменные */
:root {
  --category-preview-height: 500px; /* высота предварительного просмотра категории */

  /* кастомный шрифт */
  --custom-font-family: Montserrat; /* Название подключенного шрифта */

  /* выпадающие меню */
  --color-main-dropdown-menu-bg: #333333; /* цвет фона */
  --color-main-dropdown-menu-text: #FFFFFF; /* цвет текста */

  /* основная кнопка */
  --color-button-primary-text: #FFFFFF; /* цвет текста */
  --color-button-primary-background: #353232; /* цвет фона */
  --color-button-primary-border: #353232; /* цвет рамки */
  --color-button-primary-text-hover: #FFFFFF; /* цвет текста при наведении */
  --color-button-primary-background-hover: #333333; /* цвет фона при наведении */
  --color-button-primary-border-hover: #333333; /* цвет рамки при наведении */

  /* вторичная кнопка */
  --color-button-secondary-text: #FFFFFF;  /* цвет текста */
  --color-button-secondary-background: #F10000; /* цвет фона */
  --color-button-secondary-border: #F10000; /* цвет рамки */
  --color-button-secondary-text-hover: #FFFFFF; /* цвет текста при наведении */
  --color-button-secondary-background-hover: #333333; /* цвет фона при наведении */
  --color-button-secondary-border-hover: #333333; /* цвет рамки при наведении */

  /* не активная кнопка */
  --color-button-muted-text: #FFFFFF; /* цвет текста */
  --color-button-muted-background: #767676; /* цвет фона */
  --color-button-muted-border: #767676; /* цвет рамки */
  --color-button-muted-text-hover: #FFFFFF; /* цвет текста при наведении */
  --color-button-muted-background-hover: #818181; /* цвет фона при наведении */
  --color-button-muted-border-hover: #818181; /* цвет рамки при наведении */

  /* кнопка корзины */
  --color-button-cart-text: #FFFFFF; /* цвет текста */
  --color-button-cart-background: #F10000; /* цвет фона */
  --color-button-cart-border: #F10000; /* цвет рамки */
  --color-button-cart-text-hover: #FFFFFF; /* цвет текста при наведении */
  --color-button-cart-background-hover: #333333; /* цвет фона при наведении */
  --color-button-cart-border-hover: #333333; /* цвет рамки при наведении */

  /* без цветные кнопки */
  --colorless-buttons-border-color: #FFFFFF; /* цвет рамки */
  --colorless-buttons-font-color: #767676; /* цвет текста */
  --colorless-buttons-hover-bg: #FFFFFF; /* цвет фона при наведении */

  /* кнопка счета */
  --invoice-button-color: #F10000; /* цвет кнопки */

  /* товары */
  --hit-tag-bg-color: #FFFFFF; /* фон бирки 'хит' */
  --sale-tag-bg-color: #FFFFFF; /* Фон бирки 'распродажа' */
  --new-tag-bg-color: #FFFFFF; /* Фон бирки 'новинка' */
  --discount-tag-bg-color: #FFFFFF; /* Фон бирки 'скидка' */
  --hit-tag-font-color: #FFFFFF; /* цвет текста бирки 'хит' */
  --sale-tag-font-color: #FFFFFF; /* цвет текста бирки 'распродажа' */
  --discount-tag-font-color: #FFFFFF; /* цвет текста бирки 'скидка' */
  --new-tag-font-color: #FFFFFF; /* цвет текста бирки 'новинка' */
  --product-list-header-link-color: #333333; /* цвет ссылки товара */
  --product-list-header-link-hover-color: #F10000; /* цвет ссылки при наведении */
  --product-tab-link-color: #FFFFFF; /* цвет ссылки таба */
  --product-tab-link-hover-color: #FFFFFF; /* цвет ссылки таба при наведении */
  --color-card-border: #D9D9DE; /* цвет рамки карточки */
  --product-preview-border-hover-color: #FFFFFF; /* цвет рамки превью при наведении */
  --product-preview-bg-color: #FFFFFF; /* цвет фона превью */
  --color-product-online-price: #FFFFFF; /* цвет онлайн цены */
  --checkout-button-font-color: #FFFFFF; /* цвет подтверждающей кнопки */
  --invoice-button-font-color: #F10000; /* цвет кнопки счета */
  
  /* Статьи */
  --article-label-font-color: #FFF; /* цвет текста */
  --article-label-bg-color: #F10000; /* цвет фона */
  
  /* новости и акции */
  --news-label-bg-color: #F10000; /* Фон плашки для новостей */
  --news-label-font-color: #FFFFFF; /* Цвет шрифта плашки для новостей */
  --action-label-bg-color: #F10000; /* Фон плашки акций */
  --action-label-font-color: #FFFFFF; /* Цвет шрифта плашки акций */

  /* форма обратной связи */
  --feedback-form-section-bg-color: #FFFFFF; /* Фон блока с формой обратной связи */
  --feedback-form-bg: #FFFFFF; /* Цвет фона внутри самой формы обратной связи */
  --feedback-form-title: #333333; /* Форма обратной связи: цвет заголовка: */
  --feedback-form-text: #FFFFFF; /* Форма обратной связи: цвет текста: */
  --feedback-form-border: #FFFFFF; /* Форма обратной связи: цвет обводки: */
  --feedback-form-input-border: #BABABA; /* Форма обратной связи: цвет обводки элементов формы: */

  /* хлебные крошки */
  --breadcrumb-item-color: #333333; /* Цвет ссылок в крошках: */
  --breadcrumb-item-hover-color: #F10000; /* Цвет ссылок в крошках при наведении */

  /* кнопка callme */
  --callme-button-color: #353232; /* цвет текста */
  --callme-button-hover-color: #353232; /* цвет текста при наведении */
  --callme-button-fill-color: #353232; /* цвет фона */
  --callme-button-fill-hover-color: #353232; /* цвет фона при наведении */

  /* статичные страницы */
  --staticpage-box-fill-color: #FFFFFF; /* Цвет заливки для текстовых блоков на статичных страницах */
  --staticpage-box-border-color: #FFFFFF; /* Цвет обводки для текстовых блоков на статичных страницах */

  /* личный кабинет */
  --color-lk-accent-items: #FFFFFF; /* Цвет иконок в ЛК: */
  --color-lk-items-bg: #FFFFFF; /* Цвет фона для блоков на страницах ЛК */
  --color-lk-items-border: #FFFFFF; /* Цвет обводки для блоков на страницах ЛК */
  --color-lk-items-hover-bg: #FFFFFF; /* Цвет фона для блоков на страницах ЛК при наведении */
  --color-fixedbtn: #FFFFFF; /* Цвет шрифта для плавающих фиксированных кнопок */
  --color-bg-fixedbtn: #FFFFFF; /* Цвет фона для плавающих фиксированных кнопок */
  
  /* подвал */
  --footer-bg-color: #FFFFFF; /* цвет подвала */
  --color-footer-links: #333333; /* цвет ссылок подвала */
  --color-footer-links-hover: #333333; /* цвет ссылок подвала при наведении */
  --color-footer-title: #333333; /* цвет заголовка подвала */

  /* разное */
  --frontpage-first-screen-bg-color: #ffffff00; /* цвет фона главной страницы */
  --preview-bg-color: ##ffffff00; /* цвет фона предпросмотра */
  --preview-font-color: #FFFFFF;/* цвет текста предпросмотра */
  --preview-bg-hover-color: #FFFFFF; /* цвет заднего фона предпросмотра */
  --inner-page-bg: #EEEDE9; /* фон внутренних страниц */

  --bottom-mobile-menu-active: #F10000;
}