:root {
	--vault-product__card-color--white: #ffffff;
	--vault-product__card-color--lightgrey: #f7f7f7;
	--vault-product__card-color--midgrey: #707070;
	--vault-product__card-color--deepgrey: #161616;
	--vault-product__badge--bg: #1974b9;
	--vault-product__card-cta: #d54141;
	--vault-product__card-cta--hover: #860808;
	--vault-product__coupon-code--bg: #fffef7;
	--vault-product__coupon-code--border: #535353;
	--vault-product__coupon-code--border-hover: #e6e0d0;
	--vault-product__card-pros: #15663e;
	--vault-product__card-cons: #dc3545;
	--vault-product__card-font--proxima: proxima-nova, sans-serif;
	--vault-product__card-font--redwing: Redwing-Bold, serif;
	--vault-product__card--shadow: 0 0 .625rem rgba(0, 0, 0, .16);
	--vault-product__card-cta--shadow: 0 .1875rem .125rem rgba(0, 0, 0, .33);
	--vault-product__card-cta--padding: .75rem;
}

.vault-product__card {
	background-color: var(--vault-product__card-color--white);
	box-shadow: var(--vault-product__card--shadow);
	margin: 1.5rem auto;
	overflow: hidden;
	padding: 0;
	width: 93.75%;
	max-width: 66.625rem;
}

.vault-product__card a {
	font-size: inherit;
}

.vault-product__card-badge {
	background-color: var(--vault-product__badge--bg);
	color: var(--vault-product__card-color--white);
	display: inline-block;
	font-family: var(--vault-product__card-font--proxima);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 1.5rem;
	padding: .5rem 2rem;
	text-align: center;
	text-transform: uppercase;
}

.vault-product__card-name {
	color: var(--vault-product__card-color--deepgrey);
	display: block;
	font-family: var(--vault-product__card-font--proxima);
	font-size: 2rem;
	line-height: 1.25;
	margin: 0 auto 1rem;
	padding: 0 var(--vault-product__card-cta--padding);
	text-align: left;
}

.vault-product__card-name a {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: inherit;
	transition: none;
	text-shadow: none;
}
.vault-product__card-name a:hover,
.vault-product__card-name a:active,
.vault-product__card-name a:focus {
	color: #000000;
	text-decoration: none;
	text-shadow: none;
}

.vault-product__card-image--link {
	display: block;
	height: auto;
	margin: 0 auto 2rem;
	width: 100%;
}

.vault-product__card-image--link--contain {
	align-self: flex-start;
}

