@media all and (min-width: 250px) and (max-width: 699px){
	section.header-top .flex .link {
		display: inline-block;
		float: left;
		padding: 0 10px 5px 0;
		width: auto;
	}
}
@media all and (min-width:700px) {
	
	/* Заголовок */
	header {
		margin-bottom: 30px;
		background: #ffffff;
		box-shadow: 0 10px 15px #00000005;
		font-size: 15px;
	}
	header .flex {
		width: 100%;
		height: 100%;
		display: flex;
	}
	header a {
		color: #67697ecc;
	}
	header a:hover {
		color: #67697e;
	}
	
	/* Заголовок - верх */
	section.header-top {
		height: 60px;
		border-bottom: solid 1px #d2d3e04d;
	}
	section.header-top .flex .link {
		padding: 24px 0 18px 0;
		margin-right: 24px;
	}
	section.header-top .flex .link.personal {
		flex-grow: 1;
		text-align: right;
		margin-right: 0;
	}
	section.header-top .link.personal:before {
		content: "_";
		font-family: "FontAwesome Regular";
		display: inline;
		width: 32px;
		text-align: center;
		color: #575757;
		font-size: 17px;
	}
	section.header-top .link.personal:before { content: "\f007"; }
	
	/* Заголовок - середина */
	section.header-center {
		height: 95px;
		padding: 15px 0;
	}
	header .header-center .search {
		width: calc(100% - 200px);
		padding-top: 15px;
	}	
	section.header-center .callback {
		width: 200px;
		padding-left: 20px;
	}
	section.header-center .logo {
		/* width: 320px; */
		flex-grow: 1;
	}
	section.header-center .logo img {
		width: 300px;
		height: 60px;
	}
	section.header-center .search {
		float: none;
		width: auto;
		flex-grow: 1;
		padding: 5px 10px;
		position: relative;
	}
	section.header-center .contact {
		display: flex;
		flex-direction: column;
		row-gap: 6px;
		margin-right: 25px;
	}
	section.header-center .contact > span {
		font-size: 15px;
		color: #67697ecc;
	}
	.tg-link:before {
		content: "\f2c6";
		display: inline;
		font-family: "FontAwesome Brands";
		font-size: 19px;
		color: #1c93ce;
		margin-right: 10px;
	}
	section.header-center .contact .phone-more {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-end;
	}
	a.phone {
		color: #2e2f38;
		font-size: 19px;
		font-weight: 600;
		font-family: "Ubuntu Regular";
	}
	.tg-link:before {
		content: "\f2c6";
		display: inline;
		font-family: "FontAwesome Brands";
		font-size: 19px;
		color: #1c93ce;
		margin-right: 10px;
	}
	.contacts-more:before {
		content: "\f141";
		display: inline;
		font-family: "FontAwesome";
		font-size: 19px;
		color: #2e2f38;
		margin-left: 10px;
	}
	section.header-center .callback {
		text-align: left;
		padding-left: 30px;
	}
	section.header-center .callback a {
		display: block;
		line-height: 44px;
		border: solid 1px #b0cb1f;
		background: #ffffff;
		padding: 0 25px;
		white-space: nowrap;
		border-radius: 23px;
		color: #b0cb1f;
		cursor: pointer;
		transition: all 0.18s linear;
	}
	section.header-center .callback a:hover {
		background: #b0cb1f;
		color: #ffffff;
	}
	section.header-bottom {
		height: 86px;
	}
	.header-bottom-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 20px 0;
		position: relative;
	}
	nav#katalog {
		width: 320px;
		border-radius: 23px;
		padding: 8px 26px;
		display: flex;
		justify-content: flex-start;
		background: #b0cb1f;
		color: #ffffff;
		cursor: pointer;
		font-size: 15px;
		font-family: 'Ubuntu Regular';
		font-weight: 600;
	}
	nav#katalog span {
		line-height: 30px;
	}
	nav#katalog span:before {
		content: "\f0c9";
		display: inline-block;
		float: left;
		margin-right: 15px;
		font-family: "FontAwesome";
		font-size: 20px;
		color: #ffffff;
		line-height: 30px;
		height: 30px;
	}
	nav#katalog:hover {
		background: #b0cb1fe0;
	}
	nav#katalog:active {
		background: #a3bc1c;
	}
	
	div.favorite,
	div.compare {
		display: block;
		position: relative;
		width: 45px;
		height: 45px;
		cursor: pointer;
		opacity: 0.6;
		transition: all 0.18s linear;
	}
	div.favorite:hover,
	div.compare:hover {
		opacity: 1;
	}
	.but-favorite {
		display: block;
		position: absolute;
		left: auto;
		right: 0;
		top: 0;
		width: 20px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		background: #ffffff;
		color: #ff0000;
		border-radius: 10px;
		box-shadow: 1px 1px 3px 1px #00000020, 0 10px 15px #00000020;
		font-size: 11px;
	}
	div.favorite:before {
		content: "\f004";
		font-family: "FontAwesome";
		display: block;
		width: 45px;
		height: 45px;
		text-align: center;
		line-height: 45px;
		font-size: 20px;
		color: #ff0000;
		
	}
	div.compare:before {
		content: "\f24e";
		font-family: "FontAwesome";
		display: block;
		width: 45px;
		height: 45px;
		text-align: center;
		line-height: 45px;
		font-size: 20px;
		color: #274796;
	}
	.but-compare {
		display: block;
		position: absolute;
		left: auto;
		right: 0;
		top: 0;
		width: 20px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		background: #ffffff;
		color: #274796;
		border-radius: 10px;
		box-shadow: 1px 1px 3px 1px #00000020, 0 10px 15px #00000020;
		font-size: 11px;
	}
	
	div.basket {
		width: 135px;
		border-radius: 23px;
		padding: 8px 26px;
		display: flex;
		background: #ffa500;
		color: #ffffff;
		cursor: pointer;
		font-size: 15px;
		font-family: 'Ubuntu Regular';
		font-weight: 600;
		position: relative;
	}
	div.basket:hover {
		background: #ffa500e0;
	}
	div.basket:active {
		background: #ec9c0b;
	}
	div.basket span.basket-title {
		display: inline-block;
		padding-left: 12px;
		line-height: 30px;
	}
	div.basket span.basket-icon {
		display: inline-block;
		position: absolute;
		left: 8px;
		top: 7px;
		width: 30px;
		height: 30px;
	}
	div.basket span.basket-icon:before {
		content: "\f291";
		display: block;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-family: "FontAwesome";
		font-size: 15px;
		color: #ffffff;
	}
	div.basket span.basket-qty {
		display: block;
		position: absolute;
		left: 103px;
		top: 12px;
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		border-radius: 50%;
		background: #ffffff;
		color: orange;
		overflow: hidden;
		font-size: 11px;
	}
	div.search {
		border-radius: 23px;
		display: inline-block;
		width: calc(100% - 320px - 255px);
		font-family: 'FontAwesome Regular';
		font-size: 15px;
		line-height: 30px;
		padding: 0px;
		padding-left: 15px;
	}
	div.search form {
		width: 100%;
		position: relative;
		border-radius: 23px;
	}
	body.blur div.search form {
		box-shadow: 0 0 10px 5px #00000030;
	}
	div.search input[name="keyword"] {
		background: #f2f4f8cc;
		width: 100%;
		padding: 12px 125px 12px 45px;
		font-family: "Ubuntu Regular";
		font-size: 15px;
		border: solid 1px #ffffff;
		border-radius: 23px;
	}
	div.search input[name="keyword"]:focus {
		background: #ffffff;
	}
	input.submit-left,
	input.submit-right,
	span.submit-left,
	span.submit-right {
		position: absolute;
		color: #67697e;
		font-weight: 100;
	}
	span.submit.submit-left,
	input.submit-left {
		display: block;
		width: 34px;
		height: 34px;
		left: 6px;
		top: 5px;
		cursor: pointer;
	}
	span.submit.submit-left:after {
		content: "\f002";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 34px;
		height: 34px;
		background: #ffffff;
		border-radius: 17px;
		font-family: "FontAwesome";
		text-align: center;
		line-height: 34px;
		font-size: 15px;
	}
	span.submit.submit-right,
	input.submit-right {
		left: auto;
		right: 4px;
		top: 5px;
		line-height: 34px;
		padding: 0 20px;
		border-radius: 17px;
		cursor: pointer;
		font-family: "Ubuntu Regular";
		font-size: 15px;
	}
	span.submit-right {
		background: #ffffff;
	}
	input.submit-right {
		width: 85px;
		height: 34px;
	}
}
/* Модальные окна шапки: «Контакты» (телефонный блок) и «Обратный звонок»
   (общие рамы .cat-modal-overlay/.cat-modal - из katalog.css, закрываются
   персональным personal-kit.js: ✕ / клик по затемнению / Esc) */
