feat(product-view):add espaçamentos desktop

react/components/Html/styles.css

@@ -1,6 +1,8 @@
 /* [class*=html--pdp-breadcrumb]{
 } */
 .html--pdp-productMain{
+  padding-right: 2.778%;
+  padding-left: 2.778%;
   display: flex;
 }
 .html--StackLayout,.html--pdp-InfoBuy{
@@ -13,11 +15,16 @@
   align-items: center;
   margin-bottom: 16px;
 }
+.html--pdp-productMain :global(.vtex-button){
+  display: none;
+}
 .html--buy-button :global(.vtex-button){
+  display: block;
   background: black;
   height: 49px;
-  max-width: 526px;
+  max-width: 77.354%;
 }
+
   @media screen and (min-width: 1920px){
     .html--buy-button :global(.vtex-button){
       max-width: 766px;

store/blocks/pdp/product.jsonc

@@ -447,7 +447,6 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
       "sku-selector",
       "flex-layout.row#availability"
     ]

styles/css/vtex.breadcrumb.css

@@ -8,10 +8,15 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  padding: 0 40px 16px;
+  padding-top: 16px;
-  margin-left: auto;
+  padding-right: 4%;
-  margin-right: auto;
+  padding-left: 4%;
-  max-width: 96rem;
+}
+@media screen and (min-width: 1920px) {
+  .container {
+    padding-right: 14.063%;
+    padding-left: 14.063%;
+  }
 }
 @media screen and (max-width: 1024px) {
   .container {

styles/css/vtex.flex-layout.css

@@ -12,10 +12,14 @@
   padding: 0 0.5rem;
 }
 
+.flexRowContent--title .stretchChildrenWidth {
+  width: 100% !important;
+}
+
+.flexRowContent--product-image {
+  justify-content: flex-end;
+}
 @media screen and (min-width: 1920px) {
-  .flexRowContent--product-image {
-    justify-content: flex-end;
-  }
   .flexRowContent--product-image .stretchChildrenWidth {
     max-width: max-content;
   }

styles/css/vtex.product-customizer.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.textInputValue, .productAssemblyGroupNameRow {
+  display: none;
+}

styles/css/vtex.product-identifier.css

@@ -11,5 +11,5 @@
   display: block;
   text-align: end;
   margin-top: 8px;
-  padding-right: 8px;
+  padding-right: 40px;
 }

styles/css/vtex.store-components.css

@@ -7,6 +7,10 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.shareLabel, .skuSelectorNameSeparator, .skuSelectorSelectorImageValue {
+  display: none;
+}
+
 @media screen and (min-width: 1920px) {
   .productImagesContainer--carousel .carouselGaleryCursor {
     max-height: 906px;

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -1,8 +1,11 @@
 .container{
-    padding: 0 40px 16px;
+    padding-top:16px;
-    margin-left: auto;
+    padding-right: 4%;
-    margin-right: auto;
+    padding-left: 4%;
-    max-width: 96rem;
+    @media screen and (min-width: 1920px){
+      padding-right: 14.063%;
+      padding-left: 14.063%;
+    }
     @media screen and (max-width: 1024px){
       padding: 0 0 0 10.67%;
     }

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

@@ -2,9 +2,14 @@
 .flexRowContent--main-header {
   padding: 0 0.5rem;
 }
+.flexRowContent--title{
+  .stretchChildrenWidth{
+    width: 100% !important;
+  }
+}
 .flexRowContent--product-image{
+  justify-content: flex-end;
   @media screen and (min-width: 1920px){
-    justify-content: flex-end;
     .stretchChildrenWidth{
       max-width: max-content;
     }

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

@@ -0,0 +1,3 @@
+.textInputValue,.productAssemblyGroupNameRow{
+  display: none;
+}

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

@@ -3,6 +3,6 @@
     display: block;
     text-align: end;
     margin-top: 8px;
-    padding-right: 8px;
+    padding-right: 40px;
   }
 }

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

@@ -1,3 +1,6 @@
+.shareLabel,.skuSelectorNameSeparator,.skuSelectorSelectorImageValue{
+  display: none;
+}
 .productImagesContainer--carousel{
   .carouselGaleryCursor{
     @media screen and (min-width: 1920px){