-
.k-product-sheet .k-article {margin: 0;}
-
-
.k-product-sheet .product-data {clear: both;}
-
-
.k-product-sheet .price-data {
-
text-align: center;
-
margin: 2em 0;
-
}
-
-
.k-product-sheet .buy-zone {
-
text-align: center;
-
background: #EEE;
-
padding: 0.5em 1em 0.8em;
-
margin: 2em 0;
-
}
-
-
.k-product-sheet .availability {margin-bottom: 0.5em;}
-
-
@media screen and (min-width: 780px) {
-
.k-product-sheet {position: relative;}
-
-
.k-product-sheet header {
-
position: absolute;
-
width: auto;
-
top: 0;
-
left: 35%;
-
}
-
.k-product-sheet .p-name {font-size: 2em;}
-
.k-product-sheet .photo-data {
-
float: left;
-
width: 35%;
-
margin-bottom: 2em;
-
}
-
.k-product-sheet .product-data {
-
clear: none;
-
float: left;
-
width: 60%;
-
padding-top: 3em;
-
}
-
.k-product-sheet .price-data {
-
float: left;
-
width: 40%;
-
text-align: left;
-
}
-
.k-product-sheet .price-data p {font-size: 1.5em;}
-
-
.k-product-sheet .buy-zone {
-
float: right;
-
width: 40%;
-
text-align: right;
-
background: transparent;
-
padding: 0.5em 1em 0.8em;
-
margin: 2em 0;
-
}
-
.k-product-sheet .availability {
-
font-size: 0.8em;
-
margin-bottom: 1em;
-
}
-
}
-
In order to style the catalog products correctly, be sure to have on your style-sheet the code for the product template also.