.site-contacts-modal, .site-callback-modal { width: 480px; top: 120px; }
.site-contacts-body { padding: 2px 0 6px; }
.site-contact-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Ubuntu Light';
	font-size: 14px;
	color: #2e2f38;
	margin: 0 0 10px;
}
.site-contact-row .fa { font-family: 'FontAwesome'; font-weight: 400; width: 20px; text-align: center; color: #b0cb1f; font-size: 15px; }
.site-contact-row a { color: #274796; text-decoration: none; }
.site-contact-row a:hover { text-decoration: underline; }
.site-contact-row.grey { color: #8a94a0; font-size: 13px; line-height: 20px; }
.site-callback-link {
	display: inline-block;
	background: #b0cb1f;
	color: #ffffff !important;
	border-radius: 23px;
	padding: 10px 24px;
	font-size: 14px;
	text-decoration: none !important;
	transition: background 0.18s linear;
}
.site-callback-link:hover { background: #b0cb1fe0; }
.site-callback-note { font-family: 'Ubuntu Light'; font-size: 13px; color: #8a94a0; margin: 0 0 14px; }
.site-form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.site-form-field > span { font-family: 'Ubuntu Light'; font-size: 12px; color: #707070; }
.site-form-field > span em { color: #c9403c; font-style: normal; }
.site-form-field input {
	font-family: 'Ubuntu Light';
	font-size: 14px;
	color: #2e2f38;
	padding: 10px 12px;
	border: 1px solid #ccd4dd;
	border-radius: 4px;
	outline: none;
	box-sizing: border-box;
}
.site-form-field input:focus { border-color: #b0cb1f; }
.site-form-note { font-size: 12px; color: #c9403c; margin: -4px 0 6px; min-height: 16px; }
.site-form-submit {
	background: #b0cb1f;
	border: none;
	border-radius: 23px;
	color: #ffffff;
	font-family: 'Ubuntu Light';
	font-size: 14px;
	padding: 11px 26px;
	cursor: pointer;
	transition: background 0.18s linear;
}
.site-form-submit:hover { background: #b0cb1fe0; }
.site-form-done { font-family: 'Ubuntu Regular'; font-size: 14px; color: #3d9b62; padding: 10px 0 2px; }

/* Модальное окно статей шапки (О магазине, Оплата, Доставка, Гарантия);
   текст грузится из полной страницы /articles/<alias> (section.articles) */
.site-article-modal { width: 640px; top: 90px; }
.site-article-body { padding: 2px 0 6px; font-family: 'Ubuntu Light'; font-size: 14px; line-height: 21px; color: #2e2f38; }
.site-article-body p { margin: 0 0 10px; }
.site-article-body h2, .site-article-body h3 { font-family: 'Ubuntu Regular'; font-size: 16px; color: #2e2f38; margin: 14px 0 8px; }
.site-article-body h4 { font-family: 'Ubuntu Regular'; font-size: 14px; color: #2e2f38; margin: 10px 0 6px; }
.site-article-body ul, .site-article-body ol { margin: 0 0 10px; padding-left: 20px; }
.site-article-body li { margin-bottom: 4px; }
.site-article-body table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.site-article-body table td, .site-article-body table th { border: 1px solid #ccd4dd; padding: 6px 8px; font-size: 13px; }
.site-article-body a { color: #274796; text-decoration: none; }
.site-article-body a:hover { text-decoration: underline; }
.site-article-body img { max-width: 100%; height: auto; }
/* Нижняя ссылка «полный текст страницы» (в статьях и в контактах) */
.site-article-foot { border-top: 1px solid #e3e9ef; margin: 14px 0 0; padding: 10px 0 2px; text-align: right; }
.site-article-foot a { font-family: 'Ubuntu Light'; font-size: 13px; color: #274796; text-decoration: none; }
.site-article-foot a:hover { text-decoration: underline; }
.site-article-foot .fa { font-family: 'FontAwesome'; font-size: 12px; color: #b0cb1f; margin-left: 4px; }
