feat: Ajusta margin e padding do container de informações de produto

store/blocks/pdp/product.jsonc

@@ -45,6 +45,7 @@
   },
   "flex-layout.row#product-main": {
     "props": {
+      "blockClass": "product-main",
       "colGap": 7,
       "rowGap": 7,
       "marginTop": 4,
@@ -78,7 +79,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      // "width": "60%",
       "rowGap": 0
     }
   },

styles/css/vtex.breadcrumb.css

@@ -8,7 +8,12 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  margin: 8px 40px;
+  margin: 6px 36px;
+}
+@media screen and (min-width: 112.5em) {
+  .container {
+    margin: 6px 356px;
+  }
 }
 .container .link,
 .container .term {

styles/css/vtex.flex-layout.css

@@ -49,6 +49,11 @@
   font-size: 14px;
 }
 
+.flexRowContent--product-main {
+  margin: 0;
+  padding: 0;
+}
+
 .flexRow--deals {
   background-color: #0F3E99;
   padding: 14px 0px;

styles/css/vtex.store-components.css

@@ -9,4 +9,44 @@
 /* Grid breakpoints */
 .newsletter {
   background: red;
+}
+
+.container {
+  margin: 0 36px;
+  padding: 0 4px;
+}
+@media screen and (min-width: 112.5em) {
+  .container {
+    margin: 6px 356px;
+  }
+}
+
+.productImageTag--main {
+  max-height: max-content !important;
+  max-width: 664px;
+}
+
+.carouselGaleryThumbs {
+  margin-right: 16px;
+  max-height: 90px;
+}
+
+.thumbImg {
+  height: 90px;
+  max-width: 90px;
+}
+
+.carouselThumbBorder {
+  height: 90px;
+  width: 90px;
+}
+
+.figure {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  max-width: 90px;
+  margin-right: 16px;
 }

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

@@ -1,5 +1,9 @@
 .container {
-  margin: 8px 40px;
+  margin: 6px 36px;
+
+  @media screen and (min-width: 112.5em) {
+    margin: 6px 356px;
+  }
 
   .link,
   .term {

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

@@ -32,6 +32,7 @@
   background-color: #f0f0f0;
 }
 
+
 .flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
   color: #ffffff;
   font-size: 14px;
@@ -42,6 +43,11 @@
   font-size: 14px;
 }
 
+.flexRowContent--product-main {
+  margin: 0;
+  padding: 0;
+}
+
 .flexRow--deals {
   background-color: #0F3E99;
   padding: 14px 0px;

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

@@ -2,10 +2,53 @@
   background: red;
 }
 
-// .caretIcon {
-//   display: none;
+.container {
+  margin: 0 36px;
+  padding: 0 4px;
+
+  @media screen and (min-width: 112.5em) {
+    margin: 6px 356px;
+  }
+}
+
+// .stretchChildrenWidth {
+//   width: 664px;
 // }
 
-// .swiper-pagination {
-//   display: none;
+// .stackItem--product {
+//   width: 664px;
 // }
+
+// .productImagesGallerySlide {
+//   width: 664px !important;
+// }
+
+.productImageTag--main {
+  max-height: max-content !important;
+  max-width: 664px;
+}
+
+.carouselGaleryThumbs {
+  margin-right: 16px;
+  max-height: 90px;
+}
+
+.thumbImg {
+  height: 90px;
+  max-width: 90px;
+}
+
+.carouselThumbBorder {
+  height: 90px;
+  width: 90px;
+}
+
+.figure {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  max-width: 90px;
+  margin-right: 16px;
+}