feat(dados_de_compra):titulo && cart btn estilizados

store/blocks/pdp/product.jsonc

@@ -80,8 +80,8 @@
   },
   "product-images": {
     "props": {
-        "testid": "product-images",
+      "testid": "product-images",
-        "aspectRatio": {
+      "aspectRatio": {
         "desktop": "auto",
         "phone": "auto"
       },
@@ -98,7 +98,6 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
@@ -118,19 +117,24 @@
     }
   },
 
-  "product-identifier.product": {
-    "props": {
-      "label": "hide" //'default' | 'custom' | 'hide'
-    }
-  },
 
   "flex-layout.row#product-name": {
     "props": {
-      "marginBottom": 3
+      "marginBottom": 3,
+      "blockClass": "title"
     },
-    "children": ["vtex.store-components:product-name"]
+    "children": [
+      "product-identifier.product",
+      "vtex.store-components:product-name"
+    ]
   },
 
+  "product-identifier.product": {
+    "props": {
+      "label": "hide", //'default' | 'custom' | 'hide'
+      "blockClass": "sku"
+    }
+  },
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
@@ -142,11 +146,17 @@
     "props": {
       "marginTop": 4,
       "marginBottom": 7,
-      "blockClass":"buy-button"
+      "blockClass": "buy-button"
     },
-    "children": ["product-quantity","add-to-cart-button"]
+    "children": ["product-quantity", "add-to-cart-button"]
+  },
+  "product-quantity": {
+    "props": {
+      "width": "20%",
+      "showLabel": false,
+      "size": "regular"
+    }
   },
-
   "add-to-cart-button": {
     "props": {
       "text": "ADICIONAR À SACOLA"

styles/css/vtex.flex-layout.css

@@ -21,13 +21,12 @@
 }
 .flexRowContent--buy-button .stretchChildrenWidth {
   padding: 0;
-  width: max-content !important;
+  justify-content: flex-start;
 }
 .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
   background: black;
   height: 49px;
-  width: 100%;
+  max-width: 526px;
-  min-width: 534px;
 }
 
 @media screen and (min-width: 40em) {
@@ -137,3 +136,8 @@
 :global(.vtex-shelf-1-x-slide) .flexRowContent--m3-shelf-price-selling-savings {
   justify-content: center;
 }
+
+.flexRowContent--title {
+  align-items: end;
+  flex-direction: column-reverse;
+}

styles/css/vtex.product-identifier.css

@@ -1,3 +1,15 @@
+/*
+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--productReference {
-  margin-bottom: 1rem;
+  display: block;
+  text-align: end;
+  margin-top: 8px;
+  padding-right: 8px;
 }

styles/css/vtex.product-quantity.css

@@ -7,6 +7,31 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.quantitySelectorTitle {
+.quantitySelectorStepper {
-  display: none;
+  border: 1px solid #CCCCCC;
+  width: max-content;
+  min-width: 83.86%;
+  padding: 3.5px 0;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
+  border: none;
+  max-width: 28px;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button) {
+  border: none;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button__text) {
+  color: #000;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button__text) {
+  color: #000;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
+  border: none;
+  background: #fff;
+}
+
+.quantitySelectorContainer {
+  justify-content: center;
+  align-items: center;
 }

styles/css/vtex.store-components.css

@@ -7,6 +7,10 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.productNameContainer--quickview {
+  padding-right: 40px !important;
+}
+
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
@@ -77,7 +81,6 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-  padding-right: 20px;
   color: #575757;
 }
 

styles/sass/pages/product/vtex.flex-layout.scss

@@ -9,12 +9,11 @@
       gap: 10px;
     .stretchChildrenWidth{
       padding: 0;
-      width: max-content !important;
+      justify-content: flex-start;
       :global(.vtex-button){
         background: black;
         height: 49px;
-        width: 100%;
+        max-width: 526px;
-        min-width: 534px;
       }
     }
   }
@@ -130,5 +129,9 @@
       justify-content: center;
   }
 }
+.flexRowContent--title{
+  align-items: end;
+  flex-direction: column-reverse;
+}
 
 

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

@@ -0,0 +1,8 @@
+.product-identifier{
+  &--productReference{
+    display: block;
+    text-align: end;
+    margin-top: 8px;
+    padding-right: 8px;
+  }
+}

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

@@ -1,3 +1,31 @@
-.quantitySelectorTitle{
+.quantitySelectorStepper{
-  display: none;
+  border: 1px solid #CCCCCC;
+  width: max-content;
+  min-width: 83.86%;
+  padding: 3.5px 0;
+  :global(.vtex-numeric-stepper-wrapper){
+    :global(.vtex-numeric-stepper-container){
+      :global(.vtex-numeric-stepper__input){
+          border: none;
+          max-width: 28px;
+      }
+      :global(.vtex-numeric-stepper__plus-button){
+        border: none;
+      }
+      :global(.vtex-numeric-stepper__plus-button__text){
+        color: #000;
+      }
+      :global(.vtex-numeric-stepper__minus-button__text){
+        color: #000;
+      }
+      :global(.vtex-numeric-stepper__minus-button){
+        border: none;
+        background: #fff;
+      }
+    }
+  }
+}
+.quantitySelectorContainer{
+    justify-content: center;
+    align-items: center;
 }

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

@@ -1,6 +1,6 @@
-  .container{
+.productNameContainer--quickview{
-
+  padding-right: 40px !important;
-  }
+}
 .skuSelectorContainer{
   display: flex;
   flex-direction: column-reverse;
@@ -84,7 +84,6 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-  padding-right: 20px;
   color: #575757;
 }
 .carouselContainer{