.layout {
border: 1px solid {{design.borderColor.toColor()}};
}
.productImageContainer {
border: 1px solid {{design.borderColor.toColor()}};
}
.header {
border-color: {{design.borderColor.toColor()}};
}
.background {
background-color: {{design.bgColor.toColor()}};
opacity: {{design.bgAlpha}};
}
.background.gradient {
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5), {{design.bgColor.toColor()}});
background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5), {{design.bgColor.toColor()}});
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from({{design.bgColor.toColor()}}), to(rgba(255,255,255,0.5)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5), {{design.bgColor.toColor()}});
background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), {{design.bgColor.toColor()}});
}
.bg-image.image-bg {
background-image: url({{design.bgImageUrl}});
opacity: {{design.bgAlpha}};
}
.background.image-bg {
background-color: transparent;
}
.selectedThumb .productImageContainer {
border: 1px solid {{design.glowColor.toColor()}};
}
.button {
background-color: {{design.btnColor.toColor()}};
color: {{design.txtColorCta.toColor()}};
}
.button:hover {
background-color: {{design.btnRollColor.toColor()}};
}
.button.text:hover {
background: none;
}
.headline {
color: {{design.txtColorTitle.toColor()}};
font-size: {{design.headlineSize}}px;
}
.productPrice {
color: {{design.txtColorPrice.toColor()}};
font-size: {{design.priceSize}}px;
}
.productPriceStrike {
color:{{design.txtColorPrice.toColor()}};
}
.productSalePrice {
color: {{design.txtColorPrice.toColor()}};
font-size: {{design.priceSize}}px;
}
.productName {
color: {{design.txtColorProduct.toColor()}};
font-size: {{design.nameSize}}px;
}
{{product.name}}
{{headline.cta}}