h1.title {
	margin-bottom: 20px;
	gap: 10px;
	padding-left: 0;
	max-width: 353px;
}
.promo + .goods {
	background: var(--grey-1);
}
.tab-box {
	display: flex;
	gap: 10px;
	border-bottom: 1px solid var(--grey-4);
	margin-bottom: 40px;
	overflow-x: auto;
	&::-webkit-scrollbar {
		display: none;
	}
	button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
		white-space: nowrap;
		letter-spacing: 0.16px;
		height: 39px;
		transition: color .2s linear;
		border-bottom: 3px solid rgba(0, 0, 0, 0);
		&.active {
			color: var(--black);
			font-weight: 600;
			border-bottom-color: var(--ff-2-f-00);
		}
	}
}
.bottom {
	margin-bottom: 100px;
	> .tab {
		display: none;
		> .count {
			border-radius: 6px;
			background: var(--ff-2-f-00);
			color: #FFF;
			font-weight: 600;
			letter-spacing: 0.16px;
			padding: 5px 10px 4px;
			width: fit-content;
			margin-bottom: 10px;
		}
		> .filters {
			border-radius: 12px;
			background-color: var(--white);
			padding: 3px;
			display: flex;
			flex-wrap: wrap;
			gap: 3px;
			margin-bottom: 40px;
			button {
				padding: 14px;
				border-radius: 12px;
				display: flex;
				align-items: center;
				gap: 10px;
				background-color: inherit;
				letter-spacing: 0.16px;
				transition: background-color .2s linear, color .2s linear;
				span {
					font-size: inherit;
					letter-spacing: inherit;
					color: var(--grey-4);
				}
				&.selected {
					background-color: var(--ff-2-f-00);
					color: var(--white);
				}
			}
		}
		.product-list {
			container: products-container / inline-size;
		}
		.goods-list {
			display: none;
			grid-template-columns: repeat(4, 1fr);
			grid-auto-rows: 1fr;
			gap: 10px;
			&.selected {
				display: grid;
			}
			.item {
				position: relative;
				border-radius: 20px;
				background: var(--white);
				border: 6px solid var(--white);
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: box-shadow .2s linear;
				gap: 10px;
				img {
					height: 110px;
					width: auto;
					aspect-ratio: 200/110;
					object-fit: contain;
				}
				a {
					&:empty {
						position: absolute;
						inset: 0;
					}
					&:not(:empty) {
						position: relative;
						z-index: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 4px;
						height: 58px;
						width: 100%;
						font-size: 20px;
						border-radius: 14px;
						background: var(--white-grey);
						&::after {
							content: '\e903';
							font: 100 1cap / 1 'icon';
							color: inherit;
						}
					}
				}
			}
		}
		.promotions-list {
			display: flex;
			flex-direction: column;
			gap: 10px;
			.promotion {
				display: grid;
				grid-template-columns: calc(50% - 5px) calc(50% + 5px);
				border: 10px solid var(--white);
				border-radius: 30px;
				overflow: hidden;
				> img {
					width: calc(100% + 30px);
					height: 100%;
					object-fit: cover;
				}
				.right {
					position: relative;
					z-index: 1;
					border-radius: 20px;
					background: var(--white-grey);
					padding: 30px;
					.date {
						color: var(--black-grey);
						font-size: 14px;
						font-weight: 200;
						line-height: 125%;
						margin-bottom: 12px;
					}
					.title {
						background: none;
						gap: 20px;
						width: fit-content;
						font-size: 24px;
						padding: 0;
						margin-bottom: 10px;
						text-decoration: underline;
						text-decoration-color: var(--ff-2-f-00);
						&::before {
							display: none;
						}
						&::after {
							width: 16px;
							height: 16px;
						}
					}
					.content {
						display: flex;
						flex-direction: column;
						gap: 4px;
						> :where(div, p) * {
							font-size: inherit;
							line-height: inherit;
							letter-spacing: inherit;
							color: inherit;
							font-weight: inherit;
						}
						> *:last-child {
							margin-top: 40px;
						}
						p {
							letter-spacing: 0.16px;
							&:not(:last-child) {
								margin-bottom: 16px;
							}
							a {
								color: var(--ff-2-f-00);
							}
						}
						> div {
							display: flex;
							gap: 4px;
							font-weight: 200;
							&::before {
								content: '';
								display: flex;
								width: 6px;
								height: 6px;
								margin: 7px;
								border-radius: 50%;
								background-color: var(--ff-2-f-00);
								pointer-events: none;
								flex-shrink: 0;
							}
						}
					}
				}
			}
		}
		&.active {
			display: block;
		}
	}
}
@container products-container (width < 1160px) {
	.bottom > .tab .goods-list {
		grid-template-columns: repeat(3, 1fr);
		.pre-card {
			--count: 3;
		}
	}
}
@container products-container (width < 600px) {
	.bottom > .tab .goods-list {
		grid-template-columns: repeat(2, 1fr);
		.pre-card {
			--count: 2;
		}
	}
}
@container products-container (width < 370px) {
	.bottom > .tab .goods-list {
		grid-template-columns: 1fr;
		.pre-card {
			--count: 1;
		}
	}
}
footer {
	margin-top: 100px;
}
@media screen and (max-width: 1152px) {
	.tab-box {
		margin-bottom: 30px;
		button {
			font-size: 14px;
			letter-spacing: 0.14px;
			height: 37px;
		}
	}
	.bottom > .tab .promotions-list .promotion {
		display: flex;
		flex-direction: column;
		> img {
			max-height: 300px;
			width: 100%;
		}
		.right {
			margin-top: -20px;
			padding: 20px;
		}
	}
}
@media screen and (max-width: 768px) {
	h1.title {
		width: fit-content;
		margin-bottom: 10px;
		padding: 8px 10px 8px 0;
	}
	.bottom {
		margin-bottom: 50px;
		> .tab {
			> .count {
				font-size: 14px;
				letter-spacing: 0.14px;
				padding: 6px 10px 5px;
			}
			> .filters {
				margin-bottom: 30px;
				button {
					padding: 10px 11px;
					border-radius: 10px;
					font-size: 14px;
					letter-spacing: 0.14px;
				}
			}
			.promotions-list .promotion {
				.right .title {
					align-items: start;
					&::after {
						margin: 6px;
					}
				}
			}
		}
	}
	footer {
		margin-top: 0;
	}
}
@media (hover: hover) {
	.tab-box button:hover {
		color: var(--ff-2-f-00);
	}
	.tab {
		.filters button:hover {
			background-color: var(--white-grey);
		}
		.item:hover {
			box-shadow: 0px 50px 30px 0px rgba(0, 0, 0, 0.03), 0px 22px 22px 0px rgba(0, 0, 0, 0.04);
		}
	}
}