@import "/css/hay.css";

:root {
	/* Primary and secondary colours */
	--primary: var(--rich-green-1);
	--primary-bright: var(--light-blue);
	--primary-light: var(--light-blue-tint);
	--secondary: var(--light-blue);
	/* Foreground text colour for high contrast with background */
	--primary-text: #FFF;
	--secondary-text: #000;
}

.btn-primary:hover, a.btn-primary:hover {
	color: var(--primary-text);
	background-color: var(--rich-blue);
	border-color: var(--rich-blue);
}

a:focus, a:hover {
	color: var(--rich-blue);
}

a.pagenum, a.pagenext, a.pagenext:visited {
	color: var(--primary);
}

a.pageprev:hover, a.pagenext:hover {
	color: var(--rich-blue);
}

p.related {
	background: var(--primary);
	text-align: center;
	color: var(--primary-text);
}

.price {
	padding-bottom: 1rem;
	min-width: 100%;
	padding-right: 1rem;
	border-top: 1px solid #EDEDED;
	padding-top: 0.5rem;
}

.variantname {
	display: block;
	color: var(--primary);
	font-weight: 600;
}

.card {
	background: var(--primary-light);
}

@media (min-width: 992px) {
	.card {
		width: 85%;
	}
}