.wrapper {
	padding: calc(var(--spacing-base) * 8);
	position: relative;
}

.is-card {
	background-color: var(--jp-white);
	border: 1px solid var(--jp-gray);
	border-radius: var(--jp-border-radius);
	box-shadow: 0 2px 6px var(--product-card-shadow), 0 1px 2px var(--product-card-shadow);

	.card-header {
		border-radius: var(--jp-border-radius) var(--jp-border-radius) 0 0;
	}
}

.card-header {
	display: flex;
	align-items: center;
	background: var(--jp-black);
	color: var(--jp-white);
	padding: calc(var(--spacing-base) / 2) var(--spacing-base);
	line-height: calc(var(--spacing-base) * 3);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
}

.card-container {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.product-bundle-icon {
	fill: var(--jp-white);
	margin-right: var(--spacing-base);
}

.product-bundle-icons,
.product-icon {
	display: flex;
	align-items: center;
	margin-bottom: calc(var(--spacing-base) * 4);
}

.plus-icon {
	fill: rgb(140, 143, 148);
	height: 24px;
	line-height: 24px;
}

.features {
	margin: 0;
	padding: 0;
	flex-grow: 1;
	margin-bottom: calc(var(--spacing-base) * 2);

	li {
		list-style: none;
		display: flex;
		align-items: flex-start;
		margin-bottom: var(--spacing-base);
	}

	.check {
		fill: var(--jp-green-primary);
		margin-right: var(--spacing-base);
		flex-shrink: 0;
	}
}

.product-has-required-plan {
	display: flex;
	justify-content: center;
	align-items: center;

	svg {
		margin-right: var(--spacing-base);
	}
}

.add-button {
	width: 100%;
	justify-content: center;

	&:global(.is-primary):disabled {
		opacity: 1;
		background-color: var(--jp-black);
	}
}
