store/blocks/pdp/product.jsonc

@@ -107,12 +107,10 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",

styles/css/vtex.product-identifier.css

@@ -1,3 +1,27 @@
-.product-identifier--productReference {
+/*
-  margin-bottom: 1rem;
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.product-identifier__label,
+.product-identifier__separator {
+  display: none;
+}
+
+.product-identifier__value {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.48);
+}
+
+.product-identifier {
+  display: flex;
+  justify-content: right;
+  margin-top: 8px;
+  margin-bottom: 24px;
 }

styles/css/vtex.product-price.css

@@ -1,79 +1,22 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
-}
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
-.sellingPrice {
+*/
-  color: #3f3f40;
+/* Media Query M3 */
-  font-size: 1.25rem;
+/* Grid breakpoints */
-}
+.sellingPrice--hasListPrice {
-
-.sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
 }
 
 .installments {
-  color: #727273;
+  font-weight: 700;
-  margin-bottom: 1rem;
+  font-size: 16px;
-}
+  line-height: 22px;
-
+  color: #929292;
-.savings {
-  font-weight: 500;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 }

styles/css/vtex.store-components.css

@@ -64,3 +64,33 @@
     max-width: 500px;
   }
 }
+
+.productBrand--quickview {
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
+}
+
+.productNameContainer--quickview {
+  text-align: right;
+}
+
+/*.productDescriptionContainer {
+
+
+}*/
+.productDescriptionTitle {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+}
+
+.productDescriptionText {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}

styles/sass/pages/product/vtex.product-identifier.scss

@@ -0,0 +1,18 @@
+.product-identifier__label,
+.product-identifier__separator {
+  display: none;
+}
+
+.product-identifier__value {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.48);
+}
+
+.product-identifier {
+  display: flex;
+  justify-content: right;
+  margin-top: 8px;
+  margin-bottom: 24px;
+}

styles/sass/pages/product/vtex.product-price.scss

@@ -0,0 +1,13 @@
+.sellingPrice--hasListPrice {
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+}
+
+.installments {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}

styles/sass/pages/product/vtex.store-components.scss

@@ -43,3 +43,34 @@
     max-width: 500px;
   }
 }
+
+.productBrand--quickview {
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
+}
+
+.productNameContainer--quickview{
+  text-align: right;
+}
+
+/*.productDescriptionContainer {
+
+
+}*/
+
+.productDescriptionTitle {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+}
+
+.productDescriptionText {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}