/* Start:/local/templates/kr1/css/search-page.css?17845882625928*/
/* ===== Страница результатов поиска ===== */

.kr-searchp {
	margin-top: 56px;
}

.kr-searchp__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	text-align: left;
}

.kr-searchp__query { flex: 1 1 auto; min-width: 0; }

.kr-searchp__label {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--dark-blue-800);
}
.kr-searchp__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--dark-blue-800);
	word-break: break-word;
}
.kr-searchp__fixed {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 400;
	color: var(--grey-500);
}
.kr-searchp__fixed b { font-weight: 600; color: var(--dark-blue-800); }

.kr-searchp__help {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 648px;
	padding: 16px;
	border-radius: 10px;
	background: var(--grey-100);
}
/* Иконка и текст — своя обёртка, выровнены по верху:
   иконка встаёт к заголовку, а не к середине двухстрочного описания.
   Сама обёртка с кнопкой выравнивается по центру (см. .kr-searchp__help). */
.kr-searchp__help-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.kr-searchp__help-ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 2px; /* оптически ровно с первой строкой заголовка */
}
.kr-searchp__help-text { flex: 1 1 auto; min-width: 0; }
.kr-searchp__help-title {
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--dark-blue-800);
}
.kr-searchp__help-desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--grey-500);
}
.kr-searchp__help-btn {
	flex: 0 0 auto;
	padding: 12px 16px;
	border: none;
	border-radius: 10px;
	background: var(--orange-500);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}
.kr-searchp__help-btn:hover { background: #f06407; }

.kr-searchp__empty {
	margin: 32px 0 var(--margin-top-section);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--grey-500);
	text-align: left;
}

/* ----- «Показать ещё» ----- */
.kr-searchp__more {
	display: flex;
	justify-content: center;
	margin: 32px 0 var(--margin-top-section);
}
/* display:flex перебил бы атрибут hidden, которым JS прячет кнопку */
.kr-searchp__more[hidden] { display: none; }
/* пагинация каталога тут не нужна — вместо неё кнопка догрузки */
.kr-searchp .kr-pagination { display: none; }

/* когда есть сайдбар, .catalog-layout — грид: ставим кнопку во вторую колонку,
   под товары, иначе она центруется по всей ширине вместе с фильтрами */
.catalog-layout:has(.product-card) > .kr-searchp__more {
	grid-row: 3;
	grid-column: 2;
}

.kr-searchp__more-btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 16px 32px;
	border: none;
	border-radius: 10px;
	background: var(--grey-100);
	font-size: 14px;
	font-weight: 600;
	color: var(--grey-500);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.kr-searchp__more-btn span {font-weight: inherit; font-size: inherit;}
.kr-searchp__more-btn:hover { background: var(--grey-200); }
.kr-searchp__more-btn svg { display: block; transition: transform .15s ease; }

.kr-searchp__more.is-loading .kr-searchp__more-btn {
	opacity: .6;
	cursor: default;
}

/* появление догруженных карточек */
@keyframes krCardAppear {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
.product-card.kr-card-appear {
	animation: krCardAppear .32s cubic-bezier(.22, .61, .36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
	.product-card.kr-card-appear { animation: none; }
}

/* Планшет и ниже: блок помощи уезжает под товары и под кнопку (как в макете).
   display:contents у шапки «растворяет» её, и оба её блока становятся прямыми
   детьми .kr-searchp — только так их можно переставить через order. */
@media (max-width: 1230px) {
	.kr-searchp {
		display: flex;
		flex-direction: column;
		margin-top: 0;
	}
	.kr-searchp__head { display: contents; }

	.kr-searchp__query { order: 1; margin-bottom: 24px; }
	/* .catalog-layout — когда есть сайдбар, .catalog — когда фасетов нет.
	   Без второго селектора у грида оставался order:0, и товары уезжали
	   выше заголовка «Результаты по запросу». */
	.kr-searchp .catalog-layout,
	.kr-searchp > .catalog,
	.kr-searchp__empty { order: 2; }
	.kr-searchp__more { order: 3; }
	.kr-searchp__help {
		margin-top: var(--margin-top-section);
		order: 4;
		width: 100%;
		max-width: none;
		margin-bottom: var(--margin-top-section);
	}
	.kr-searchp__more { margin-bottom: 24px; }
}

@media (max-width: 767px) {
	.kr-searchp .nomenclature-list {
		padding-top: 0;
	}
	.kr-searchp__help-info {
		flex-direction: column;
		align-items: center;
	}
	.kr-searchp__help-ico, .kr-searchp__help-ico svg {
		width: 40px;
		height: 40px;
	}
	.kr-searchp__help-text {
		text-align: center;
	}
	.kr-searchp__title { font-size: 28px; }
	.kr-searchp__label { font-size: 14px; }

	.kr-searchp__help {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 24px 16px;
	}
	.kr-searchp__help-btn { margin: 0 auto; }
}

/* End */
/* /local/templates/kr1/css/search-page.css?17845882625928 */