#filter {
	display: block;
}

.bf {
	width: 100%;
	background: #fff;
	border: .01rem solid #eaeaef;
	border-radius: .16rem;
	padding: .26rem .28rem .22rem;
	box-shadow: 0 .06rem .24rem rgba(45, 45, 46, .05);
	box-sizing: border-box;
	text-align: left;
}

.bf-top {
	display: flex;
	gap: .38rem;
	margin-bottom: .24rem;
}

.bf-field {
	flex: 1 1 0;
	min-width: 0;
}

.bf-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: .16rem;
}

.bf-label .bf-t {
	font-size: .14rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .004rem;
	color: #2D2D2E;
}

.bf-label .bf-v {
	font-size: .15rem;
	font-weight: 600;
	color: #47BF26;
	white-space: nowrap;
}

.bf-range {
	position: relative;
	height: .26rem;
}

.bf-track,
.bf-fill {
	position: absolute;
	top: .11rem;
	height: .04rem;
	border-radius: .02rem;
}

.bf-track {
	left: 0;
	right: 0;
	background: #eaeaef;
}

.bf-fill {
	background: #47BF26;
}

.bf-range input[type=range] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: .26rem;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.bf-range input[type=range]:focus {
	outline: none;
}

.bf-range input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: .22rem;
	height: .22rem;
	border-radius: 50%;
	background: #fff;
	border: .03rem solid #47BF26;
	cursor: pointer;
	box-shadow: 0 .02rem .06rem rgba(0, 0, 0, .18);
}

.bf-range input[type=range]::-moz-range-thumb {
	pointer-events: auto;
	width: .16rem;
	height: .16rem;
	border-radius: 50%;
	background: #fff;
	border: .03rem solid #47BF26;
	cursor: pointer;
}

.bf-range input[type=range]::-moz-range-track {
	background: none;
	border: none;
}

.bf-row {
	display: flex;
	flex-wrap: wrap;
	gap: .34rem;
	align-items: flex-start;
	padding-top: .2rem;
	border-top: .01rem solid #eaeaef;
}

.bf-glabel {
	font-size: .13rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .004rem;
	color: #707070;
	margin-bottom: .11rem;
}

.bf-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .08rem;
}

.bf-pill {
	font-size: .14rem;
	font-weight: 600;
	line-height: .38rem;
	padding: 0 .18rem;
	border-radius: .19rem;
	background: #F7F7F7;
	border: .01rem solid #F7F7F7;
	color: #2D2D2E;

	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	transition: .22s ease;
}

.bf-pill:hover,
.bf-pill.is-on {
	background: #47BF26;
	border-color: #47BF26;
	color: #fff;
}

.bf-pill--mb {
	display: inline-flex;
	align-items: center;
	gap: .08rem;
}

.bf-pill--mb svg {
	width: .19rem;
	height: .19rem;
	flex: none;
}

.bf-pill--mb svg path {
	fill: currentColor;
	transition: .22s ease;
}

.bf-pill--mb span {
	color: inherit;

	transition: .22s ease;
}

.bf-pill--mb:hover span,
.bf-pill--mb.is-on span {
	color: #fff;
}

.bf-pill--mb:hover svg path,
.bf-pill--mb.is-on svg path {
	color: #fff;
	fill: #fff;
}

.bf-pill--num {
	min-width: .44rem;
	padding: 0 .12rem;
	text-align: center;
}

.bf-bottom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .18rem;
	margin-top: .22rem;
	padding-top: .2rem;
	border-top: .01rem solid #eaeaef;
}

.bf-sort {
	font-family: inherit;
	font-size: .14rem;
	font-weight: 600;
	color: #2D2D2E;
	background: #fff;
	border: .01rem solid #eaeaef;
	border-radius: .19rem;
	height: .4rem;
	padding: 0 .14rem;
	cursor: pointer;
}

.bf-reset {
	font-family: inherit;
	font-size: .14rem;
	font-weight: 600;
	color: #707070;
	background: none;
	border: none;
	border-bottom: .01rem dashed #707070;
	padding: 0 0 .02rem;
	cursor: pointer;
}

.bf-reset:hover {
	color: #47BF26;
	border-color: #47BF26;
}

.bf-count {
	margin-left: auto;
	font-size: .14rem;
	color: #707070;
}

