.mobile {
  display: none;
}

.install-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.install-modal .install-modal__pic-img {
  opacity: 0;
  visibility: hidden;
}

.install-modal.install-modal--active {
  opacity: 1;
  visibility: visible;
}

.install-modal.install-modal--active .install-modal__pic-img {
  opacity: 1;
  visibility: visible;
}

.install-modal__body {
  width: 500px;
  height: 511px;
  background-color: #fff;
  border-radius: 16px;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.install-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.install-modal__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  padding-right: 40px;
}

.install-modal__close {
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.install-modal__content {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.install-modal__imagebox {
  width: 100%;
  height: 100%;
}

.install-modal__pic,
.install-modal__pic-src,
.install-modal__pic-img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.install-modal__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.header {
  position: relative;
  width: 100%;
  z-index: 15;
}

.header .shop-regions-button {
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}

.header .shop-regions-button .shop-regions__link {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  border-bottom: none;
  color: #141414;
}

.header__container {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1550px;
  margin: auto;
  position: relative;
}

.header__container--mobile {
  margin: 16px;
  padding: 16px;
  border: 1px solid var(--primary-container);
  border-radius: 8px;
}

.header__container--mobile .header__link {
  font-size: 12px;
  line-height: 18px;
}

.header__quiz {
  background-color: #F7F7F7;
  border-bottom: 1px solid #EFEFEF;
  padding: 12px;
  display: none;
}

.quiz__content {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 660px;
  margin: auto;
  font-size: 18px;
  line-height: 28px;
}

.quiz__close {
  position: absolute;
  right: 24px;
  top: 0px;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.quiz__close svg {
  width: 100%;
  height: 100%;
}

.quiz__btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  background-color: #1D7F88;
  transition: background-color .3s ease-in-out;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}

.quiz__btn:hover {
  background-color: #5DB4BD;
}

.header__top {
  padding: 12px 0;
  background: var(--primary-color);
  /* AUTH */
}

.header__top--tiled .header__container {
  padding: 0;
}

.header__top .header__right .header__group {
  display: flex;
  gap: 16px;
}

.header__top .header__block {
  display: flex;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  transition: var(--transitions);
  white-space: nowrap;
  gap: 8px;
}

.header__top .header__block:not(:last-of-type) {
  margin-right: 16px;
}

.header__top .header__block:hover {
  color: var(--hover-link);
}

.header__top .header__block:hover .header__value {
  color: var(--hover-link);
}

.header__top .header__block:hover .shop-regions-button .shop-regions__link {
  color: var(--hover-link) !important;
  transition: var(--transitions);
}

.header__top .header__block .shop-regions-button .shop-regions__link {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.header__top .header__block .shop-regions-button .shop-regions__link::after {
  content: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 8%27 fill=%27none%27%3E%3Cpath d=%27M0.876953 1.40479L6.06836 6.59521L11.2588 1.40479%27 stroke=%27%23141414%27 stroke-width=%271.5%27/%3E%3C/svg%3E");
  position: relative;
  width: 9px;
  height: 8px;
  margin-left: 8px;
}

.header__top .header__block .header__value,
.header__top .header__block .header__key {
  font-size: 12px;
  line-height: 16px;
}

.header__top .header__block .header__key {
  font-weight: 600;
  z-index: 1;
}

.header__top .header__block .header__value {
  font-weight: 400;
  z-index: 1;
}

.header__top .header__block .header__value--submenu {
  position: absolute;
  top: 100%;
  right: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s;
  margin-top: 5px;
  right: 5px;
}

.header__top .header__block .header__value--arrow {
  position: relative;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.header__top .header__block .header__value--arrow::after {
  content: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 8%27 fill=%27none%27%3E%3Cpath d=%27M0.876953 1.40479L6.06836 6.59521L11.2588 1.40479%27 stroke=%27%23141414%27 stroke-width=%271.5%27/%3E%3C/svg%3E");
  position: relative;
  width: 9px;
  height: 16px;
  margin-left: 8px;
  transition: transform .3s;
}

.header__top .header__block:has(.header__value--submenu) {
  position: relative;
  z-index: 15;
}

.header__top .header__block:has(.header__value--submenu)::after {
  content: '';
  background: #fff;
  width: calc(100% + 16px);
  height: calc(200% + 21px);
  left: -8px;
  top: -8px;
  position: absolute;
  border-radius: 8px;
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s;
  box-shadow: 0px 4px 12px 0px #00000040;
}

.header__top .header__block:has(.header__value--submenu):hover .header__value::after {
  transform: rotate(-180deg);
}

.header__top .header__block:has(.header__value--submenu):hover .header__value--submenu {
  visibility: visible;
  opacity: 1;
}

.header__top .header__block:has(.header__value--submenu):hover::after {
  visibility: visible;
  opacity: 1;
}

.header__top .auth {
  position: relative;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  transition: var(--transitions);
  white-space: nowrap;
  cursor: pointer;
}

.header__top .auth:hover {
  color: var(--hover-link);
}

.header__top .auth:hover .menu-top {
  opacity: 1;
  visibility: visible;
  transition: var(--transitions);
}

.header__top .auth__list {
  position: absolute;
  top: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  list-style-type: none;
  transition: var(--transitions);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.header__top .header__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style-type: none;
}

.header__top .header__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-shrink: 0;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transitions);
}

.header__top .header__item svg {
  margin-left: 8px;
}

.header__top .header__item:not(:last-of-type) {
  margin-right: 23px;
}

.header__top .header__link {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #FFFFFF;
  transition: var(--transitions);
}

.header__top .header__item:hover .header__link {
  color: var(--hover-link);
  transition: var(--transitions);
}

.header__top .header__item--menu {
  z-index: 10;
}

.header__top .menu-top {
  transition: opacity .3s, visibility .3s, transform .3s;
}

.header__top .header__item--menu:hover .menu-top {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__top .header__item--menu svg {
  transition: transform .3s ease-in-out;
}

.header__top .header__item:hover svg {
  transform: rotate(-180deg);
}

.header__middle {
  padding: 12px 0;
  background: var(--background-color);
}

.header__middle .header__catalog {
  cursor: pointer;
  transition: .3s;
}

.header__middle .header__catalog:hover {
  color: var(--on-primary-container);
}

.header__middle .header__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style-type: none;
}

.header__middle .header__list .header__item {
  border: 2px solid #fff;
  border-radius: 8px;
  transition: border-color .3s ease-in-out;
}

.header__middle .header__list .header__item--menu {
  position: relative;
  padding: 8px 16px;
}

.header__middle .header__list .header__item--menu .header__link {
  padding: 0;
  cursor: default;
}

.header__middle .header__list .header__item:hover:not(.header__item--menu) {
  border-color: var(--primary-container);
}

.header__middle .header__list .header__item:hover:not(.header__item--menu) .header__link {
  color: #FFF;
}

.header__middle .header__list .header__item:not(:last-of-type) {
  margin-right: 16px;
}

.header__middle .header__item svg {
  margin-left: 8px;
}

.header__middle .header__item:hover .header__link {
  color: var(--hover-link);
  transition: var(--transitions);
}

.header__middle .header__item--menu {
  z-index: 10;
}

.header__middle .header__item--menu:hover .menu-top {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__middle .header__item--menu svg {
  transition: transform .3s ease-in-out;
}

.header__middle .header__item:not(.header__catalog):hover svg {
  transform: rotate(-180deg);
}

.header__middle .header__link {
  transition: color .3s ease-in-out;
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  font-size: clamp(14px, 1vw, 16px);
  line-height: clamp(21px, 1.5vw, 24px);
  padding: 8px;
}

.header__middle .header__groupblock:not(:last-of-type) {
  margin-right: 40px;
}

.header__middle .header__block {
  display: flex;
  align-items: center;
  transition: var(--transitions);
  white-space: nowrap;
}

.header__middle .header__block:hover:not(.header__block--nolink) {
  color: var(--hover-link);
}

.header__middle .header__block:hover:not(.header__block--nolink) .header__value {
  color: var(--hover-link);
}

.header__middle .avatar__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.header__middle .header__btn:not(:last-of-type) {
  margin-right: 8px;
}

.header__middle--tiled {
  padding: 0;
}

.header__middle--tiled .header__container {
  padding: 0;
}

.header__middle--tiled .header__btn {
  padding: 28px;
}

.header__middle--tiled .header__btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #8C8C8C;
}

.header__middle--tiled .header__btn .header__icon {
  margin-right: 0;
}

.header__middle--tiled .header__btn:not(:last-of-type) {
  margin-right: 0;
}

.header__butn {
  margin-left: 8px;
}

.header__bottom {
  padding: 8px 0;
  background: var(--primary-container);
  min-height: 53px;
}

.header__bottom .auth:hover {
  color: var(--hover-link);
}

.header__bottom .auth:hover .menu-top {
  opacity: 1;
  visibility: visible;
  transition: var(--transitions);
}

.header__bottom .header__catalog {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.header__bottom .header__show {
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  width: 212px;
  padding: 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: var(--transitions);
}

.header__bottom .header__show--rounded {
  border-radius: 8px;
}

.header__bottom .header__show > * {
  pointer-events: none;
}

.header__bottom .header__show:hover {
  background: rgba(255, 255, 255, 0.6);
  transition: var(--transitions);
}

.header__bottom .header__right--rounded .search__input {
  border-radius: 8px;
}

.header__bottom .header__right--rounded .header__btn--white {
  border-radius: 8px;
}

.header__bottom .header__block {
  display: flex;
  align-items: center;
  color: #FFFFFF;
  white-space: nowrap;
  transition: var(--transitions);
}

.header__bottom .header__block .header__value {
  font-size: 18px;
  line-height: 28px;
  color: #FFFFFF;
  transition: var(--transitions);
}

.header__bottom .header__block:hover:not(.header__block--nolink) {
  color: rgba(255, 255, 255, 0.6);
}

.header__bottom .header__block:hover:not(.header__block--nolink) .header__value {
  color: rgba(255, 255, 255, 0.6);
}

.header__bottom .shop-regions-button .shop-regions__link {
  font-size: 18px;
  line-height: 28px;
  border-bottom: none;
  font-weight: 600;
}

.header__bottom .header__btn:not(:last-of-type) {
  margin-right: 8px;
}

.header__bottom .header__btn--white {
  display: flex;
  width: 170px;
  font-weight: 600;
  background: #FFFFFF;
}

.header__bottom .header__btn--white:hover {
  background: rgba(255, 255, 255, 0.6);
  transition: var(--transitions);
}

.header__bottom .header__btn--white .header__icon {
  color: #8C8C8C;
}

.header__bottom .header__btn--white .header__count {
  margin-right: 8px;
}

.header__bottom--linear .header__show {
  background: transparent;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
}

.header__bottom--linear .search__input {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid #1D7F88;
}

.header__bottom--linear .search__icon {
  color: #FFFFFF;
}

.header__bottom--linear .search__input::-moz-placeholder {
  color: #FFFFFF;
}

.header__bottom--linear .search__input::placeholder {
  color: #FFFFFF;
}

.header__bottom--linear .header__btn--white {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
}

.header__bottom--linear .header__btn--white .header__icon {
  color: #FFFFFF;
}

.header__bottom--linear .header__btn--white .header__count {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.header__bottom--tiled {
  padding: 0;
  height: 80px;
}

.header__bottom--tiled .header__container {
  padding: 0;
}

.header__bottom--tiled .header__right {
  height: 100%;
}

.header__bottom--tiled .search {
  padding: 12px 0;
}

.header__bottom--tiled .header__show {
  padding: 28px 40px;
  height: auto;
  width: auto;
  background: rgba(0, 0, 0, 0.1);
  color: #FFFFFF;
}

.header__bottom--tiled .header__btn--white {
  background: rgba(0, 0, 0, 0.1);
  color: #FFFFFF;
}

.header__bottom--tiled .header__btn--white .header__icon {
  color: #FFFFFF;
}

.header__bottom--tiled .header__btn--white .header__count {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.header__left {
  display: flex;
  gap: 16px;
}

.header__right {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 360px);
  align-items: center;
  width: auto;
  margin-left: auto;
}

.header__group {
  display: flex;
}

.header__group:not(:last-of-type) {
  padding-right: 16px;
}

.header__group:last-of-type {
  padding-left: 16px;
  flex-shrink: 0;
}

.header__groupblock {
  position: relative;
  display: flex;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.header__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .3s, border-color .3s;
  cursor: pointer;
}

.header__btn:has(.header__icon) {
  color: #141414;
  border: 1px solid transparent;
  border-radius: 50%;
}

.header__btn:has(.header__icon):hover {
  color: #7B7162;
  border-color: #7B7162;
}

.header__count {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  min-width: 16px;
  font-weight: 600;
  border-radius: 136px;
  font-size: 12px;
  line-height: 16px;
  color: #EE6B33;
  border: 1px solid #EE6B33;
  background: #fff;
  position: absolute;
  right: -2px;
  top: -2px;
}

.header__count--empty {
  display: none;
}

.header__regions {
  display: flex;
  align-items: center;
}

.header__icon {
  margin-right: 0px;
  transition: opacity .3s ease-in-out;
  transform: scale(1.2);
}

.header__icon--hover {
  position: absolute;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.header__badge {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
}

.header__logobox {
  display: block;
  height: 57px;
  width: 129px;
  flex-shrink: 0;
  transition: var(--transitions);
}

.header__logobox:hover {
  opacity: 0.7;
  transition: var(--transitions);
}

.header__logo {
  height: 100%;
  width: 100%;
}

.header__logobox2 {
  width: 72px;
  height: 22px;
  margin-left: 8px;
}

.header__value {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  transition: var(--transitions);
}

.header__avatar {
  overflow: hidden;
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.header__avatar:hover .auth__arrow {
  transform: rotate(180deg);
}

.auth__arrow {
  transition: transform .3s ease-in-out;
}

.avatar__ph {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #EAE6E0;
}

.avatar__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* CART */

.cart {
  color: #404040;
}

.cart__price {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #FFFFFF;
}

.cart__total {
  font-weight: 600;
}

.header__group--auth {
  position: relative;
}

.header__group--auth::before {
  content: '';
  width: 1px;
  height: 32px;
  left: 0px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #8C8C8C;
}

.loupe {
  position: fixed;
  right: 28px;
  top: 16px;
  z-index: 20;
  width: 56px;
  height: 56px;
  border-radius: 100%;
  border: 1px solid #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #00aeef;
  box-shadow: 0px 4px 4px 0px #00000040;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}

.loupe svg {
  margin-top: -4px;
}

.loupe .loupe__text {
  font-size: 9px;
  line-height: 11px;
  color: #FFFFFF;
}

.loupe--active {
  visibility: visible;
  opacity: 1;
  transition: .3s;
}

.loupe > * {
  pointer-events: none;
}

.header_new .header__container {
  flex-wrap: nowrap;
}

.header_new .header__top {
  padding: 16px 0;
  background-color: #F7F7F7;
}

.header_new .header__top .header__item:not(:last-of-type) {
  margin-right: 40px;
}

.header_new .header__top .header__link {
  font-size: 18px;
  line-height: 28px;
  color: #141414;
  font-weight: 400;
}

.header_new .header__top .header__block .header__key {
  font-size: 16px;
  line-height: 24px;
}

.header_new .header__top .header__block .header__value,
.header_new .header__top .shop-regions-button .shop-regions__link {
  font-size: 18px;
  line-height: 28px;
}

.header_new .header__block--address {
  display: none;
}

.header_new .header__left {
  gap: 24px;
}

.header_new .header__additional {
  display: flex;
  align-items: center;
}

.header_new .additional__btn {
  display: flex;
  cursor: pointer;
}

.header_new .additional__btn:hover + .additional__menu {
  opacity: 1;
  visibility: visible;
}

.header_new .additional__menu {
  position: absolute;
  width: 300px;
  box-shadow: 0px 4px 12px 0px #00000040;
  right: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFF;
  border-radius: 8px;
  padding: 16px;
  z-index: 22;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.header_new .additional__menu .header__block--city {
  display: none;
}

.header_new .additional__menu .header__block--address {
  display: flex;
}

.header_new .header__middle .header__right {
  width: 100%;
  margin-left: 24px;
}

.header_new .header__middle #search {
  margin-right: 24px;
}

.header_new .header__middle .search {
  max-width: none;
  margin-right: 0;
  border-radius: 8px;
}

.header_new .header__middle .search .search__input {
  width: 100%;
  padding: 12px 16px;
  font-size: 18px;
  line-height: 28px;
  height: 52px;
}

.header_new .header__middle .search .search__input::-moz-placeholder {
  font-size: 18px;
  line-height: 28px;
}

.header_new .header__middle .search .search__input::placeholder {
  font-size: 18px;
  line-height: 28px;
}

.header_new .header__middle .search .search__input:focus {
  border-color: var(--primary2-color);
}

.header_new .header__middle .search .search__icon {
  left: auto;
  right: 0;
  background-color: #1D7F88;
  border-radius: 0 8px 8px 0;
}

.header_new .header__logobox {
  height: 64px;
  width: 165px;
}

.header_new .header__middle .header__list .header__item:hover:not(.header__item--menu) {
  border-color: transparent;
}

.header_new .header__catalog:hover .catalog__btn {
  color: #FFF;
  background-color: var(--primary3-color);
  transition: background-color .3s ease-in-out;
}

.header_new .header__catalog:hover .catalog__icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.header_new .header__catalog:hover .catalog__icon span:nth-child(2) {
  opacity: 0;
}

.header_new .header__catalog:hover .catalog__icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.header_new .catalog__btn {
  font-size: 18px;
  line-height: 28px;
  padding: 12px 16px;
  background-color: #1D7F88;
  border-radius: 8px;
  color: #FFF;
  overflow: hidden;
  position: relative;
}

.header_new .catalog__btn::after {
  content: '';
  position: absolute;
  top: -50%;
  bottom: -50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6) 100%);
  width: 45px;
  transform: skewX(-22deg);
  left: -65%;
  -webkit-animation-name: blick;
          animation-name: blick;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes blink {
  60% {
    left: 100%;
  }
  100% {
    left: 130%;
  }
}

@keyframes blink {
  60% {
    left: 100%;
  }
  100% {
    left: 130%;
  }
}

.header_new .catalog__icon {
  display: flex;
  flex-direction: column;
  width: 18px;
  position: relative;
  margin-right: 8px;
  gap: 5px;
}

.header_new .catalog__icon span {
  width: 100%;
  background-color: #FFF;
  height: 1px;
  position: relative;
  display: block;
  transition: transform .3s, opacity .3s;
}

.header_new .header__middle .header__btn:not(:last-of-type) {
  margin-right: 16px;
}

.header_new .header__btn {
  display: flex;
  flex-direction: column;
}

.header_new .header__btn--text {
  font-size: 12px;
  line-height: 18px;
}

.header_new .header__btn:has(.header__icon):hover {
  border-color: transparent;
}

.header_new .header__group:not(:last-of-type) {
  padding-right: 24px;
}

.header_new .header__group:last-of-type {
  padding-left: 24px;
  flex-shrink: 0;
}

.header_new .header__bottom {
  background-color: #fff;
  border-bottom: 1px solid #D9D9D9;
}

.header_new .header__bottom .header__left {
  width: 100%;
}

.header_new .header__bottom .menu-categories .menu__item {
  opacity: 0.6;
}

.header_new .header__bottom .menu-categories .menu__item:hover {
  opacity: 1;
  color: #1D7F88;
}

.header_new .header__bottom .menu__link {
  font-size: 18px;
  line-height: 28px;
  color: #141414;
}

.header_new .header__top .header__item:hover .header__link {
  color: #1D7F88;
}

.header_new .header__right .header__additional:hover .additional__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.header_new .header__right .additional__menu {
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.header_new .additional__menu::before {
  content: '';
  position: absolute;
  left: auto;
  right: 10px;
  top: -10px;
  z-index: 2;
  border: 5px solid transparent;
}

.header_new .additional__menu:hover {
  opacity: 1;
  visibility: visible;
}

.header_new .additional__item:last-child {
  margin-bottom: 0;
}

.header_new .additional__key {
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  margin-bottom: 8px;
}

.header_new .additional__value {
  font-size: 14px;
  line-height: 21px;
  color: #8C8C8C;
}

.header_new .additional__value--social {
  display: flex;
  gap: 16px;
}

.header_new .additional__value:hover a {
  color: var(--primary2-color);
}

.header_new .additional__divider {
  margin: 8px 0;
  height: 1px;
  width: 100%;
  background-color: #8C8C8C;
  opacity: 0.4;
}

.header_new .fadeup-enter-active,
.header_new .fadeup-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.header_new .fadeup-enter-from,
.header_new .fadeup-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.header__bonuses {
  display: flex;
  padding: 8px 16px;
  background-color: var(--primary2-color);
  color: #fff;
  border-radius: 8px;
  font-size: 18px;
  line-height: 28px;
  margin-right: 16px;
}

.container {
  max-width: 1550px;
  padding: 0 24px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

.container__left {
  width: 55%;
  position: relative;
}

.container__right {
  width: 45%;
}

.container__sm {
  max-width: 1328px;
  width: 100%;
  padding: 0 24px;
}

.menu {
  position: absolute;
  padding-top: 20px;
  width: calc(100% - 80px);
  height: 100%;
  top: 100%;
  left: 40px;
  z-index: 100;
  visibility: visible;
  opacity: 1;
}

.menu-catalog {
  position: absolute;
  padding-top: 20px;
  width: calc(100% - 80px);
  max-width: 1240px;
  height: 100%;
  top: auto;
  z-index: 100;
  visibility: visible;
  opacity: 1;
}

.menu-catalog .menu__list {
  border: 2px solid var(--primary-container);
  border-radius: 8px;
  box-shadow: 0px 0px 24px 0px #00000040;
}

.menu-catalog .menu__column {
  background-color: #EAE6E04D;
  padding: 16px 16px 147px;
}

.menu-catalog .menu__item {
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  margin: 8px 0px;
  transition: .3s;
  position: relative;
}

.menu-catalog .menu__item:hover .menu__title {
  color: #404040;
}

.menu-catalog .menu__item--new::after {
  content: '';
  background-image: url("https://slonpp.com/wa-data/public/site/img/new.webp");
  position: absolute;
  width: 32px;
  height: 32px;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
}

.menu-catalog .menu__item--active {
  border-color: var(--primary-color);
}

.menu-catalog .menu__item--active .menu__title {
  color: #404040;
}

.menu-catalog .menu__item--active .menu__icon {
  transform: rotateZ(0deg) scale(1);
}

.menu-catalog .menu__title {
  color: #404040;
}

.menu-catalog .menu__icon {
  fill: rgba(64, 64, 64, 0.3);
  margin-left: 8px;
  transform: rotateZ(0deg);
  transition: .3s;
}

.menu-catalog .menu__top {
  position: relative;
  color: #FFFFFF;
  display: flex;
}

.menu-catalog .menu__top .menu__imagebox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}

.menu-catalog .menu__top .menu__imagebox .menu__img {
  width: 100%;
  border-radius: 8px;
}

.menu-catalog .menu__top .menu__banner {
  margin: 16px;
  position: relative;
}

.menu-catalog .menu__top .menu__header {
  z-index: 1;
  position: relative;
  padding: 24px 0px 8px 24px;
}

.menu-catalog .menu__top .menu__description {
  z-index: 1;
  position: relative;
  padding: 0px 0px 0px 24px;
}

.menu-catelog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
  display: none;
}

.menu-catelog-overlay.show {
  display: block;
}

.menu-categories {
  position: relative;
  display: flex;
}

.menu-categories .menu__list {
  flex-direction: column;
  display: flex;
  background: transparent;
  box-shadow: none;
}

.menu-categories .menu__column {
  display: flex;
  gap: 24px;
}

.menu-categories .menu__dropdown {
  position: absolute;
  padding: 24px;
  top: calc(100% + 7px);
  left: 0;
  width: 100%;
  z-index: 100;
  visibility: visible;
  opacity: 1;
  background-color: var(--background-color);
  border-radius: 8px;
  box-shadow: 0px 0px 24px 0px #00000040;
}

.menu-categories .menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.menu-categories .menu__block {
  width: 224px;
  overflow: visible;
}

.menu-categories .menu__category {
  display: flex;
  gap: 16px;
}

.menu-categories .menu__imagebox {
  width: 60px;
  height: 60px;
  min-width: 60px;
  transition: opacity .3s;
}

.menu-categories .menu__imagebox svg {
  width: 100%;
  height: 100%;
}

.menu-categories .menu__imagebox img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 1;
}

.menu-categories .menu__text {
  display: flex;
  flex-direction: column;
}

.menu-categories .menu__count {
  opacity: .7;
  color: var(--on-background-color);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

.menu-categories .menu__item {
  position: relative;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: .3s;
  opacity: 0.5;
}

.menu-categories .menu__item--active {
  opacity: 1;
  transition: var(--transitions);
}

.menu-categories-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
  display: none;
}

.menu-categories-overlay.show {
  display: block;
}

.menu--active {
  visibility: visible;
  opacity: 1;
  transition: .3s;
}

.menu__list {
  background-color: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
}

.menu__column {
  min-width: 280px;
}

.menu__body {
  flex: 1;
  position: relative;
}

.menu__bottom {
  -moz-columns: 4;
       columns: 4;
  margin-top: 0px;
  margin-bottom: 16px;
  margin-left: -10px;
}

.menu__header {
  padding: 24px;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  top: 0;
  left: 0;
  transition: background-color .3s, color .3s;
}

.menu__block {
  position: relative;
  -moz-column-break-inside: avoid;
       break-inside: avoid-column;
  page-break-inside: avoid;
  overflow: hidden;
  font-weight: 600;
}

.menu__item {
  position: relative;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: .3s;
}

.menu-categories .menu__item:first-of-type {
  padding-left: 0;
}

.menu__item--active {
  transition: var(--transitions);
}

.menu__subitem {
  font-weight: 400;
}

.menu__icon {
  fill: rgba(64, 64, 64, 0.3);
  margin-left: 8px;
  transform: rotateZ(90deg) scale(1.5);
  transition: .3s;
}

.menu__item--active .menu__icon {
  transition: var(--transitions);
  transform: rotateZ(-90deg) scale(1.5);
}

.menu__item--active .menu__title {
  color: var(--hover-link);
  transition: var(--transitions);
}

.menu__item:hover {
  transition: var(--transitions);
}

.menu__item:hover .menu__icon {
  transition: var(--transitions);
}

.menu__item:hover .menu__title {
  color: var(--hover-link);
  transition: var(--transitions);
}

.menu__title {
  font-size: 18px;
  line-height: 24px;
}

.menu__category {
  position: relative;
  padding: 8px 24px;
  font-size: 12px;
  line-height: 16px;
  transition: var(--transitions);
}

.menu__category--orange {
  color: var(--primary2-color);
}

.banner {
  position: relative;
  padding: 16px;
  width: 100%;
  overflow: hidden;
}

.banner--big {
  height: 132px;
}

.banner--small {
  height: 165px;
  width: calc(100% - 48px);
  margin: 0 24px;
}

.banner--title {
  margin-bottom: 8px;
}

.banner__name {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  z-index: 5;
  transition: var(--transitions);
}

.banner:hover .banner__name {
  color: var(--hover-link);
}

.banner__img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  visibility: visible;
}

.menu__banner {
  height: 124px;
  width: 100%;
  opacity: 1;
  visibility: visible;
  position: relative;
}

.menu__banner-link {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 5;
}

.banner__background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.banner__name {
  font-weight: 600;
  color: #404040;
  z-index: 10;
  transition: var(--transitions);
}

.banner__name--white {
  color: #FFFFFF;
}

.menu__category--title {
  font-weight: 600;
  margin-bottom: 8px;
}

.menu__category:hover {
  color: var(--primary2-color);
  transition: color .3s;
}

.menu__category:hover .menu__imagebox {
  opacity: 1;
}

.menu__category:hover .menu__name {
  color: var(--hover-link);
  transition: var(--transitions);
}

.menu__subcategory {
  padding: 8px 24px;
  font-size: 16px;
  line-height: 24px;
  transition: var(--transitions);
}

.menu__subcategory:last-of-type {
  margin-bottom: 16px;
}

.menu__subcategory:hover {
  background-color: #F7F7F7;
  color: var(--hover-link);
  transition: var(--transitions);
}

.menu__link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.menu-top {
  position: absolute;
  top: calc(100% - 56px);
  left: 0;
  padding-top: 12px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  z-index: 10;
  transition: opacity .3s, visibility .3s, transform .3s;
}

.menu-top--right {
  right: auto;
  left: 0;
}

.menu-top__list {
  margin: 0;
  padding: 56px 16px 16px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style-type: none;
  border-radius: 8px;
}

.menu-top__item {
  text-decoration: none;
}

.menu-top__item:not(:last-of-type) {
  margin-bottom: 12px;
}

.menu-top__link {
  position: relative;
  color: var(--on-surface-variant);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: .3s;
  white-space: nowrap;
  text-align: left;
  font-size: clamp(14px, 1vw, 16px);
  line-height: clamp(21px, 1.5vw, 24px);
}

.menu-top__item:hover .menu-top__link {
  color: var(--primary2-color);
  transition: .3s;
}

.menu-top__link > * {
  pointer-events: none;
}

.menu-top__icon {
  color: var(--color-alto);
  transition: var(--transition-color);
}

.auth .menu-top--right {
  right: 0;
  left: auto;
  top: 100%;
}

.auth .menu-top__list {
  padding: 16px;
}

.auth.header__item--menu:hover .auth__arrow {
  transform: rotate(-180deg);
}

.auth .menu-top__link {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.search {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 670px;
  margin-right: clamp(20px, 1.5vw, 40px);
}

.search--active {
  z-index: auto;
}

.search__input {
  height: 100%;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding: 8px 48px;
  background: var(--on-primary-color);
  transition: var(--transitions);
  border-radius: 8px;
  width: clamp(245px, 28vw, 520px);
  border: 2px solid var(--primary2-color);
}

.search__input:focus {
  border-color: var(--primary2-color);
}

.search__input::-moz-placeholder {
  color: #888;
  -moz-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.search__input::placeholder {
  color: #888;
  transition: opacity 0.3s ease;
}

.search__input::-moz-placeholder {
  color: var(--on-background-color);
  font-size: clamp(14px, 1vw, 16px);
  line-height: clamp(21px, 1.5vw, 24px);
  font-weight: 400;
  font-family: var(--font-family);
  opacity: 0.5;
}

.search__input::placeholder {
  color: var(--on-background-color);
  font-size: clamp(14px, 1vw, 16px);
  line-height: clamp(21px, 1.5vw, 24px);
  font-weight: 400;
  font-family: var(--font-family);
  opacity: 0.5;
}

.search--active .search__input {
  background: #F7F7F7;
  border-radius: 8px 8px 0 0;
}

.search__input:focus-visible {
  background: #F7F7F7;
}

.search--active .search__icon {
  color: var(--hover-link);
}

.search--active .search__zoom {
  opacity: 1;
  visibility: visible;
}

.search__icon {
  position: absolute;
  top: 50%;
  left: 16px;
  bottom: 0;
  color: #8C8C8C;
  transform: translateY(-50%);
  transition: var(--transitions);
}

.search__zoom {
  position: absolute;
  top: 50%;
  right: 8px;
  padding: 6px 12px;
  border-radius: 32px;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  background: #272727;
  opacity: 0;
  transform: translateY(-50%);
  transition: var(--transitions);
  cursor: pointer;
  visibility: hidden;
  display: none;
}

.search__zoom:hover {
  background: var(--primary2-color);
  transition: background 0.3s ease;
}

.search__card {
  width: 100%;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 100%;
  background: white;
  box-shadow: 0px 4px 12px 0px #00000040;
  border-radius: 0 0 8px 8px;
}

.search__item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  margin: 0 16px;
  position: relative;
}

.search__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.search__imgbox {
  position: relative;
  width: 72px;
  height: 72px;
  margin-right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search__img {
  position: relative;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 1;
  z-index: 5;
}

.search__empty {
  position: relative;
  background: #FFFFFF;
  z-index: 5;
}

.search__content {
  flex: 1;
}

.search__name {
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  transition: var(--transitions);
}

.search__name:hover {
  color: var(--hover-link);
}

.search__prices {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.search__price {
  margin-right: 8px;
}

.search__oldprice {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
  color: #8C8C8C;
}

.search__text {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--primary2-color);
  cursor: pointer;
  transition: var(--transitions);
  display: flex;
  align-items: center;
  gap: 8px;
}

.search__count {
  font-size: 12px;
  line-height: 16px;
}

.search__bottom {
  padding: 16px 0;
  margin: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #D9D9D9;
}

.search__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
  display: none;
  cursor: pointer;
}

.search--active .search__overlay {
  display: block;
}

.butn {
  display: block;
  position: relative;
  padding: 12px 24px 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
  color: #FFF;
  background: #1D7F88;
  transition: all .3s ease-Out;
}

.butn--bordered {
  border: 2px solid #1D7F88;
  background: transparent;
  color: #1D7F88;
  padding: 10px 22px;
}

.butn > * {
  pointer-events: none;
}

.butn--absolute {
  position: absolute;
  left: 0;
  top: 0;
}

.butn--orange {
  background: #FF6B00;
  border: 2px solid #FF6B00;
  color: white;
  transition: all .5s ease-Out;
}

.butn--orange:hover {
  border-color: #FF8933;
  transition: all .5s ease-Out;
}

.butn--big {
  padding: 14px 32px;
  font-size: 16px;
  line-height: 24px;
}

.butn--full {
  width: 100%;
}

.butn--hidden {
  visibility: hidden;
  opacity: 0;
}

.butn--active {
  visibility: visible;
  opacity: 1;
}

.product-thumb__buttons:has(.pnotice__buttonView) .butn--hidden {
  opacity: 0;
  visibility: hidden;
}

.butn--gray {
  border: 2px solid #A1A1A1;
  color: #A1A1A1;
}

.butn--disabled {
  color: #FFF;
  pointer-events: none;
}

.butn--thin {
  border-width: 1px;
  font-size: 14px !important;
  line-height: 24px !important;
}

.butn:hover .butn__circle {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -200%;
  left: -50%;
}

.butn:hover {
  background-color: var(--primary3-color);
  color: white;
  transition: all .3s ease-Out;
}

.butn--bordered:hover {
  background-color: var(--primary3-color);
  border-color: var(--primary3-color);
  color: white;
  transition: all .3s ease-Out;
}

.butn__circle {
  display: none;
  width: 0%;
  height: 0%;
  opacity: 0;
  border-radius: 48px;
  background: #141414;
  position: absolute;
  transition: all .5s ease-Out;
  top: 50%;
  left: 50%;
}

.butn__circle--orange {
  background: #FF8933;
}

.butn__text {
  position: relative;
  z-index: 2;
  text-align: center;
  white-space: nowrap;
}

.butn--buy .butn__text,
.butn--article .butn__text,
.button-main--buy .butn__text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.butn-round {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D9D9D9;
  cursor: pointer;
}

.butn-round > * {
  pointer-events: none;
}

.search {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 670px;
  margin-right: clamp(20px, 1.5vw, 40px);
}

.search--active {
  z-index: auto;
}

.search__input {
  height: 100%;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding: 8px 48px;
  background: var(--on-primary-color);
  transition: var(--transitions);
  border-radius: 8px;
  width: clamp(245px, 28vw, 520px);
  border: 2px solid var(--primary2-color);
}

.search__input:focus {
  border-color: var(--primary2-color);
}

.search__input::-moz-placeholder {
  color: #888;
  -moz-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.search__input::placeholder {
  color: #888;
  transition: opacity 0.3s ease;
}

.search__input::-moz-placeholder {
  color: var(--on-background-color);
  font-size: clamp(14px, 1vw, 16px);
  line-height: clamp(21px, 1.5vw, 24px);
  font-weight: 400;
  font-family: var(--font-family);
  opacity: 0.5;
}

.search__input::placeholder {
  color: var(--on-background-color);
  font-size: clamp(14px, 1vw, 16px);
  line-height: clamp(21px, 1.5vw, 24px);
  font-weight: 400;
  font-family: var(--font-family);
  opacity: 0.5;
}

.search--active .search__input {
  background: #F7F7F7;
  border-radius: 8px 8px 0 0;
}

.search__input:focus-visible {
  background: #F7F7F7;
}

.search--active .search__icon {
  color: var(--hover-link);
}

.search--active .search__zoom {
  opacity: 1;
  visibility: visible;
}

.search__icon {
  position: absolute;
  top: 50%;
  left: 16px;
  bottom: 0;
  color: #8C8C8C;
  transform: translateY(-50%);
  transition: var(--transitions);
}

.search__zoom {
  position: absolute;
  top: 50%;
  right: 8px;
  padding: 6px 12px;
  border-radius: 32px;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  background: #272727;
  opacity: 0;
  transform: translateY(-50%);
  transition: var(--transitions);
  cursor: pointer;
  visibility: hidden;
  display: none;
}

.search__zoom:hover {
  background: var(--primary2-color);
  transition: background 0.3s ease;
}

.search__card {
  width: 100%;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 100%;
  background: white;
  box-shadow: 0px 4px 12px 0px #00000040;
  border-radius: 0 0 8px 8px;
}

.search__item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  margin: 0 16px;
  position: relative;
}

.search__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.search__imgbox {
  position: relative;
  width: 72px;
  height: 72px;
  margin-right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search__img {
  position: relative;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 1;
  z-index: 5;
}

.search__empty {
  position: relative;
  background: #FFFFFF;
  z-index: 5;
}

.search__content {
  flex: 1;
}

.search__name {
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  transition: var(--transitions);
}

.search__name:hover {
  color: var(--hover-link);
}

.search__prices {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.search__price {
  margin-right: 8px;
}

.search__oldprice {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
  color: #8C8C8C;
}

.search__text {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--primary2-color);
  cursor: pointer;
  transition: var(--transitions);
  display: flex;
  align-items: center;
  gap: 8px;
}

.search__count {
  font-size: 12px;
  line-height: 16px;
}

.search__bottom {
  padding: 16px 0;
  margin: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #D9D9D9;
}

.search__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
  display: none;
  cursor: pointer;
}

.search--active .search__overlay {
  display: block;
}

.login,
.signup {
  background-color: var(--surface-variant);
  min-height: 100vh;
  padding: 71px 0;
}

.login__logo,
.signup__logo {
  margin-bottom: 41px;
}

.login__container,
.signup__container {
  width: 407px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 16px;
  padding: 40px 16px;
  background: var(--on-primary-color);
  box-shadow: 0px 4px 76px 0px #5F524033;
}

.wa-login-form-wrapper,
.wa-signup-form-wrapper,
.wa-forgotpassword-form-wrapper {
  width: 100%;
}

.wa-login-form-wrapper .js-wa-form-item,
.wa-signup-form-wrapper > form,
.wa-forgotpassword-form-wrapper > form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
}

.wa-login-form-wrapper .wa-login-form-fields,
.wa-forgotpassword-form-wrapper .wa-forgotpassword-form-fields,
.wa-signup-form-wrapper .wa-signup-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.wa-login-form-wrapper .wa-field,
.wa-signup-form-wrapper .wa-field,
.wa-forgotpassword-form-wrapper .wa-field {
  position: relative;
  background: var(--on-primary-color);
  margin: 0;
}

.wa-login-form-wrapper .wa-field .wa-name,
.wa-signup-form-wrapper .wa-field .wa-name {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: block;
  transition: transform 0.3s ease-out;
  transform-origin: left;
  cursor: default;
  font-size: 16px;
  line-height: 24px;
  color: #BBB;
  margin: 0;
}

.focus {
  transform: translate(0, -16px) scale(0.75);
  color: var(--grey-color);
  font-weight: 600;
}

.wa-value,
.wa-value p {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--black2-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  background-color: transparent;
  display: flex;
  flex-direction: column-reverse;
}

.wa-login-form-wrapper input[type="text"]::-moz-placeholder, .wa-forgotpassword-form-wrapper input[type="text"]::-moz-placeholder, .wa-signup-form-wrapper input[type="text"]::-moz-placeholder, .wa-login-form-wrapper input[type="email"]::-moz-placeholder, .wa-signup-form-wrapper input[type="email"]::-moz-placeholder, .wa-login-form-wrapper input[type="password"]::-moz-placeholder, .wa-signup-form-wrapper input[type="password"]::-moz-placeholder {
  color: transparent;
}

.wa-login-form-wrapper input[type="text"]::placeholder,
.wa-forgotpassword-form-wrapper input[type="text"]::placeholder,
.wa-signup-form-wrapper input[type="text"]::placeholder,
.wa-login-form-wrapper input[type="email"]::placeholder,
.wa-signup-form-wrapper input[type="email"]::placeholder,
.wa-login-form-wrapper input[type="password"]::placeholder,
.wa-signup-form-wrapper input[type="password"]::placeholder {
  color: transparent;
}

.wa-login-form-wrapper input[type="text"],
.wa-forgotpassword-form-wrapper input[type="text"],
.wa-signup-form-wrapper input[type="text"],
.wa-login-form-wrapper input[type="email"],
.wa-signup-form-wrapper input[type="email"],
.wa-login-form-wrapper input[type="password"],
.wa-signup-form-wrapper input[type="password"] {
  color: var(--black2-color);
  border: 2px solid var(--outline-color);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  height: 56px;
  padding: 16px;
  margin: 0;
  line-height: 24px;
  width: 100%;
  z-index: 2;
  position: relative;
  background-color: transparent;
  transition: border-color .3s ease-in-out;
}

.wa-login-form-wrapper input[type="text"]:focus,
.wa-signup-form-wrapper input[type="text"]:focus,
.wa-forgotpassword-form-wrapper input[type="text"]:focus,
.wa-login-form-wrapper input[type="email"]:focus .wa-field-login,
.wa-signup-form-wrapper input[type="email"]:focus .wa-field-login,
.wa-login-form-wrapper input[type="password"]:focus .wa-field-password,
.wa-signup-form-wrapper input[type="password"]:focus .wa-field-password {
  border: 2px solid var(--primary2-color);
  transition: border-color .3s ease-in-out;
}

.login__text,
.signup__text {
  text-align: center;
  padding: 0 16px 24px;
}

.wa-login-form-wrapper .wa-login-form-title,
.wa-signup-form-wrapper .wa-signup-form-title,
.wa-forgotpassword-form-wrapper .wa-login-form-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin: 0 0 24px;
  order: -1;
}

.wa-login-form-wrapper .wa-error-msg,
.wa-signup-form-wrapper .wa-error-msg {
  margin: 0;
  color: red;
  padding: 0 16px 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
}

.wa-login-form-wrapper .wa-login-form-actions,
.wa-signup-form-wrapper .wa-signup-form-actions {
  margin-top: 24px;
  width: 100%;
}

.wa-buttons-wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.wa-login-form-wrapper .wa-login-form-actions .wa-login-forgotpassword-url,
.wa-signup-form-wrapper .wa-signup-form-actions .wa-signup-forgotpassword-url {
  order: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--blue-color);
  margin-right: 111px;
}

.wa-login-form-wrapper .wa-login-form-actions .wa-login-forgotpassword-url:hover,
.wa-signup-form-wrapper .wa-signup-form-actions .wa-signup-forgotpassword-url:hover {
  transition: color .3s ease-in-out;
  color: #46566E;
}

.wa-login-form-wrapper .wa-login-form-actions .wa-signup-url,
.wa-signup-form-wrapper .wa-signup-form-actions .wa-login-url,
.wa-forgotpassword-form-wrapper .wa-forgotpassword-form-actions .wa-login-url {
  order: 1;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  margin: 0;
}

.wa-login-form-wrapper .wa-login-form-actions .wa-signup-url a,
.wa-signup-form-wrapper .wa-signup-form-actions .wa-login-url a,
.wa-forgotpassword-form-wrapper .wa-forgotpassword-form-actions .wa-login-url a {
  color: var(--primary2-color);
}

.wa-login-form-wrapper .wa-login-form-actions .wa-signup-url a:hover,
.wa-signup-form-wrapper .wa-signup-form-actions .wa-login-url a:hover,
.wa-forgotpassword-form-wrapper .wa-forgotpassword-form-actions .wa-login-url a:hover {
  transition: color .3s ease-in-out;
  color: #994000;
}

.wa-login-form-wrapper .wa-login-form-actions .wa-login-submit,
.wa-signup-form-wrapper .wa-signup-form-actions input[type="submit"],
.wa-forgotpassword-form-wrapper input[type="submit"] {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--primary2-color);
  background-color: transparent;
  border-radius: 32px;
  max-width: 100%;
}

.wa-signup-form-wrapper .wa-signup-form-actions .button__main:hover input[type="submit"] {
  color: #fff;
}

.wa-login-form-actions .button,
.wa-signup-form-actions .button,
.wa-forgotpassword-form-wrapper .button {
  height: 44px;
  width: 100%;
  margin: 24px 0 20px 0;
}

.wa-signup-form-wrapper .wa-field .wa-value p input {
  margin: 0;
}

* {
  outline: none;
  box-sizing: border-box;
}

html {
  color: var(--on-background-color);
  background-color: var(--background-color);
  font-size: 16px;
  line-height: 24px;
  font-family: Montserrat;
  scroll-behavior: smooth;
}

html.lock {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

main {
  flex: auto;
  overflow: hidden;
  min-width: 360px;
}

p:not(:last-of-type) {
  margin-bottom: 24px;
}

img {
  opacity: 0;
  display: block;
}

img:not(.initial) {
  transition: opacity .6s;
}

img.initial,
img.loaded,
img.error {
  opacity: 1;
}

img:not([src]):not([srcset]) {
  visibility: hidden;
}

figure img {
  opacity: 1;
  visibility: visible;
}

button {
  background-color: unset;
  padding: unset;
  border: none;
  outline: none;
  font-family: Montserrat;
}

input {
  border: none;
  padding: unset;
  outline: none;
  font-family: Montserrat;
}

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

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

.h1 {
  color: #272727;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin: 0;
}

a {
  display: block;
  text-decoration: none;
  color: #272727;
}

button {
  display: block;
  color: #272727;
}

input {
  color: #272727;
}

ul {
  margin: 0;
  padding-left: 20px;
}

footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin-bottom: 4px;
}

li::marker {
  color: var(--primary-color);
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--on-background-color);
  opacity: .8;
}

