/* ============================================================
   Фильтры «Найдите свой идеальный ковер» (десктоп)
   Макет «Главная_ПК». Всё в #mainSearchWrap, старые .checkselect не используются.
   ============================================================ */

/* ---------- заголовок секции на главной: две строки ---------- */
#mainProdList > .h1_title {
	width: 546px;
	max-width: 100%;
	margin: 0 auto;
	font-family: "Mulish", "Proxima Nova", Arial, sans-serif;
	font-size: 40px;
	line-height: 51px;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
	color: #000;
}
#mainProdList #mainSearchWrap {
	margin-top: 33px;
}

/* ---------- панель ---------- */
#mainSearchWrap #mainSearchForm {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 16px;
	padding: 30px;
	border: 1px solid #f6f6f6;
	border-radius: 20px;
	background: linear-gradient(-37.63deg, #ffffff 0%, #fafafa 100%);
	box-shadow: 0 19px 30px 0 rgba(0, 0, 0, 0.06);
	font-family: "Mulish", "Proxima Nova", Arial, sans-serif;
}
#mainSearchWrap #mainSearchForm,
#mainSearchWrap #mainSearchForm * {
	box-sizing: border-box;
}
#mainSearchWrap .mf-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---------- одно поле-фильтр ---------- */
#mainSearchWrap .mf-field {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}
#mainSearchWrap .mf-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 13px 14px 13px 17px;
	border: 1px solid #efefee;
	border-radius: 50px;
	background: #ffffff;
	backdrop-filter: blur(8.5px);
	font-family: inherit;
	font-size: 16px;
	line-height: 21px;
	font-weight: 400;
	text-align: left;
	color: #000;
	cursor: pointer;
	transition: border-color 0.2s;
}
#mainSearchWrap .mf-btn:hover {
	border-color: #d3d3d0;
}
#mainSearchWrap .mf-btn:focus-visible {
	outline: 2px solid #daaf76;
	outline-offset: 2px;
}
#mainSearchWrap .mf-btn__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
#mainSearchWrap .mf-btn__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#mainSearchWrap .mf-btn__count {
	display: none;
	font-size: 10px;
	line-height: 12px;
	font-weight: 400;
	color: #666666;
}
#mainSearchWrap .mf-btn__chevron {
	flex-shrink: 0;
	width: 25px;
	height: 24px;
	background: url(/themes/new2/img/filters/chevron.svg) center / contain no-repeat;
	transition: transform 0.2s;
}
#mainSearchWrap .mf-field.is-open .mf-btn__chevron {
	transform: rotate(180deg);
}

/* выбрано: чёрная рамка, «Выбрано: N», крестик сброса */
#mainSearchWrap .mf-field.is-active .mf-btn {
	padding-top: 11px;
	padding-bottom: 11px;
	border-color: #000000;
}
#mainSearchWrap .mf-field.is-active .mf-btn__name {
	font-size: 14px;
	line-height: 15px;
	font-weight: 500;
}
#mainSearchWrap .mf-field.is-active .mf-btn__count {
	display: block;
}
#mainSearchWrap .mf-field.is-active .mf-btn__chevron {
	visibility: hidden;
}
#mainSearchWrap .mf-clear {
	display: none;
	position: absolute;
	right: 14px;
	top: 50%;
	width: 25px;
	height: 24px;
	margin: -12px 0 0;
	padding: 0;
	border: 0;
	background: url(/themes/new2/img/filters/clear.svg) center / contain no-repeat;
	cursor: pointer;
}
#mainSearchWrap .mf-field.is-active .mf-clear {
	display: block;
}
#mainSearchWrap .mf-clear:hover {
	opacity: 0.6;
}

/* ---------- выпадающий список ---------- */
#mainSearchWrap .mf-popup {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 50;
	min-width: 100%;
	width: max-content;
	max-width: 340px;
	padding-top: 6px; /* невидимый «мост», чтобы список не закрывался при наведении */
}
#mainSearchWrap .mf-field.is-open .mf-popup {
	display: block;
}
#mainSearchWrap .mf-popup__in {
	max-height: 300px;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid #efefee;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 19px 30px 0 rgba(0, 0, 0, 0.12);
}
#mainSearchWrap .mf-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 10px;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	line-height: 19px;
	font-weight: 400;
	color: #000;
	cursor: pointer;
	user-select: none;
}
#mainSearchWrap .mf-opt:hover {
	background: #f6f6f6;
}
#mainSearchWrap .mf-opt input {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #000000;
	cursor: pointer;
}

