.container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-end;
}

.price-container {
	display: flex;
	align-items: flex-start;
	flex-grow: 2;
	flex-basis: 0;

	.promo-label {
		margin-left: auto;
	}
}

.price {
	display: inline-flex;
	align-items: flex-start;
	position: relative;
	flex: 0 0 auto;

	&:first-child {
		margin-right: calc(var(--spacing-base) * 2);
	}

	&.is-not-off-price {
		color: var(--jp-gray-20);

		&::after {
			content: " ";
			display: block;
			width: 100%;
			height: 3px;
			background: var(--jp-red);
			border-radius: var(--jp-border-radius);
			position: absolute;
			top: 50%;
			margin-top: -2px;
			pointer-events: none;
		}
	}
}

.footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: calc(var(--spacing-base) * 3);
}

.legend {
	color: var(--jp-gray-40);
	font-size: var(--font-body-small);
	line-height: 20px;

	&::after {
		content: "\200B"; // Pseudo element to keep height
	}
}

.promo-label {
	background-color: var(--jp-yellow-10);
	border-radius: 4px;
	padding-left: var(--spacing-base);
	padding-right: var(--spacing-base);
	font-weight: 600;
	font-size: 13px;
	margin-left: var(--spacing-base);
}

.symbol {
	font-weight: 400;
}

.simple {
	display: grid;
	grid-gap: 8px;
	margin-bottom: 24px;

	.currentPrice {
		display: flex;

		> p {
			font-weight: 500;
			font-size: 32px;
			line-height: 32px;
			margin-right: 8px;
		}

		> div {
			line-height: 16px;
			margin: auto 0 0;
			color: var(--jp-gray-50);
		}
	}

	.originalPrice {
		display: flex;

		> p {
			font-weight: 400;
			margin-right: 8px;
			color: var(--jp-gray-40);
			font-size: 21px;
			line-height: 35px;

			&::after {
				background: var(--jp-gray-40);
			}
		}

		> div {
			line-height: 16px;
			margin: auto 0 0;
			color: var(--jp-gray-50);
		}
	}
}
