@charset "UTF-8";
/*  Стиль для сайта Лен ОК */
/* Пояснения: */
/*  # Block #   -  страница сайта */
/* << Block >>  -  глобальный блок на странице */
/*  < Block >   -  отдельный элемент внутри другого блока */
/*  [ Block ]   -  чанк, блок, который повторяется на странице */
/*  % Block %   -  модальный блок */
/*  ! Block !   -  скриптовый блок */
/*  @ Block @   -  декоративный блок, для свойств CSS */
/*    Block     -  общий блок */
/* --<< Variables >>-- */
/* Глобальная палитра цветов */
/* Шрифты */
/* 1rem = 10px */
:root {
  font-size: 10px;
  font-family: "Mulish", sans-serif;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* --<< General styles >>-- */
html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  max-width: 100%;
}

.global-wrap {
  display: flex;
  flex-direction: column;
  width: inherit;
  max-width: inherit;
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2.6rem;
  font-weight: bold;
  font-family: "Montserrat Alternates", sans-serif;
  color: #8698df;
}

h2 {
  font-size: 2.6rem;
  font-weight: bold;
  font-family: "Montserrat Alternates", sans-serif;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.8rem;
}

h5 {
  font-size: 1.6rem;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #313131;
}

a {
  text-decoration: none;
}

.flex-dammy {
  flex-basis: 100%;
}

.hidden {
  display: none !important;
  visibility: hidden;
  opacity: 0;
}

.image-js {
  cursor: pointer;
}

button {
  outline: none;
  border: none;
}

/* Input */
input {
  outline: none;
  border: none;
  padding: 14px 20px;
  font-size: 2rem;
  border-radius: 5px;
  color: #313131;
  font-family: "Mulish", sans-serif;
  transition: all 0.1s linear 0s;
}
input:focus {
  border-color: #8698df;
  transition: all 0.1s linear 0s;
}

/* Textarea */
textarea {
  outline: none;
  border: none;
  padding: 10px;
  font-size: 1.6rem;
  border-radius: 5px;
  color: #313131;
  font-family: "Mulish", sans-serif;
  height: 100px;
  overflow: auto;
  resize: none;
  transition: all 0.1s linear 0s;
}
textarea:focus {
  border-color: #8698df;
  transition: all 0.1s linear 0s;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=text]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type=text]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

select {
  width: 100%;
  background: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1.8rem;
  font-family: "Mulish", sans-serif;
  padding: 5px;
  color: #313131;
}
select:hover, select :focus {
  background-color: #ffffff;
  color: #313131;
  font-size: 1.8rem;
  transition: all 0.1s linear 0s;
}

select[disabled] {
  border-color: rgba(255, 255, 255, 0);
  border-bottom: 1px solid #AFAFAF;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.select_disabled select {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom: 1px solid #313131;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Select2 */
.select2, .select2-selection__rendered {
  width: 100% !important;
}

.select2-search--dropdown .select2-search__field {
  padding: 10px !important;
}

.select2-search__field {
  font-size: 1.8rem;
  font-family: "Mulish", sans-serif;
  padding: 10px;
  margin: 0;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  background: #ffffff;
  color: #313131;
  transition: all 0.1s linear 0s;
}
.select2-search__field:hover, .select2-search__field:focus {
  background-color: #ffffff;
  color: #313131;
  border-color: #8698df !important;
  transition: all 0.1s linear 0s;
}

.select2-results__option {
  color: #313131;
  border-bottom: 1px solid #e0e0e0;
  font-size: 1.6rem;
}

.select2-results__option--highlighted {
  color: #ffffff;
}
.select2-results__option--highlighted .option-pvz span {
  color: #ffffff;
}

.select2-container--default .select2-selection--single {
  border-radius: 15px !important;
}

.select2-selection {
  background: none;
  border: 1px solid #e0e0e0;
  font-family: "Mulish", sans-serif;
  border-radius: 15px;
  font-size: 1.8rem;
  color: #313131 !important;
  padding: 10px 0;
  height: -moz-min-content !important;
  height: min-content !important;
}
.select2-selection:hover, .select2-selection :focus {
  background-color: #ffffff;
  color: #313131;
  transition: all 0.1s linear 0s;
}

.select2-selection__arrow {
  display: none !important;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: #8698df !important;
}
.select2-results__option--highlighted[aria-selected] .option-pvz span {
  color: #ffffff;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  display: none !important;
}

.select2-container .select2-selection--single {
  display: flex !important;
  align-items: center;
}

.select2-container--default .select2-selection--single {
  border-color: #e0e0e0 !important;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 400px !important;
}

.option-pvz {
  display: flex;
  gap: 10px;
}
.option-pvz span {
  font-size: 1.4rem;
  color: #AFAFAF;
}

.delivery-methods {
  display: flex;
  align-items: center;
  gap: 10px;
}
.delivery-methods .method {
  position: relative;
}
.delivery-methods .method label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  cursor: pointer;
  color: #313131;
  border-radius: 5px;
  border: 1.5px solid #e0e0e0;
  background-color: transparent;
  transition: all 0.1s linear 0s;
}
.delivery-methods .method-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 2rem;
}
.delivery-methods .method-description {
  padding: 5px;
  font-size: 1.6rem;
  color: #AFAFAF;
}
.delivery-methods input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.delivery-methods input[type=radio]:checked ~ label.len {
  border-color: #8698df;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
  transition: all 0.1s linear 0s;
}
.delivery-methods input[type=radio]:checked ~ label.cdek {
  border-color: #00b33c;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
  transition: all 0.1s linear 0s;
}
.delivery-methods input[type=radio]:checked ~ .method .disabled label {
  border: 1.5px solid #e0e0e0 !important;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
  transition: all 0.1s linear 0s;
}

.method.disabled {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  cursor: default;
}
.method.disabled label {
  color: #AFAFAF !important;
  border: 1.5px solid #e0e0e0 !important;
}
.method.disabled label img {
  filter: grayscale(1);
}

.info {
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: #8698df;
  margin-left: 10px !important;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 1.2rem;
  border: 1px solid #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.info i {
  font-size: 1.2rem !important;
  padding: 5px;
}
.info:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}

.price {
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #8698df;
}
.price i {
  margin-left: 5px;
}

.delivery {
  color: #FED37F;
}

#id_summ {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Button */
.button-in-cart {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #8698df !important;
  border-color: #8698df;
}
.button-in-cart:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.button-in-cart:hover {
  background-color: #8698df;
  color: #ffffff !important;
}

.button-success {
  background-color: #8698df !important;
  color: #ffffff !important;
}

.button-close {
  background-color: #AFAFAF !important;
  color: #ffffff !important;
}

