body:not(
	.state-product,
	.state-price,
	.state-discount,
	.state-move,
	.state-sold
) .styleItemBox {
	padding: 0; margin: 0;
}
.styleItemBox {
	opacity: 0; max-height: 0;
	transform: translateX(-20px);
	/* should do some tweeking for the below */
	transition:
	opacity var(--baseAnimationLength),
	max-height var(--baseAnimationLength) cubic-bezier(1,0,0,1),
	padding var(--baseAnimationLength),
	margin var(--baseAnimationLength),
	transform var(--baseAnimationLength);
	overflow: hidden;
}
body.state-product .styleItemBox,
body.state-price .styleItemBox,
body.state-discount .styleItemBox,
body.state-move .styleItemBox,
body.state-sold .styleItemBox {
	opacity: 1; max-height: 50vh;
	transform: translateX(0px);
}

/* text styling in item box */
.styleItemId {}
.styleItemTitle {
	font-size: 1.1em;
	line-height: 1.3;
}
.styleItemDescription {
	display: block;
	font-size: 0.8em;
	line-height: 1.3;
	font-weight: 400;
}