.vault-product__card-image {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.vault-product__card-info {
	padding: 0 var(--vault-product__card-cta--padding);
	align-self: center;
}

.vault-product__card-score {
	font-family: var(--vault-product__card-font--proxima);
	font-size: .8125rem;
	font-weight: 700;
	margin: 0 auto 2rem;
	text-align: center;
	text-transform: uppercase;
}

.vault-product__card-score--stars {
	align-items: flex-start;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	width: 100%;
}

.vault__star {
	display: block;
	width: 28px;
}

.vault-product__card-cta--wrapper {
	display: flex;
	flex-flow: column nowrap;
	margin: 2rem auto;
}

.vault-product__card-cta {
	background-color: var(--vault-product__card-cta);
	box-shadow: var(--vault-product__card-cta--shadow);
	color: var(--vault-product__card-color--white);
	display: block;
	font-family: var(--vault-product__card-font--proxima);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .04rem;
	line-height: 1.25;
	padding: 1rem;
	text-align: center;
	text-decoration: none;
	text-shadow: unset;
	text-transform: uppercase;
	transition: background-color 300ms ease-out;
}

.vault-product__card-cta:active,
.vault-product__card-cta:focus,
.vault-product__card-cta:hover {
	background-color: var(--vault-product__card-cta--hover);
	border-color: var(--vault-product__coupon-code--border-hover);
	color: var(--vault-product__card-color--white);
	text-decoration: none;
	text-shadow: none;
}

.vault-product__card-cta--coupon-code {
	background-color: var(--vault-product__coupon-code--bg);
	border: .1875rem dashed var(--vault-product__coupon-code--border);
	color: var(--vault-product__card-color--deepgrey);
	display: block;
	font-family: var(--vault-product__card-font--proxima);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .013125rem;
	line-height: 1.2;
	padding: 1.375rem 3.4375rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color 300ms ease-out;
}

.vault-product__card-cta--coupon-code strong {
	font-size: 1.125rem;
	font-weight: 700;
}

.vault-product__card-cta--coupon-code:active
.vault-product__card-cta--coupon-code:focus
.vault-product__card-cta--coupon-code:hover {
	border-color: var(--vault-product__coupon-code--border-hover);
}

.vault-product__card-highlights {
	margin: 1.5rem 0 1.5rem;
}

.vault-product__card-highlights--heading {
	color: var(--vault-product__card-color--deepgrey);
	font-family: var(--vault-product__card-font--proxima);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .0125rem;
	line-height: 1.2;
	margin: 0 0 1rem;
	text-align: left;
	text-transform: uppercase;
}

.vault-product__card-highlights--info {
	color: var(--vault-product__card-color--deepgrey);
	font-family: var(--vault-product__card-font--proxima);
	font-size: .875rem;
	font-weight: normal;
	line-height: 1.2;
	margin: 0 0 .5rem;
	text-align: left;
}

.vault-product__card-highlights--info ul,
.vault-product__card-highlights--info ol {
	list-style-position: inside;
	padding-left: 0;
}

.vault-product__card-highlights--info li > p {
	display: inline;
}

.vault-product__card-highlights--extra {
	align-items: center;
	color: var(--vault-product__card-color--deepgrey);
	column-gap: .625rem;
	display: flex;
	flex-flow: row nowrap;
	font-size: .875rem;
}

.vault-product__card-highlights--extra img {
	height: 1.125rem;
	object-fit: contain;
	width: 1.125rem;
}

.vault-product__card-accordion {
	margin: 0 auto;
}

.vault-product__card-accordion--header {
	background-color: var(--vault-product__card-color--lightgrey);
	border-bottom: .1875rem solid var(--vault-product__card-color--deepgrey);
	display: flex;
	font-family: var(--vault-product__card-font--proxima);
	font-size: 1.5rem;
	justify-content: space-between;
	line-height: 1.25;
	margin: 0;
	padding: 1rem var(--vault-product__card-cta--padding);
	position: relative;
	text-align: left;
}

.vault-product__card-accordion--header::after {
	content: '\276f';
	height: 1em;
	text-align: center;
	transition: all 300ms;
	width: 1em;
}

.vault-product__card-accordion--header.open::after {
	transform: rotate(90deg);
}

.vault-product__card-accordion--container {
	max-height: 0;
	overflow: hidden;
	padding: 0 var(--vault-product__card-cta--padding);
	transition: all ease 300ms;
}

.vault-product__card-accordion--container.open {
	max-height: 1000vh;
	padding-bottom: 3rem;
}

.vault-product__card-pros h4,
.vault-product__card-cons h4 {
	font-family: var(--vault-product__card-font--proxima);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 2rem 0 1rem;
}

.vault-product__card-pros h4 {
	color: var(--vault-product__card-pros);
}

.vault-product__card-cons h4 {
	color: var(--vault-product__card-cons);
}

.vault-product__card-pros ul,
.vault-product__card-cons ul {
	margin: 0 auto;
	padding: 0;
}

.vault-product__card-pros li,
.vault-product__card-cons li {
	align-items: start;
	display: flex;
	flex-flow: row nowrap;
	font-size: 1rem;
	line-height: 1.25;
	margin: 0 auto 1rem;
}

.vault-product__card-pros li::before {
	content: url(../assets/marker-check.png);
	margin-right: .5rem;
	transform: scale(.75);
}

.vault-product__card-cons li::before {
	content: url(../assets/marker-cross.png);
	margin-right: .5rem;
	transform: scale(.75);
}

.vault-product__card-bottomline {
	font-size: 1.125rem;
	margin: 1.5rem 0 0;
}

@media all and ( min-width: 48rem ) {

	:root {
		--vault-product__card-cta--padding: 1rem;
	}

	.vault-product__card-name {
		font-size: 2.375rem;
	}

	.vault-product__card-layout {
		align-items: stretch;
		column-gap: 1.5rem;
		display: flex;
		flex-flow: row nowrap;
		margin-bottom: 2rem;
		padding: 0 1.5rem 0 0;
		width: 100%;
	}

	.vault-product__card-image--link {
		margin: 0;
		width: 50%;
	}

	.vault-product__card-info {
		padding: 0;
		width: 50%;
	}

	.vault-product__card-accordion--container {
		column-gap: 1rem;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}

	.vault-product__card-cons,
	.vault-product__card-pros {
		width: 50%;
	}

}

@media all and ( min-width: 80rem ) {

	:root {
		--vault-product__card-cta--padding: 3rem;
	}

	.vault-product__card-name {
		font-size: 2.375rem;
	}

}