/* --[ Articles | Recipe | Location ]-- */
.chunk-article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  border-radius: 15px;
  margin: 5px;
  color: #313131;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1254901961);
  transition: all 0.1s linear 0s;
}
.chunk-article .article-image {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  height: 210px;
  border-radius: 10px;
}
.chunk-article .article-image img {
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  height: 210px;
  width: 100%;
}
.chunk-article .article-category-list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chunk-article .article-category-list .article-category {
  display: flex;
  text-align: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #313131;
  border: 1px solid #c5c5c5;
  background-color: #ffffff;
  border-radius: 40px;
  width: -moz-min-content;
  width: min-content;
  padding: 5px 10px;
  cursor: default;
}
.chunk-article .article-text {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff;
  min-height: 210px;
  max-height: 220px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.chunk-article .article-text .date {
  position: absolute;
  display: block;
  top: -25px;
  left: 0;
  background-color: #ffffff;
  padding: 5px 10px 5px 10px;
  z-index: 5;
}
.chunk-article .article-text .date span {
  display: flex;
  align-items: end;
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  color: #313131;
  width: -moz-max-content;
  width: max-content;
  z-index: 6;
}
.chunk-article .article-text .date::after {
  content: "";
  position: absolute;
  left: 100%;
  bottom: 0;
  display: block;
  background-color: #ffffff;
  width: 25px;
  height: 100%;
  border-top-right-radius: 100%;
}
.chunk-article .article-text h5 {
  color: #313131;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  height: 50px;
  overflow: visible;
}
.chunk-article .article-text p {
  color: #313131;
  font-weight: normal;
  font-size: 1.4rem;
  height: 70px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
.chunk-article.len h3 {
  color: #8698df;
}
.chunk-article.ecopolis h3 {
  color: #C49265;
}

.chunk-recipe {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  border-radius: 15px;
  margin: 5px;
  color: #313131;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1254901961);
  transition: all 0.1s linear 0s;
}
.chunk-recipe .article-image {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  height: 210px;
  border-radius: 10px;
}
.chunk-recipe .article-image img {
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  height: 210px;
  width: 100%;
}
.chunk-recipe .article-category-list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chunk-recipe .article-category-list .article-category {
  display: flex;
  text-align: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #313131;
  border: 1px solid #c5c5c5;
  background-color: #ffffff;
  border-radius: 40px;
  width: -moz-min-content;
  width: min-content;
  padding: 5px 10px;
  cursor: default;
}
.chunk-recipe .article-text {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff;
  min-height: 210px;
  max-height: 220px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.chunk-recipe .article-text .date {
  position: absolute;
  display: block;
  top: -25px;
  left: 0;
  background-color: #ffffff;
  padding: 5px 10px 5px 10px;
  z-index: 5;
}
.chunk-recipe .article-text .date span {
  display: flex;
  align-items: end;
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  color: #313131;
  width: -moz-max-content;
  width: max-content;
  z-index: 6;
}
.chunk-recipe .article-text .date::after {
  content: "";
  position: absolute;
  left: 100%;
  bottom: 0;
  display: block;
  background-color: #ffffff;
  width: 25px;
  height: 100%;
  border-top-right-radius: 100%;
}
.chunk-recipe .article-text h5 {
  color: #313131;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  height: 50px;
  overflow: visible;
}
.chunk-recipe .article-text p {
  color: #313131;
  font-weight: normal;
  font-size: 1.4rem;
  height: 70px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}

/* --[ Product ]-- */
.chunk-product.len .button-pay {
  text-align: center;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.chunk-product.len .button-pay:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.chunk-product.len .button-pay i {
  margin-right: 10px;
}
.chunk-product.len .button-info {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  width: 100%;
}
.chunk-product.len .button-info:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.chunk-product.len .button-info i {
  margin-right: 10px;
}

.chunk-product.ecopolis .button-pay {
  text-align: center;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #B2BF11;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.chunk-product.ecopolis .button-pay:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.chunk-product.ecopolis .button-pay i {
  margin-right: 10px;
}
.chunk-product.ecopolis .button-info {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #B2BF11;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  width: 100%;
}
.chunk-product.ecopolis .button-info:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.chunk-product.ecopolis .button-info i {
  margin-right: 10px;
}

.chunk-product {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  border-radius: 15px;
  margin: 5px;
  color: #313131;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1254901961);
  transition: all 0.1s linear 0s;
  /* @ Mobile @ */
}
.chunk-product .product-image {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  min-height: 180px;
  max-height: 220px;
  border-radius: 10px;
}
.chunk-product .product-image img {
  border-radius: inherit;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  min-height: 180px;
  max-height: 220px;
  width: 100%;
  height: 100%;
}
.chunk-product .product-image .short-rating {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  padding: 5px 0 5px 5px;
  z-index: 5;
}
.chunk-product .product-image .short-rating span {
  display: flex;
  align-items: end;
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  color: #313131;
  width: -moz-max-content;
  width: max-content;
  z-index: 6;
}
.chunk-product .product-image .short-rating span i {
  color: #FFD777;
  margin-right: 5px;
  font-size: 1.8rem;
}
.chunk-product .product-image .short-rating::after {
  content: "";
  position: absolute;
  left: 100%;
  bottom: 0;
  display: block;
  background-color: #ffffff;
  width: 25px;
  height: 100%;
  border-top-right-radius: 100%;
}
.chunk-product .like {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -25px;
  right: 10px;
  color: #ffffff;
  background-color: rgba(100, 101, 104, 0.71);
  border-radius: 50%;
  font-size: 2rem;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.chunk-product .like:hover {
  background-color: #FE5365;
  transition: all 0.1s linear 0s;
}
.chunk-product .like.like-active {
  background-color: #FE5365 !important;
}
.chunk-product .product-category-list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chunk-product .product-category-list .product-category {
  display: flex;
  text-align: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #8698df;
  border: 1px solid #8698df;
  background-color: #ffffff;
  border-radius: 40px;
  width: -moz-min-content;
  width: min-content;
  padding: 5px 10px;
  cursor: default;
}
.chunk-product .product-text {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff;
  min-height: 235px;
  max-height: 240px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.chunk-product .product-text a > h5 {
  color: #313131;
  font-weight: 600;
  margin: 10px 0;
  height: 50px;
  overflow: visible;
}
.chunk-product .product-text .product-text-price {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 5px 0 10px 0;
}
.chunk-product .product-text .price {
  font-size: 2.2rem;
  color: #313131;
  font-weight: 600;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.chunk-product .product-text.no-price {
  min-height: 100px;
}
.chunk-product .product-text.no-price .product-text-price {
  margin-top: 0;
}
.chunk-product .button-pay {
  text-align: center;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.chunk-product .button-pay:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.chunk-product .button-pay i {
  margin-right: 10px;
}
.chunk-product .button-info {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  width: 100%;
}
.chunk-product .button-info:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.chunk-product .button-info i {
  margin-right: 10px;
}
.chunk-product .discounts-mobile {
  display: none;
  position: relative;
}
.chunk-product .discounts-mobile .discount, .chunk-product .discounts-mobile .discount-client {
  position: static;
  flex-direction: row;
  align-items: center;
}
.chunk-product .discounts-mobile .discount h4, .chunk-product .discounts-mobile .discount-client h4 {
  font-size: 1.6rem;
}
.chunk-product .discounts-mobile .discount i, .chunk-product .discounts-mobile .discount-client i {
  font-size: 2.7rem;
}

/* --[ Product-Inline ]-- */
.chunk-gift h5 {
  margin: 0 5px;
  text-align: center !important;
  font-size: 1.6rem !important;
}
.chunk-gift .chunk-gift-product {
  cursor: pointer;
}
.chunk-gift .button-choose {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  margin: 20px 5px 10px 5px;
  color: #ffffff;
  padding: 10px 15px;
  font-size: 1.6rem;
  height: -moz-max-content;
  height: max-content;
}
.chunk-gift .button-choose:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.chunk-gift .button-choose i {
  margin-right: 10px;
}
.chunk-gift .button-choose:hover {
  color: #ffffff;
  filter: brightness(1.1);
}

.chunk-gift:hover {
  box-shadow: 0px 0px 10px 0px #96a6eb;
}

/* --[ Product-Cart ]-- */
/* --[ Product-Order ]-- */
/* --[ Article ]-- */
/* --[ Recipe ]-- */
/* --[ Review / Comment ]-- */
/* --[ Response ]-- */
/* --[ Menager Product ]-- */
/* Slider Arrows */
.slider-prev, .slider-next {
  top: calc(50% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 2.5rem;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all 0.2s linear 0s;
  z-index: 20;
  color: #ffffff;
  border-radius: 50%;
}
.slider-prev.white, .slider-next.white {
  background-color: #ffffff;
  color: #AFAFAF;
  border: 1px solid #cdcdcc;
}
.slider-prev.blue, .slider-next.blue {
  background-color: #9cafff;
  box-shadow: 0px 0px 20px 0px rgba(135, 153, 232, 0.65);
}
.slider-prev.brown, .slider-next.brown {
  background-color: #c3a58f;
  box-shadow: 0px 0px 20px 0px rgba(195, 165, 143, 0.65);
}
.slider-prev.green, .slider-next.green {
  background-color: #c0ca33;
  box-shadow: 0px 0px 20px 0px rgba(199, 221, 146, 0.65);
}

.slider-prev:hover, .slider-next:hover {
  transition: all 0.2s linear 0s;
}
.slider-prev:hover.white, .slider-next:hover.white {
  color: #313131;
}
.slider-prev:hover.blue, .slider-next:hover.blue {
  background-color: #8698df;
  box-shadow: 0px 0px 20px 0px rgba(135, 153, 232, 0.7);
}
.slider-prev:hover.brown, .slider-next:hover.brown {
  background-color: #b9957b;
  box-shadow: 0px 0px 20px 0px rgba(195, 165, 143, 0.7);
}
.slider-prev:hover.green, .slider-next:hover.green {
  background-color: #B2BF11;
  box-shadow: 0px 0px 20px 0px rgba(199, 221, 146, 0.65);
}

.slider-prev {
  left: -35px;
}

.slider-next {
  right: -35px;
}

/* Slider Arrows Main */
.slider-main-prev, .slider-main-next {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 2.5rem;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all 0.2s linear 0s;
  z-index: 20;
  bottom: 7%;
  background-color: rgb(255, 255, 255);
  font-size: 2.3rem;
  color: #AFAFAF;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  border: 1px solid #E6E6E6;
}

.slider-main-prev:hover, .slider-main-next:hover {
  background-color: #9cafff;
  color: #ffffff;
  border-color: #9cafff;
  transition: all 0.2s linear 0s;
}

.slider-main-prev {
  left: 20px;
}

.slider-main-next {
  left: calc(4% + 20px);
}

/* Slick Dots */
.slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 20px;
}
.slick-dots li {
  margin: 0 !important;
  height: 6px !important;
  width: 45px !important;
}
.slick-dots li button {
  height: inherit !important;
  width: inherit !important;
}
.slick-dots li button::before {
  content: "" !important;
  height: inherit !important;
  width: inherit !important;
  opacity: 1 !important;
  background-color: rgba(214, 212, 212, 0.678);
  border-radius: 20px;
  transition: all 0.2s linear 0s;
}

.slick-dots li button:hover::before {
  background-color: rgba(212, 212, 212, 0.863) !important;
  transition: all 0.2s linear 0s;
}

.slick-dots li.slick-active button::before {
  background-color: rgba(194, 194, 194, 0.863);
  transition: all 0.2s linear 0s;
}

/* Cart-items */
.cart {
  position: relative;
}

.cart-items {
  position: absolute;
  top: -12px;
  right: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8px;
  width: 8px;
  color: #ffffff;
  font-size: 1rem;
  font-family: "Mulish", sans-serif;
  padding: 10px;
  border-radius: 50%;
  background-color: #8698df;
}

/* Icon-round */
.icon-round {
  display: flex !important;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  background-color: #ffffff;
  border: 2px solid #8698df;
  border-radius: 50%;
  color: #8698df;
  margin-right: 10px;
}
.icon-round i {
  font-size: 2rem;
}

/* Rating Stars */
.rating {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  gap: 5px;
}

.rating-line {
  position: relative;
  color: #D5E7FB;
  font-family: "LenOk";
  font-weight: normal;
}
.rating-line::before {
  content: "\e927\e927\e927\e927\e927";
  display: block;
}

.rating-active {
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  font-family: "LenOk";
  font-weight: normal;
}
.rating-active::before {
  content: "\e913\e913\e913\e913\e913";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #8698df;
}

.rating-stars-list {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.rating-star {
  flex: 0 0 20%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.rating-value {
  font-size: 1.6rem;
  line-height: 1;
  color: #313131;
  font-weight: normal;
}

.rating-mobile {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  max-width: -moz-min-content;
  max-width: min-content;
  font-size: 1.8rem;
  gap: 5px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2509803922);
}
.rating-mobile h4 {
  color: #8698df;
}
.rating-mobile .rating-stars-list {
  align-items: center;
}
.rating-mobile .rating-line {
  display: flex;
  align-items: center;
  gap: 5px;
}
.rating-mobile .rating-value {
  font-size: 1.8rem;
  color: #AFAFAF;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
}

/* Text-collapse */
.collapse {
  position: relative;
  overflow: hidden;
  height: 160px;
}

.collapse-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
  z-index: 1;
  transition: all 0.1s linear 0s;
}

.collapse-button {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  border: none;
  background-color: transparent;
  color: #8698df;
  font-family: "Mulish", sans-serif;
  font-size: 1.6rem;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  z-index: 10;
  transition: all 0.1s linear 0s;
}
.collapse-button:hover {
  border-bottom: 1px dashed #8698df;
  transition: all 0.1s linear 0s;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 5px;
  height: 35px;
  margin-top: 30px;
}
.pagination.len .pagination-page:hover {
  background-color: #EDF0FA;
  transition: all 0.1s linear 0s;
}
.pagination.len .pagination-page.current {
  color: #ffffff;
  background-color: #8698df;
  transition: all 0.1s linear 0s;
}
.pagination.len .pagination-nav:hover {
  color: #34394F;
  transition: all 0.1s linear 0s;
}
.pagination.ecopolis .pagination-page:hover {
  background-color: #F2F5D9;
  transition: all 0.1s linear 0s;
}
.pagination.ecopolis .pagination-page.current {
  color: #ffffff;
  background-color: #B2BF11;
  transition: all 0.1s linear 0s;
}
.pagination.ecopolis .pagination-nav:hover {
  color: #502C1E;
  transition: all 0.1s linear 0s;
}
.pagination > .pagination-nav {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  color: #313131;
  margin: 0 5px;
  transition: all 0.1s linear 0s;
}
.pagination > .pagination-nav:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.pagination-page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: inherit;
  font-size: 1.6rem;
  color: #313131;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 5px;
  transition: all 0.1s linear 0s;
}
.pagination-page:hover {
  background-color: #D5E7FB;
  transition: all 0.1s linear 0s;
}
.pagination-page.current {
  color: #ffffff;
  background-color: #8698df;
  transition: all 0.1s linear 0s;
}

.dots {
  font-size: 2.2rem;
  width: -moz-min-content;
  width: min-content;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dots:hover {
  background-color: #ffffff;
}

.no-results {
  display: block;
  padding: 10px 0;
  font-size: 1.8rem;
  color: #8698df;
  opacity: 0.4;
  text-align: center;
}

/* Help Text */
*[help-text] {
  position: relative;
  display: inline-block;
  transition: all 0.09s ease-out;
}
*[help-text]:hover:before {
  content: attr(help-text);
  position: absolute;
  bottom: -50px;
  color: #313131;
  padding: 10px;
  background-color: #ffffff;
  width: -moz-max-content;
  width: max-content;
  border-radius: 3px;
  font-size: 1.6rem;
  z-index: 20;
  opacity: 1;
  transition: all 0.09s ease-out;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
}

*[help-text-pos=center]::before {
  left: 50%;
  transform: translateX(-50%);
}

*[help-text-pos=right]::before {
  right: 0;
}

*[help-text-pos=left]::before {
  left: 0;
}

.agreement {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #313131;
}
.agreement a {
  color: #313131;
  transition: all 0.1s linear 0s;
}
.agreement a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.agreement .agreement-text {
  font-size: 1.4rem;
}
.agreement .agreement-check {
  display: block;
  padding: 10px;
  border-radius: 5px;
  max-width: 12px;
  max-height: 12px;
  border: 2px solid #8698df;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.agreement .agreement-check i {
  font-size: 1.4rem;
}
.agreement .agreement-check:hover {
  transition: all 0.1s linear 0s;
}
.agreement .agreement-active {
  background-color: #8698df;
  color: #ffffff;
}
.agreement input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.button-agree.disabled, .button-agree-callback.disabled {
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  cursor: auto !important;
  background-color: #AFAFAF !important;
  border-color: #AFAFAF !important;
  color: #313131 !important;
  pointer-events: none;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #313131;
  margin-top: 10px;
  position: relative;
}
.check-field .check-text {
  font-size: 1.6rem;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.check-field .check-text:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.check-field .check {
  display: block;
  padding: 10px;
  border-radius: 5px;
  max-width: 12px;
  max-height: 12px;
  border: 2px solid #AFAFAF;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.check-field .check i {
  font-size: 1.4rem;
}
.check-field .check:hover {
  transition: all 0.1s linear 0s;
}
.check-field input[type=checkbox] {
  width: -moz-min-content;
  width: min-content;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.check-field input[type=checkbox]:checked + .check {
  background-color: #8698df;
  color: #ffffff;
  border-color: #8698df;
}

/* --<< Header >>-- */
header {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2509803922);
  position: fixed;
  width: 100%;
  background-color: #ffffff;
  z-index: 70;
}
header.header.len .header-top {
  background-color: #8698df;
}
header.header.len .header-top a:hover {
  color: #34394F;
  transition: all 0.1s linear 0s;
}
header.header.len .header-logo img {
  width: 75px;
}
header.header.len .header-logo h1 {
  min-width: -moz-max-content;
  min-width: max-content;
  color: #8698df;
}
header.header.len .header-menu-list > li a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
header.header.len .header-menu-list i:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
header.header.len .header-menu-list li.active-menu {
  color: #8698df !important;
}
header.header.len .header-menu-list li.active-menu > a {
  color: #8698df !important;
}
header.header.len .header-menu-list li.active-menu > i {
  color: #8698df !important;
}
header.header.ecopolis .header-top {
  background-color: #C49265;
}
header.header.ecopolis .header-top a:hover {
  color: #502C1E;
  transition: all 0.1s linear 0s;
}
header.header.ecopolis .header-logo img {
  width: 63px;
}
header.header.ecopolis .header-logo h1 {
  min-width: -moz-max-content;
  min-width: max-content;
  color: #C49265;
}
header.header.ecopolis .header-menu-list > li a:hover {
  color: #C49265;
  transition: all 0.1s linear 0s;
}
header.header.ecopolis .header-menu-list i:hover {
  color: #C49265;
  transition: all 0.1s linear 0s;
}
header.header.ecopolis .header-menu-list li.active-menu {
  color: #C49265 !important;
}
header.header.ecopolis .header-menu-list li.active-menu > a {
  color: #C49265 !important;
}
header.header.ecopolis .header-menu-list li.active-menu > i {
  color: #C49265 !important;
}

.header-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  padding: 10px 50px;
  color: #ffffff;
  background-color: #8698df;
  font-size: 1.4rem;
  cursor: default;
}
.header-top > li {
  min-width: -moz-max-content;
  min-width: max-content;
}
.header-top > li i {
  margin-right: 10px;
  font-size: 1.4rem;
}
.header-top li.dummy {
  margin-left: auto;
}
.header-top a {
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.header-top a:hover {
  transition: all 0.1s linear 0s;
}

.header-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 50px 10px 50px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-logo img {
  width: 75px;
}
.header-logo h1 {
  min-width: -moz-max-content;
  min-width: max-content;
}

.header-menu-list {
  margin-left: auto;
  margin-right: 10px;
}

.header-menu-list {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
}
.header-menu-list > li {
  min-width: -moz-max-content;
  min-width: max-content;
}
.header-menu-list > li a {
  display: block;
  color: #313131;
  transition: all 0.1s linear 0s;
}
.header-menu-list > li a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.header-menu-list i {
  font-size: 2rem;
  color: #AFAFAF;
  transition: all 0.1s linear 0s;
}
.header-menu-list i:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.disabled-menu {
  color: #CACACA;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: auto;
  pointer-events: none;
}
.disabled-menu > a {
  color: #CACACA !important;
}
.disabled-menu > i {
  color: #CACACA !important;
}

.announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  color: white;
  background-color: #e02355;
  padding: 10px;
  margin: 0 0 10px 0;
  border-radius: 15px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}

/* --< Account-menu >-- */
.account-user:hover {
  transition: all 0.1s linear 0s;
}
.account-user:hover i, .account-user:hover span {
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.account-menu {
  position: relative;
  min-width: 150px;
  margin-left: 10px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 10px 0 10px 0;
  z-index: 15;
}
.account-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-menu-js:hover .account-menu-list {
  display: flex;
  transition: all 0.1s linear 0s;
}

.account-menu-list {
  top: 35px;
  right: -7rem;
  position: absolute;
  min-width: -moz-max-content;
  min-width: max-content;
  display: none;
  flex-direction: column;
  gap: 25px;
  padding: 20px 25px 20px 20px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  font-family: "Mulish", sans-serif;
  background-color: #ffffff;
  z-index: 10;
  box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.12);
  transition: all 0.1s linear 0s;
}
.account-menu-list .account-menu-item a {
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.account-menu-list .account-menu-item i {
  color: #CACACA;
  font-size: 2rem;
  transition: all 0.1s linear 0s;
}
.account-menu-list .account-menu-item:first-child {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.account-menu-list .account-menu-item:first-child::after {
  content: "";
  display: block;
  background-color: #CACACA;
  height: 1px;
  margin: 20px 0 0 0;
}
.account-menu-list .account-menu-item:nth-last-child(2)::after {
  content: "";
  display: block;
  background-color: #CACACA;
  height: 1px;
  margin: 20px 0 0 0;
}
.account-menu-list a:hover i {
  color: #8698df;
  transition: all 0.1s linear 0s;
}

/* --<< Content >>-- */
.header-dummy {
  margin-top: 150px;
}

.content {
  margin: 0 7%;
}
.content h2 {
  color: #313131;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 2% 0 2% 0;
  font-weight: 600;
}
.content h2 a {
  color: inherit;
  transition: all 0.1s linear 0s;
}
.content h2 a:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}
.content > h5 {
  color: #313131;
  text-align: justify;
  font-size: 1.8rem;
  font-weight: normal;
  margin: 15px 0;
}
.content p {
  color: #313131;
  text-align: justify;
  font-size: 1.6rem;
  margin: 10px 0;
}
.content .published-date {
  display: block;
  color: #AFAFAF;
  font-size: 1.6rem;
  margin: 20px 0;
}

.section {
  margin: 3% 0;
}

.section-article {
  display: block;
  position: relative;
  margin: 3% 0;
  padding: 30px 30px;
  border-radius: 30px;
}
.section-article h2 {
  margin: 2% 0 3% 0;
}
.section-article.blue {
  background-image: url("/static/images/bg_blue.70e1e7260694.png");
}
.section-article.blue .button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  width: -moz-max-content;
  width: max-content;
  display: block;
  text-align: center;
  margin: 50px auto 0 auto;
  font-size: 1.8rem;
}
.section-article.blue .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.section-article.brown {
  background-image: url("/static/images/bg_brown.e4ead4d8d5c1.png");
}
.section-article.brown .button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #C3A58F;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  width: -moz-max-content;
  width: max-content;
  display: block;
  text-align: center;
  margin: 50px auto 0 auto;
  font-size: 1.8rem;
}
.section-article.brown .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

/* --< Section-empty >-- */
.section-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  color: #AFAFAF;
  margin: 15% 15% 5% 15%;
}
.section-empty.len > a {
  background-color: #8698df;
}
.section-empty.ecopolis > a {
  background-color: #B2BF11;
}
.section-empty h2 {
  margin: 0;
}
.section-empty h4 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 2rem;
  font-weight: 400;
}
.section-empty .empty-img {
  width: 10vw;
  height: 10vw;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-empty a {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  font-size: 1.6rem;
  padding: 15px 20px;
  margin-top: 20px;
}
.section-empty a:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.section-empty .like {
  color: #f85555;
}
.section-empty .empty-links, .section-empty .empty-links-mobile {
  width: 100%;
}
.section-empty .empty-links-mobile {
  display: none;
}

/* --# Page Develop #-- */
@keyframes cogs-left {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes cogs-right {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.develop {
  position: relative;
}

.cogs-left {
  position: relative;
  left: 5px;
  width: 150px;
  animation: cogs-left 3s infinite linear;
}

.cogs-right {
  position: relative;
  right: 5px;
  width: 100px;
  animation: cogs-right 3s infinite linear;
}

.main-section {
  margin: 3% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 2% 7%;
}
.main-section .main-text {
  font-size: 2rem;
  max-width: 70vw;
  min-width: 50vw;
  line-height: 1.5;
  color: #313131;
}
.main-section h5 {
  font-size: 2rem;
  line-height: 1.5;
  color: #313131;
  cursor: default;
  font-weight: 500;
}

.directions-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(30vw, 1fr));
  gap: 5%;
}

.direction-block {
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  margin: 0;
  margin-top: 100px;
  padding: 0;
  border-radius: 40px;
  min-height: 37vw;
  max-height: -moz-max-content;
  max-height: max-content;
}
.direction-block.len {
  background-color: #EAF5FF;
  color: #34394F;
}
.direction-block.len .decor {
  background-color: #EAF5FF;
}
.direction-block.len .curtain {
  background-color: rgba(123, 130, 156, 0.9);
}
.direction-block.len .button, .direction-block.len .button-bottom {
  background-color: #8698df;
}
.direction-block.len .subtext {
  color: #34394F;
}
.direction-block.len ul > li {
  color: #34394F;
}
.direction-block.ecopolis {
  background-color: #FEF2E0;
  color: #502C1E;
}
.direction-block.ecopolis .decor {
  background-color: #FEF2E0;
}
.direction-block.ecopolis .curtain {
  background-color: rgba(126, 106, 86, 0.9);
}
.direction-block.ecopolis .button, .direction-block.ecopolis .button-bottom {
  background-color: #C49265;
}
.direction-block.ecopolis .subtext {
  color: #502C1E;
}
.direction-block.ecopolis ul > li {
  color: #502C1E;
}
.direction-block > h4 {
  font-size: 2.2rem;
  color: inherit;
  margin: 30px auto 20px auto;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.direction-block > h5 {
  font-size: 1.7rem;
  color: inherit;
  margin: 0 30px;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 500;
}
.direction-block.block-way .decor {
  top: -12%;
  height: 30%;
}
.direction-block .decor {
  position: absolute;
  top: -15%;
  left: 30%;
  width: 40%;
  height: 40%;
  border-radius: 122px;
  background-color: #EAF5FF;
  z-index: -1;
}
.direction-block .decor-icon {
  position: absolute;
  font-size: 5.7rem;
  top: -50px;
  left: 0;
  right: 0;
  z-index: 3;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.direction-block img {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 65%;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.direction-block .curtain {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 65%;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 40px;
  z-index: 3;
}
.direction-block .curtain h5 {
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1.5;
  padding: 50px 15px 30px 15px;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.direction-block .button, .direction-block .button-bottom {
  margin-top: 30px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 18px 40px;
  font-size: 1.8rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.direction-block .button:hover, .direction-block .button-bottom:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.direction-block .button {
  margin: auto auto 30px auto;
  width: -moz-max-content;
  width: max-content;
}
.direction-block .button-bottom {
  margin-top: auto;
  width: 100%;
  display: flex;
  padding: 20px 40px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
.direction-block .subtext {
  font-size: 2rem;
  font-weight: bold;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  display: block;
  margin: 20px auto;
}
.direction-block ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.direction-block ul li {
  display: grid;
  grid-template-columns: 60px auto;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 20px;
  padding: 10px 20px 10px 30px;
}
.direction-block ul li span {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
}
.direction-block ul li i {
  font-size: 5rem;
}

.mission-section {
  margin: 3% 0 5% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 270px;
}
.mission-section h2 {
  font-size: 2.6rem;
  color: #8698df;
}
.mission-section .mission-text {
  margin-top: 20px;
  font-size: 2.4rem;
  max-width: 55vw;
  line-height: 1.5;
  color: #34394F;
  font-weight: 500;
  font-style: italic;
}
.mission-section .flower {
  position: absolute;
  width: 100px;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.mission-section .flower.left {
  left: 10%;
}
.mission-section .flower.right {
  right: 10%;
  transform: scale(-1, -1);
}

.opt-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  margin: 2% 0 2% 0;
  border-radius: 50px;
}
.opt-section.main {
  margin: 4% 7% 5% 7%;
}
.opt-section.len {
  background-color: #F7F7F7;
}
.opt-section.len h2 {
  color: #34394F;
}
.opt-section.len h5 {
  color: #34394F;
}
.opt-section.len .benefit-list .benefit i {
  color: #6C7BBB;
}
.opt-section.len .benefit-list .benefit h3 {
  color: #6C7BBB;
}
.opt-section.len .benefit-list .benefit h5 {
  color: #34394F;
}
.opt-section.ecopolis {
  background-color: #FEFFF1;
}
.opt-section.ecopolis h2 {
  color: #502C1E;
}
.opt-section.ecopolis h5 {
  color: #502C1E;
}
.opt-section.ecopolis .benefit-list .benefit i {
  color: #B2BF11;
}
.opt-section.ecopolis .benefit-list .benefit h3 {
  color: #B2BF11;
}
.opt-section.ecopolis .benefit-list .benefit h5 {
  color: #502C1E;
}
.opt-section h2 {
  font-size: 2.4rem;
  text-align: center;
}
.opt-section h5 {
  font-size: 2rem;
  text-align: center;
}
.opt-section .benefit-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 20px;
  margin: 30px auto;
}
.opt-section .benefit-list .benefit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 10px;
  cursor: default;
}
.opt-section .benefit-list .benefit i {
  font-size: 6rem;
}
.opt-section .benefit-list .benefit h3 {
  font-size: 2rem;
}
.opt-section .benefit-list .benefit h5 {
  font-size: 1.6rem;
  font-weight: 500;
}
.opt-section .cooperation-form {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  gap: 20px;
  padding: 30px 30px;
  border-radius: 40px;
}
.opt-section .cooperation-form.len h2 {
  color: #34394F;
}
.opt-section .cooperation-form.len h5 {
  color: #34394F;
}
.opt-section .cooperation-form.len input, .opt-section .cooperation-form.len textarea {
  border-color: #6C7BBB;
  color: #34394F;
}
.opt-section .cooperation-form.len .button {
  background-color: #8698df;
}
.opt-section .cooperation-form.ecopolis h2 {
  color: #502C1E;
}
.opt-section .cooperation-form.ecopolis h5 {
  color: #502C1E;
}
.opt-section .cooperation-form.ecopolis input, .opt-section .cooperation-form.ecopolis textarea {
  border-color: #B2BF11;
  color: #502C1E;
}
.opt-section .cooperation-form.ecopolis .button {
  background-color: #B2BF11;
}
.opt-section .cooperation-form h2 {
  font-size: 2.4rem;
  text-align: center;
}
.opt-section .cooperation-form h5 {
  font-size: 2rem;
  text-align: center;
}
.opt-section .cooperation-form .form-row {
  display: flex;
  gap: 20px;
}
.opt-section .cooperation-form input, .opt-section .cooperation-form textarea {
  width: 100%;
  border: 2px solid;
  font-weight: 500;
  padding: 15px 30px;
}
.opt-section .cooperation-form input {
  border-radius: 40px;
}
.opt-section .cooperation-form textarea {
  border-radius: 20px;
}
.opt-section .cooperation-form .button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 40px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.opt-section .cooperation-form .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

.lawka-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 7%;
}

.lawka-block {
  display: grid;
  grid-template-columns: auto 45%;
  gap: 20px;
  height: 22vw;
  border-radius: 40px;
}
.lawka-block img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.lawka-block.left img {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}
.lawka-block.right {
  grid-template-columns: 45% auto;
}
.lawka-block.right img {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}
.lawka-block.len {
  background-color: #EAF5FF;
}
.lawka-block.len h3 {
  color: #34394F;
}
.lawka-block.len span {
  color: #8698df;
}
.lawka-block.len .button {
  background-color: #8698df;
}
.lawka-block.ecopolis {
  background-color: #FEF2E0;
}
.lawka-block.ecopolis h3 {
  color: #502C1E;
}
.lawka-block.ecopolis span {
  color: #C49265;
}
.lawka-block.ecopolis .button {
  background-color: #C49265;
}

.lawka-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  padding: 40px 20px 20px 40px;
}
.lawka-text h3 {
  font-size: 3.2rem;
}
.lawka-text span {
  font-size: 1.8rem;
  font-style: italic;
  font-weight: bold;
}
.lawka-text h5 {
  font-size: 1.8rem;
}
.lawka-text .button {
  margin-top: auto;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 18px 40px;
  font-size: 1.8rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.lawka-text .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

/* --# Page Index #-- */
/* --<< Main-Banner >>-- */
.main-banner {
  margin: 0;
  position: relative;
}

.empty-header {
  width: 100%;
  height: 110px;
}

.main-slider {
  opacity: 0;
  width: 100%;
}
.main-slider .slider-block {
  position: relative;
  height: 27vw;
}
.main-slider .slider-block img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  z-index: 1 !important;
  border-bottom-left-radius: 10%;
  border-bottom-right-radius: 10%;
}

/* --< Main-News >-- */
.slider-articles {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 20px;
       column-gap: 20px;
}

/* --< Main-Catalog >-- */
.slider-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 300px));
  gap: 10px;
}

.main-catalog {
  padding: 10px 0 20px 0;
}

/* --< Main-Catalog-list Brands >-- */
.mobile-catalog-list {
  display: none;
}

/* --< Main-Recipes >-- */
.slider-recipes {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.empty-section {
  display: block;
  width: 100%;
  height: 270px;
}

.empty-block {
  width: 100%;
  position: relative;
  height: 100%;
  border-radius: 10px;
}
.empty-block .title {
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  font-size: 2.2rem;
  top: 0;
  left: 20%;
  color: #bdc4f9;
  border-radius: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 3;
}
.empty-block img {
  display: block;
  position: absolute;
  -o-object-fit: contain;
     object-fit: contain;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  box-shadow: 0 0 30px 20px rgb(255, 255, 255) inset;
  z-index: 1;
}
.empty-block .img-left {
  left: 0;
  top: 0;
}
.empty-block .img-right {
  right: 0;
  top: 0;
}

/* --# Page About Us #-- */
.text-block p {
  font-size: 1.8rem;
}

.img img {
  border-radius: 5px;
}

.img-left {
  float: left;
  margin: 15px 15px 15px 0;
}

.img-right {
  float: right;
  margin: 15px 0 15px 15px;
}

.float-empty {
  clear: both;
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  justify-content: space-between;
  gap: 10px 10px;
  margin: 0 5%;
}
.awards-grid img {
  border-radius: 5px;
  width: 100%;
  height: 100%;
}
.awards-grid .img-large-center {
  grid-column: 2/4;
}
.awards-grid .img-large-left {
  grid-column: 1/3;
}
.awards-grid .img-large-right {
  grid-column: 3/5;
}

.goods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-content: space-between;
  gap: 10px 10px;
}

.goods-block {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  position: relative;
  border-radius: 10px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
  transition: all 0.1s linear 0s;
}
.goods-block img {
  width: 70%;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0 10%;
}
.goods-block h4 {
  padding: 10px 0;
  color: #8698df;
  text-align: center;
}
.goods-block:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}

/* --# Page Article List #-- */
.block-article {
  display: flex;
  justify-content: flex-start;
  position: relative;
  color: #AFAFAF;
  height: 220px;
  margin-bottom: 20px;
  border-radius: 10px;
  transition: all 0.1s linear 0s;
}
.block-article .article-text-block {
  padding: 15px 5px;
}
.block-article img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  min-width: 300px;
  max-width: 300px;
  height: 100%;
  max-height: 220px;
  margin-right: 10px;
}
.block-article span {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 5px 0;
}
.block-article .views {
  position: absolute;
  display: flex;
  align-items: center;
  color: #D5E7FB;
  background-color: rgba(255, 255, 255, 0.9803921569);
  padding: 5px;
  border-radius: 20%;
  gap: 5px;
  right: 10px;
  bottom: 10px;
}
.block-article .views span {
  font-weight: normal;
}
.block-article .views i {
  font-size: 1.6rem;
}
.block-article h3 {
  color: #8698df;
  font-weight: bold;
}
.block-article p {
  font-size: 1.6rem;
  padding: 5px;
}
.block-article:hover {
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
  transition: all 0.1s linear 0s;
}
.block-article.len h3 {
  color: #8698df;
}
.block-article.ecopolis h3 {
  color: #C49265;
}

.article-search {
  margin: 20px 0;
}
.article-search.len .search input:hover {
  border-color: #8698df;
}
.article-search.len .search button {
  color: #8698df;
}
.article-search.ecopolis .search input:hover {
  border-color: #B2BF11;
}
.article-search.ecopolis .search button {
  color: #B2BF11;
}

/* --# Pages Article Detail | Recipe Detail  #-- */
.article-img {
  flex-direction: row !important;
  justify-content: space-between;
  gap: 10px;
}
.article-img .image {
  display: block;
  border-radius: 5px;
  min-width: 330px;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;
}

.image-block {
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.image-block img {
  display: block;
  border-radius: 5px;
  width: 100%;
  min-height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;
}
.image-block a {
  margin-top: 20px;
  min-width: -moz-max-content;
  min-width: max-content;
  display: block;
}

.article {
  display: flex;
  flex-direction: column;
  position: relative;
}
.article p {
  font-size: 1.8rem;
  margin-bottom: 0;
}
.article a {
  font-size: 1.6rem;
  margin: 10px 0;
  color: #8698df;
}
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
  margin: 25px 0 10px 0;
  color: #8698df;
}
.article p:first-child {
  margin-top: 0;
}
.article ul, .article ol {
  font-size: 1.8rem;
}
.article ul li {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 0 0 15px;
  margin: 10px 0;
}
.article ul li > img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 20px 0 0;
}
.article ol {
  counter-reset: ol-numbers;
}
.article ol li {
  position: relative;
  padding: 5px 0 5px 50px;
  margin: 10px 0;
}
.article ol li::before {
  counter-increment: ol-numbers;
  content: counter(ol-numbers);
  position: absolute;
  left: 0;
  top: calc(50% - 1.75rem);
  width: 3.5rem;
  height: 3.5rem;
  line-height: 2;
  font-size: 1.7rem;
  color: #ffffff;
  text-align: center;
  background-color: #8698df;
  border-radius: 50%;
}

.article-two-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 30px;
  margin: 20px 0;
}
.article-two-list div:first-child {
  flex-basis: 40%;
}
.article-two-list div:last-child {
  flex-basis: 60%;
}
.article-two-list h3 {
  cursor: default;
}
.article-two-list h4, .article-two-list h5 {
  font-size: 1.8rem;
  margin: 15px 0 10px 0;
  color: #313131;
  font-weight: normal;
}

.article-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  justify-content: space-between;
  margin: 20px 0 0 0;
  gap: 10px 10px;
}
.article-gallery img {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  max-height: 350px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.article-gallery iframe {
  width: 100%;
  height: 100%;
  min-height: 350px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}

.article-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  justify-content: flex-start;
  margin: 10px 0;
  gap: 10px 10px;
}

