layout mobile e ultrawide

react/components/Html/style.css

@@ -1,7 +1,30 @@
 .html--pdp-breadcrumb {
   margin: 0 40px;
+
+}
+
+.html--product-summary-container {
+  margin: 0 40px;
 }
 
+@media screen and (min-width: 1920px) {
+  .html--pdp-breadcrumb {
+    margin: 0 360px;
+
+  }
+
+  .html--product-summary-container {
+    margin: 0 360px;
+  }
+}
+
+
+@media screen and (min-width: 768px) {
+  .html--quantity-and-button {
+    display: flex;
+  }
+
+}
 
 /*buy-button*/
 /* [class*="flexRowContent--btn-product"] button {

store/blocks/pdp/product-assembly.jsonc

@@ -32,17 +32,13 @@
     "props": {
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "flex-layout.col#product-assembly-image": {
     "props": {
       "marginRight": 4
     },
-    "children": [
+    "children": ["assembly-option-item-image"]
-      "assembly-option-item-image"
-    ]
   },
   "flex-layout.col#product-assembly-middle": {
     "props": {
@@ -96,9 +92,7 @@
       "horizontalAlign": "right",
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "assembly-option-item-customize#sec-level": {
     "props": {

store/blocks/pdp/product.jsonc

@@ -125,14 +125,20 @@
       "html#product-installments",
       "html#Pix",
       "html#sku-selector",
-      "html#product-quantity",
+      "html#buy-container",
       "product-assembly-options",
-      "flex-layout.row#buy-button",
       "availability-subscriber",
       "html#shipping-simulator"
     ]
   },
 
+  "html#buy-container": {
+    "props": {
+      "blockClass": "quantity-and-button"
+    },
+    "children": ["html#product-quantity", "flex-layout.row#buy-button"]
+  },
+
   "html#product-installments": {
     "props": {
       "testId": "product-installments"
@@ -287,7 +293,8 @@
 
   "html#slider": {
     "props": {
-      "testId": "product-summary-list"
+      "testId": "product-summary-list",
+      "blockClass": "product-summary-container"
     },
     "children": ["slider-layout#carrosselatualizado"]
   },
@@ -297,7 +304,7 @@
       "itemsPerPage": {
         "desktop": 4,
         "tablet": 3,
-        "phone": 1
+        "phone": 2
       },
       "infinite": true,
       "showNavigationArrows": "desktopOnly",

styles/css/vtex.flex-layout.css

@@ -32,15 +32,15 @@
   position: relative;
 }
 
-@media screen and (min-width: 769px) {
+@media screen and (min-width: 768px) {
-  .flexRow--btn-product {
+  .flexRowContent--btn-product {
-    width: 100%;
+    margin: 0 10px;
-    max-width: 526px;
-    position: absolute;
-    top: 374px;
-    left: 158px;
   }
 }
+
+.flexRow--btn-product {
+  width: 100%;
+}
 .flexRow--btn-product :global(.vtex-button) {
   background-color: black;
   border: 1px solid black;

styles/css/vtex.store-components.css

@@ -27,7 +27,7 @@
 
 /* carouselThumbs*/
 .carouselGaleryThumbs {
-  height: 200px;
+  height: 140px;
   margin-top: 16px;
 }
 .carouselGaleryThumbs .productImagesThumb {
@@ -267,6 +267,12 @@
   line-height: 32px;
   color: #575757;
 }
+@media screen and (min-width: 1920px) {
+  .productDescriptionContainer .productDescriptionTitle {
+    font-size: 32px;
+    line-height: 32px;
+  }
+}
 .productDescriptionContainer .productDescriptionText {
   font-family: "Open Sans";
   font-style: normal;
@@ -275,6 +281,12 @@
   line-height: 19px;
   color: #929292;
 }
+@media screen and (min-width: 1920px) {
+  .productDescriptionContainer .productDescriptionText {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
 @media screen and (max-width: 1024px) {
   .productDescriptionContainer {
     margin-top: 16px;
@@ -322,7 +334,12 @@
   margin: 16px;
 }
 .newsletter .inputGroup {
-  width: 774px;
+  display: flex;
+}
+@media screen and (min-width: 768px) {
+  .newsletter .inputGroup {
+    width: 774px;
+  }
 }
 .newsletter .inputGroup :global(.vtex-input-prefix__group) {
   border: none;

styles/css/vtex.tab-layout.css

@@ -15,6 +15,11 @@
   margin: auto;
   width: 95%;
 }
+@media screen and (min-width: 1920px) {
+  .listContainer {
+    width: 75%;
+  }
+}
 @media screen and (max-width: 1024px) {
   .listContainer {
     flex-direction: column;
@@ -26,6 +31,11 @@
   display: flex;
   padding: 62px 52px;
 }
+@media screen and (min-width: 1920px) {
+  .contentItem {
+    padding: 62px 360px;
+  }
+}
 @media screen and (max-width: 1024px) {
   .contentItem {
     flex-direction: column;

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

@@ -27,14 +27,13 @@
   position: relative;
 }
 
-.flexRow--btn-product {
+.flexRowContent--btn-product {
-  @media screen and (min-width: 769px) {
+  @media screen and (min-width: 768px) {
-    width: 100%;
+    margin: 0 10px;
-    max-width: 526px;
-    position: absolute;
-    top: 374px;
-    left: 158px;
   }
+}
+.flexRow--btn-product {
+  width: 100%;
 
   :global(.vtex-button) {
     background-color: black;

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

@@ -15,7 +15,7 @@
 
 /* carouselThumbs*/
 .carouselGaleryThumbs {
-  height: 200px;
+  height: 140px;
   margin-top: 16px;
 
   .productImagesThumb {
@@ -296,6 +296,11 @@
     line-height: 32px;
 
     color: $color-gray6;
+
+    @media screen and (min-width: 1920px) {
+      font-size: 32px;
+      line-height: 32px;
+    }
   }
 
   .productDescriptionText {
@@ -306,6 +311,11 @@
     line-height: 19px;
 
     color: $color-gray8;
+
+    @media screen and (min-width: 1920px) {
+      font-size: 18px;
+      line-height: 25px;
+    }
   }
 
   @media screen and (max-width: 1024px) {
@@ -361,7 +371,10 @@
   }
 
   .inputGroup {
-    width: 774px;
+    display: flex;
+    @media screen and (min-width: 768px) {
+      width: 774px;
+    }
     :global(.vtex-input-prefix__group) {
       border: none;
       border-bottom: 1px solid gray;

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

@@ -5,6 +5,9 @@
   margin: auto;
   width: 95%;
 
+  @media screen and (min-width: 1920px) {
+    width: 75%;
+  }
   @media screen and (max-width: 1024px) {
     flex-direction: column;
     border-top: 1px solid #b9b9b9;
@@ -15,6 +18,10 @@
   display: flex;
   padding: 62px 52px;
 
+  @media screen and (min-width: 1920px) {
+    padding: 62px 360px;
+  }
+
   @media screen and (max-width: 1024px) {
     flex-direction: column;
     padding: 16px 40px;