#main {
	padding-top: 0;
}

.header {
	background-color: #fbfbfb;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30px;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	position: relative;
	padding: 1rem 0;

	h1 {
		font-size: 2.2rem;
	}

	.breadcrumbs {
		display: flex;
		gap: 0.5rem;
		margin-bottom: 1rem;

		font-size: 0.8rem;
	}
}

.products {
	display: grid;
	grid-template-columns: 1fr 852px;
	gap: 20px;

	.topbar {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row: 1;
		gap: 20px;
		display: grid;
		height: 38px;
		grid-template-columns: 1fr 852px;

		.search {
			grid-column: 1;
			display: flex;
			justify-content: space-between;
			border: 1px solid #ddd;
			align-items: center;
			height: inherit;
			padding-inline: 1rem;

			input {
				font-size: 1rem;
				border-radius: 0px;
				transition: padding 200ms;
				padding: 0;
				height: 100%;
			}

			input:focus {
				border: 1px solid transparent;
				padding-left: 1.4rem;
			}

			.img {
				max-height: 18px;
				aspect-ratio: 1/1;

				input {
					border: none;
					height: 100%;
					object-fit: contain;
				}
			}
		}

		.sorting {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-inline: 1rem;
			height: 100%;

			.item-count {
				display: flex;
				align-items: center;
				gap: 5px;

				p {
					margin: 0;
				}

				a::after {
					content: "/";
					color: #a8a8a8;
					margin-left: 5px;
				}
			}

			a {
				color: #a8a8a8;
			}

			a:hover {
				color: #3f6eb3;
			}

			a.active {
				color: black;
			}

			.sort {
				display: flex;
				align-items: center;
				gap: 10px;

				p {
					margin: 0;
				}

				p,
				a {
					font-size: 1rem;
				}
			}
		}
	}

	.filtering {
		grid-column: 1;
		grid-row: 2;

		a {
			h3 {
				font-size: 1.1rem;
			}
		}

		.filter-list {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			gap: 10px;

			.category {
				color: #888;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-items: center;

				.num {
					border: 1px solid #888;
					border-radius: 40%;
					min-width: 40px;
					text-align: center;
					color: black;
				}

				p {
					font-size: 1rem;
					width: 70%;
					margin: 0;
				}
			}

			.category:hover,
			.active {
				color: black;
			}

			.sub {
				padding-left: 2rem;
			}
		}

		.collapsed {
			display: none;
			opacity: 0;
		}

		.submit {
			width: 100%;
			background-color: #3f6eb3;
			color: white;
			border: none;
			margin-top: 2rem;
			font-size: 1.2rem;
			padding: 0.5rem 0;
		}

		.category-button {
			width: 100%;
			padding: 1rem;
			text-align: center;
			background-color: #3f6eb3;
			color: white;
			transition: filter 200ms;
			display: none;
		}

		.category-button:hover {
			cursor: pointer;
			filter: brightness(1.6);
		}
	}

	.product-grid {
		grid-column: 2;
		grid-row: 2;

		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 14px;

		.product {
			border: 1px solid #ddd;
			transition: box-shadow 200ms;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			height: 410px;
			width: 275px;

			.title {
				display: flex;
				flex-direction: column;
				font-size: 0.9rem;
				text-align: center;
				padding-inline: 0.5rem;
				grid-row: 2;
				height: fit-content;
			}

			.code {
				font-weight: bold;
				text-align: center;
				padding-top: 0.9rem;
				padding-bottom: 1rem;
				font-size: 0.9rem;
			}

			.img {
				grid-row: 1;
				margin: auto;
				z-index: 100;
				width: 222px;

				img {
					width: 100%;
					height: 100%;
					object-fit: contain;
					object-position: center;
				}
			}
		}

		.product:hover {
			box-shadow: 14px 15px 17px -15px rgba(66, 68, 90, 1);
		}
	}

	.botbar {
		grid-column-start: 1;
		grid-column-end: 3;
		width: 40%;
		margin: auto;

		.pagination {

			margin-left: 0;
			margin-right: 0;
			display: flex;
			width: 100%;
			justify-content: space-evenly;

			.pagination-number {
				color: gray;
				transition: color 200ms, background-color 200ms;
				width: 50px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.pagination-number:hover {
				color: black;
				background-color: #ddd;
			}

			.active,
			.active:hover {
				color: black;
				background-color: #3f6eb3;
				color: white;
			}
		}
	}
}

@media screen and (max-width: 1250px) {
	.products {
		width: 100%;
	}
}

@media screen and (max-width: 1100px) {

	.header {
		margin: auto;
		width: 100%;
		left: auto;
		right: auto;
	}

	.products {
		grid-template-columns: 2fr 5fr;

		.topbar {
			grid-template-columns: 2fr 5fr;

			.search {
				height: 50px;
			}

		}

		.product-grid {
			grid-template-columns: 1fr 1fr;

			.product {
				width: 100%;
			}
		}
	}
}

@media screen and (max-width: 1000px) {
	.products {
		grid-template-columns: 1fr;
		width: 100%;

		.topbar {
			grid-template-columns: 1fr;
			height: auto;
		}

		.product-grid {
			grid-template-columns: 1fr 1fr;

			.product {
				display: flex;
				flex-direction: column;
				align-items: center;
				min-height: auto;
				width: 100%;

				.img {
					max-height: 20vh;
				}
			}
		}

		.filtering {
			grid-column-start: 1;
			grid-column-end: 3;

			.filter-list {
				margin-top: 1rem;
			}
		}

		.main-section {
			grid-column-start: 1;
			grid-column-end: 3;
		}
	}
}

@media screen and (max-width: 768px) {
	.products {
		.product-grid {
			grid-template-columns: 1fr;

			.product {}
		}

		.filtering {
			.category-button {
				display: block;
			}
		}
	}
}


@media screen and (max-width: 600px) {
	.sorting {
		flex-direction: column;
		justify-content: center;
	}

}