.article-slider-block {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  gap: 20px;
}
.article-slider-block img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 200px;
  padding: 0 10%;
}
.article-slider-block h5 {
  color: #313131;
}

.views-static-area {
  position: relative;
}

.views-static {
  position: absolute;
  display: flex;
  align-items: center;
  color: #D5E7FB;
  background-color: rgba(255, 255, 255, 0.9803921569);
  padding: 5px;
  border-radius: 20%;
  font-size: 1.8rem;
  gap: 5px;
  right: 20px;
  top: -20px;
}
.views-static i {
  font-size: 2rem;
}
.views-static span {
  font-weight: normal;
}

/* --< Article Navigation >-- */
.article-nav {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 50px;
  margin-top: 20px;
  padding: 20px 0;
  border-top: 1px solid #eaeaea;
}
.article-nav.len .article-nav-item h3 {
  color: #8698df;
}
.article-nav.ecopolis .article-nav-item h3 {
  color: #C49265;
}

.article-nav.all {
  justify-content: space-between;
}

.article-nav.next {
  justify-content: flex-end;
}

.article-nav.previous {
  justify-content: flex-start;
}

.article-nav-item {
  width: 50%;
  display: flex;
  gap: 10px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
}
.article-nav-item h3 {
  color: #8698df;
  margin: 10px 0;
}
.article-nav-item h5 {
  color: #CACACA;
  font-size: 1.6rem;
  display: none;
}
.article-nav-item span {
  display: block;
  color: #313131;
  font-size: 1.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20vh;
  position: relative;
}
.article-nav-item span:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, transparent, #ffffff 50%);
}
.article-nav-item img {
  max-width: 400px;
  min-width: 200px;
  height: 200px;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* --# Page Location List #-- */
.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: repeat(auto-fill, 300px);
  justify-content: space-between;
  gap: 10px 10px;
}
.location-grid .chunk-article .article-text {
  height: -moz-min-content;
  height: min-content;
  min-height: -moz-max-content;
  min-height: max-content;
  max-height: -moz-max-content;
  max-height: max-content;
}
.location-grid .chunk-article .article-text h5 {
  height: -moz-min-content;
  height: min-content;
}

/* --# Page Locations Detail #-- */
.locations {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
}

.location-item {
  border-bottom: 1px solid #eaeaea;
}
.location-item h3 {
  margin: 0 0 15px 0;
  color: #313131;
}
.location-item a {
  color: #313131;
  transition: all 0.1s linear 0s;
}
.location-item a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.location-item:last-child {
  border: none;
}

.location-item-list {
  display: grid;
  justify-content: space-between;
  grid-template-columns: auto 17%;
  -moz-column-gap: 30px;
       column-gap: 30px;
  padding-bottom: 15px;
}

.location-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.location-item-info ul {
  font-size: 1.6rem;
}
.location-item-info .icon-round {
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
}
.location-item-info .icon-round i {
  font-size: 1.5rem;
}
.location-item-info p {
  color: #313131;
  margin: 0;
  padding: 0;
}

/* --# Page Recipe List #-- */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
  justify-content: space-between;
  gap: 10px 10px;
}

.recipe-block {
  text-align: center;
  transition: all 0.2s ease-in-out;
}
.recipe-block h4 {
  margin: 15px 0 20px 0;
  color: #313131;
}
.recipe-block h4 a {
  color: inherit;
}
.recipe-block > a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: inherit;
}
.recipe-block > a img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  width: 100%;
  height: 270px;
  transition: inherit;
  z-index: 2;
}
.recipe-block > a .views {
  position: absolute;
  display: flex;
  align-items: center;
  color: #D5E7FB;
  background-color: rgba(255, 255, 255, 0.9803921569);
  padding: 5px;
  border-radius: 20%;
  gap: 5px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
}
.recipe-block > a .views span {
  font-weight: normal;
  font-size: 1.6rem;
}
.recipe-block > a .views i {
  font-size: 1.6rem;
}

/* --# Page Reviews #-- */
.review-button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 1.8rem;
}
.review-button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

.review-block {
  position: relative;
  color: #AFAFAF;
  margin-bottom: 10px;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 10px;
  transition: all 0.1s linear 0s;
}
.review-block .review-title, .review-block .comment-title {
  display: flex;
  align-items: center;
}
.review-block .review-title h3, .review-block .comment-title h3 {
  display: inline;
  color: #313131;
  font-weight: bold;
}
.review-block .review-title > span, .review-block .comment-title > span {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 0 10px;
}
.review-block .review-title .comment-rating, .review-block .comment-title .comment-rating {
  margin: 0 10px 0 20px;
}
.review-block .review-title .comment-value, .review-block .comment-title .comment-value {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  margin-left: 5px;
}
.review-block p {
  display: block;
  font-size: 1.6rem;
  margin: 10px 0;
  padding: 0;
  line-height: 1.4;
  text-align: justify;
}
.review-block .review-images, .review-block .comment-images {
  display: flex;
  margin: 20px 0 10px 0;
  gap: 10px;
}
.review-block .review-images img, .review-block .comment-images img {
  border-radius: 5px;
  height: 200px;
}
.review-block .review-read {
  display: none;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #8698df;
}
.review-block .review-buttons, .review-block .comment-buttons {
  display: flex;
  gap: 10px;
  font-size: 1.4rem;
}
.review-block .review-buttons span, .review-block .comment-buttons span {
  cursor: pointer;
  color: #AFAFAF;
  border-bottom: 1px dashed transparent;
  transition: all 0.2s linear 0s;
}
.review-block .review-buttons span:hover, .review-block .comment-buttons span:hover {
  color: #8698df;
  border-color: #8698df;
  transition: all 0.2s linear 0s;
}

.response-block {
  margin-left: 10%;
  position: relative;
  color: #AFAFAF;
  margin-bottom: 10px;
  background-color: #F8F8FC;
  padding: 15px;
  border-radius: 10px;
  transition: all 0.1s linear 0s;
}
.response-block .response-title {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.response-block .response-title h4 {
  display: inline;
  font-weight: bold;
}
.response-block .response-title .response-icon {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
}
.response-block .response-title > span {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 0 10px;
}
.response-block .response-title.len h4 {
  color: #6C7BBB;
}
.response-block .response-title.ecopolis h4 {
  color: #502C1E;
}
.response-block p {
  display: block;
  font-size: 1.6rem;
  padding: 0;
  line-height: 1.4;
  text-align: justify;
}
.response-block .response-buttons {
  display: flex;
  position: absolute;
  right: 20px;
  bottom: 10px;
  gap: 10px;
  font-size: 1.4rem;
}
.response-block .response-buttons span {
  cursor: pointer;
  color: #AFAFAF;
  border-bottom: 1px dashed transparent;
  transition: all 0.2s linear 0s;
}
.response-block .response-buttons span:hover {
  color: #8698df;
  border-color: #8698df;
  transition: all 0.2s linear 0s;
}

.review-view-wrap {
  margin: 20px 0;
}

/* --< Review-form >-- */
.review-form {
  padding: 10px 0;
}
.review-form h3 {
  color: #313131;
  margin: 10px 0;
}
.review-form textarea {
  width: 100%;
  border: 1px solid #E8E8E8;
  resize: vertical;
}

.review-area h4 {
  font-size: 1.6rem;
  color: #AFAFAF;
  margin: 10px 10px 10px 0;
  font-weight: normal;
}
.review-area .label-inline {
  display: inline-block;
}
.review-area > label {
  display: block;
  font-size: 1.6rem;
  color: #AFAFAF;
  margin: 10px 10px 10px 0;
}

.review-uploads-images {
  display: grid;
  grid-template-columns: repeat(6, minmax(200px, 1fr));
  justify-content: space-between;
  gap: 10px 10px;
  gap: 10px;
  width: 100%;
}

.uploads-images-errors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uploads-images-errors .error {
  font-size: 1.6rem;
  color: #e56262;
}

.review-image-item {
  display: block;
  position: relative;
  flex-basis: 15%;
}
.review-image-item input[type=file] {
  display: none;
}
.review-image-item input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

.image-review-label {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 4px dashed #8698df;
  width: 100%;
  height: 300px;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.image-review-label i {
  color: #8698df;
  font-size: 7rem;
  transition: all 0.1s linear 0s;
}
.image-review-label:hover {
  border-color: #D5E7FB;
  transition: all 0.1s linear 0s;
}
.image-review-label:hover i {
  color: #D5E7FB;
  transition: all 0.1s linear 0s;
}
.image-review-label > img {
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  padding: 5px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  top: 0;
  left: 0;
  z-index: 1;
}

.review-image-item.error-img .delete-image {
  color: #c53e3e;
}
.review-image-item.error-img .delete-image:hover {
  color: #e56262;
}
.review-image-item.error-img .image-review-label {
  border-color: #c53e3e;
  background-color: rgba(197, 62, 62, 0.168627451);
}

.add-image {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 4px dashed transparent;
  width: 100%;
  height: 300px;
  background-color: #D5E7FB;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.add-image i {
  color: #8698df;
  font-size: 7rem;
  transition: all 0.1s linear 0s;
}
.add-image:hover {
  transition: all 0.1s linear 0s;
}

.delete-image, .clear-image {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2rem;
  color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  z-index: 5;
}
.delete-image:hover i, .clear-image:hover i {
  color: #D5E7FB;
  transition: all 0.1s linear 0s;
}

.review-active {
  margin: 10px 0 20px 0;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.review-bt, .comment-bt {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #ffffff;
  font-size: 1.6rem;
  padding: 10px 25px;
}
.review-bt:hover, .comment-bt:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

.review-bt-alt, .comment-bt-alt {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #8698df;
  padding: 10px 25px;
  font-size: 1.6rem;
  border-color: #8698df;
}
.review-bt-alt:hover, .comment-bt-alt:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.review-bt-alt:hover, .comment-bt-alt:hover {
  background-color: #8698df;
  color: #ffffff;
}

.star-rating-wrap {
  display: inline-block;
}

.star-rating {
  width: -moz-max-content;
  width: max-content;
  margin-top: 10px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  position: relative;
  gap: 10px;
}

.star-label {
  width: 35px;
  height: 35px;
  background-color: #D5E7FB;
  border-radius: 10px;
  font-family: "LenOk";
  font-weight: normal;
  cursor: pointer;
}
.star-label::before {
  content: "\e913";
  color: #8698df;
  width: inherit;
  height: inherit;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  transition: all 0.1s linear 0s;
}

.star-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.1s linear 0s;
}

.star-item:checked,
.star-item:checked ~ .star-label {
  background-color: #8698df;
  transition: all 0.1s linear 0s;
}
.star-item:checked::before,
.star-item:checked ~ .star-label::before {
  color: #ffffff;
  transition: all 0.1s linear 0s;
}

.star-label:hover,
.star-label:hover ~ .star-label,
.star-label:checked ~ .star-label:hover {
  background-color: #8698df;
  transition: all 0.1s linear 0s;
}
.star-label:hover::before,
.star-label:hover ~ .star-label::before,
.star-label:checked ~ .star-label:hover::before {
  color: #ffffff;
  transition: all 0.1s linear 0s;
}

/* --# Page Contacts #-- */
.contacts {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
.contacts.len .contacts-block h1 {
  color: #34394F;
}
.contacts.len .contacts-block ul li .icon-round {
  color: #8698df;
  border-color: #8698df;
}
.contacts.len .contacts-block ul li a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.contacts.ecopolis .contacts-block h1 {
  color: #502C1E;
}
.contacts.ecopolis .contacts-block ul li .icon-round {
  color: #C49265;
  border-color: #C49265;
}
.contacts.ecopolis .contacts-block ul li a:hover {
  color: #C49265;
  transition: all 0.1s linear 0s;
}

.map {
  flex-basis: 50%;
  max-width: inherit;
  max-height: inherit;
}

.contacts-block h1 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.contacts-block h5 {
  color: #313131;
  font-weight: normal;
  margin: 15px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.contacts-block ul {
  font-size: 1.8rem;
  border-top: 1px solid #AFAFAF;
}
.contacts-block ul li {
  margin: 30px 0;
  display: flex;
  align-items: center;
}
.contacts-block ul li a {
  margin: 0 5px;
  color: #313131;
  transition: all 0.1s linear 0s;
}
.contacts-block ul li a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.contacts-block ul li .split {
  margin: 0 5px;
  font-weight: normal;
}
.contacts-block ul li .contact-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.contacts-block ul li .contact-col .sub-text {
  font-size: 1.5rem;
}
.contacts-block .contacts-phone, .contacts-block .contacts-email {
  display: flex;
  align-items: center;
}
.contacts-block .contacts-phone div, .contacts-block .contacts-email div {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* --# Page Product List (Catalog) #-- */
.catalog-wrapper {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 20px;
       column-gap: 20px;
}

.sidebar-menu {
  height: -moz-max-content;
  height: max-content;
  width: 100%;
  max-width: 320px;
  min-width: 250px;
  margin-bottom: 20px;
  border-radius: 10px;
}
.sidebar-menu h3 {
  font-family: "Montserrat Alternates", sans-serif;
  color: #8698df;
  margin: 10px 10px 20px 15px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.sidebar-menu.len .category-sublist li label:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.sidebar-menu.len .search input:hover, .sidebar-menu.len .search input:focus {
  border-color: #8698df;
}
.sidebar-menu.len .search button {
  color: #8698df;
}
.sidebar-menu.ecopolis .category-sublist li label:hover {
  color: #C49265;
  transition: all 0.1s linear 0s;
}
.sidebar-menu.ecopolis .search input:hover, .sidebar-menu.ecopolis .search input:focus {
  border-color: #C49265;
}
.sidebar-menu.ecopolis .search button {
  color: #C49265;
}

.category-brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 5px;
  width: 100%;
  position: relative;
}
.category-brands .brand {
  position: relative;
  cursor: pointer;
}
.category-brands .brand label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  padding: 10px 10px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.category-brands .brand label img {
  -o-object-fit: contain;
     object-fit: contain;
  height: 100%;
  cursor: pointer;
}
.category-brands .brand input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

.brand input:checked + label.vasileva, label.vasileva:hover {
  background-color: #EAF5FF;
  transition: all 0.1s linear 0s;
}

.brand input:checked + label.ecopolis, label.ecopolis:hover {
  background-color: rgba(255, 196, 141, 0.25);
  transition: all 0.1s linear 0s;
}

.category-sublist {
  display: flex;
  flex-direction: column;
  font-size: 1.8rem;
}
.category-sublist li label {
  display: block;
  position: relative;
  padding: 15px 10px 15px 30px;
  color: #313131;
  transition: all 0.1s linear 0s;
  cursor: pointer;
  border-bottom: 1px solid #eaeaea;
}
.category-sublist li label:hover {
  padding: 15px 5px 15px 35px;
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.category-sublist li:last-child label {
  border: none;
}

.category span {
  display: flex;
  align-items: center;
  position: relative;
}
.category span label {
  display: flex;
  align-items: center;
  color: #313131;
  font-weight: 600;
  font-size: 1.8rem;
  padding: 10px 10px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.category img {
  -o-object-fit: contain;
     object-fit: contain;
  height: 40px;
  margin-right: 10px;
}
.category input {
  position: absolute;
  left: 0;
  visibility: hidden;
  opacity: 0;
}
.category .lenok {
  font-size: 3rem;
  margin-right: 10px;
}
.category .arrow {
  margin: 0 10px 0 auto;
  padding: 0 10px;
  color: #AFAFAF;
  cursor: pointer;
  font-size: 1.8rem;
  transition: all 0.2s linear 0s;
}
.category .arrow-alt {
  transform: rotate(180deg);
}

.catalog {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.catalog.len .search input:hover, .catalog.len .search input:focus {
  border-color: #8698df;
}
.catalog.len .search button {
  color: #8698df;
}
.catalog.len .wrap-messages .message .reset-search {
  background-color: #8698df;
}
.catalog.ecopolis .search input:hover, .catalog.ecopolis .search input:focus {
  border-color: #B2BF11;
}
.catalog.ecopolis .search button {
  color: #B2BF11;
}
.catalog.ecopolis .wrap-messages .message .reset-search {
  background-color: #B2BF11;
}

.catalog-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.catalog-nav .search {
  flex-basis: 100%;
}

.items-page {
  display: flex;
  align-items: center;
  color: #8698df;
  margin-left: auto;
}
.items-page h5 {
  margin-right: 10px;
  min-width: -moz-max-content;
  min-width: max-content;
}
.items-page select {
  width: 50px;
  outline: none;
  border: 1px solid #8698df;
  border-radius: 5px;
  color: #8698df;
  background-color: transparent;
  padding: 5px;
  font: bold 1.4rem "Mulish", sans-serif;
}

.catalog-action {
  display: flex;
  margin-left: auto;
  gap: 10px;
}
.catalog-action button {
  outline: none;
  border: none;
  color: #D5E7FB;
  font-size: 2.2rem;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.catalog-action button:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.catalog-action a {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 10px 10px;
}
.catalog-action a:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.catalog-action a i {
  margin-right: 5px;
}
.catalog-action .catalog-view-active {
  color: #8698df;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-content: space-between;
  gap: 10px 10px;
  margin-top: 15px;
}
.product-list .chunk-product {
  margin: 0;
}

.empty-catalog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.search {
  flex-basis: 30%;
  position: relative;
}
.search input {
  min-width: 100%;
  background-color: #ffffff;
  outline: none;
  border: none;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3607843137);
  border-radius: 10px;
  border: 1px solid #eeeeee;
  padding: 10px 30px 10px 10px;
  font-size: 1.6rem;
  color: #313131;
  font-family: "Mulish", sans-serif;
}
.search input:hover, .search input:focus {
  border-color: #8698df;
  filter: saturate(200%);
}
.search button {
  position: absolute;
  right: 12px;
  top: calc(50% - 10px);
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  color: #8698df;
}
.search button i {
  font-size: 2rem;
}

/* --# Page Product Detail #-- */
.product-section.len .product-gallery .view-gallery .slick-current {
  border: 2px solid #8698df !important;
}
.product-section.len .product-gallery .view-gallery .view-gallery-item:hover {
  border: 2px solid #8698df !important;
  transition: all 0.1s linear 0s;
}
.product-section.len .product-view .product-actions .product-action-buttons .product-action-button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  display: flex;
  align-items: center;
  padding: 20px 20px;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid #8698df;
  font-size: 1.7rem;
}
.product-section.len .product-view .product-actions .product-action-buttons .product-action-button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.product-section.len .product-view .product-actions .product-action-buttons .product-action-button.button-in-cart {
  background-color: #ffffff;
  color: #8698df;
}
.product-section.len .product-view .product-actions .product-action-buttons .product-action-button.button-in-cart:hover {
  background-color: #8698df;
}
.product-section.len .product-info .description-title .icon {
  background-color: #EAF5FF;
}
.product-section.len .product-info .description-title .icon i {
  color: #8698df;
}
.product-section.len .product-info .description .collapse-button {
  color: #8698df;
}
.product-section.len .product-info .description .collapse-button:hover {
  border-bottom: 1px dashed #8698df;
  transition: all 0.1s linear 0s;
}

.product-section.ecopolis .view-gallery .slick-current {
  border: 2px solid #B2BF11 !important;
}
.product-section.ecopolis .view-gallery .view-gallery-item:hover {
  border: 2px solid #B2BF11 !important;
  transition: all 0.1s linear 0s;
}
.product-section.ecopolis .product-view .product-actions .product-action-buttons .product-action-button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #C49265;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  display: flex;
  align-items: center;
  padding: 20px 20px;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid #C49265;
  font-size: 1.7rem;
}
.product-section.ecopolis .product-view .product-actions .product-action-buttons .product-action-button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.product-section.ecopolis .product-view .product-actions .product-action-buttons .product-action-button.button-in-cart {
  background-color: #ffffff;
  color: #C49265;
}
.product-section.ecopolis .product-view .product-actions .product-action-buttons .product-action-button.button-in-cart:hover {
  background-color: #C49265;
}
.product-section.ecopolis .product-info .description-title .icon {
  background-color: #FEF2E0;
}
.product-section.ecopolis .product-info .description-title .icon i {
  color: #C49265;
}
.product-section.ecopolis .product-info .description .collapse-button {
  color: #C49265;
}
.product-section.ecopolis .product-info .description .collapse-button:hover {
  border-bottom: 1px dashed #C49265;
  transition: all 0.1s linear 0s;
}

.product-section {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 5%;
  position: relative;
}
.product-section .product-view {
  width: 100%;
  position: relative;
  flex-direction: column;
}
.product-section .product-view .product-gallery {
  display: flex;
  flex-direction: row;
  position: relative;
}
.product-section .product-info {
  width: 100%;
  position: relative;
}
.product-section .product-info h2 {
  margin: 2% 0 3% 0;
}

.view-gallery {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
  width: 100%;
  max-width: 15% !important;
  margin: 5px 0;
  position: relative;
  opacity: 0;
}
.view-gallery .slick-current {
  border: 2px solid #8698df !important;
}
.view-gallery .view-gallery-item {
  margin: 5px 0;
  height: 80px !important;
  padding: 5px;
  border-radius: 5px;
  border-width: 2px !important;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.view-gallery .view-gallery-item:hover {
  border: 2px solid #8698df !important;
  transition: all 0.1s linear 0s;
}
.view-gallery .view-gallery-item img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
.view-gallery .slider-vertical {
  transform: translate(-50%, 0) rotate(90deg);
  left: 50%;
  font-size: 1.8rem;
  width: 35px;
  height: 35px;
}
.view-gallery .slider-prev {
  top: -25px !important;
}
.view-gallery .slider-next {
  top: auto !important;
  bottom: 15px !important;
}

.view-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  opacity: 0;
}
.view-image img {
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 100%;
  max-height: 400px;
}

.view-image-edit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  flex-basis: 30%;
}
.view-image-edit .image-review-label {
  height: 100%;
}

.product-actions {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  gap: 10px;
}

.product-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-action-block {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid #cdcdcc;
  cursor: default;
}
.product-action-block.blue {
  border-color: #8698df;
}
.product-action-block i {
  font-size: 2.6rem;
  color: #CACACA;
}
.product-action-block h3 {
  margin: 0 20px;
  color: #313131;
  font-size: 2rem;
}
.product-action-block h5 {
  color: #313131;
  font-size: 1.8rem;
  font-weight: 500;
}
.product-action-block.recipes i {
  color: #8698df;
}
.product-action-block.reviews i {
  color: #FED37F;
}
.product-action-block.houses i {
  color: #814f25;
}

.product-price-block {
  padding: 15px 20px;
  cursor: default;
}
.product-price-block h5 {
  color: #313131;
  margin: 0 20px 0 0;
}
.product-price-block .price {
  font-size: 2.6rem;
  color: #313131;
}
.product-price-block .view-discount {
  margin-left: auto;
}

.product-action-button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  display: flex;
  align-items: center;
  padding: 20px 20px;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid #8698df;
  font-size: 1.7rem;
}
.product-action-button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.product-action-button.button-in-cart {
  background-color: #ffffff;
  color: #8698df;
}
.product-action-button.button-in-cart:hover {
  background-color: #8698df;
}

.product-action-buttons .product-button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: grey;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  display: flex;
  align-items: center;
  padding: 20px 20px;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid grey;
  font-size: 1.7rem;
}
.product-action-buttons .product-button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.product-action-buttons .product-button.wb {
  background-color: #b04efc;
  border-color: #b04efc;
}
.product-action-buttons .product-button.ozon {
  background-color: #005bff;
  border-color: #005bff;
}
.product-action-buttons .product-button.yandex {
  background-color: #fce000;
  color: #222;
  border-color: #fce000;
}
.product-action-buttons .product-button.vseinst {
  background-color: #cf2626;
  border-color: #cf2626;
}

.description {
  margin: 25px 10px 25px 0;
}

.description-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.8rem;
  color: #313131;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.description-title .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  padding: 4px;
  width: 45px;
  height: 45px;
  background-color: #EAF5FF;
}
.description-title .icon i {
  color: #8698df;
  font-size: 2.2rem;
}
.description-title .arrow {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  padding: 3px;
  width: 35px;
  height: 35px;
  background-color: #ffffff;
  border: 1px solid #E6E6E6;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.description-title .arrow i {
  color: #CACACA;
  font-size: 2rem;
}
.description-title .arrow.rotate {
  transform: rotate(-180deg);
  transition: all 0.1s linear 0s;
}

.description-text h1, .description-text h2, .description-text h3, .description-text h4 {
  min-width: 200px;
  display: inline-block;
  position: relative;
  color: #ffffff;
  font-weight: bold;
  margin: 10px 0;
  padding: 10px 30px 10px 10px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: #FED37F;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.description-text h1::after, .description-text h2::after, .description-text h3::after, .description-text h4::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(1.8rem - 45px);
  width: calc(1.8rem + 25px);
  height: calc(1.8rem + 25px);
  background-color: #ffffff;
  transform: rotate(45deg);
}
.description-text h5 {
  font-weight: 500;
  color: #313131;
  font-size: 1.7rem;
  margin: 20px 0 10px 0;
  cursor: default;
}
.description-text ul li {
  display: flex;
  align-items: center;
  padding: 15px 0;
  font-size: 1.6rem;
  color: #AFAFAF;
  border-bottom: 1px solid #cdcdcc;
  cursor: default;
}
.description-text ul li span {
  margin-left: auto;
  color: #313131;
}
.description-text p {
  cursor: default;
}

.equipment {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}

.equipment-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  font-size: 1.6rem;
  color: #313131;
  border-bottom: 1px solid #cdcdcc;
  transition: all 0.1s linear 0s;
}
.equipment-item .item-image {
  width: 70px;
  height: 70px;
}
.equipment-item .item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
.equipment-item:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.product-count-slider {
  display: none;
  width: 100%;
  position: relative;
  z-index: 20;
}

.count-slider {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 25px;
  transform: translateY(-50px);
  left: 0;
  color: #ffffff;
  font-size: 1.4rem;
  border-radius: 20px;
  padding: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: rgba(75, 86, 100, 0.558);
}

.product-like {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 20px;
  right: 20px;
  color: #ffffff;
  background-color: rgba(100, 101, 104, 0.71);
  border-radius: 50%;
  font-size: 2rem;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 20;
  transition: all 0.1s linear 0s;
}
.product-like:hover {
  background-color: #FE5365;
  transition: all 0.1s linear 0s;
}
.product-like.like-active {
  background-color: #FE5365 !important;
}

.view-discount {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 2.2rem;
  font-weight: bold;
  color: #e02355;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.view-discount-client {
  color: #8698df;
}
.view-discount-client i {
  font-size: 3.5rem;
  color: #8698df;
}

.colors-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(60px, 80px));
  grid-template-rows: repeat(3, minmax(60px, 80px));
  gap: 3px 3px;
  margin: 10px 0;
}