h2 {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  color: var(--on-background-color);
}

h3 {
  margin: 0;
}

.invisible {
  display: none !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  transition: opacity .3s;
}

#search {
  flex: 1;
}

.lock {
  overflow: hidden;
}

.absolute {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

[v-cloak] {
  display: none;
}

:root {
  --primary-color: #C6BDB0;
  --on-primary-color: #FFFFFF;
  --primary-container: #F7F7F7;
  --on-primary-container: #7B7162;
  --primary2-color: #1D7F88;
  --on-primary2-color: #FFFFFF;
  --primary3-color: #5DB4BD;
  --on-primary3-color: #FFFFFF;
  --background-color: #FFFFFF;
  --on-background-color: #141414;
  --surface-variant: #F7F7F7;
  --on-surface-variant: #8C8C8C;
  --outline-color: #D9D9D9;
  --outline-variant: #EFEFEF;
  --red-color: #FF2E00;
  --green-color: #3EBA12;
  --grey-color: #BBBBBB;
  --black-color: #000000;
  --black2-color: #272727;
  --black3-color: #00000020;
  --black4-color: #00000040;
  --black5-color: #04040480;
  --grey2-color: #8C7654;
  --grey3-color: #828282;
  --brown-color: #5F5240;
  --orange-color: #FF5C00;
  --green2-color: #18AD00;
  --grey4-color: #F4F3F2;
  --grey5-color: #404040;
  --blue-color: #7590B7;
  --grey6-color: #F7F5F3;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 5;
  transition: var(--transitions);
}

.background--active {
  opacity: 1;
  visibility: visible;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-leave-active, .slide-enter-active {
  transition: transform .5s ease;
}

.slide-enter, .slide-leave-to {
  transform: translateY(100%);
}

.block {
  position: relative;
  width: 100%;
}

.block:hover .block-action {
  opacity: 1;
  visibility: visible;
}

.block--flexnr {
  display: flex;
}

.block--flex {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.block--categories {
  border-left: 1px solid #DDDDDD;
  border-top: 1px solid #DDDDDD;
}

.block--flex1 {
  flex: 1;
}

.block--flexwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.block--absolute {
  position: absolute;
  top: 0;
  left: 0;
}

.block--marginUp54 {
  margin-top: 54px;
}

.block--marginDown54 {
  margin-bottom: 54px;
}

.block__content {
  position: relative;
  max-width: 1600px;
  padding: 0 24px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.block__content:has(.swiper-thumbs) {
  padding: 0;
}

.block__content--noPadding {
  padding: 0;
}

.block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1328px;
  margin: 80px auto 40px;
  width: 100%;
}

.block__header--full {
  width: 100%;
}

.block__header--padded {
  padding-right: 40px;
}

.block__header--dark {
  background: #976534;
  color: white;
  padding-right: 40px;
}

.block__header--nobkg {
  background: none;
}

.block__title {
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
}

.block__title--full {
  width: 100%;
}

.block__title--nobackground {
  background-color: unset;
}

.block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  border: 1px solid #DDDDDD;
  grid-gap: 1px;
  background-color: #DDDDDD;
}

.block__link {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  font-size: 20px;
  transition: .3s;
}

.block__link:hover {
  color: #976534;
  transition: .3s;
}

.block__ico {
  margin-right: 12px;
}

.block__flex {
  display: flex;
  justify-content: space-between;
}

.block__none {
  padding: 0 40px;
  margin-bottom: 40px;
}

.searchcard {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  padding: 40px;
  z-index: 110;
  background-color: white;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
}

.searchcard__block {
  margin-bottom: 40px;
}

.searchcard__title {
  font-size: 20px;
  line-height: 34px;
  margin-bottom: 16px;
}

.searchcard__item {
  opacity: 0.5;
  margin-bottom: 16px;
  transition: .3s;
}

.searchcard__item:hover {
  color: #976534;
  opacity: 1;
  transition: .3s;
}

.searchcard__item--flex {
  display: flex;
  justify-content: space-between;
}

.button-quad {
  width: 80px;
  height: 80px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-quad--small {
  width: 64px;
  height: 64px;
}

.button-quad--search {
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}

.button-quad--visible {
  visibility: visible;
  opacity: 1;
  transition: .3s;
}

.button-quad--gray {
  background: #FAFAFA;
  transition: .3s;
}

.button-quad--gray:hover {
  background: #976534;
  transition: .3s;
}

.button-quad--white {
  background: white;
  transition: .3s;
}

.button-quad--white:hover {
  background: #FAFAFA;
  transition: .3s;
}

.button-quad--gray:hover .button-quad__svg {
  fill: white;
  transition: .3s;
}

.button-quad--brown {
  background: #F0DBC5;
  transition: .3s;
}

.button-quad--brown:hover {
  background: #D2BDA6;
  transition: .3s;
}

.button-quad--plain {
  background: rgba(255, 255, 255, 0.1);
}

.button-quad--plain .button-quad__svg path:first-child {
  fill: white;
  transition: .3s;
}

.button-quad--plain:after {
  background: #FAFAFA;
}

.button-quad--plain:hover .button-quad__svg path:first-child {
  fill: black;
  transition: .3s;
}

.button-quad--grid {
  background: white;
  transition: .3s;
}

.button-quad--grid:hover {
  background: #F9F7F4;
  transition: .3s;
}

.button-quad--grid:hover .button-quad__svg {
  fill: #976534;
  transition: .3s;
}

.button-quad--gridactive {
  background: #976534;
  pointer-events: none;
}

.button-quad--gridactive .button-quad__svg {
  fill: white;
}

.button-quad--active:after {
  height: 100%;
}

.button-quad--active .button-quad__svg {
  fill: white;
}

.button-quad__svg {
  position: relative;
  z-index: 2;
  transition: .3s;
}

.mobile-menu__wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 20;
  min-width: 360px;
}

.mobile-menu__list {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: var(--primary-container);
}

.mobile-menu__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
  padding: 10px 0;
  position: relative;
  cursor: pointer;
}

.mobile-menu__link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.mobile-menu__icon {
  width: 24px;
  height: 24px;
}

.mobile-menu__icon svg {
  width: 100%;
  height: 100%;
}

.mobile-menu__icon--cart {
  display: flex;
  width: 68px;
  height: 68px;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  color: #fff;
  border-radius: 50%;
  position: absolute;
  border: 8px solid var(--primary-container);
  bottom: 0;
}

.mobile-menu__icon--cart svg {
  transform: scale(2.2);
  width: 16px;
  height: 16px;
  margin: auto;
}

.mobile-menu__title {
  font-size: 12px;
  line-height: 12px;
}

.cart-menu__btn {
  min-width: 76px;
  height: 60px;
}

.mobile-overlay {
  background: #00000080;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
}

.mobile-content {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 45px;
  z-index: 9;
  min-width: 360px;
  max-height: 90vh;
}

.mobile-content__wrapper {
  padding: 0 24px;
  background-color: #fff;
  border-radius: 24px 24px 0 0;
  max-height: 90vh;
  overflow-y: auto;
  padding-bottom: 45px;
  scrollbar-width: none;
}

.mobile-content__wrapper::-webkit-scrollbar {
  display: none;
}

.mobile-content__close {
  position: absolute;
  width: 48px;
  height: 48px;
  box-shadow: 0px 0px 24px 0px #00000040;
  border-radius: 50%;
  right: 16px;
  top: 29px;
  z-index: 10;
  cursor: pointer;
}

.mobile-content__close svg {
  width: 100%;
  height: 100%;
}

.mobile-content__back {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.mobile-content__back svg {
  width: 11px;
  height: 9px;
}

.mobile-content__close-big {
  cursor: pointer;
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0px auto 0;
}

.mobile-content__close-big svg {
  width: 100%;
  height: 100%;
}

.mobile-content__header {
  width: 100%;
  padding: 16px 0;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.mobile-content__search {
  width: 100%;
  position: relative;
  margin-bottom: 24px;
}

.mobile-content__input {
  width: 100%;
  padding: 8px 16px 8px 48px;
  border: 2px solid #EAE6E0;
  border-radius: 8px;
}

.mobile-content__label {
  font-size: 12px;
  line-height: 16px;
  color: #141414;
  opacity: 80%;
  width: 100%;
}

.mobile-content__footer {
  padding: 40px 0 40px;
}

.mobile-content__logo {
  height: 29px;
}

.mobile-content__logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.mobile-content__logo svg {
  width: 100%;
  height: 100%;
}

.mobile-content__item {
  padding: 16px 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.mobile-content__item--accent {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #D9D9D9;
}

.mobile-content__item--accent .mobile-content__title {
  color: var(--primary2-color);
}

.mobile-content__item--new::after {
  content: '';
  background-image: url("https://slonpp.com/wa-data/public/site/img/new.webp");
  position: absolute;
  width: 24px;
  height: 24px;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
}

.mobile-content__row {
  display: flex;
}

.mobile-content__icon {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  position: relative;
}

.mobile-content__icon svg {
  width: 100%;
  height: 100%;
}

.mobile-content__link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.mobile-content__title {
  font-size: 14px;
  line-height: 21px;
  color: #404040;
  font-weight: 600;
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.mobile-content__title .mobile-content__sublink {
  color: var(--primary2-color);
  font-weight: 400;
  margin-left: auto;
  text-align: right;
}

.mobile-content__title--margin {
  margin-top: 16px;
}

.mobile-content__arrow {
  width: 24px;
  height: 24px;
  margin-left: auto;
}

.mobile-content__arrow svg {
  width: 100%;
  height: 100%;
}

.shop-regions__window .shop-regions-window_mobile .shop-regions-window__wrapper {
  width: 100%;
  padding: 40px 24px !important;
  padding-top: 64px !important;
  background-color: #fff;
  border-radius: 24px 24px 0 0;
  max-height: 75vh;
  margin-bottom: 0;
  overflow-y: visible;
  scrollbar-width: none;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

.shop-regions__window .shop-regions-window_mobile .shop-regions-window__sub-header {
  display: none;
}

.shop-regions__window .shop-regions-window_mobile .shop-regions__button-close {
  content: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 48 49%27 fill=%27none%27%3E%3Crect y=%270.728516%27 width=%2748%27 height=%2748%27 rx=%2724%27 fill=%27white%27%3E%3C/rect%3E%3Cpath d=%27M18 18.7285L30 30.7285%27 stroke=%27black%27%3E%3C/path%3E%3Cpath d=%27M30 18.7285L18 30.7285%27 stroke=%27black%27%3E%3C/path%3E%3C/svg%3E");
  position: absolute;
  width: 48px;
  height: 48px;
  box-shadow: 0px 0px 24px 0px #00000040;
  border-radius: 50%;
  right: 16px;
  top: -16px;
  z-index: 101;
  cursor: pointer;
  padding: 0px;
  background: #fff;
}

.shop-regions__window .shop-regions-window_mobile .shop-regions__link {
  font-family: Montserrat;
  font-weight: 600;
  color: #404040;
}

.shop-regions__window .shop-regions-window_mobile .shop-regions-window__wrapper .mobile-content__footer {
  margin-top: auto;
}

.shop-regions__window .shop-regions-window_mobile .shop-regions-window__region {
  margin-bottom: 16px;
}

.button {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  display: inline-block;
  border: 2px solid var(--primary2-color);
  background-color: #FFF;
}

/* Third Button */

.button__main {
  display: inline-flex;
  margin: 0;
  color: var(--primary2-color);
  background-color: #fff;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.button__link {
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}

.button__main {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.button__main .button__link {
  position: relative;
  transition: all .45s ease-Out;
}

.button__circle {
  display: none;
  width: 0%;
  height: 0%;
  opacity: 0;
  border-radius: 50%;
  background: #141414;
  position: absolute;
  transition: all .5s ease-Out;
  top: 50%;
  left: 50%;
}

.button__main:hover .button__circle {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -200%;
  left: -50%;
}

.button__main:hover {
  background-color: var(--primary3-color);
  border-color: var(--primary3-color);
  transition: .7s ease-Out;
}

.button__main:hover .button__link {
  color: #FFF;
}

.button:disabled {
  opacity: .4;
  pointer-events: none;
  transition: .3s;
}

.button > * {
  pointer-events: none;
}

.button--half {
  width: 50%;
}

.button--word {
  color: #976534;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  padding: 0;
  transition: .3s;
}

.button--word::before {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: #976534;
  transition: .3s;
}

.button--word:hover:before {
  width: 100%;
  left: 0;
  background: #976534;
}

.button--word:hover {
  color: #976534;
  transition: .3s;
}

.button--orange {
  background: #F0DBC5;
  transition: .3s;
}

.button--orange:hover {
  background: #D2BDA6;
  transition: .3s;
}

.button--white {
  background-color: white;
  border: 1px var(--black3-color) solid;
}

.button--white::after {
  background: #FAFAFA;
  transition: .3s;
}

.button--transparent {
  background: transparent;
  border: none;
  transition: .3s;
}

.button--transparent:hover {
  opacity: .5;
  transition: .3s;
}

.button--gray {
  background: #FAFAFA;
  transition: .3s;
}

.button--gray:hover {
  background: #404040;
  color: white;
  transition: .3s;
}

.button--full {
  width: 100%;
}

.button--small {
  font-size: 16px;
  line-height: 24px;
  padding: 8px 0;
}

.button--240 {
  width: 240px;
}

.button--active .button__cart {
  visibility: visible;
  opacity: 1;
  transition: .3s;
}

.button__text {
  position: relative;
  z-index: 2;
  text-align: center;
  white-space: nowrap;
}

.button__cart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #D2BDA6;
  color: #404040;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}

.wa-login-form-wrapper .wa-login-form-actions .button {
  margin-top: 30px;
  order: 2;
}

@media (max-width: 768px) {
  .footer {
    background-color: var(--surface-variant);
  }
}

@media (max-width: 1024px) {
  .header {
    min-width: 360px;
  }
  .menu {
    display: none;
  }
}

@media (max-width: 1350px) {
  .header__name {
    display: none;
  }
  .header__right {
    display: flex;
    justify-content: space-between;
  }
  .header__group:not(:last-of-type) {
    padding-right: 16px;
  }
  .header__middle .header__groupblock:not(:last-of-type) {
    margin-right: 20px;
  }
}

@media (max-width: 620px) {
  .login,
  .signup {
    padding: 16px 16px;
    min-width: 320px;
  }
  .wa-signup-form-wrapper > form,
  .wa-forgotpassword-form-wrapper > form {
    padding: 0;
  }
  .login__container,
  .signup__container {
    width: 100%;
  }
  .wa-login-form-wrapper,
  .wa-signup-form-wrapper,
  .wa-forgotpassword-form-wrapper {
    width: 100%;
  }
  .wa-login-form-wrapper .wa-login-form-fields,
  .wa-signup-form-wrapper .wa-signup-form-fields,
  .wa-forgotpassword-form-wrapper .wa-forgotpassword-form-fields {
    gap: 8px;
  }
  .wa-login-form-wrapper .js-wa-form-item {
    padding: 0;
  }
  .focus {
    transform: translate(0, -16px) scale(0.55);
    color: var(--grey-color);
    font-weight: 600;
    line-height: 16px;
  }
  .wa-value {
    font-size: 14px;
    line-height: 21px;
  }
  .wa-login-form-wrapper input[type="text"],
  .wa-signup-form-wrapper input[type="text"],
  .wa-forgotpassword-form-wrapper input[type="text"],
  .wa-login-form-wrapper input[type="email"],
  .wa-signup-form-wrapper input[type="email"],
  .wa-login-form-wrapper input[type="password"],
  .wa-signup-form-wrapper input[type="password"] {
    border: 1px solid var(--outline-color);
    font-size: 14px;
    line-height: 21px;
  }
  .wa-login-form-wrapper input[type="text"]:focus,
  .wa-signup-form-wrapper input[type="text"]:focus,
  .wa-forgotpassword-form-wrapper input[type="text"]:focus,
  .wa-login-form-wrapper input[type="email"]:focus .wa-field-login,
  .wa-signup-form-wrapper input[type="email"]:focus,
  .wa-login-form-wrapper input[type="password"]:focus .wa-field-password,
  .wa-signup-form-wrapper input[type="password"]:focus .wa-field-password {
    border: 1px solid var(--primary2-color);
  }
  .wa-login-form-wrapper .wa-login-form-actions {
    margin-top: 8px;
  }
  .wa-login-form-wrapper .wa-login-form-actions .wa-login-forgotpassword-url {
    margin-right: 24px;
  }
  .wa-signup-form-wrapper .wa-login-url {
    justify-content: space-between;
  }
}