/* BPL affiliate shortcode layouts CSS */

/* NOTE: when CSS is changed, be sure to update stylesheet version in the querystring in the SS register script in plugin code, i.e., css/bpl-affiliate-shortcodes.css?v=11111 */

/* ROW */
.affiliate-row .flex{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 2px solid #aaa;
}
.affiliate-row .photo{
	margin-right: 1em;
	width: 120px !important;
}
.affiliate-row .stats,
.affiliate-row .description,
.affiliate-row .statement{
	flex: 1;
	margin-right: .5em;
}
.affiliate-row .button{
	margin-top: 1em;
}
.affiliate-row .productname {
	margin-bottom: 0.5em !important;
	font-weight: bold !important;
}

@media screen and (max-width: 740px) {
	.affiliate-row .flex{
		flex-direction: column;
	}
	.affiliate-row .stats{
		padding: 1em;
		background-color: #fff;
		margin-bottom: 2em;
	}
}

/* COMPARE */
.affiliate-compare .flex{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid #eee;
}
.affiliate-compare .photo{
	margin-right: .5em;
}
.affiliate-compare .seller,
.affiliate-compare .price{
	flex: 2;
	margin-right: .5em;
	padding-left: .5em;
}
.affiliate-compare .buy{
	flex: 1;
	margin-right: .5em;
}
.affiliate-compare.header .flex{
	padding: .5em .5em .5em 0;
	background-color: #eee;
	border-bottom: 2px solid #ccc;
}

@media screen and (max-width: 740px) {
	.affiliate-compare .buy,
	.affiliate-compare .price,
	.affiliate-compare .seller{
		flex: 1;
	}
}

.affiliate-row .sale,
.affiliate-compare .sale{
	color: #f96e5b !important;
}