.color-item {
  position: relative;
  border-radius: 7px;
}
.color-item.active .color {
  border-color: #8698df;
}
.color-item:hover [help-text]:hover::before {
  bottom: -55px;
}

.color-item .color {
  display: block;
  position: relative;
  border-radius: inherit;
  border: 3px solid transparent;
  cursor: pointer;
  height: 100%;
  transition: all 0.1s linear 0s;
}
.color-item .color:hover {
  transition: all 0.1s linear 0s;
}
.color-item .color .effect-color {
  display: block;
  position: absolute;
  width: 70px;
  height: 70px;
  top: 0;
  left: 0;
  transition: all 0.1s linear 0s;
  opacity: 0;
  visibility: hidden;
}
.color-item .color .effect-color img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 15px;
  width: 100%;
  height: 100%;
  transition: all 0.1s linear 0s;
}

.color-item .color:hover .effect-color {
  opacity: 1 !important;
  visibility: visible;
  width: 120px;
  height: 120px;
  top: -20px;
  left: -20px;
  border-radius: 10px;
  z-index: 5;
  transition: all 0.1s linear 0s;
}

.color-item .color > img {
  padding: 2px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

/* --< Product-Recipes >-- */
.product-recipes {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
}

.slider-recipes-product {
  opacity: 0;
}

/* --< Product-Articles >-- */
.product-articles {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
}

.slider-articles-product {
  opacity: 0;
}

/* --< Product-Comments >-- */
.comment-header {
  position: relative;
  margin-top: 30px;
}

.comments-list {
  margin-top: 10px;
}

.comment-list-product {
  color: #AFAFAF;
  margin: 20px 0;
}

.comments-button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  margin-bottom: 20px;
  font-size: 1.8rem;
}
.comments-button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

.comments-disabled {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #CACACA;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  margin-bottom: 20px;
  font-size: 1.8rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: auto;
}
.comments-disabled:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.comments-disabled:hover {
  filter: saturate(100%);
}

.comment-block {
  position: relative;
  color: #AFAFAF;
  margin-bottom: 10px;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 10px;
  transition: all 0.1s linear 0s;
}
.comment-block .review-title, .comment-block .comment-title {
  display: flex;
  align-items: center;
}
.comment-block .review-title h3, .comment-block .comment-title h3 {
  display: inline;
  color: #313131;
  font-weight: bold;
}
.comment-block .review-title > span, .comment-block .comment-title > span {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 0 10px;
}
.comment-block .review-title .comment-rating, .comment-block .comment-title .comment-rating {
  margin: 0 10px 0 20px;
}
.comment-block .review-title .comment-value, .comment-block .comment-title .comment-value {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  margin-left: 5px;
}
.comment-block p {
  display: block;
  font-size: 1.6rem;
  margin: 10px 0;
  padding: 0;
  line-height: 1.4;
  text-align: justify;
}
.comment-block .review-images, .comment-block .comment-images {
  display: flex;
  margin: 20px 0 10px 0;
  gap: 10px;
}
.comment-block .review-images img, .comment-block .comment-images img {
  border-radius: 5px;
  height: 200px;
}
.comment-block .review-read {
  display: none;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #8698df;
}
.comment-block .review-buttons, .comment-block .comment-buttons {
  display: flex;
  gap: 10px;
  font-size: 1.4rem;
}
.comment-block .review-buttons span, .comment-block .comment-buttons span {
  cursor: pointer;
  color: #AFAFAF;
  border-bottom: 1px dashed transparent;
  transition: all 0.2s linear 0s;
}
.comment-block .review-buttons span:hover, .comment-block .comment-buttons span:hover {
  color: #8698df;
  border-color: #8698df;
  transition: all 0.2s linear 0s;
}

/* --< Product Rating-Scale >-- */
.product-scale {
  display: flex;
  flex-direction: row;
  min-width: -moz-min-content;
  min-width: min-content;
  position: absolute;
  bottom: 5px;
  right: 0;
  margin: 10px;
  gap: 15px;
  font-size: 1.6rem;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  z-index: 5;
}

.scale-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.scale-info h3 {
  text-align: center;
  font-size: 3.7rem;
  color: #313131;
}
.scale-info span {
  display: block;
  text-align: center;
  padding: 0 5px;
  color: #AFAFAF;
}
.scale-info .rating {
  font-size: 2.2rem;
  cursor: auto;
}

.scale-rating ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.scale-rating li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1.8rem;
}
.scale-rating li progress {
  border: none;
  height: 4px;
  background-color: #E8E8E8;
  color: #8698df;
  border-radius: 10px;
}
.scale-rating li progress::-webkit-progress-value {
  background: #6F7DBC;
  border-radius: 10px;
}
.scale-rating li progress::-moz-progress-bar {
  background: #6F7DBC;
  border-radius: 10px;
}

/* --# Page Cart #-- */
.cart-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

