@import '/css/page/page.css';
@import '/css/menu/menu-item/menu-item.css';

.discount-info__title {
	margin-bottom: 24px;
	color: var(--neutral-900, #080808);
}

/* .whitebox из page.css перебивает ширину .page-sticky — навигация растягивалась на половину строки */
.discount-info__nav.whitebox {
	flex-shrink: 0;
	width: 300px;
}

.discount-info__nav-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.discount-info__nav-link.menu-item {
	width: 100%;
	height: 38px;
	padding: 0 10px;
	color: var(--neutral-900, #080808);
}

.discount-info__nav-link svg {
	flex-shrink: 0;
	color: var(--300-grey);
}

.discount-info__nav-link--active {
	background: var(--50);
}

.discount-info__content {
	min-width: 0;
}

.discount-info__section {
	display: flex;
	flex-direction: column;
	gap: 32px;
	scroll-margin-top: 140px;
}

/* без JS показываются все разделы подряд, с JS — только выбранный в навигации */
.discount-info--tabs .discount-info__section:not(.discount-info__section--active) {
	display: none;
}

.discount-info__block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.discount-info__section h2,
.discount-info__section h3 {
	color: var(--neutral-900, #080808);
}

.discount-info__section p {
	color: var(--500-black);
}

@media (max-width: 768px) {
	.discount-info__wrap.wrap {
		padding: 0;
	}

	.discount-info__nav.whitebox {
		width: 100%;
	}

	.discount-info .go-back {
		margin-bottom: 16px;
		padding: 0 16px;
	}

	.discount-info__title {
		margin-bottom: 16px;
		padding: 0 16px;
	}

	.discount-info .page-with-sticky {
		gap: 16px;
	}
}