main * {
	color: var(--text-color);
	font-family: Lato;
}
h1 {
	display: block;
	text-transform: uppercase;
}
header {
	padding-bottom: 30px;
	border-bottom: 1px solid var(--Dark-dark100, rgba(45, 47, 46, 0.16));
	&::before {
		height: calc(100% + 20px) !important;
	}
	.bottom-menu .body {
		margin-top: 30px !important;
	}
}
footer {
	padding-top: 50px;
	margin-top: 50px;
}
.favorites {
	> .top {
		display: flex;
		flex-direction: column;
		gap: 10px;
		border-bottom: 1px solid rgba(45, 47, 46, 0.5);
		padding-bottom: 30px;
		margin: 210px 0 50px;
		h2 {
			text-transform: none;
			font-weight: 700;
			margin-top: 10px;
		}
	}
	.items {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 40px 9px;
		margin-top: 80px;
		.product-item {
			background: #F1F2EF;
			aspect-ratio: 442 / 464;
		}
	}
	.clear-all {
		font-size: 14px;
		line-height: 1;
		margin: 40px 0 60px;
		border-radius: 3px;
		border: 1px solid var(--text-color);
		padding: 10px 24px;
		text-transform: uppercase;
		background-color: transparent;
		transition: background-color 0.2s linear;
	}
	.empty {
		margin: 30px 0 50px;
		p {
			margin-bottom: 30px;
		}
		div {
			font-size: 14px;
			font-weight: 300;
			max-width: 500px;
			svg {
				width: 12px;
				fill: var(--text-color);
			}
			a {
				font-size: inherit;
				line-height: inherit;
				color: #b07429;
				font-weight: inherit;
			}
		}
	}
}
@media screen and (max-width: 1500px) {
	header {
		padding-bottom: 20px;
	}
	header .wrapper,
	.scrollPage .wrapper {
		width: calc(100% - 80px);
		padding: 0;
	}
	.favorites {
		> .top {
			margin-top: 190px;
		}
		.items {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}
@media screen and (max-width: 1279px) {
	header > .wrapper {
		padding-bottom: 6px !important;
	}
	header .wrapper,
	.scrollPage .wrapper {
		width: calc(100% - 40px);
	}
	.favorites .items .product-item {
		aspect-ratio: 237 / 270;
	}
	.favorites .top p {
		font-size: 12px;
	}
}
@media screen and (max-width: 767px) {
	header .bottom-menu .body {
		margin-top: 10px !important;
	}
	.scrollPage .wrapper {
		width: calc(100% - 20px);
	}
	.favorites {
		> .top {
			margin-top: 225px;
		}
		.items {
			grid-template-columns: repeat(2, 1fr);
		}
		.empty {
			p {
				font-size: 14px;
			}
			div {
				font-size: 12px;
			}
		}
	}
}
@media screen and (hover:hover) {
	.favorites .clear-all:hover {
		background-color: var(--hover);
	}
	.favorites .empty div a:hover {
		color: var(--hover);
	}
}