/* --< Cart-List >-- */
.cart-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-list-wrapper {
  flex-basis: 70%;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #EBEBEB;
  position: relative;
}
.cart-item:last-child {
  border: none;
}
.cart-item input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.cart-item .item-check {
  display: block;
  padding: 12px;
  border-radius: 5px;
  max-width: 15px;
  max-height: 15px;
  border: 2px solid #8698df;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.cart-item .item-check i {
  font-size: 1.4rem;
}
.cart-item .item-check:hover {
  transition: all 0.1s linear 0s;
}
.cart-item .item-active {
  background-color: #8698df;
  color: #ffffff;
}
.cart-item .item-body {
  flex-basis: 70%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.cart-item .item-image {
  width: 100px;
  height: 100px;
  margin-right: 15px;
}
.cart-item .item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.cart-item .item-title {
  align-self: center;
}
.cart-item h2 {
  font-family: "Mulish", sans-serif;
  color: #313131;
  font-weight: 500;
  margin: 10px 0;
  font-size: 2rem;
  transition: all 0.1s linear 0s;
}
.cart-item h2:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.cart-item h5 {
  min-width: -moz-max-content;
  min-width: max-content;
  font-weight: normal;
  color: #AFAFAF;
  margin-bottom: 10px;
}
.cart-item h5 span {
  color: #313131;
  margin-left: 10px;
}
.cart-item .count {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-item .count .minus, .cart-item .count .plus, .cart-item .count .circle {
  display: block;
  font-size: 1.6rem;
  color: #AFAFAF;
  border: 1px solid #EBEBEB;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 7px 10px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.cart-item .count .minus:hover, .cart-item .count .plus:hover, .cart-item .count .circle:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.cart-item .count input[type=number] {
  border: none;
  text-align: center;
  width: 50px;
  font: bold 2rem "Mulish", sans-serif;
  color: #313131;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.cart-item .count.gift .circle {
  opacity: 0;
  visibility: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cart-item .short-rating i {
  color: #8698df;
  margin-right: 5px;
}
.cart-item .price-block {
  display: flex;
  flex-direction: column;
  text-align: right;
  flex-basis: 20%;
  min-width: -moz-max-content;
  min-width: max-content;
  font-size: 2.6rem;
  cursor: default;
}
.cart-item .price-block .info-price {
  font-size: 1.8rem;
  font-weight: 500;
  color: #AFAFAF;
}
.cart-item .item-actions {
  display: flex;
  bottom: 10px;
  right: 10px;
  gap: 20px;
  position: absolute;
  transition: all 0.2s linear 0s;
  opacity: 0;
}
.cart-item .item-actions span, .cart-item .item-actions label {
  font-size: 1.6rem;
  color: #AFAFAF;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.cart-item .item-actions span:hover, .cart-item .item-actions label:hover {
  color: #313131;
  transition: all 0.1s linear 0s;
}
.cart-item .item-actions .trush {
  display: none;
  color: #CACACA;
}
.cart-item .item-actions .trush i {
  margin: 0;
}
.cart-item:hover .item-actions {
  opacity: 1;
  transition: all 0.2s linear 0s;
}

.cart-user {
  margin-top: 10px;
  display: flex;
  gap: 50px;
}

.cart-user-block {
  width: 100%;
}
.cart-user-block h2 {
  margin: 20px 0 10px 0;
}
.cart-user-block h4 {
  margin: 20px 0 10px 0;
  color: #313131;
  font-size: 1.6rem;
}
.cart-user-block > a {
  width: -moz-max-content;
  width: max-content;
  display: block;
  font-size: 1.8rem;
  color: #8698df;
  font-weight: bold;
  transition: all 0.1s linear 0s;
  border-bottom: 1px dashed transparent;
}
.cart-user-block > a:hover {
  border-color: #6F7DBC;
  transition: all 0.1s linear 0s;
}

.cart-info {
  margin: 10px 0;
  font-size: 1.6rem;
}
.cart-info li {
  margin: 20px 0;
  display: flex;
  width: 100%;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cart-info li .cart-info-line {
  display: flex;
  align-items: center;
  min-width: -moz-max-content;
  min-width: max-content;
  color: #AFAFAF;
}
.cart-info li input {
  width: 100%;
  font-size: 1.8rem;
  border: none;
  color: #313131;
  padding: 10px;
  margin-left: 10px;
  border-bottom: 1px solid #EBEBEB;
}
.cart-info li select, .cart-info li .select2 {
  margin-left: 10px;
  width: 100%;
}
.cart-info li select {
  padding: 10px;
  border-radius: 15px;
}
.cart-info.fields input {
  padding: 15px;
  border: 1px solid #EBEBEB;
  border-radius: 15px;
  font-size: 1.8rem;
}

.error-field span {
  color: #c53e3e !important;
}
.error-field input {
  border-color: #c53e3e !important;
  color: #c53e3e !important;
}

/* --< Cart-Order >-- */
.basket-sidebar {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  flex-basis: 27%;
  gap: 10px;
  margin-left: auto;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 20px;
}

.basket-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 10px 10px;
  color: #313131;
  border-radius: 10px;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.basket-action.blue {
  background-color: #EAF5FF;
}
.basket-action.blue i {
  color: #8698df;
}
.basket-action.blue p {
  color: #313131;
}
.basket-action.blue .value {
  color: #8698df;
}
.basket-action.yellow {
  background-color: #ffeccf;
}
.basket-action.yellow i {
  color: #AA7B51;
}
.basket-action.yellow p {
  color: #313131;
}
.basket-action.yellow .value {
  color: #AA7B51;
}
.basket-action p {
  color: #313131;
  font-size: 1.8rem;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.basket-action i {
  font-size: 3rem;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.basket-action .value {
  margin-left: auto;
  min-width: -moz-max-content;
  min-width: max-content;
  color: #313131;
  font-weight: bold;
  font-size: 2.2rem;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.basket-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.basket-block h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #313131;
  font-size: 2.2rem;
  font-family: "Mulish", sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.basket-block h3 .price {
  font-size: 2.6rem;
  font-weight: bold;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.basket-block h5 {
  display: flex;
  align-items: center;
  color: #313131;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  font-size: 1.8rem;
  font-family: "Mulish", sans-serif;
}
.basket-block h5 .price {
  margin-left: auto;
  font-size: 2.4rem;
  font-weight: bold;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.basket-block .cols {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Mulish", sans-serif;
}
.basket-block .cols .price {
  font-size: 2rem;
  color: #313131;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.basket-block p {
  font-size: 1.6rem;
  color: #AFAFAF;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.basket-block p.attention {
  color: #313131;
  font-size: 1.4rem;
}
.basket-block a {
  width: -moz-max-content;
  width: max-content;
  font-size: 1.4rem;
  color: #8698df;
  font-weight: 600;
  padding-bottom: 5px;
  border-bottom: 1px dashed #8698df;
  cursor: pointer;
}

.button-create-order {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  padding: 14px 16px;
  font-size: 1.8rem;
  margin: 5px 0 5px 0;
}
.button-create-order:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

.basket-payment {
  flex-direction: row;
  justify-content: space-between;
}

.basket-actions-block {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin: 5px auto 20px auto;
  background-color: #ffffff;
  width: 100%;
}

.delivery-block {
  display: none;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 5px;
  margin: 5px auto;
  padding: 5px 10px 15px 10px;
  background-color: #ffffff;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 15px;
}
.delivery-block h5 {
  grid-row: 1;
  grid-column: 1;
  color: #AFAFAF;
  font-size: 1.8rem;
  margin: 10px 0 0 0;
}
.delivery-block .price {
  grid-row: 2;
  grid-column: 1;
  font-size: 2.6rem;
  color: #313131;
}
.delivery-block .delivery-period {
  grid-row: 1/3;
  grid-column: 2;
  font-size: 2rem;
  align-self: center;
  justify-self: end;
}

.basket-payment-block {
  margin: 5px auto;
  padding: 5px 0 15px 0;
  background-color: #ffffff;
  border-radius: 15px;
}
.basket-payment-block .attention {
  line-height: 1.4;
  font-size: 1.4rem;
  text-align: left;
  margin: 5px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}

.basket-mobile-footer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin-bottom: 10%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.basket-mobile-footer h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2.4rem;
  color: #313131;
}
.basket-mobile-footer .price, .basket-mobile-footer .val {
  color: #313131;
}
.basket-mobile-footer .cols {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.basket-mobile-footer .cols p {
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
}
.basket-mobile-footer .cols .price, .basket-mobile-footer .cols .val {
  font-size: 1.8rem;
  font-weight: normal;
}
.basket-mobile-footer .agreement-text {
  font-size: 1.4rem;
}
.basket-mobile-footer .agreement-text a {
  color: #8698df;
}

.order-discount {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8698df;
  font-size: 1.8rem;
  padding: 10px 0;
}
.order-discount i {
  font-size: 3.7rem;
  color: #8698df;
}
.order-discount span {
  margin-left: auto;
  font-size: 2.4rem;
  font-weight: bold;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}

.cdek-number {
  color: #00b33c;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dashed #00b33c;
}

.payment {
  display: flex;
  align-items: center;
  gap: 20px;
}
.payment h5 {
  color: #AFAFAF;
  font-weight: normal;
}
.payment h5 > span {
  font-size: 1.8rem;
  margin-left: 10px;
}
.payment h5 div {
  margin-top: 10px;
}
.payment h4 {
  font-size: 1.8rem;
  color: #313131;
  font-weight: normal;
}
.payment .order-blue {
  color: #8698df;
  font-weight: bold;
}

.payment-attention {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-block {
  display: flex;
  align-items: center;
  gap: 5px;
}

.payment-system {
  display: block;
  width: 40px;
  height: 35px;
  background-repeat: no-repeat;
  background-position: center;
}
.payment-system.mir {
  background-image: url("/static/icons/payment/mir.91f98f173207.svg");
}
.payment-system.mc {
  background-image: url("/static/icons/payment/mc.c8e14ad141a8.svg");
}
.payment-system.visa {
  background-image: url("/static/icons/payment/visa.dd76fed8c19c.svg");
}
.payment-system.jcb {
  background-image: url("/static/icons/payment/jcb.e7c650b0b86c.svg");
}

.payment-block.large .payment-system {
  width: 100px;
  height: 90px;
}

/* --# Page Orders #-- */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 30px;
}

.orders-list-mobile {
  display: none;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.order-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  position: relative;
  gap: 50px;
}
.order-item h3 {
  font-size: 2.2rem;
  color: #313131;
}

.order-item.order-account {
  box-shadow: none;
  border-bottom: 1px solid #EBEBEB;
}

.orders-list.order-account:last-child {
  border: none;
}

/* --< Order-body >-- */
.order-body {
  flex-basis: 75%;
}

.order-title {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-left: 30px;
}
.order-title a {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.order-title a:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}
.order-title .order-arrow {
  position: absolute;
  left: 15px;
  color: #8698df;
  font-size: 2.8rem;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.order-title .order-date {
  color: #AFAFAF;
  font-weight: normal;
  font-size: 1.8rem;
  margin-left: 10px;
}
.order-title .order-count {
  margin-left: 20px;
  min-width: -moz-max-content;
  min-width: max-content;
  color: #AFAFAF;
  font-weight: normal;
  font-size: 1.8rem;
}
.order-title .order-amount {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  gap: 5px;
}
.order-title .price {
  margin-left: auto;
  font-size: 2.2rem;
  text-align: right;
}
.order-title .status {
  display: none;
  font-size: 1.6rem;
  text-align: right;
  font-weight: normal;
  font-family: "Mulish", sans-serif;
  color: #AFAFAF;
}

.order-mail {
  width: 100%;
}
.order-mail .order-title {
  margin-left: 0 !important;
}
.order-mail .order-block {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 2rem;
  color: #313131;
  padding: 15px 0 10px 0;
}
.order-mail .order-block span {
  font-size: 1.8rem;
}
.order-mail .order-block .price {
  color: #AFAFAF;
  margin-left: auto;
}
.order-mail .order-goods {
  color: #AFAFAF;
  font-size: 1.8rem;
}
.order-mail .order-products-list {
  border-top: 1px solid #EBEBEB;
}

.order-products-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.order-products-list .order-delivery {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 2rem;
  color: #313131;
  padding: 15px 0 10px 30px;
  border-bottom: 1px solid #EBEBEB;
}
.order-products-list .order-delivery .delivery-method {
  display: flex;
  align-items: center;
  gap: 10px;
}
.order-products-list .order-delivery span {
  font-size: 1.8rem;
}
.order-products-list .order-delivery .price {
  color: #FED37F;
  margin-left: auto;
}

.order-product-item {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #EBEBEB;
  position: relative;
}
.order-product-item:last-child {
  border: none;
}
.order-product-item .item-data {
  color: #313131;
  font-size: 1.6rem;
  cursor: default;
}
.order-product-item .item-title {
  display: flex;
  align-items: center;
}
.order-product-item .item-image {
  display: block;
  width: 100px;
  height: 100px;
  margin-right: 5px;
}
.order-product-item .item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.order-product-item .action-icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  -o-object-fit: contain;
     object-fit: contain;
}
.order-product-item .item-name {
  font-family: "Mulish", sans-serif;
  color: #313131;
  margin: 15px 0;
  font-size: 1.8rem;
  font-weight: normal;
  min-width: -moz-max-content;
  min-width: max-content;
  transition: all 0.1s linear 0s;
}
.order-product-item .item-name:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.order-product-item h5 {
  min-width: -moz-max-content;
  min-width: max-content;
  font-weight: normal;
  color: #AFAFAF;
  margin-bottom: 10px;
}
.order-product-item h5 span {
  color: #313131;
  margin-left: 10px;
}
.order-product-item .item-quantity {
  text-align: center;
  color: #AFAFAF;
  font-size: 1.6rem;
  min-width: -moz-max-content;
  min-width: max-content;
  border-left: 1px solid #EBEBEB;
  border-right: 1px solid #EBEBEB;
}
.order-product-item .item-quantity span {
  color: #313131;
  font-weight: bold;
  margin-left: 10px;
  font-size: 2rem;
}
.order-product-item .price {
  text-align: right;
  min-width: -moz-max-content;
  min-width: max-content;
  font-size: 2rem;
}
.order-product-item .info-price {
  min-width: -moz-max-content;
  min-width: max-content;
  text-align: right;
  color: #AFAFAF;
  font-size: 1.6rem;
}
.order-product-item .info-price i {
  margin-left: 5px;
  font-weight: normal;
}
.order-product-item .info-name {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8698df;
  cursor: default;
}

/* --< Order-info >-- */
.order-info {
  position: sticky;
  top: 130px;
  flex-basis: 25%;
  height: -moz-min-content;
  height: min-content;
}
.order-info h3 {
  min-width: -moz-max-content;
  min-width: max-content;
}

.order-info-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 1.6rem;
  color: #AFAFAF;
  margin-top: 10px;
  padding-top: 5px;
  border-top: 1px solid #EBEBEB;
}
.order-info-list .order-status {
  display: flex;
  justify-content: space-between;
  font-size: 1.6rem;
  margin: 5px 0;
}
.order-info-list .order-status span {
  margin: 0 !important;
  color: #8698df;
  font-weight: bold;
}
.order-info-list .order-col {
  display: flex;
  font-size: 1.6rem;
  gap: 10px;
  margin: 5px 0;
}
.order-info-list .order-col span {
  margin: 0 !important;
  color: #313131;
}
.order-info-list li > span {
  display: block;
  color: #313131;
  margin: 5px 0;
}
.order-info-list .order-button {
  width: 100%;
  margin-top: 10px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #ffffff;
  border-color: #8698df;
  font-size: 1.6rem;
  text-align: center;
  transition: all 0.1s linear 0s;
}
.order-info-list .order-button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.order-info-list .order-button:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}
.order-info-list .order-cancel {
  width: 100%;
  margin-top: 10px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #8698df;
  border-color: #8698df;
  font-size: 1.6rem;
  text-align: center;
  transition: all 0.1s linear 0s;
}
.order-info-list .order-cancel:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.order-info-list .order-cancel:hover {
  color: #ffffff;
  background-color: #8698df;
  transition: all 0.1s linear 0s;
}
.order-info-list .order-disabled {
  width: 100%;
  margin-top: 10px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #AFAFAF;
  border-color: #AFAFAF;
  font-size: 1.6rem;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: auto;
}
.order-info-list .order-disabled:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.order-info-list .order-disabled:hover {
  filter: brightness(1);
}

.order-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #AFAFAF;
  font-weight: normal;
  font-size: 1.8rem;
  margin: 5px 0;
}
.order-status span {
  margin: 0 !important;
  color: #8698df;
  font-weight: bold;
}

.order-hidden, .status-hidden {
  display: none;
}

.rotate {
  transform: rotate(-90deg);
  transition: all 0.1s linear 0s;
}

.order-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  font-size: 2rem;
  color: #AFAFAF;
}

/* --# Page Order Update #-- */
.order-item-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

.order-main {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 130px;
  min-width: -moz-max-content;
  min-width: max-content;
  height: -moz-min-content;
  height: min-content;
  gap: 15px;
  flex-basis: 35%;
  color: #313131;
  padding-right: 40px;
  border-right: 1px solid #EBEBEB;
  margin-bottom: 20px;
}
.order-main h3 {
  font-size: 2rem;
}
.order-main h5 {
  color: #AFAFAF;
  font-weight: normal;
}
.order-main h5 > span {
  font-size: 1.8rem;
  margin-left: 10px;
}
.order-main h5 div {
  margin-top: 10px;
}
.order-main .client-link {
  color: #8698df;
  font-size: 1.8rem;
  margin-left: 10px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dashed #8698df;
}
.order-main .inline {
  display: flex;
  align-items: center;
  gap: 20px;
}
.order-main .delivery {
  color: #FED37F;
}
.order-main .delivery-method {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.order-main .price {
  font-size: 2.2rem;
}
.order-main .order-blue {
  color: #8698df;
  font-weight: bold;
}
.order-main .order-black {
  color: #313131;
}

.code-order {
  color: #6F7DBC;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 2rem;
  font-weight: bold;
  background-color: #D5DAFE;
}

.code-order.small {
  border-radius: 10px;
  font-size: 1.5rem;
}

.order-products {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: #313131;
}
.order-products h3 {
  font-size: 2rem;
}

.order-products-table {
  width: 100%;
  box-sizing: border-box;
  border-collapse: collapse;
}
.order-products-table tr {
  margin-top: 5px;
}
.order-products-table td {
  margin: 5px 0;
}
.order-products-table th {
  font-size: 1.6rem;
  color: #313131;
  padding: 5px;
  font-weight: normal;
  border-bottom: 1px solid #EBEBEB;
}
.order-products-table th:nth-child(2) {
  border-left: 1px solid #EBEBEB;
  border-right: 1px solid #EBEBEB;
}
.order-products-table tbody {
  overflow-x: hidden;
  overflow-y: scroll;
}

.order-actions {
  display: flex;
  gap: 20px;
  padding-top: 15px;
  margin: 10px 0 20px 0;
  border-top: 1px solid #EBEBEB;
}
.order-actions .dummy {
  flex-grow: 1;
}
.order-actions .order-button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  padding: 15px 25px;
  border-color: #8698df;
  font-size: 1.6rem;
  text-align: center;
  transition: all 0.1s linear 0s;
}
.order-actions .order-button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.order-actions .order-button.red {
  color: #ffffff;
  background-color: #e02355;
  border-color: #e02355;
}
.order-actions .order-button.green {
  color: #ffffff;
  background-color: #00b33c;
  border-color: #00b33c;
}
.order-actions .order-button-alt {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #8698df;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  padding: 15px 25px;
  border-color: #8698df;
  font-size: 1.6rem;
  text-align: center;
  transition: all 0.1s linear 0s;
}
.order-actions .order-button-alt:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.order-actions .order-button-alt:hover {
  color: #ffffff;
  background-color: #8698df;
}
.order-actions .order-button-cdek {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: white;
  background-color: #00b33c;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  display: flex;
  align-items: center;
  padding: 15px 25px;
  border-color: #00b33c;
  font-size: 1.6rem;
  text-align: center;
}
.order-actions .order-button-cdek:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.order-actions .order-button-disabled {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #AFAFAF;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  padding: 15px 25px;
  border-color: #AFAFAF;
  font-size: 1.6rem;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: auto;
}
.order-actions .order-button-disabled:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.order-actions .order-button-disabled:hover {
  color: #AFAFAF;
  background-color: #ffffff;
  filter: brightness(1);
}

.total-summ {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  font-size: 2.5rem;
  padding: 5px 0;
}
.total-summ > span {
  font-size: 1.8rem;
  color: #AFAFAF;
}

.order-cancel-mobile {
  display: none;
  margin-top: 40px;
}

.payment-order-mobile {
  display: none;
  border-top: 1px solid #EBEBEB;
  padding: 10px 0;
}
.payment-order-mobile .total-summ {
  font-size: 1.6rem;
}
.payment-order-mobile .total-summ > span {
  font-size: 1.6rem;
}
.payment-order-mobile .price {
  font-size: 2.2rem;
}

/* --# Page Favourites #-- */
.favourites {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  justify-content: space-between;
  gap: 10px 10px;
  margin-top: 15px;
}
.favourites .chunk-product {
  margin: 0;
}

/* --# Page Comments #-- */
.comments .chunk-product-inline {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2509803922);
  margin: 20px 0;
}
.comments .chunk-product-inline .product-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  max-width: 240px;
  padding: 5px;
}
.comments .chunk-product-inline .product-slider img {
  max-height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}
.comments .chunk-product-inline .product-title {
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comments .chunk-product-inline .product-title h3 {
  font-size: 2.3rem;
  color: #313131;
}
.comments .chunk-product-inline .product-title .product-status {
  color: #313131;
  font-weight: normal;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e2e2;
}
.comments .chunk-product-inline .product-title .product-status .short-rating i {
  color: #8698df;
  margin-right: 5px;
}
.comments .chunk-product-inline .product-title .product-status .grey {
  color: #AFAFAF;
}
.comments .chunk-product-inline .product-title p {
  display: block;
  max-height: 120px;
  overflow-y: hidden;
}
.comments .chunk-product-inline .product-action-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: -moz-max-content;
  min-width: max-content;
  justify-content: center;
  margin: 10px 10px 10px 30px;
}
.comments .chunk-product-inline .product-action-inline .like {
  font-size: 2.2rem;
  color: #D5E7FB;
  cursor: pointer;
  height: inherit;
  transition: all 0.1s linear 0s;
}
.comments .chunk-product-inline .product-action-inline .like:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.comments .chunk-product-inline .product-action-inline .price {
  margin: auto 0 10px 0;
  color: #8698df;
  font-weight: bold;
  font-size: 2.4rem;
}
.comments .chunk-product-inline .product-action-inline .button-pay {
  margin-bottom: auto;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #ffffff;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 10px 15px;
  font-size: 1.6rem;
}
.comments .chunk-product-inline .product-action-inline .button-pay:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.comments .chunk-product-inline .product-action-inline .button-pay i {
  margin-right: 10px;
}

.discount {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.discount i {
  color: #e02355;
  font-size: 2.1rem;
  z-index: 5;
}
.discount h4 {
  color: #e02355;
  z-index: 5;
  font-size: 1.6rem;
}

.discount-client h4 {
  color: #8698df;
}
.discount-client i {
  color: #8698df;
  font-size: 3.5rem;
}

.price-discount {
  display: flex;
  text-align: left;
  gap: 5px;
}
.price-discount .price.crossed {
  width: -moz-max-content;
  width: max-content;
  position: relative;
  font-size: 1.6rem;
  color: #AFAFAF;
  align-self: end;
}
.price-discount .price.now {
  color: #e02355;
}

.crossed::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: calc(100% + 10px);
  height: 1px;
  background-color: #AFAFAF;
}

.new {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.new::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border: 35px solid transparent;
  border-top: 35px solid #FF6E7D;
  border-right: 35px solid #FF6E7D;
  border-top-right-radius: 10px;
}
.new h5 {
  position: absolute;
  top: 20px;
  right: -5px;
  transform: rotate(45deg);
  color: #ffffff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 1.35rem;
}

/* --# Login/Signup #-- */
.login-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  margin-top: 100px;
  padding: 3% 15% 3% 15%;
  width: 100%;
  height: 100vh;
  background-image: url("/static/images/background-login.e6bf00998e09.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.login-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 500px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.808) 0%, rgba(255, 255, 255, 0) 100%);
}

.float-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  z-index: 5;
}
.float-logo img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 40%;
  height: 40%;
}
.float-logo span {
  display: block;
}
.float-logo span h3 {
  font-size: 3.5rem;
  color: #8698df;
  margin: 10px 0;
  text-shadow: 0 -1px 5px #FFFFFF, 0 -1px 5px #FFFFFF, 0 1px 5px #FFFFFF, 0 1px 5px #FFFFFF, -1px 0 5px #FFFFFF, 1px 0 5px #FFFFFF, -1px 0 5px #FFFFFF, 1px 0 5px #FFFFFF, -1px -1px 5px #FFFFFF, 1px -1px 5px #FFFFFF, -1px 1px 5px #FFFFFF, 1px 1px 5px #FFFFFF, -1px -1px 5px #FFFFFF, 1px -1px 5px #FFFFFF, -1px 1px 5px #FFFFFF, 1px 1px 5px #FFFFFF;
}

.float-window {
  display: flex;
  flex-direction: column;
  max-width: 440px;
  min-width: 370px;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  z-index: 5;
}
.float-window form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.float-window form h2 {
  color: #8698df;
  margin: 5px auto;
  min-width: -moz-max-content;
  min-width: max-content;
}
.float-window form p {
  line-height: 1.5;
}
.float-window form .reset-password {
  font-size: 1.6rem;
}
.float-window form .subtext {
  line-height: 1.2;
  font-size: 1.4rem;
  color: #313131;
}
.float-window form a {
  color: #8698df;
  border-bottom: 1px dashed transparent;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.float-window form a:hover {
  border-color: #8698df;
  transition: all 0.1s linear 0s;
}
.float-window form input {
  width: 100%;
  border: 1px solid #E8E8E8;
}
.float-window form input:focus {
  border-color: #8698df;
  transition: all 0.1s linear 0s;
}
.float-window form .united {
  display: flex;
  align-items: center;
  gap: 5px;
}
.float-window form .united label {
  width: 100%;
}
.float-window form button {
  margin-top: 20px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #ffffff;
  font-size: 1.8rem;
  width: 100%;
}
.float-window form button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.float-window form .button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #ffffff;
  font-size: 1.8rem;
  width: 100%;
  text-align: center;
}
.float-window form .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.float-window form .button.alternate {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #8698df;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  border-color: #8698df;
  font-size: 1.8rem;
  text-align: center;
  width: 100%;
}
.float-window form .button.alternate:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.float-window form .button.alternate.mobile-button {
  display: none;
}

.float-long {
  max-width: 530px;
  min-width: 370px;
}

/* --# Page Account User #-- */
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  grid-template-rows: repeat(3, minmax(200px, 1fr));
  gap: 10px 10px;
  margin: 0 10%;
}

.account-grid.account-manager-grid {
  grid-template-rows: repeat(auto-fill, minmax(220px, 1fr));
}

.account-area {
  position: relative;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}
.account-area h2 {
  margin: 10px 0 30px 0;
  color: #8698df;
}
.account-area > span {
  display: inline-block;
  font-size: 1.8rem;
  color: #AFAFAF;
  margin-bottom: 30px;
}
.account-area .no-results {
  font-size: 1.8rem;
  font-weight: normal;
  cursor: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.account-area.account-long {
  grid-column: 1/3;
}

.area-block {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #313131;
  width: 100%;
}

.area-button {
  display: block;
  font-weight: bold;
  font-size: 1.8rem;
  color: #8698df;
  margin-left: auto;
  text-align: center;
}

.area-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 7rem;
  color: #D5E7FB;
}

.area-img {
  width: 100px;
  height: 100px;
  -o-object-fit: contain;
     object-fit: contain;
}

.area-text {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.area-text h3 {
  display: inline-block;
  min-width: -moz-max-content;
  min-width: max-content;
  font-family: "Mulish", sans-serif;
  margin: 0;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
  color: #313131;
  gap: 15px;
}
.area-text h5 {
  display: flex;
  gap: 35px;
  font-weight: normal;
  font-size: 1.6rem;
}
.area-text h5 i {
  margin-right: 5px;
  color: #D5E7FB;
}

.area-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}
.area-buttons span {
  display: inline-block;
  font-size: 1.6rem;
  color: #313131;
}
.area-buttons a {
  display: inline-block;
  font-weight: bold;
  font-size: 1.8rem;
  color: #8698df;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: all 0.1s linear 0s;
}
.area-buttons a:hover {
  border-color: #8698df;
  transition: all 0.1s linear 0s;
}
.area-buttons a:last-child {
  margin-left: auto;
}

.client-discount {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  right: 20px;
  top: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.client-discount h4 {
  color: #8698df;
}
.client-discount i {
  color: #8698df;
  font-size: 4rem;
}

.edit-pencil {
  position: relative;
}
.edit-pencil .pencil {
  top: -15px;
  right: -30px;
  position: absolute;
  color: #8698df;
  font-size: 1.8rem;
  cursor: pointer;
}

.products-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  width: calc(100% - 10px);
  margin: 0 5px 20px 5px;
  text-align: center;
}
.products-flex .product-flex-item {
  height: 100px;
}
.products-flex .product-flex-item img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
.products-flex .slider-prev, .products-flex .slider-next {
  color: #8698df;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  z-index: 70;
}
.account-form a {
  color: #313131;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.account-form a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.account-form p {
  color: #313131;
  font-size: 1.8rem;
}
.account-form label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.6rem;
  color: #313131;
}
.account-form input, .account-form textarea {
  width: 50%;
  border: 2px solid #E8E8E8;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
}
.account-form input:focus, .account-form textarea:focus {
  border-color: #8698df;
  transition: all 0.1s linear 0s;
}
.account-form .buttons {
  display: flex;
  margin-top: 20px;
  gap: 20px;
}
.account-form .buttons button {
  width: -moz-max-content;
  width: max-content;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  border-color: #8698df;
  font-size: 1.8rem;
  padding: 12px 30px;
}
.account-form .buttons button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

