.browse{
	.modal.facets-modal{
		&:not(.show){
			.modal-dialog.modal-fullscreen{
				transform: translateX(-400px);
			}
		}
		.modal-fullscreen{
			max-width: 400px;
		}
		.modal-header{
			.btn-close{
				opacity: 1;
			}
		}
		.modal-dialog{
			.modal-content{
				background: $body-bg;
				.facets{
					user-select: none;
					.facet-wrapper{
						margin-bottom: 1rem;
						.facet-header{
							font-size: 1rem;
							display: flex;
							align-items: center;
							cursor: pointer;
							font-weight: $headings-font-weight;
							position: relative;
							&:before{
								content: "\f039";
								font-family: highbiza;
								font-size: 70%;
								margin-right: .5rem;
								transition: .2s ease;
							}
							&.collapsed{
								&:before{
									transform: rotate(-90deg);
									content: "\f03a";
								}
							}
						}
					}
				}
			}
		}
		.form-check{
			position: relative;
			display: flex;
			align-items: center;
			gap: .5rem;
			padding-left: 0;
			input{
				margin: 0;
			}
			label{
				font-size: .9rem;
				a{
					color: color-contrast($body-bg);
					text-decoration: unset;
					@if $font-weight-bold >= 400{
						font-weight: 300;
					} @else{
						font-weight: 100;
					}
				}
			}
		}
	}

	.breadcrumb-item + .breadcrumb-item::before{
		color: #{color-contrast($dark)};
		opacity: .25;
	}

	.browse-header {
		background: $dark;
		$opposite: #{color-contrast($dark)};
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 1rem 0;
		position: relative;
		z-index: 3;
		.breadcrumb-wrapper{
			margin-top: 0;
			li{
				font-size: .8rem;
				&.active{
					color: white;
				}
				a{
					color: $opposite;
					text-decoration: underline;
					text-underline-offset: 3px;
				}
			}
		}
		.products-outer{
			margin-bottom: auto;
			min-height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding-bottom: 2rem;
			&.search-block{
				min-height: 120px;
			}
		}
		.background-image{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: .35;
			z-index: -1;
			filter: grayscale(1);
		}
		.btn{
			border: 1px solid;
			border-color: $opposite;
			color: $opposite;
			box-shadow: unset;
			padding: .7rem 2rem;
			position: relative;
			font-weight: min($headings-font-weight, 600);
			@media screen and (min-width: 991px){
				&.active, &:active, &:focus{
					background: $opposite;
					color: $dark;
				}
			}
			@media screen and (max-width: 991px){
				padding: .25rem 0;
				border: 0;
				&:after{
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 1px;
					background: $opposite;
					opacity: .75;
				}
			}
		}
		h1, .description-wrapper{
			color: $opposite;
		}
	}

	.browse-products-header{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.btn-filter{
			@media screen and (min-width: 991px){
				padding-left: 0;
				padding-right: 0;
			}
			@media screen and (max-width: 991px){
				padding: 0.375rem 0 0.375rem 0;
			}
		}
		.btn-filter, .results, .sortby-wrapper select{
			font-weight: $font-weight-bold;
			font-size: 1rem;
		}
		.sortby-wrapper{
			.row{
				margin: 0;
			}
			label{
				display: none;
			}
			select{
				border: 0;
				box-shadow: unset !important;
				max-width: 130px;
			}
		}
		.form-results{
			display: flex;
			align-items: center;
			column-gap: 1rem;
		}
		.col-md-7.col-12{
			width: 100%;
			padding: 0;
		}
	}
}

.product{
	.product-image{
		&:focus{
			border: 0 !important;
			outline: 0 !important;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: $primary;
				opacity: .5;
				z-index: 10;
			}
		}
	}
}