.product-card {
	width: 100%;

	@include breakpoint-deprecated( '>480px' ) {
		min-width: 460px;
	}
	.plan-price {
		margin-right: 0.333em;

		&,
		& * {
			@include breakpoint-deprecated( '>660px' ) {
				font-size: $font-body-small;
				vertical-align: baseline;
			}
		}
	}
}
// Header
.product-card__header {
	margin: -16px -16px 16px;
	padding: 16px 0;
	border-bottom: solid 2px var( --color-jetpack );

	@include breakpoint-deprecated( '>480px' ) {
		margin: -24px -24px 24px;
	}

	@include breakpoint-deprecated( '>660px' ) {
		display: flex;
		flex-flow: row wrap;
		align-items: baseline;
	}

	.plan-price,
	.plan-price * {
		@include breakpoint-deprecated( '>660px' ) {
			font-weight: 600;
		}
	}

	.product-card__billing-timeframe {
		width: 100%;

		@include breakpoint-deprecated( '>660px' ) {
			width: auto;
			font-size: $font-body-extra-small;
			font-weight: 600;
		}
	}
}

.product-card__header-primary,
.product-card__secondary {
	padding-left: 40px;
	padding-right: 40px;

	@include breakpoint-deprecated( '>660px' ) {
		padding-left: 16px;
		padding-right: 16px;
	}
}

.product-card__header-primary {
	display: flex;
	justify-content: center;

	@include breakpoint-deprecated( '>660px' ) {
		flex-grow: 1;
	}

	.product-card:not( .has-secondary-header ) & {
		justify-content: center;
	}

	.gridicon {
		align-self: center;
		margin: 0 8px 0 -26px;

		@include breakpoint-deprecated( '>660px' ) {
			width: 16px;
			height: 16px;
			margin-left: 0;
		}
	}
	.gridicons-checkmark {
		fill: var( --color-jetpack );
	}
}

.product-card__secondary {
	margin-top: 16px;
	text-align: center;
}

.product-card__title {
	font-size: $font-title-small;
	line-height: 24px;

	em,
	strong,
	span {
		font-style: italic;
	}
}

.product-card__subtitle {
	font-size: $font-body-small;
	line-height: 20px;
	font-style: italic;
	color: var( --color-text-subtle );
}

// Price group
.product-card__price-group {
	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
}

.product-card__billing-timeframe {
	font-size: $font-body-small;
	font-weight: 400;
	line-height: 13px;
	color: var( --color-text-subtle );

	@include breakpoint-deprecated( '<660px' ) {
		font-style: italic;
	}

	@include breakpoint-deprecated( '>960px' ) {
		font-size: $font-body-extra-small;
	}
}

// Adjust price group styles when part of product option
.product-card__option {
	.plan-price,
	.plan-price * {
		font-size: $font-body;
		font-weight: 400;
		vertical-align: baseline;

		@include breakpoint-deprecated( '>960px' ) {
			font-size: $font-body-small;
		}
	}

	.plan-price.is-discounted {
		margin-right: 4px;
	}

	.plan-price.is-discounted,
	.plan-price.is-discounted .plan-price__currency-symbol {
		color: var( --color-neutral-70 );
	}
}

// Description
.product-card__description {
	font-size: $font-body-small;
	line-height: 20px;
	color: var( --color-text-subtle );

	p:last-child {
		margin: 0;
	}
}

// Product options
.product-card__options {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;

	@include breakpoint-deprecated( '>480px' ) {
		flex-flow: row wrap;
	}
}

.product-card__options-label {
	margin-top: 16px;
	font-size: $font-body-small;
	text-align: center;
	color: var( --color-text-subtle );

	@include breakpoint-deprecated( '>960px' ) {
		flex: 0 0 100%;
	}

	.info-popover {
		margin-left: 4px;
		vertical-align: middle;
	}
}

// We need a higher specificity here to override .form-label styles
.product-card__option.form-label {
	display: flex;
	flex: 1;
	flex-direction: row;
	align-items: center;
	margin: 16px 0 8px;
	padding: 16px;
	border: 1px solid var( --color-neutral-20 );
	border-radius: 2px;
	cursor: pointer;

	@include breakpoint-deprecated( '>480px' ) {
		flex-direction: column;
	}

	&.is-selected {
		// Matches the feature highlight on the plans tables
		background-color: color-mix( in srgb, var( --color-primary ) 10%, transparent );
		border-color: var( --color-primary );
	}

	& + .product-card__option.form-label {
		margin-top: 0;

		@include breakpoint-deprecated( '>480px' ) {
			margin-top: 16px;
			margin-left: 8px;
		}
	}
}

.product-card__option-description {
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	margin-left: 8px;

	@include breakpoint-deprecated( '>480px' ) {
		align-items: center;
		margin-top: 6px;
		margin-left: 0;
	}

	@include breakpoint-deprecated( '>960px' ) {
		margin-top: 0;
	}
}

.product-card__radio.form-radio {
	@include breakpoint-deprecated( '>960px' ) {
		margin-bottom: 10px;
	}
}

.product-card__option-name {
	margin-bottom: 2px;
	font-size: $font-body-small;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

// Action
.product-card__action {
	margin: 16px auto;
	text-align: center;
}

.product-card__action-intro {
	margin-bottom: 12px;
	font-size: $font-body-small;
	font-weight: 600;
	color: var( --color-neutral-90 );
}

.product-card__action-button {
	width: 100%;
	max-width: 320px;
}

// Promo nudge
.product-card__promo-nudge {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	margin: 24px auto 8px;

	& + .product-card__options-label {
		margin-top: 8px;
	}
}

.product-card__promo-nudge-badge {
	box-sizing: border-box;
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	width: 92px;
	height: 92px;
	padding: 12px 16px 16px;
	transform: rotate( -10deg );
	color: var( --studio-white );
	background: url( /calypso/images/illustrations/promo-star.svg ) no-repeat center;
	background-size: contain;
	font-size: $font-body-small;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}

.product-card__promo-nudge-text {
	width: 100%;
	padding: 7px 24px;
	border-radius: 16px;
	background-color: var( --color-neutral-0 );
	color: var( --color-text-subtle );
	font-size: $font-body-extra-small;
	line-height: 18px;
	text-align: left;
	text-transform: uppercase;

	strong {
		display: block;
		color: var( --color-text );
		font-size: $font-body-small;
		font-weight: 600;
		text-transform: none;
	}

	.has-badge & {
		margin-left: -46px;
		padding-left: 62px;
	}
}

// Loading state
.product-card.is-placeholder .product-card__price-group {
	&::before {
		@include placeholder( --color-neutral-10 );
		content: '\00a0';
		display: inline-block;
		width: 150px;
		height: 32px;
		margin: 0 0 4px;

		@include breakpoint-deprecated( '>660px' ) {
			height: 18px;
		}
	}

	.product-card__billing-timeframe {
		@include breakpoint-deprecated( '>660px' ) {
			display: none;
		}
	}

	.product-card__billing-timeframe::before {
		@include placeholder( --color-neutral-10 );
		content: '\00a0';
		display: inline-block;
		width: 100px;
		height: 11px;
	}
}

.product-card.is-placeholder .product-card__option {
	.product-card__price-group::before {
		width: 125px;
		height: 16px;
		margin: 0;

		@include breakpoint-deprecated( '>660px' ) {
			margin: 5px 0 0;
		}
	}

	.product-card__billing-timeframe {
		display: none;
	}
}