/* --# Page Account User Mobile #-- */
.account-mobile {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  background-color: #EEEDED;
  padding-bottom: 20px;
}
.account-mobile .account-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 25px 20px;
  box-shadow: none;
}
.account-mobile .account-area span {
  margin: 0;
}
.account-mobile .area-user {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 60vw;
}
.account-mobile .area-user h4 {
  color: #8698df;
  font-size: 2rem;
  min-width: -moz-max-content;
  min-width: max-content;
}
.account-mobile .area-user i {
  font-size: 5rem;
}
.account-mobile .client-discount {
  position: static;
  display: grid;
  gap: 0 7px;
  grid-template-columns: auto auto;
  margin-right: 20px;
}
.account-mobile .client-discount i {
  grid-column: 1;
  grid-row: 1/3;
}
.account-mobile .client-discount h4 {
  grid-column: 2;
  font-size: 2rem;
}
.account-mobile .client-discount h5 {
  margin: 0;
  grid-column: 2;
  grid-row: 2;
  font-size: 1.4rem;
  color: #AFAFAF;
  font-weight: normal;
}
.account-mobile .profile-edit {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  right: 10px;
  bottom: -25px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #8698df;
  font-size: 3rem;
  background-color: #FFFFFF;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
}
.account-mobile .account-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.account-mobile .account-list li a {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 25px 20px 25px 20px;
  color: #313131;
  font-size: 1.8rem;
  border-bottom: 1px solid #CACACA;
  background-color: #FFFFFF;
  cursor: pointer;
}
.account-mobile .account-list li a span {
  font-size: 1.4rem;
  color: #AFAFAF;
  margin-top: 10px;
}
.account-mobile .account-list li a i {
  flex-basis: 10%;
  color: #8698df;
  font-size: 2.1rem;
}
.account-mobile .account-list li a.line {
  flex-direction: column;
}
.account-mobile .account-list li a.red {
  color: #e02355;
}
.account-mobile .account-list li a.grey {
  color: #AFAFAF;
}
.account-mobile .account-list li:first-child a {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.account-mobile .account-list li:last-child a {
  border: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.account-mobile .account-callback img {
  max-width: 60px;
  min-width: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}
.account-mobile .account-callback-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.account-mobile .account-callback-text h4 {
  font-size: 2rem;
  color: #313131;
  font-weight: normal;
}
.account-mobile .account-callback-text span {
  font-size: 1.4rem;
  color: #AFAFAF;
}

.account-back {
  display: none;
  align-items: center;
  position: fixed;
  top: 57px;
  gap: 15px;
  width: 100%;
  padding: 10px 20px;
  background-color: #8698df;
  color: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 60;
  cursor: default;
}
.account-back h2 {
  font-size: 1.8rem;
  font-family: "Mulish", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-back i {
  font-size: 2.2rem;
}
.account-back a {
  color: #ffffff;
  margin-right: 10px;
}
.account-back.len {
  background-color: #8698df;
}
.account-back.ecopolis {
  background-color: #B2BF11;
}

/* % Modal blocks % */
.modal {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: rgba(77, 77, 77, 0.466);
  margin: 0;
  top: 0;
  left: 0;
  z-index: 100;
}

.modal-area {
  position: absolute;
  display: block;
  width: 100vw;
  height: 100vh;
  z-index: 60;
}

.modal-form {
  max-width: -moz-max-content;
  max-width: max-content;
  min-width: 470px;
  max-width: 800px;
  padding: 25px 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  z-index: 70;
}
.modal-form.large {
  min-width: 90vw;
  max-width: 100vw;
  height: 90vh;
}

.modal-form, .form {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 10px;
}
.modal-form h2, .form h2 {
  text-align: center;
  color: #8698df;
  margin: 10px auto;
  cursor: default;
}
.modal-form h3, .form h3 {
  text-align: left;
  color: #CACACA;
  margin: 10px 0;
  cursor: default;
}
.modal-form h5, .form h5 {
  text-align: left;
  color: #313131;
  font-weight: bold;
  margin: 10px 0;
  cursor: default;
  font-size: 1.8rem;
}
.modal-form a, .form a {
  color: #313131;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.modal-form a:hover, .form a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.modal-form p, .form p {
  color: #313131;
  text-align: center;
  font-size: 1.8rem;
  cursor: default;
}
.modal-form .united, .form .united {
  display: flex;
  align-items: center;
  gap: 5px;
}
.modal-form .united label, .form .united label {
  width: 100%;
}
.modal-form .modal-cols, .form .modal-cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  margin: 5px 0;
}
.modal-form .modal-cols div, .form .modal-cols div {
  min-width: -moz-max-content;
  min-width: max-content;
}
.modal-form .delivery-method, .form .delivery-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.modal-form .delivery-method span, .form .delivery-method span {
  font-size: 1.8rem;
  color: #AFAFAF;
}
.modal-form label, .form label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.6rem;
  color: #313131;
}
.modal-form input, .modal-form textarea, .form input, .form textarea {
  width: 100%;
  border: 2px solid #E8E8E8;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
}
.modal-form input:focus, .modal-form textarea:focus, .form input:focus, .form textarea:focus {
  border-color: #8698df;
  transition: all 0.1s linear 0s;
}
.modal-form .buttons, .form .buttons {
  display: flex;
  width: 100%;
  margin-top: 20px;
  gap: 20px;
}
.modal-form .buttons button, .modal-form .buttons a, .form .buttons button, .form .buttons a {
  width: 100%;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  border-color: #8698df;
  font-size: 1.6rem;
}
.modal-form .buttons button:hover, .modal-form .buttons a:hover, .form .buttons button:hover, .form .buttons a:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.modal-form .buttons .alt-btn, .form .buttons .alt-btn {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #8698df;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  border-color: #8698df;
  font-size: 1.6rem;
}
.modal-form .buttons .alt-btn:hover, .form .buttons .alt-btn:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.modal-form .buttons.line button, .modal-form .buttons.line .alt-btn, .modal-form .buttons.line a, .form .buttons.line button, .form .buttons.line .alt-btn, .form .buttons.line a {
  width: -moz-max-content;
  width: max-content;
  padding: 12px 30px;
}
.modal-form .modal-exit, .form .modal-exit { /* Крестик справа вверху */
  position: absolute;
  top: 10px;
  right: 15px;
  color: #e2e2e2;
  font-size: 2.4rem;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.modal-form .modal-exit:hover, .form .modal-exit:hover {
  color: #313131;
  transition: all 0.1s linear 0s;
}

.form-collum {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  justify-content: space-between;
  gap: 20px 20px;
}

.modal-image-preview {
  display: block;
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  background-color: #ffffff;
  z-index: 70;
}
.modal-image-preview img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  -o-object-fit: contain;
     object-fit: contain;
}
.modal-image-preview .modal-exit { /* Крестик справа вверху */
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: -50px;
  color: #AFAFAF;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: #ffffff;
  font-size: 2.5rem;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.modal-image-preview .modal-exit:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.content-alt {
  position: relative;
}
.content-alt h2 {
  color: #8698df;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 30px 0 20px 0;
}
.content-alt p {
  color: #313131;
  text-align: justify;
  font-size: 1.6rem;
  margin: 10px 0;
}

/* % Preview Gallery-Images % */
.slider-gallery-images {
  display: flex;
}

.gallery-item {
  display: none;
}

.gallery-prev {
  left: -80px;
  width: 7rem;
  height: 7rem;
  font-size: 4rem;
}

.gallery-next {
  right: -80px;
  width: 7rem;
  height: 7rem;
  font-size: 4rem;
}

/* -- % Messages % -- */
.wrap-messages {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  z-index: 55;
}

.message {
  display: flex;
  align-items: center;
  gap: 10px;
  width: -moz-max-content;
  width: max-content;
  padding: 15px;
  font-size: 1.6rem;
  color: #313131;
  z-index: 60;
}
.message button, .message a {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  padding: 10px 10px;
}
.message button:hover, .message a:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

.float-message {
  position: absolute;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  bottom: -20px;
  opacity: 0;
  z-index: 60;
}

.message-global {
  z-index: 200 !important;
}

.delivery-loading-wrap {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all 0.1s linear 0s;
}

.delivery-loading-wrap.hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.1s linear 0s;
}

@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.delivery-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.delivery-loading span i {
  font-size: 10rem;
  color: #8698df;
}
.delivery-loading span {
  animation: load 2s infinite linear;
}
.delivery-loading h2 {
  color: #313131;
}

.regions-list {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  height: 100%;
  overflow-y: scroll;
}
.regions-list > .region-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 5px;
  font-size: 1.8rem;
  cursor: default;
}
.regions-list > .region-item .icon-round {
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
}
.regions-list > .region-item .icon-round i {
  font-size: 1.5rem;
}

/* --<< Footer >>-- */
.footer-dummy {
  margin-top: 50px;
}

.footer {
  margin-top: auto;
  width: 100%;
}
.footer.len .footer-logo h1 {
  color: #8698df;
}
.footer.len .footer-info li > a:hover {
  color: #8698df;
}
.footer.len .footer-info .callback .button.mail {
  background-color: #EAF5FF;
  color: #8698df;
}
.footer.len .footer-info .callback .button.mail:hover {
  background-color: #8698df;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.footer.len .footer-copyright {
  background-color: #8698df;
}
.footer.ecopolis .footer-logo h1 {
  color: #C49265;
}
.footer.ecopolis .footer-info li > a:hover {
  color: #C49265;
}
.footer.ecopolis .footer-info .callback .button.mail {
  background-color: #F2F5D9;
  color: #B2BF11;
}
.footer.ecopolis .footer-info .callback .button.mail:hover {
  background-color: #B2BF11;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.footer.ecopolis .footer-copyright {
  background-color: #C49265;
}

.footer-info {
  padding: 10px 10% 20px 10%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-info ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-info ul li {
  color: #AFAFAF;
  font-size: 1.5rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 2;
}
.footer-info ul li > a {
  color: #313131;
  transition: all 0.1s linear 0s;
}
.footer-info ul li > a:hover {
  transition: all 0.1s linear 0s;
}
.footer-info ul a > i {
  margin-right: 5px;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.footer-logo > a, .footer-logo .timework {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  cursor: default;
  gap: 5px;
}
.footer-logo h1 {
  font-size: 2.4rem;
  cursor: default;
}
.footer-logo h3 {
  font-size: 1.6rem;
  color: #313131;
  font-weight: normal;
  cursor: default;
}
.footer-logo h4 {
  font-size: 1.6rem;
  color: #AFAFAF;
  font-weight: 500;
  cursor: default;
}
.footer-logo h5 {
  font-size: 1.4rem;
  color: #AFAFAF;
  font-weight: normal;
  cursor: default;
  margin-bottom: 5px;
}
.footer-logo img {
  width: 80px;
}
.footer-logo .phone {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 20px;
  color: #313131;
  font-size: 1.4rem;
  cursor: pointer;
}
.footer-logo .phone a {
  font-size: 1.6rem;
  font-weight: bold;
  color: #313131;
}

.footer-info .callback {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-basis: 20%;
}
.footer-info .callback h3 {
  font-size: 1.6rem;
  color: #313131;
  font-weight: bold;
  cursor: default;
}
.footer-info .callback h5 {
  font-size: 1.5rem;
  color: #313131;
  font-weight: normal;
  cursor: default;
}
.footer-info .callback .button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  outline: none;
  padding: 12px 15px;
  font-size: 1.5rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  background-color: #FAFAFA;
  color: #313131;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.footer-info .callback .button.mail {
  background-color: #EAF5FF;
  color: #8698df;
}
.footer-info .callback .button.mail:hover {
  background-color: #8698df;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.footer-info .callback .button.vk:hover {
  background-color: #2991ff;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.footer-info .callback .button.telegram:hover {
  background-color: #00abee;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}

.info-black {
  color: #313131 !important;
  font-weight: bold;
  font-size: 1.4rem;
}

.footer-social {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
  padding: 7px 0;
  margin: 0 10%;
  border-radius: 10px;
  background-color: #FAFAFA;
}
.footer-social div {
  display: flex;
  min-width: -moz-max-content;
  min-width: max-content;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  color: #313131;
  font-weight: normal;
  cursor: default;
}
.footer-social div > img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 40px;
  width: 40px;
  transition: all 0.1s linear 0s;
}
.footer-social a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-social a img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 3.5rem;
  height: 3.5rem;
  transition: all 0.1s linear 0s;
}
.footer-social a:hover img {
  filter: saturate(200%);
  transition: all 0.1s linear 0s;
}

.footer-policy {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}
.footer-policy a {
  font-size: 1.4rem;
  color: #313131;
  transition: all 0.1s linear 0s;
}
.footer-policy a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.footer-copyright {
  padding: 10px 0;
  text-align: center;
  background-color: #8698df;
  font-size: 1.4rem;
  color: #ffffff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* -- << Cookies >> -- */
.cookies-alert {
  display: flex;
  align-items: center;
  gap: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 20px;
  background-color: #ffffff;
  box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.2509803922);
  z-index: 30;
  transform: translateY(100%);
  transition: all 0.3s linear 0s;
}

.cookies-alert.show {
  transform: translateY(0);
  transition: all 0.3s linear 0s;
}

.cookies-close {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  font-size: 2rem;
  color: #AFAFAF;
  transition: all 0.1s linear 0s;
}
.cookies-close:hover {
  color: #313131;
  transition: all 0.1s linear 0s;
}

.cookies-text {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 1.4rem;
  color: #313131;
}
.cookies-text a {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.cookies-text a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.cookies-text img {
  width: 45px;
  -o-object-fit: contain;
     object-fit: contain;
}

.cookies-actions {
  margin-left: auto;
  min-width: -moz-max-content;
  min-width: max-content;
}
.cookies-actions button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  padding: 15px 30px;
}
.cookies-actions button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

/* -- << Button-Up >> -- */
.button-up {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  right: 15px;
  bottom: 50px;
  width: 45px;
  height: 45px;
  font-size: 2.8rem;
  border-radius: 50%;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  z-index: 20;
}
.button-up.len {
  background-color: #8698df;
}
.button-up.ecopolis {
  background-color: #B2BF11;
}
.button-up i {
  padding-top: 10px;
  height: inherit;
  width: inherit;
}
.button-up:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}

/* --# Errors Pages #-- */
.errorpage-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%;
}
.errorpage-header img {
  width: 13em;
  -o-object-fit: contain;
     object-fit: contain;
}
.errorpage-header h1 {
  font-size: 3.5rem;
}

.errorpage-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
  margin-top: 10%;
}
.errorpage-body h2 {
  text-align: center;
  color: #8698df;
  font-size: 7rem;
}
.errorpage-body h5 {
  text-align: center;
  color: #313131;
  font-size: 2.5rem;
  font-weight: normal;
}
.errorpage-body a {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
  padding: 12px 20px;
  margin-top: 20px;
}
.errorpage-body a:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

/* --<< Manager Sidebar >>-- */
.manager-sidebar {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  height: -moz-max-content;
  height: max-content;
  transition: all 0.1s linear 0s;
  z-index: 30;
}

.manager-menu {
  display: flex;
  justify-content: center;
  padding: 0;
  background-color: #ffffff;
  box-shadow: -2px 0px 10px 0 rgba(0, 0, 0, 0.25);
}

.manager-menu-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 15px 15px 10px;
  font-size: 1.6rem;
  color: #AFAFAF;
  font-weight: bold;
  transition: all 0.1s linear 0s;
}
.manager-menu-item a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.manager-menu-item a i {
  font-size: 2rem;
}
.manager-menu-item .icon {
  position: relative;
}
.manager-menu-item .count {
  position: absolute;
  top: -10px;
  right: -10px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 10px;
  width: 10px;
  color: #ffffff;
  font-size: 1.2rem;
  font-family: "Mulish", sans-serif;
  padding: 10px;
  border-radius: 50%;
  background-color: #d13636;
}

.manager-menu-item.active a {
  background-color: #8698df;
  color: #ffffff;
}

.manager-menu-item.disabled a {
  color: #AFAFAF;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.manager-menu-item.disabled a:hover {
  background-color: #ffffff;
  color: #AFAFAF;
}

/* --# Manager List | Item #-- */
.manager-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.manager-actions button {
  border: none;
  outline: none;
}
.manager-actions .dot {
  font-size: 3rem;
  color: #AFAFAF;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.manager-actions input {
  display: inline-block;
  justify-content: center;
  align-items: center;
  outline: none;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 15px 20px;
  font-size: 1.8rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #AFAFAF;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
}
.manager-actions input:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}
.manager-actions .dummy {
  flex-basis: 100%;
}

.manager-button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  outline: none;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 15px 20px;
  font-size: 1.8rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #8698df;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
}
.manager-button:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}

.manager-button.action {
  display: inline-block;
  justify-content: center;
  align-items: center;
  outline: none;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 15px 20px;
  font-size: 1.8rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
}
.manager-button.action:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}

.manager-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}

.manager-item-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.manager-item-wrap .manager-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  gap: 20px;
  font-size: 1.6rem;
  flex-grow: 1;
}
.manager-item-wrap .manager-item > img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}
.manager-item-wrap .info-block {
  display: flex;
  align-items: center;
  gap: 15px;
}
.manager-item-wrap .info-block .date {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  color: #313131;
}
.manager-item-wrap .info-block .date h4 {
  color: #8698df;
}
.manager-item-wrap .info-block .date h5 {
  color: #AFAFAF;
}
.manager-item-wrap .info-block i {
  font-size: 4rem;
}
.manager-item-wrap .info-block .icon.issued i {
  color: #AFAFAF;
}
.manager-item-wrap .info-block .icon.inwork i {
  color: #6F7DBC;
}
.manager-item-wrap .info-block .icon.sent i {
  color: #F1C177;
}
.manager-item-wrap .info-block .icon.delivered i {
  color: #F1C177;
}
.manager-item-wrap .info-block .icon.received i {
  color: #00B33C;
}
.manager-item-wrap .info-block .icon.paused i {
  color: #6ABCF8;
}
.manager-item-wrap .info-block .icon.cancel i {
  color: #e02355;
}
.manager-item-wrap .info-block.active i {
  color: #D5E7FB;
}
.manager-item-wrap .info-block.inactive i {
  color: #f57496;
}
.manager-item-wrap .warning {
  color: #f57496;
}
.manager-item-wrap .item-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
}
.manager-item-wrap .item-title span {
  color: #313131;
}
.manager-item-wrap .item-title-header {
  display: flex;
  gap: 15px;
  color: #8698df;
}
.manager-item-wrap .item-title-header span {
  color: #313131;
}
.manager-item-wrap .item-title-text {
  color: #AFAFAF;
  font-weight: normal;
  margin-left: 20px;
}
.manager-item-wrap .item-title-text span {
  padding-left: 5px;
  color: #313131;
  font-weight: bold;
}
.manager-item-wrap .item-product {
  margin-left: auto;
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  color: #313131;
}
.manager-item-wrap .item-product > img {
  width: 60px;
  height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
}
.manager-item-wrap .item-title-adress {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #AFAFAF;
}
.manager-item-wrap .item-title-adress span {
  display: flex;
  align-items: center;
}
.manager-item-wrap .item-title-adress img {
  padding: 0 10px;
}
.manager-item-wrap .discount-client {
  display: flex;
  gap: 10px;
  color: #8698df;
  font-size: 1.8rem;
}
.manager-item-wrap .discount-client i {
  color: #8698df;
  font-size: 3rem;
}
.manager-item-wrap .track-number {
  display: flex;
  margin-left: auto;
  font-size: 1.8rem;
}
.manager-item-wrap .item-back {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  color: #8698df;
}
.manager-item-wrap .item-back .price-group {
  display: flex;
  align-items: center;
  gap: 40px;
}
.manager-item-wrap .item-back .price {
  font-size: 2.2rem;
}
.manager-item-wrap .item-back .status {
  color: #AFAFAF;
  font-size: 1.6rem;
}
.manager-item-wrap .item-back .status.active {
  color: #8698df;
}
.manager-item-wrap .item-back .status.disabled {
  color: #e02355;
}
.manager-item-wrap .item-actions {
  display: flex;
  gap: 10px;
  opacity: 0;
  transition: all 0.1s linear 0s;
}
.manager-item-wrap .item-actions a, .manager-item-wrap .item-actions span {
  color: #AFAFAF;
  font-size: 2.6rem;
  padding: 5px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.manager-item-wrap .action-edit:hover {
  color: #6F7DBC;
}
.manager-item-wrap .action-delete:hover {
  color: #e02355;
}
.manager-item-wrap:hover .item-actions {
  opacity: 1;
}

.callback-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 1.8rem;
  color: #313131;
}
.callback-form label span {
  color: #AFAFAF;
  margin-right: 10px;
}
.callback-form p {
  font-size: 1.8rem;
}

.header-action {
  display: flex;
  align-items: center;
  position: relative;
  margin: 2% 0 2% 0;
}
.header-action h2 {
  margin: 0;
}
.header-action span {
  cursor: pointer;
}

.trush {
  margin-left: auto;
  font-size: 1.8rem;
  color: #D5E7FB;
  transition: all 0.1s linear 0s;
}
.trush i {
  margin-right: 5px;
  font-size: 2.2rem;
}
.trush:hover {
  color: #313131;
  transition: all 0.1s linear 0s;
}

