
/* Постер доставки */
.offer {
	position: relative;
	display: flex;
	width: 100%;
	height: 48px;
	align-items: center;
	background-color: #f1f8e9;
	z-index: 5;
  }
  
  .offer__img {
	position: absolute;
	bottom: 0;
  }
  
  .offer__content {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	font-size: 0.85rem;
	font-weight: 500;
  }
  
  .offer__link {
	padding: 4px 8px;
	color: #181725;
	text-decoration: none;
	border: 1px solid #181725;
	border-radius: 4px;
  }
  
  /* END Постер доставки */
  
  /* Шапка сайта */
  .header {
	display: flex;
	align-items: center;
	width: 100vw;
	height: 72px;
	background-color: #fff;
	box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.05);
  }
  
  .header__container {
	display: flex;
  }
  
  /* Навигация */
  .header__nav {
	position: relative;
	display: flex;
	align-items: center;
	width: 20vw;
  }
  
  .header__logo {
	width: 50%;
	height: 40px;
	margin-right: 12px;
  }
  
  .header__menu {
	width: 50%;
	margin: 0 12px;
  }
  
  .header__menu .buttonMenu {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	height: 40px;
	border: none;
	background-color: #64b704;
	font-weight: 500;
	color: #fff;
	border-radius: 4px;
	transition: background-color 0.2s ease;
	-webkit-transition: background-color 0.2s ease;
	cursor: pointer;
  }
  
  .header__menu .buttonMenu:hover {
	background-color: #579e04;
  }
  
  .header__menu .buttonMenu .buttonMenu__icon {
	width: 16px;
	height: 16px;
  }
  
  .header__menu--dropdown {
	position: absolute;
	display: none;
  }
  
  /* END Навигация */
  
  /* Поиск */
  .header__search {
	position: relative;
	display: flex;
	align-items: center;
	width: 50vw;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }

  @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
	.header__search {
		width: 47vw;
	  }
  }
  
  .header__search .searchField {
	width: 100%;
	background-color: #f5f6f7;
	color: #7C7C7C;
	border-radius: 4px;
	height: 40px;
	border: none;
	text-align: center;
	outline-color: #64b704;
	margin: 0 12px;
	padding: 0 16px;
	overflow: hidden;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
  }
  
  .header__search .searchField:hover {
	background-color: #eee;
  }
  
  .header__search .searchField:focus {
	background-color: #fff;
	text-align: left;
  }
  
  .header__search .searchField::-webkit-input-placeholder {
	color: #7C7C7C;
	visibility: visible;
	-webkit-transform: scale(1);
	transform: scale(1);
	transform-origin: center center;
	-webkit-transform-origin: center center;
	transition: transform 0.2s ease-out;
	-webkit-transition: transform 0.2s ease-out;
  }
  
  .header__search .searchField:focus::-webkit-input-placeholder {
	visibility: hidden;
	transform: scale(0.6);
	-webkit-transform: scale(0.6);
  }
  
  .header__search:after {
	position: absolute;
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.78234 1.66666C14.2573 1.66666 17.8973 5.30666 17.8973 9.78166C17.8973 11.893 17.0871 13.8186 15.7612 15.2637L18.3702 17.8672C18.6143 18.1114 18.6152 18.5064 18.371 18.7506C18.2493 18.8739 18.0885 18.9347 17.9285 18.9347C17.7693 18.9347 17.6093 18.8739 17.4868 18.7522L14.8464 16.1192C13.4574 17.2315 11.6962 17.8975 9.78234 17.8975C5.30734 17.8975 1.6665 14.2567 1.6665 9.78166C1.6665 5.30666 5.30734 1.66666 9.78234 1.66666ZM9.78234 2.91666C5.9965 2.91666 2.9165 5.99583 2.9165 9.78166C2.9165 13.5675 5.9965 16.6475 9.78234 16.6475C13.5673 16.6475 16.6473 13.5675 16.6473 9.78166C16.6473 5.99583 13.5673 2.91666 9.78234 2.91666Z' fill='%237C7C7C'/%3E%3C/svg%3E%0A");
	width: 20px;
	height: 20px;
	z-index: 10;
	right: 24px;
  }
  
  /* END Поиск */
  
  /* Пользовательская панель */
  .header__profile {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 30vw;
	line-height: normal;
  }
  
  .header__call {
	display: flex;
	align-items: center;
	margin: 0 12px;
  }
  
  .header__call:hover {
	animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	transform: translate3d(0, 0, 0);
	perspective: 1000px;
  }
  
  .header__call .call__icon {
	width: 16px;
	height: 36px;
  }
  
  .call__text {
	text-align: left;
	margin-left: 12px;
  }
  
  .call__text .call__number {
	font-size: 1.25rem;
	font-weight: 700;
	color: #181725;
  }
  
  .call__text .call__link {
	color: inherit;
	text-decoration: inherit;
	transition: color .2s ease;
  }
  
  .call__text .call__link:hover {
	color: #64b704;
	text-decoration: inherit;
  }
  
  @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
	.call__text .call__number {
		font-size: 1rem;
	}
  }
  
  .call__text .call__status:before {
	font-size: 0.75rem;
	color: #7C7C7C;
	font-weight: 500;
	content: "Операторы онлайн";
  }
  
  @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
	.call__text .call__status:before {
		content: "Мы онлайн";
	}
  }
  
  .call__status {
	display: flex;
	flex-direction: row;
	align-items: center;
  }
  
  .call__status .status__online {
	width: 6px;
	height: 6px;
	background-color: #4caf50;
	margin-left: 6px;
	border-radius: 100%;
  }
  
  /* Анимация контактного номера */
  @keyframes shake {
  
	10%,
	90% {
		transform: translate3d(-1px, 0, 0);
	}
  
	20%,
	80% {
		transform: translate3d(2px, 0, 0);
	}
  
	30%,
	50%,
	70% {
		transform: translate3d(-2px, 0, 0);
	}
  
	40%,
	60% {
		transform: translate3d(2px, 0, 0);
	}
  }
  
  .header__fovorite {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 12px;
  }
  
  .header__fovorite--label {
	font-size: 12px;
	color: #7C7C7C;
	font-weight: 500;
  }
  
  .header__cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 12px;
  }

  .header__cart a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 12px;
  }
  
  .header__cart--label {
	font-size: 12px;
	color: #7C7C7C;
	font-weight: 500;
  }
  
  .header__account {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-left: 12px;
  }
  
  .header__account--label {
	font-size: 12px;
	color: #7C7C7C;
	font-weight: 500;
  }
  /* END Шапка сайта */