/* ---------- кнопки ---------- */
#mainSearchWrap .mf-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
#mainSearchWrap .mf-submit,
#mainSearchWrap .mf-color {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 13px 22px;
	border: 0;
	border-radius: 50px;
	font-family: inherit;
	font-size: 15px;
	line-height: 24px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s;
}
#mainSearchWrap .mf-submit img,
#mainSearchWrap .mf-color img {
	display: block;
	width: 24px;
	height: 24px;
}
#mainSearchWrap .mf-submit {
	background: #000000;
	color: #ffffff;
}
#mainSearchWrap .mf-submit:hover {
	background: #303131;
}
#mainSearchWrap .mf-color {
	background: #daaf76;
	color: #000000;
}
#mainSearchWrap .mf-color:hover {
	background: #cf9f62;
}

/* отступ перед блоком «Найдите свой идеальный ковер» убран (было 120px) */
#mainProdList { margin-top: 0; }

/* ---- фильтры: ховеры кнопок, список с чекбоксами, тонкий золотой скроллбар (макет) ---- */
#mainSearchWrap .mf-submit, #mainSearchWrap .mf-color { transition: background 0.2s, color 0.2s; }
#mainSearchWrap .mf-submit img { transition: filter 0.2s; }
#mainSearchWrap .mf-submit:hover { background: #daaf76; color: #000; }
#mainSearchWrap .mf-submit:hover img { filter: invert(1); }
#mainSearchWrap .mf-color:hover { background: #fef9f3; color: #000; }

#mainSearchWrap .mf-popup { max-width: 380px; }
#mainSearchWrap .mf-popup__in {
	max-height: 372px;
	padding: 14px 10px 14px 22px;
	border-radius: 30px;
	scrollbar-width: thin;
	scrollbar-color: #daaf76 #f6f6f6;
}
#mainSearchWrap .mf-popup__in::-webkit-scrollbar { width: 6px; }
#mainSearchWrap .mf-popup__in::-webkit-scrollbar-track { margin: 12px 0; border-radius: 6px; background: #f6f6f6; }
#mainSearchWrap .mf-popup__in::-webkit-scrollbar-thumb { border-radius: 6px; background: #daaf76; }
#mainSearchWrap .mf-opt {
	gap: 14px;
	padding: 13px 14px 13px 0;
	border-radius: 0;
	font-size: 20px;
	line-height: 25px;
	font-weight: 400;
	color: #666;
}
#mainSearchWrap .mf-opt + .mf-opt { border-top: 1px solid #f3f3f3; }
#mainSearchWrap .mf-opt:hover { background: transparent; color: #000; }
#mainSearchWrap .mf-opt input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 1px solid #666;
	border-radius: 5px;
	background: #fff;
	transition: background 0.2s, border-color 0.2s;
}
#mainSearchWrap .mf-opt input:checked {
	border-color: #daaf76;
	background: #daaf76 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 16.5l5.5 5.5L24 10.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
#mainSearchWrap .mf-opt input:checked + * , #mainSearchWrap .mf-opt:has(input:checked) { color: #000; }
@media (max-width: 900px) {
	#mainSearchWrap .mf-popup__in { border-radius: 20px; padding: 8px 8px 8px 16px; max-height: 320px; }
	#mainSearchWrap .mf-opt { font-size: 17px; line-height: 21px; padding: 10px 10px 10px 0; gap: 12px; }
	#mainSearchWrap .mf-opt input { flex-basis: 26px; width: 26px; height: 26px; }
}

@media (min-width: 901px) {
	#mainSearchWrap .mf-field:nth-last-child(-n+2) .mf-popup { left: auto; right: 0; }
}

/* размеры списка фильтров: чекбокс 22×22, текст 14px */
#mainSearchWrap .mf-opt { gap: 12px; padding: 11px 14px 11px 0; font-size: 14px; line-height: 18px; }
#mainSearchWrap .mf-opt input { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 4px; }
@media (max-width: 900px) {
	#mainSearchWrap .mf-opt { font-size: 14px; line-height: 18px; padding: 10px 10px 10px 0; }
	#mainSearchWrap .mf-opt input { flex-basis: 22px; width: 22px; height: 22px; }
}

/* шрифт фильтров на любой странице (на мобильных внутренних по умолчанию Proxima Nova) */
#mainSearchWrap, #mainSearchWrap * { font-family: "Mulish", "Proxima Nova", Arial, sans-serif; }