.chunk-manager-product {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  position: relative;
  border-radius: 10px;
  color: #313131;
  padding: 20px 10px 10px 10px;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2509803922);
  transition: all 0.1s linear 0s;
}
.chunk-manager-product .check-list {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 10px;
  top: 10px;
  left: 10px;
}
.chunk-manager-product .check-list .rating, .chunk-manager-product .check-list .like, .chunk-manager-product .check-list .review, .chunk-manager-product .check-list .sale, .chunk-manager-product .check-list .views {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.6rem;
  color: #313131;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.chunk-manager-product .check-list .rating i, .chunk-manager-product .check-list .like i, .chunk-manager-product .check-list .review i, .chunk-manager-product .check-list .sale i, .chunk-manager-product .check-list .views i {
  font-size: 1.8rem;
}
.chunk-manager-product .check-list .rating i {
  color: #D5E7FB;
}
.chunk-manager-product .check-list .like i {
  color: #D5E7FB;
}
.chunk-manager-product .check-list .review i {
  color: #D5E7FB;
}
.chunk-manager-product .check-list .sale i {
  color: #D5E7FB;
}
.chunk-manager-product .check-list .views i {
  color: #D5E7FB;
}
.chunk-manager-product .status-circle {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
  transition: all 0.1s linear 0s;
}
.chunk-manager-product .status-circle i {
  font-size: 2rem;
}
.chunk-manager-product .on-new, .chunk-manager-product .off-new {
  top: 50px;
}
.chunk-manager-product .on-feed, .chunk-manager-product .off-feed {
  top: 90px;
}
.chunk-manager-product .status-circle.on-sale {
  color: #8698df;
}
.chunk-manager-product .status-circle.on-sale:hover {
  border-color: #8698df;
  transition: all 0.1s linear 0s;
}
.chunk-manager-product .status-circle.off-sale {
  color: #e02355;
}
.chunk-manager-product .status-circle.off-sale:hover {
  border-color: #e02355;
  transition: all 0.1s linear 0s;
}
.chunk-manager-product .status-circle.on-new {
  color: #FED37F;
}
.chunk-manager-product .status-circle.on-new:hover {
  border-color: #FED37F;
  transition: all 0.1s linear 0s;
}
.chunk-manager-product .status-circle.off-new {
  color: #AFAFAF;
}
.chunk-manager-product .status-circle.off-new:hover {
  border-color: #AFAFAF;
  transition: all 0.1s linear 0s;
}
.chunk-manager-product .status-circle.on-feed {
  color: #FED37F;
}
.chunk-manager-product .status-circle.on-feed:hover {
  border-color: #FED37F;
  transition: all 0.1s linear 0s;
}
.chunk-manager-product .status-circle.off-feed {
  color: #AFAFAF;
}
.chunk-manager-product .status-circle.off-feed:hover {
  border-color: #AFAFAF;
  transition: all 0.1s linear 0s;
}
.chunk-manager-product img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  min-height: 120px;
  max-height: 180px;
  margin: 0 auto;
  padding: 5px 15px;
}
.chunk-manager-product a {
  display: flex;
  flex-direction: column;
  color: #313131;
  height: 100%;
}
.chunk-manager-product h5 {
  margin: auto 0;
}
.chunk-manager-product p {
  text-align: justify;
  font-size: 1.2rem;
}
.chunk-manager-product .product-action {
  margin: 20px 0 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chunk-manager-product .price {
  color: #8698df;
  font-size: 2rem;
}
.chunk-manager-product .button-pay {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.chunk-manager-product .button-pay:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.chunk-manager-product .button-pay i {
  margin-right: 10px;
}

.error-field input {
  border-color: #c53e3e !important;
  color: #c53e3e !important;
}
.error-field input:hover {
  color: #313131 !important;
}
.error-field input:focus {
  color: #313131 !important;
}

.errors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.errors h4 {
  font-family: "Mulish", sans-serif;
  color: #c53e3e !important;
  font-weight: bold;
}

.error-item {
  font-size: 1.6rem;
  color: #c53e3e;
}

.error-li {
  color: #c53e3e;
}
.error-li .icon-round {
  color: #c53e3e;
  border-color: #c53e3e;
}

.product-edit input[type=text], .product-edit input[type=number] {
  width: 100%;
  background: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1.6rem;
  font-family: "Mulish", sans-serif;
  padding: 5px;
  color: #555555;
}
.product-edit .django-ckeditor-widget {
  display: block !important;
}
.product-edit textarea {
  width: 100%;
  background: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1.6rem;
  font-family: "Mulish", sans-serif;
  padding: 5px;
  color: #555555;
  height: -moz-max-content;
  height: max-content;
}

.view-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.view-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.view-list li span {
  font-size: 1.6rem;
}
.view-list li input {
  position: absolute;
  top: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
}
.view-list .item-check {
  display: block;
  padding: 12px;
  border-radius: 5px;
  max-width: 15px;
  max-height: 15px;
  border: 1px solid #a9a9a9;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  background-color: #ffffff;
  transition: all 0.1s linear 0s;
}
.view-list .item-check i {
  font-size: 1.4rem;
}
.view-list .item-check:hover {
  transition: all 0.1s linear 0s;
  border-color: #8698df;
}
.view-list .item-check.active {
  background-color: #8698df;
  border-color: #8698df;
}

.policy-text.ecopolis a {
  color: #C49265;
}
.policy-text.ecopolis a:hover {
  color: #C49265;
  transition: all 0.1s linear 0s;
}
.policy-text h3 {
  color: #313131;
  margin: 17px 0;
  cursor: pointer;
}
.policy-text p {
  margin: 20px 0;
  font-size: 1.6rem;
}
.policy-text .policy-list, .policy-text .policy-sublist {
  margin-left: 20px;
  transition: all 0.1s linear 0s;
}
.policy-text .policy-list li:first-child, .policy-text .policy-sublist li:first-child {
  margin-top: 0;
}
.policy-text .policy-list li, .policy-text .policy-sublist li {
  font-size: 1.6rem;
  margin: 15px 0;
}
.policy-text .black {
  font-weight: bold;
}
.policy-text a {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.policy-text a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.policy-text-collapse {
  position: relative;
  border-top: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
}
.policy-text-collapse.ecopolis a {
  color: #C49265;
}
.policy-text-collapse.ecopolis a:hover {
  color: #C49265;
  transition: all 0.1s linear 0s;
}
.policy-text-collapse h3 {
  color: #313131;
  margin: 17px 0;
  cursor: pointer;
}
.policy-text-collapse .policy-section {
  display: none;
}
.policy-text-collapse .policy-list, .policy-text-collapse .policy-sublist {
  margin-left: 20px;
  transition: all 0.1s linear 0s;
}
.policy-text-collapse .policy-list li:first-child, .policy-text-collapse .policy-sublist li:first-child {
  margin-top: 0;
}
.policy-text-collapse .policy-list li, .policy-text-collapse .policy-sublist li {
  font-size: 1.6rem;
  margin: 15px 0;
}
.policy-text-collapse .policy-sublist {
  margin-top: 15px;
}
.policy-text-collapse .black {
  font-weight: bold;
}
.policy-text-collapse .policy-arrow {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 2rem;
  color: #AFAFAF;
  transition: all 0.1s linear 0s;
}
.policy-text-collapse .policy-arrow.turn {
  transform: rotate(180deg);
  transition: all 0.1s linear 0s;
}
.policy-text-collapse a {
  color: #8698df;
  transition: all 0.1s linear 0s;
}
.policy-text-collapse a:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.policy-text-collapse:last-child {
  margin-bottom: 50px;
}

.delivery-way-block {
  display: flex;
  margin-right: 30px;
}

.delivery-way {
  flex-flow: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 10px 5px 10px 5px;
}

.status-point {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.status-point .text {
  text-align: left;
  font-size: 1.6rem;
  color: #313131;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.status-point .text:hover {
  font-weight: bold;
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.status-input {
  width: -moz-min-content !important;
  width: min-content !important;
  position: absolute;
  left: -20px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.status-input:checked ~ .point {
  background-color: #8698df;
  transition: all 0.1s linear 0s;
}

.status-input:checked ~ .text {
  font-weight: bold;
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.status-input:checked ~ .way:before {
  border-color: #8698df;
  transition: all 0.1s linear 0s;
}

.status-input:checked ~ .check {
  background-color: #8698df;
  border-color: #8698df;
  transition: all 0.1s linear 0s;
}

.point {
  position: relative;
  right: 0;
  width: 27px;
  height: 27px;
  background-color: #D5E7FB;
  border-radius: 50%;
  border: 5px solid white;
  position: relative;
  z-index: 2;
}

.way {
  position: absolute;
  left: 12.5px;
}
.way:before {
  content: "";
  display: block;
  height: 50px;
  width: 1px;
  border-left: 2px dotted #D5E7FB;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.status-point:first-child .way:before {
  height: 25px;
  transform: translateY(0px);
}

.status-point:last-child .way:before {
  height: 25px;
  transform: translateY(-25px);
}

.chunk-product-follow {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  position: relative;
  border-radius: 10px;
  color: #313131;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2509803922);
  margin: 5px;
  transition: all 0.1s linear 0s;
}
.chunk-product-follow .title {
  top: 40%;
  right: 0;
  left: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.chunk-product-follow .title h3 {
  color: #ffffff;
  padding: 0 30px;
}
.chunk-product-follow .title p {
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
  font-size: 1.7rem;
}
.chunk-product-follow img {
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  min-height: 120px;
  max-height: 220px;
  margin: 0 auto;
}
.chunk-product-follow a {
  display: flex;
  flex-direction: column;
  color: #313131;
  height: 100%;
}
.chunk-product-follow h5 {
  margin: 0 10px;
}
.chunk-product-follow p {
  text-align: justify;
  font-size: 1.2rem;
}

.sales {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sales-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin: 10px 0;
  text-align: right;
}
.sales-info h1 {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 3.4rem;
}
.sales-info h2, .sales-info h3, .sales-info h4 {
  font-family: "Mulish", sans-serif;
}
.sales-info h2 {
  color: #313131;
  margin-bottom: 10px;
  font-size: 2.2rem;
}
.sales-info h4 {
  color: #AFAFAF;
  margin-bottom: 10px;
  font-size: 2rem;
}
.sales-info h3 {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: bold;
}
.sales-info .price i {
  margin-left: 10px;
}

.sales-chart {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
}
.sales-chart progress {
  border: none;
  height: 20px;
  background-color: transparent;
  color: #8698df;
}
.sales-chart progress::-webkit-progress-value {
  background: #6F7DBC;
}
.sales-chart progress::-moz-progress-bar {
  background: #6f7dbc;
}

/* Mobile Adaptation */
/* Modile Header */
.mobile-dummy {
  margin: 0;
}

.header-mobile {
  display: none;
  width: inherit;
  max-width: inherit;
}
.header-mobile.len .header-menu .header-logo h1 {
  color: #8698df;
}
.header-mobile.len .header-menu .search-mobile-button i {
  color: #8698df;
}
.header-mobile.ecopolis .header-menu .header-logo h1 {
  color: #C49265;
}
.header-mobile.ecopolis .header-menu .search-mobile-button i {
  color: #C49265;
}

.header-mobile nav {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 30px;
  min-height: 58px;
}
.header-mobile nav .header-logo {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.header-mobile nav .header-logo h1 {
  font-size: 2rem;
}
.header-mobile nav .header-logo img {
  width: 45px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}
.header-mobile nav #mobile-menu-close {
  display: none;
}
.header-mobile nav .mobile-menu-bars {
  margin-right: 5px;
  color: #AFAFAF;
  font-size: 2.5rem;
  cursor: pointer;
}
.header-mobile nav .search-mobile-button {
  margin-left: auto;
  font-size: 2rem;
  color: #8698df;
  cursor: pointer;
}

.header-mobile.header-search.len .header-logo h2 {
  color: #8698df;
}
.header-mobile.header-search.ecopolis .header-logo h2 {
  color: #C49265;
}

.header-mobile.header-search nav {
  justify-content: center;
}
.header-mobile.header-search nav .header-logo {
  margin-left: auto;
}
.header-mobile.header-search nav .header-logo h2 {
  font-size: 2rem;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #8698df;
}
.header-mobile.header-search nav .dummy {
  margin-left: auto;
}

/* Mobile Search */
.mobile-search {
  padding-top: 75px;
  padding-bottom: 10px;
  border-bottom: 1px solid #CACACA;
}
.mobile-search.len .search input:hover {
  border-color: #6C7BBB !important;
}
.mobile-search.len .search input:focus {
  border-color: #6C7BBB !important;
}
.mobile-search.len .search button {
  color: #6C7BBB;
}
.mobile-search.ecopolis .search input:focus {
  border-color: #B2BF11 !important;
}
.mobile-search.ecopolis .search input:hover {
  border-color: #B2BF11 !important;
}
.mobile-search.ecopolis .search button {
  color: #B2BF11;
}
.mobile-search .search-offers {
  text-align: center;
  margin: 15px auto 5px auto;
  font-size: 1.6rem;
  color: #AFAFAF;
}
.mobile-search .mobile-search-show {
  text-align: center;
  margin: 25px auto 20px auto;
}
.mobile-search .mobile-search-show a {
  color: #AFAFAF;
}

/* Mobile Menu */
.mobile-menu {
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: inherit;
  max-width: inherit;
  padding: 70px 15px 50px 15px;
  overflow: scroll;
  height: 100vh;
  background-color: #ffffff;
  z-index: 65;
  display: none;
}
.mobile-menu.len .mobile-menu-header h1 {
  color: #8698df;
}
.mobile-menu.len .menu-block a.button {
  background-color: #EDF0FA;
  color: #6C7BBB;
}
.mobile-menu.ecopolis .mobile-menu-header h1 {
  color: #C49265;
}
.mobile-menu.ecopolis .menu-block a.button {
  background-color: #F2F5D9;
  color: #B2BF11;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 15px;
}
.mobile-menu-header img {
  width: 70px;
  -o-object-fit: contain;
     object-fit: contain;
}
.mobile-menu-header h1 {
  font-size: 2.2rem;
  color: #8698df;
}
.mobile-menu-header h5 {
  font-size: 1.8rem;
  font-weight: normal;
  color: #AFAFAF;
}

.mobile-menu-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 15px 0;
  padding-left: 10px;
  border-top: 1px solid #CACACA;
  border-bottom: 1px solid #CACACA;
}
.mobile-menu-list li a {
  display: inline-block;
  color: #313131;
  font-size: 2rem;
  font-weight: normal;
}

.mobile-menu-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  padding-bottom: 50px;
}

.menu-block {
  text-align: center;
}
.menu-block h5 {
  font-size: 1.6rem;
  color: #AFAFAF;
  margin: 5px 0 15px 0;
}
.menu-block ul {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.menu-block li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.menu-block li span {
  font-size: 1.4rem;
  color: #AFAFAF;
}
.menu-block li a img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}
.menu-block a.button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F3F3F3;
  color: #8698df;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.menu-block a.button i {
  font-size: 2.2rem;
}

/* Modile Navigation (bottom) */
.mobile-nav {
  display: none;
  width: inherit;
  max-width: inherit;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
  padding: 0 30px;
  z-index: 70;
  box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.1);
}

.mobile-nav-list {
  display: flex;
  justify-content: space-between;
}
.mobile-nav-list.len > li.active-menu a {
  color: #6C7BBB;
}
.mobile-nav-list.len .main-nav.active-menu a {
  color: #34394F;
}
.mobile-nav-list.len .main-nav.active-menu a i {
  color: #6C7BBB;
}
.mobile-nav-list.ecopolis > li.active-menu a {
  color: #B2BF11;
}
.mobile-nav-list.ecopolis .main-nav.active-menu a {
  color: #502C1E;
}
.mobile-nav-list.ecopolis .main-nav.active-menu a i {
  color: #B2BF11;
}
.mobile-nav-list li a {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  position: relative;
  gap: 3px;
  font-size: 1.4rem;
  color: #AFAFAF;
  padding: 10px 0px;
}
.mobile-nav-list li a i {
  color: inherit;
  font-size: 2rem;
}
.mobile-nav-list li.main-nav {
  width: 50px;
  position: relative;
}
.mobile-nav-list li.main-nav a {
  position: relative;
  width: 50px;
  padding: 0;
}
.mobile-nav-list li.main-nav a span {
  position: absolute;
  display: block;
  top: 30px;
}
.mobile-nav-list li.main-nav::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0px -10px 5px -5px rgba(0, 0, 0, 0.1);
}
.mobile-nav-list li.main-nav i {
  font-size: 3rem;
  position: absolute;
  top: -7px;
}
.mobile-nav-list .cart .cart-items {
  top: 2px;
  right: 2px;
  font-size: 1.2rem;
  font-weight: 600;
}

.button-mobile-wrap {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  position: fixed;
  left: 0;
  bottom: 55px;
  width: 100vw;
  padding: 5px 5px 10px 5px;
  background-color: #ffffff;
  z-index: 60;
}

.button-mobile-wrap-top {
  display: none;
  flex-direction: column;
  gap: 5px;
  position: fixed;
  left: 0;
  bottom: 55px;
  width: 100vw;
  padding: 5px 5px 10px 5px;
  background-color: #ffffff;
  z-index: 60;
}

.button-action-mobile {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  text-align: center;
  padding: 15px 10px;
  margin: 0 10px;
  border-radius: 10px;
  font-size: 1.8rem;
  font-weight: 600;
  width: 100%;
}
.button-action-mobile:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.button-action-mobile span {
  margin-right: 5px;
  font-weight: bold;
}
.button-action-mobile.alternate {
  background-color: #ffffff;
  color: #8698df;
  border-color: #8698df;
}
.button-action-mobile.alternate:hover {
  filter: none;
  color: #8698df;
  background-color: #ffffff;
}
.button-action-mobile.wb {
  background-color: #b04efc;
  margin: 0;
  padding: 10px 5px;
  font-size: 1.6rem;
}
.button-action-mobile.wb:hover {
  filter: brightness(1.1);
  background-color: #b04efc;
}
.button-action-mobile.ozon {
  background-color: #005bff;
  margin: 0;
  padding: 10px 5px;
  font-size: 1.6rem;
}
.button-action-mobile.ozon:hover {
  filter: brightness(1.1);
  background-color: #005bff;
}
.button-action-mobile.yandex {
  background-color: #fce000;
  color: #222;
  margin: 0;
  padding: 10px 5px;
  font-size: 1.6rem;
}
.button-action-mobile.yandex:hover {
  filter: brightness(1.1);
  background-color: #fce000;
  color: #222;
}
.button-action-mobile.disabled {
  background-color: #ffffff;
  color: #AFAFAF;
  border-color: #AFAFAF;
  cursor: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.button-action-mobile.disabled:hover {
  filter: none;
  color: #AFAFAF;
  background-color: #ffffff;
}
.button-action-mobile:hover {
  filter: none;
  color: #ffffff;
  background-color: #8698df;
}

/* Modile Footer */
.footer-mobile {
  width: inherit;
  max-width: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  display: none;
}
.footer-mobile.len .footer-logo h1 {
  color: #8698df;
}
.footer-mobile.len .footer-mail {
  color: #6C7BBB;
  background-color: #EDF0FA;
}
.footer-mobile.len .footer-copyright {
  background-color: #8698df;
}
.footer-mobile.ecopolis .footer-logo h1 {
  color: #C49265;
}
.footer-mobile.ecopolis .footer-mail {
  color: #B2BF11;
  background-color: #F2F5D9;
}
.footer-mobile.ecopolis .footer-copyright {
  background-color: #C49265;
}
.footer-mobile .footer-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 15px 15px 20px 15px;
}
.footer-mobile .footer-logo img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 90px;
}
.footer-mobile .footer-logo h1 {
  font-size: 2rem;
  color: #8698df;
  margin: 10px 0;
}
.footer-mobile .footer-logo h5 {
  font-size: 1.6rem;
  font-weight: normal;
  color: #AFAFAF;
}
.footer-mobile .footer-mail {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 15px;
  margin: 0 15px;
  color: #8698df;
  background-color: #EDF0FA;
  border-radius: 10px;
}
.footer-mobile .footer-mail i {
  font-size: 2rem;
}
.footer-mobile .footer-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background-color: #FFFFFF;
  padding: 5px 15px;
  border-radius: 10px;
}
.footer-mobile .footer-block.grey {
  background-color: #FAFAFA;
}
.footer-mobile .footer-block h2 {
  font-size: 1.6rem;
  color: #313131;
}
.footer-mobile .footer-block h5 {
  font-size: 1.4rem;
  color: #AFAFAF;
}
.footer-mobile .footer-block > ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.footer-mobile .footer-block > ul li {
  display: block;
  width: 100%;
}
.footer-mobile .footer-block > ul.links li {
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
}
.footer-mobile .footer-block > ul.links li a {
  display: block;
  min-width: -moz-max-content;
  min-width: max-content;
  font-size: 1.4rem;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px 10px;
  color: #313131;
  font-weight: normal;
}
.footer-mobile .footer-block > ul.text li {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  color: #AFAFAF;
  margin: 5px 0;
}
.footer-mobile .footer-block > ul.text li a {
  display: inline-block;
  font-weight: normal;
  color: #313131;
}
.footer-mobile .footer-block > ul.text li a i {
  padding: 0 5px;
}
.footer-mobile .footer-copyright {
  font-size: 1.6rem;
  padding: 15px;
  height: 110px;
  margin-top: 10px;
}

.footer-account .footer-copyright {
  margin: 0;
  height: 100px;
  padding: 10px;
}

/* Mobile Categories */
.mobile-categories-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 10px 10px;
  padding-top: 20px;
}

.category-area {
  position: relative;
  height: 150px;
  width: 100%;
  padding: 15px 15px;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2509803922);
}
.category-area.set1 {
  background-color: #EAF5FF;
}
.category-area.set2 {
  background-color: #FEF2E0;
}
.category-area.set3 {
  background-color: #F7EDE3;
}
.category-area.set4 {
  background-color: #F9FDDF;
}
.category-area.set5 {
  background-color: #FFEDE2;
}
.category-area.set6 {
  background-color: #F7ECFF;
}
.category-area h5 {
  font-size: 1.8rem;
  color: #313131;
}
.category-area img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right;
     object-position: right;
  border-radius: 10px;
  z-index: -1;
}

.cart-gifts {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  gap: 10px;
  padding: 20px;
  border-radius: 5px;
  border-bottom: 1.5px solid #e0e0e0;
  cursor: pointer;
}
.cart-gifts img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  cursor: pointer;
}
.cart-gifts h2 {
  margin-left: 20px;
  cursor: pointer;
}
.cart-gifts span {
  font-size: 1.8rem;
  margin-left: auto;
  color: #313131;
  cursor: pointer;
}
.cart-gifts .action-cancel { /* Крестик справа вверху */
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  color: #AFAFAF;
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  z-index: 20;
}
.cart-gifts .action-cancel:hover {
  color: #8698df;
  transition: all 0.1s linear 0s;
}

.gifts-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 250px));
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.catalog-action.header-actions {
  margin: 0 0 20px 0;
}

.main-brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px;
  border-radius: 20px;
  width: 100%;
  cursor: pointer;
}
.brand-block img {
  height: 150px;
  -o-object-fit: contain;
     object-fit: contain;
}
.brand-block h2 {
  font-size: 2.8rem;
  font-weight: bold;
  margin: 30px auto 20px auto;
}
.brand-block h5 {
  color: #313131;
  font-size: 2rem;
  font-weight: 600;
  margin: 20px 30px;
}
.brand-block.vasileva {
  background-color: #EAF5FF;
}
.brand-block.vasileva h2 {
  color: #8698df;
}
.brand-block.ecopolis {
  background-color: #F7EDE3;
}
.brand-block.ecopolis h2 {
  color: #5C4735;
}

