@charset "UTF-8";
/* Фильтры в списке товаров категории (filters.js): панель над таблицей товаров.
   Компьютер — панель раскрыта всегда; телефон — свёрнута в кнопку «Фильтры», раскрывается по нажатию. */
.bf {
	margin: 4px 6px 14px;
	padding: 12px 14px 6px;
	border: 1px solid #dbe5f7;
	border-radius: 10px;
	background: #f6f9ff;
	color: #1d2a44;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;   /* в мобильной теме середина страницы выровнена по центру */
}
.bf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bf-head > button, .bf-head > .bf-reset { flex: none; white-space: nowrap; }
.bf-found { flex: 1 1 auto; min-width: 0; }
.bf-toggle {
	display: none;
	padding: 8px 14px;
	border: 1px solid #1346aa;
	border-radius: 8px;
	background: #fff;
	color: #1346aa;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.bf-toggle::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bf-open .bf-toggle::after { margin-bottom: -1px; transform: rotate(-135deg); }
.bf-found { color: #5b6b8c; font-size: 13px; }
.bf-reset {
	display: none;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: #1346aa;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}
.bf-active .bf-reset { display: inline; }
/* названия групп — одна колонка по самому длинному из них (не шире 190px: самое длинное — «Операционная система», ~170px), варианты всех групп с одной линии */
.bf-body { display: grid; grid-template-columns: fit-content(190px) 1fr; column-gap: 14px; row-gap: 6px; margin-bottom: 6px; }
.bf-group { display: contents; }
.bf-title { padding-top: 5px; color: #0e3184; font-weight: 600; }
.bf-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-opt { position: relative; cursor: pointer; }
.bf-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bf-opt span {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid #c4d3ef;
	border-radius: 14px;
	background: #fff;
	white-space: nowrap;
	transition: background-color .15s, border-color .15s;
}
.bf-opt i { margin-left: 5px; color: #8494b3; font-style: normal; font-size: 12px; }
.bf-opt:hover span { border-color: #00b4ff; }
.bf-opt input:checked + span { border-color: #1346aa; background: #1346aa; color: #fff; }
.bf-opt input:checked + span i { color: #bcd0ff; }
.bf-opt input:focus-visible + span { outline: 2px solid #00b4ff; outline-offset: 1px; }
.bf-zero { opacity: .45; }
/* «Товары на заказ»: панель собирает сервер (modules/nz_filters.php), варианты — ссылки, выбранный — .bf-on */
.bf-srv { scroll-margin-top: 70px; }
.bf-srv a.bf-opt { color: inherit; text-decoration: none; }
.bf-srv .bf-on span { border-color: #1346aa; background: #1346aa; color: #fff; }
.bf-srv .bf-on i { color: #bcd0ff; }
.bf-srv a.bf-opt:focus-visible span { outline: 2px solid #00b4ff; outline-offset: 1px; }
.bf-srv .bf-opts .bf-x { display: none; }
.bf-srv .bf-all .bf-x { display: inline-block; }
.bf-more { padding: 4px 10px; border: 0; background: none; color: #1346aa; font-size: 13px; text-decoration: underline; cursor: pointer; }
.bf-all .bf-more { display: none; }
a.bf-reset { display: inline; }
.bf-empty { display: none; margin: 4px 0 8px; color: #b3261e; }
.bf-none .bf-empty { display: block; }
.catalogs .table tr.bf-hide { display: none !important; }

@media (max-width: 767px) {
	.bf { margin: 0 0 12px; padding: 10px 10px 4px; }
	.bf-toggle { display: inline-block; }
	.bf-head { flex-wrap: wrap; row-gap: 6px; }
	.bf-found { order: 3; flex-basis: 100%; }   /* «Найдено N из M» — строкой ниже: рядом с кнопкой и «Сбросить» не помещается */
	.bf-body { display: none; padding-top: 4px; }
	.bf-open .bf-body { display: block; }
	.bf-group { display: block; margin-bottom: 10px; }
	.bf-title { margin-bottom: 6px; padding-top: 0; }
	.bf-opt span { padding: 7px 12px; border-radius: 18px; font-size: 14px; }   /* палец, а не мышь — крупнее */
}