.bf-count b {
	font-size: .17rem;
	color: #2D2D2E;
}

.product-item.bf-hidden {
	display: none !important;
}

#catalog {
	position: relative;
}

.bf-empty {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 33.333%;
	right: 0;

	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;

	justify-content: flex-start;
	padding: .8rem .3rem .2rem;
	box-sizing: border-box;
	text-align: center;
}

.bf-empty-title {
	margin: 0 0 .18rem;
	font-size: .4rem;
	line-height: 1.25;
	font-weight: 700;
	color: #2D2D2E;
}

.bf-empty-link {
	color: #47BF26;
	text-decoration: none;
	border-bottom: .02rem solid #47BF26;
	transition: .22s ease;
}

.bf-empty-link:hover {
	border-bottom-color: #47BF26;
}

.bf-empty-text {
	margin: 0;
	font-size: .18rem;
	line-height: 1.5;
	color: #9a9a9a;
}

.bf-empty .bf-empty-link {
	display: inline;
	width: auto;
	height: auto;

	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.bf-fav {
	display: inline-flex;
	align-items: center;
	gap: 0 .13rem;
}

.bf-fav__ico {
	position: relative;
	display: block;
	width: .2rem;
	height: .2rem;
}

.bf-fav__ico svg {
	display: block;
	width: .2rem;
	height: .2rem;
	fill: none;
	stroke: #2D2D2E;
	stroke-width: 1.7;
	transition: .22s ease;
}

.bf-fav__count {
	position: absolute;
	right: -.07rem;
	bottom: -.05rem;
	min-width: .15rem;
	height: .15rem;
	box-sizing: border-box;
	padding: 0 .03rem;
	border-radius: .075rem;
	background: #47BF26;
	color: #fff;
	font-size: .09rem;
	font-weight: 700;
	line-height: .15rem;
	text-align: center;
	transition: .22s ease;
}

.bf-fav__text {
	color: #2D2D2E;
	transition: .22s ease;
}

.bf-fav:hover .bf-fav__text,
.bf-fav.is-on .bf-fav__text {
	color: #fff;
}

.bf-fav:hover .bf-fav__ico svg,
.bf-fav.is-on .bf-fav__ico svg {
	fill: #fff;
	stroke: #fff;
}

.bf-fav:hover .bf-fav__count,
.bf-fav.is-on .bf-fav__count {
	background: #2D2D2E;
	color: #fff;
}

.bf-share {
	margin-left: auto;
}

.bf-share__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: .4rem;
	height: .4rem;
	padding: 0;
	border-radius: 50%;
	background: #F7F7F7;
	border: .01rem solid #F7F7F7;
	cursor: pointer;
	transition: .22s ease;
}

.bf-share__btn svg {
	width: .18rem;
	height: .18rem;
	flex: none;
}

.bf-share__btn svg path {
	fill: #2D2D2E;
	transition: .22s ease;
}

.bf-share__btn:hover {
	background: #47BF26;
	border-color: #47BF26;
}

.bf-share__btn:hover svg path {
	fill: #fff;
}

.bf-share__btn::after {
	content: "Скопировать ссылку на подборку";
	position: absolute;
	right: 0;
	top: calc(100% + .08rem);
	z-index: 5;
	white-space: nowrap;
	font-size: .12rem;
	font-weight: 600;
	color: #fff;
	background: #2D2D2E;
	border-radius: .06rem;
	padding: .06rem .1rem;
	opacity: 0;
	pointer-events: none;
	transition: .2s;
}

.bf-share__btn:hover::after {
	opacity: 1;
}

.bf-toast {
	position: fixed;
	left: 50%;
	top: .3rem;
	z-index: 3000;
	max-width: 6rem;
	padding: .14rem .2rem;
	border-radius: .12rem;
	background: #2D2D2E;
	color: #fff;
	font-size: .15rem;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 .06rem .2rem rgba(0, 0, 0, .25);
	opacity: 0;
	transform: translate(-50%, -.2rem);
	pointer-events: none;
	transition: .25s;
}

.bf-toast b {
	color: #47BF26;
}

.bf-toast small {
	display: block;
	margin-top: .05rem;
	font-size: .12rem;
	font-weight: 400;
	color: #bdbdbd;
	word-break: break-all;
	user-select: all;
}

.bf-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}