.direction-banner {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 50px 7% 20px 7%;
}
.direction-banner.len h1 {
  color: #8698df;
}
.direction-banner.len h2 {
  color: #34394F;
}
.direction-banner.len .main-button {
  background: linear-gradient(270deg, rgb(108, 123, 187), rgb(134, 152, 223) 61.327%);
  transition: all 0.1s linear 0s;
}
.direction-banner.len .main-button:hover {
  transition: all 0.1s linear 0s;
  background: linear-gradient(270deg, rgb(134, 152, 223), rgb(134, 152, 223) 100%);
}
.direction-banner.len .advantages .advantage-footer {
  background-color: #EDF0FA;
}
.direction-banner.len .advantages .advantage-block {
  background-color: #EDF0FA;
}
.direction-banner.len .advantages h5 {
  color: #34394F;
}
.direction-banner.len .advantages span.text {
  color: #313131;
  color: #34394F;
}
.direction-banner.len .advantages .icon {
  color: #6C7BBB;
  background-color: #EDF0FA;
}
.direction-banner.ecopolis h1, .direction-banner.ecopolis h2 {
  color: #502C1E;
}
.direction-banner.ecopolis .main-button {
  background: linear-gradient(270deg, rgb(175, 135, 98), rgb(196, 146, 101) 61.327%);
  transition: all 0.1s linear 0s;
}
.direction-banner.ecopolis .main-button:hover {
  transition: all 0.1s linear 0s;
  background: linear-gradient(270deg, rgb(196, 146, 101), rgb(196, 146, 101) 100%);
}
.direction-banner.ecopolis .advantages .advantage-footer {
  background-color: #F2F5D9;
}
.direction-banner.ecopolis .advantages .advantage-block {
  background-color: #F2F5D9;
}
.direction-banner.ecopolis .advantages h5 {
  color: #502C1E;
}
.direction-banner.ecopolis .advantages span.text {
  color: #313131;
  color: #502C1E;
}
.direction-banner.ecopolis .advantages .icon {
  color: #B2BF11;
  background-color: #F2F5D9;
}
.direction-banner .advantages {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px;
  margin: 7% 0 0 0;
}
.direction-banner .advantage-footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 80%;
  border-radius: 40px;
  z-index: 2;
}
.direction-banner .advantage-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  gap: 10px;
  padding: 30px 10px 20px 10px;
  border-radius: 40px;
  width: 100%;
  z-index: 3;
  cursor: default;
}
.direction-banner .advantage-block h5 {
  font-size: 1.75rem;
  font-weight: bold;
}
.direction-banner .advantage-block span.text {
  font-size: 1.6rem;
  font-weight: 600;
  text-wrap: wrap;
}
.direction-banner .advantage-block .icon {
  position: absolute;
  top: -60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 7px solid #ffffff;
  width: 80px;
  height: 80px;
  font-size: 4.2rem;
}

.direction-banner > .banner-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
  cursor: default;
}
.direction-banner > .banner-content h1 {
  font-size: 3.5rem;
  font-weight: bold;
}
.direction-banner > .banner-content h2 {
  font-size: 2rem;
  font-weight: 600;
}
.direction-banner > .banner-content img {
  position: absolute;
  top: 20px;
  height: 100%;
  right: 0;
  max-width: 37vw;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  z-index: 1;
}
.direction-banner > .banner-content .main-button {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  outline: none;
  margin-top: 30px;
  border: 2px solid transparent;
  padding: 14px 30px;
  font-size: 2rem;
  border-radius: 100px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.direction-banner > .banner-content .main-button i {
  font-size: 5rem;
}
.direction-banner > .banner-content .main-button:hover {
  transition: all 0.1s linear 0s;
}

.carousel {
  display: flex;
  flex-direction: column;
  margin: 2% 0 4% 0;
}
.carousel.len > .button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  width: -moz-max-content;
  width: max-content;
  display: block;
  text-align: center;
  margin: 20px auto 0 auto;
  font-size: 1.8rem;
}
.carousel.len > .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.carousel.len .carousel-types {
  background-color: #EDF0FA;
}
.carousel.len .carousel-types li {
  color: #34394F;
  background-color: #EDF0FA;
}
.carousel.len .carousel-types li.slick-current {
  background-color: #8698df;
  color: #ffffff;
  border-radius: 550px 40px 550px 40px;
}
.carousel.len .carousel-types li.slick-current li:hover {
  background-color: #8698df;
  color: #ffffff;
}
.carousel.len .carousel-item {
  background-color: #F2F7FB;
}
.carousel.len .carousel-text h3 {
  color: #34394F;
}
.carousel.len .carousel-text h5 {
  color: #34394F;
}
.carousel.len .carousel-text .button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #8698df;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
  padding: 14px 30px;
}
.carousel.len .carousel-text .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.carousel.len .carousel-text .button-alternate {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #BEA186;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
  padding: 14px 30px;
}
.carousel.len .carousel-text .button-alternate:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.carousel.len .carousel-view .benefit-list > li .icon {
  background-color: #EAF5FF;
  color: #8698df;
}
.carousel.len .carousel-view .benefit-list > li span {
  color: #34394F;
}
.carousel.len .carousel-view .eco-product {
  color: #6C7BBB;
  background-color: #DFE5FC;
}
.carousel.ecopolis > .button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #C49265;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  width: -moz-max-content;
  width: max-content;
  display: block;
  text-align: center;
  margin: 20px auto 0 auto;
  font-size: 1.8rem;
}
.carousel.ecopolis > .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.carousel.ecopolis .carousel-types {
  background-color: #F8EBDD;
}
.carousel.ecopolis .carousel-types li {
  color: #502C1E;
  background-color: #F8EBDD;
}
.carousel.ecopolis .carousel-types li.slick-current {
  background-color: #C49265;
  color: #ffffff;
  border-radius: 550px 40px 550px 40px;
}
.carousel.ecopolis .carousel-types li:hover {
  background-color: #C49265;
  color: #ffffff;
}
.carousel.ecopolis .carousel-item {
  background-color: #FFFAF5;
}
.carousel.ecopolis .carousel-text h3 {
  color: #502C1E;
}
.carousel.ecopolis .carousel-text h5 {
  color: #313131;
}
.carousel.ecopolis .carousel-text .button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #C49265;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
  padding: 14px 30px;
}
.carousel.ecopolis .carousel-text .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.carousel.ecopolis .carousel-text .button-alternate {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #BEA186;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
  padding: 14px 30px;
}
.carousel.ecopolis .carousel-text .button-alternate:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.carousel.ecopolis .carousel-view .benefit-list > li .icon {
  background-color: #FEF2E0;
  color: #C49265;
}
.carousel.ecopolis .carousel-view .benefit-list > li span {
  color: #502C1E;
}
.carousel.ecopolis .carousel-view .eco-product {
  color: #B2BF11;
  background-color: #F2F5D9;
}

.carousel-slider-nav > .slick-list {
  overflow: visible !important;
}

.carousel-types {
  display: flex;
  border-top-left-radius: 550px;
  border-bottom-left-radius: 45px;
  border-top-right-radius: 550px;
  border-bottom-right-radius: 45px;
}
.carousel-types li {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 14px 5px;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.1s ease-out 0s;
}
.carousel-types li.slick-current {
  color: #ffffff;
  border-radius: 550px 40px 550px 40px;
}
.carousel-types li:first-child {
  border-radius: 550px 40px 550px 40px;
}
.carousel-types li:last-child {
  border-radius: 550px 550px 40px 40px !important;
}
.carousel-types li:last-child:hover {
  border-radius: 550px 550px 40px 40px !important;
}
.carousel-types li:hover {
  color: #ffffff;
  border-radius: 550px 40px 550px 40px;
  transition: all 0.1s ease-out 0s;
}

.carousel-item {
  display: grid !important;
  grid-template-columns: 45% 55%;
  padding: 20px 10px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

.carousel-text {
  display: flex;
  flex-direction: column;
  padding: 20px 30px 20px 20px;
  gap: 20px;
}
.carousel-text h3 {
  font-size: 2.6rem;
  font-weight: bold;
  color: #502C1E;
}
.carousel-text h5 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #313131;
  line-height: 1.5;
}
.carousel-text .buttons {
  display: flex;
  gap: 20px;
  margin-top: 5%;
}
.carousel-text .button, .carousel-text .button-alternate {
  width: -moz-max-content;
  width: max-content;
}
.carousel-text .button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #C49265;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
  padding: 14px 30px;
}
.carousel-text .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.carousel-text .button-alternate {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #BEA186;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
  padding: 14px 30px;
}
.carousel-text .button-alternate:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

.carousel-view {
  display: grid;
  grid-template-columns: 45% auto;
  position: relative;
}
.carousel-view .benefits {
  margin-top: 7%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.carousel-view .benefit-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.carousel-view .benefit-list > li {
  display: grid;
  grid-template-columns: 60px auto;
  align-items: center;
  gap: 20px;
}
.carousel-view .benefit-list > li .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 4.2rem;
  background-color: #FEF2E0;
  color: #C49265;
}
.carousel-view .benefit-list > li span {
  font-size: 1.7rem;
  color: #502C1E;
}
.carousel-view .eco-product {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  outline: none;
  padding: 10px 20px;
  font-size: 1.8rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #B2BF11;
  background-color: #F2F5D9;
  cursor: default;
}
.carousel-view .eco-product i {
  font-size: 3.5rem;
}
.carousel-view .carousel-product-image {
  text-align: center;
  justify-self: center;
  height: 350px;
  display: block;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

.color-section .button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 12px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #C49265;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  width: -moz-max-content;
  width: max-content;
  display: block;
  text-align: center;
  margin: 50px auto 0 auto;
  font-size: 1.8rem;
}
.color-section .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.color-section .color-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15vw, 1fr));
  gap: 10px;
}
.color-section .color-list .color {
  height: 8vw;
}
.color-section .color-list .color img {
  width: 100%;
  height: 100%;
}

.chunk-color {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  border-radius: 15px;
  margin: 5px;
  color: #313131;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1254901961);
  transition: all 0.1s linear 0s;
  cursor: pointer;
}
.chunk-color .color-image {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  height: 160px;
  border-radius: 10px;
}
.chunk-color .color-image img {
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  height: 100%;
  width: 100%;
}
.chunk-color .color-text {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  text-align: center;
}
.chunk-color .color-text h5 {
  color: #313131;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  overflow: visible;
}

.catalog-list.desktop {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.catalog-list.desktop .catalog-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  position: relative;
  border-radius: 40px;
  min-height: 27vw;
  padding: 20px 30px;
  overflow: hidden;
}
.catalog-list.desktop .catalog-item.set1 {
  background-color: #EAF5FF;
}
.catalog-list.desktop .catalog-item.set1::before {
  background-color: #EAF5FF;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.desktop .catalog-item.set1 .links > .item-link {
  background-color: #5c7d9c;
}
.catalog-list.desktop .catalog-item.set2 {
  background-color: #FEF2E0;
}
.catalog-list.desktop .catalog-item.set2::before {
  background-color: #FEF2E0;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.desktop .catalog-item.set2 .links > .item-link {
  background-color: #E0AE63;
}
.catalog-list.desktop .catalog-item.set3 {
  background-color: #F7EDE3;
}
.catalog-list.desktop .catalog-item.set3::before {
  background-color: #F7EDE3;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.desktop .catalog-item.set3 .links > .item-link {
  background-color: #CDA06C;
}
.catalog-list.desktop .catalog-item.set4 {
  background-color: #F9FDDF;
}
.catalog-list.desktop .catalog-item.set4::before {
  background-color: #F9FDDF;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.desktop .catalog-item.set4 .links > .item-link {
  background-color: #B7C656;
}
.catalog-list.desktop .catalog-item.set5 {
  background-color: #FFEDE2;
}
.catalog-list.desktop .catalog-item.set5::before {
  background-color: #FFEDE2;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.desktop .catalog-item.set5 .links > .item-link {
  background-color: #B98361;
}
.catalog-list.desktop .catalog-item h2 {
  font-size: 2.4rem;
  color: #313131;
}
.catalog-list.desktop .catalog-item h4 {
  font-size: 1.8rem;
  font-weight: 500;
  color: #313131;
}
.catalog-list.desktop .catalog-item .links {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  left: 0;
  right: 0;
  top: 50%;
  gap: 20px;
  z-index: 5;
}
.catalog-list.desktop .catalog-item .links .item-link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  outline: none;
  padding: 18px 25px;
  font-size: 2rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  background-color: #555555;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.catalog-list.desktop .catalog-item .links .item-link:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}
.catalog-list.desktop .catalog-item img {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 65%;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  transition: all 0.1s linear 0s;
}
.catalog-list.desktop .catalog-item::before {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  display: block;
  width: 100%;
  height: 65%;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  z-index: 2;
}

.catalog-list.mobile {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.catalog-list.mobile .catalog-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 30% auto;
  justify-content: flex-start;
  text-align: left;
  position: relative;
  border-radius: 20px;
  min-height: 20vw;
  max-height: 45vw;
  padding: 0;
}
.catalog-list.mobile .catalog-item.set1 {
  background-color: #EAF5FF;
}
.catalog-list.mobile .catalog-item.set1::before {
  background-color: #EAF5FF;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.mobile .catalog-item.set1 .icon, .catalog-list.mobile .catalog-item.set1 .link {
  background-color: #8698df;
}
.catalog-list.mobile .catalog-item.set2 {
  background-color: #FEF2E0;
}
.catalog-list.mobile .catalog-item.set2::before {
  background-color: #FEF2E0;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.mobile .catalog-item.set2 .icon, .catalog-list.mobile .catalog-item.set2 .link {
  background-color: #E0AE63;
}
.catalog-list.mobile .catalog-item.set3 {
  background-color: #F7EDE3;
}
.catalog-list.mobile .catalog-item.set3::before {
  background-color: #F7EDE3;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.mobile .catalog-item.set3 .icon, .catalog-list.mobile .catalog-item.set3 .link {
  background-color: #CDA06C;
}
.catalog-list.mobile .catalog-item.set4 {
  background-color: #F9FDDF;
}
.catalog-list.mobile .catalog-item.set4::before {
  background-color: #F9FDDF;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.mobile .catalog-item.set4 .icon, .catalog-list.mobile .catalog-item.set4 .link {
  background-color: #B7C656;
}
.catalog-list.mobile .catalog-item.set5 {
  background-color: #FFEDE2;
}
.catalog-list.mobile .catalog-item.set5::before {
  background-color: #FFEDE2;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.mobile .catalog-item.set5 .icon, .catalog-list.mobile .catalog-item.set5 .link {
  background-color: #B98361;
}
.catalog-list.mobile .catalog-item h2 {
  font-size: 2.2rem;
  color: #313131;
}
.catalog-list.mobile .catalog-item h4 {
  font-size: 1.8rem;
  font-weight: 500;
  color: #313131;
  line-height: 1.4;
}
.catalog-list.mobile .catalog-item .catalog-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 20px 60px;
}
.catalog-list.mobile .catalog-item .icon {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  top: -10px;
  left: -10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 4.5rem;
  color: #ffffff;
  z-index: 5;
}
.catalog-list.mobile .catalog-item img {
  width: 100%;
  max-height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  height: 100%;
}
.catalog-list.mobile .catalog-item .link {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 10px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffffff;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

.color-section {
  margin: 4% 0 7% 0;
}

.color-modal {
  width: 50vw;
  padding: 20px 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  z-index: 70;
}
.color-modal h2 {
  text-align: center;
}
.color-modal .button {
  min-width: 30vw;
}
.color-modal .color-drag-frame {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: 10px;
}
.color-modal .color-drag-frame img {
  display: block;
  width: 50vw;
  height: 270px;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: center;
  cursor: default;
}
.color-modal .color-drag-frame .color-resize {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
}
.color-modal .color-drag-frame .slider-handle {
  position: absolute;
  width: 4px;
  left: 50%;
  top: 0;
  bottom: 0;
  margin-left: -2px;
  background: rgba(0, 0, 0, 0.5);
  cursor: ew-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.color-modal .color-drag-frame .slider-handle .icon {
  position: absolute;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  top: 40%;
  width: 65px;
  height: 65px;
  background-color: #ffffff;
  border-radius: 50%;
  transform: translateX(-32.5px);
}
.color-modal .color-drag-frame .slider-handle .icon i {
  font-size: 3rem;
  color: #502C1E;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.woodgallery-section {
  display: flex;
  flex-direction: column;
}
.woodgallery-section .pagination {
  justify-content: center;
}

.woodgallery-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0 30px 0;
}
.woodgallery-nav .woodgallery-nav-button {
  width: 100%;
  position: relative;
}
.woodgallery-nav .woodgallery-nav-button input {
  position: absolute;
  top: 0;
  left: 0;
  width: -moz-min-content;
  width: min-content;
  opacity: 0;
  visibility: hidden;
}
.woodgallery-nav .woodgallery-nav-label {
  width: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 16px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-weight: bold;
  color: #502C1E;
  background-color: #F8EBDD;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
  padding: 14px 30px;
  height: 100%;
}
.woodgallery-nav .woodgallery-nav-label:hover {
  background-color: #C49265;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}

.woodgallery-nav-button input:checked + .woodgallery-nav-label {
  background-color: #C49265;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}

.woodgallery-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr));
  gap: 10px;
}
.woodgallery-list .woodgallery-item {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  max-height: 40vh;
}
.woodgallery-list .woodgallery-item img {
  -o-object-fit: cover;
     object-fit: cover;
  width: inherit;
  height: inherit;
  border-radius: inherit;
}

.calculate-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 40px;
  position: relative;
}
.calculate-wrap > h2 {
  color: #B2BF11;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin: 10px auto;
}
.calculate-wrap > h4 {
  color: #502C1E;
  font-size: 2.4rem;
  text-align: center;
  margin: 10px auto;
}
.calculate-wrap .calc-attention {
  position: absolute;
  top: 15px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #B2BF11;
  border: 1px solid transparent;
  background-color: #F2F5D9;
  border-radius: 40px;
  min-width: -moz-max-content;
  min-width: max-content;
  cursor: default;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.calculate-wrap .calculate-blocks {
  display: grid;
  justify-content: center;
  grid-template-columns: 32% 32% 32%;
  gap: 10px 30px;
}
.calculate-wrap .calculate-blocks .calculate-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 10px;
}
.calculate-wrap .calculate-blocks .calculate-block.block-maslo {
  grid-column: 1;
  grid-row: 1/4;
}
.calculate-wrap .calculate-blocks .calculate-block.block-square {
  grid-column: 2;
  grid-row: 1;
}
.calculate-wrap .calculate-blocks .calculate-block.block-preparation {
  grid-column: 2;
  grid-row: 2;
}
.calculate-wrap .calculate-blocks .calculate-block.block-color {
  grid-column: 2;
  grid-row: 3;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total {
  grid-column: 3;
  grid-row: 1/4;
}
.calculate-wrap .calculate-blocks .calculate-block h3 {
  font-size: 1.8rem;
  text-align: center;
  margin: 20px auto 10px auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list li {
  position: relative;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list li label {
  display: flex;
  align-items: center;
  padding: 20px;
  font-size: 1.6rem;
  background-color: #f5f5f5;
  font-weight: 600;
  color: #313131;
  border-radius: 20px;
  transition: all 0.1s linear 0s;
  cursor: pointer;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list li input {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list li:hover label {
  background-color: #B2BF11;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list input:checked + label, .calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list input:focus + label {
  background-color: #B2BF11;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 10px;
  gap: 30px;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(auto, 1fr));
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 20px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.image img {
  width: 100%;
  height: 7vw;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 2px solid transparent;
  opacity: 0.5;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.image span {
  font-size: 1.6rem;
  color: #313131;
  font-weight: 500;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.layer {
  position: relative;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.layer > div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background-color: #f5f5f5;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #313131;
  font-size: 3rem;
  font-weight: bold;
  width: 6vw;
  height: 5vw;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.image input:checked + img, .calculate-wrap .calculate-blocks .calculate-block .calc-list label.image input:focus + img, .calculate-wrap .calculate-blocks .calculate-block .calc-list label.image input:hover + img {
  opacity: 1;
  transition: all 0.1s linear 0s;
  border-color: #502C1E;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.layer input:checked + .layer-item, .calculate-wrap .calculate-blocks .calculate-block .calc-list label.layer input:hover + .layer-item, .calculate-wrap .calculate-blocks .calculate-block .calc-list label.layer input:focus + .layer-item {
  background-color: #B2BF11;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-input {
  text-align: center;
  font-size: 2rem;
  border-radius: 40px;
  border: 2px solid #e2e2e2;
  margin: 10px auto;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total {
  align-items: center;
  padding: 30px 20px;
  gap: 10px;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total h4 {
  color: #B2BF11;
  font-weight: bold;
  font-size: 5.6rem;
  margin: 20% auto 10px auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total h5 {
  font-size: 1.8rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  text-align: center;
  margin: 0 auto;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-table {
  margin-top: auto;
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-table li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #313131;
  cursor: default;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-table li h5 {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
  padding: 20px 10px;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-table li span {
  font-size: 1.8rem;
  text-align: right;
  font-weight: 500;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-table li span.price {
  font-size: 2.5rem;
  color: #313131;
  font-weight: bold;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 20px;
  color: #313131;
  border: 2px solid #CACACA;
  background-color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
  margin: 0 auto;
  border-radius: 20px;
  cursor: pointer;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-button.active {
  color: #ffffff;
  background-color: #B2BF11;
  border-color: #B2BF11;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-button.catalog-mobile {
  display: none;
}/*# sourceMappingURL=style.css.map */