feat: adiciona css layout ultrawide

store/blocks/pdp/product.jsonc

@@ -347,15 +347,14 @@
       "html#selling-price",
       "html#product-installments",
       "html#pixacademy",
+      "availability-subscriber",
       "html#sku-selector",
       "html#quantityAndButton",
       "Placeholder",
-      "product-assembly-options",
-      "product-gifts",
-      "availability-subscriber",
       "html#shipping-simulator"
     ]
   },
+
   "html#selling-price": {
     "props": {
       "testId": "product-price"
@@ -452,8 +451,8 @@
     "children": [
       "html#product-name",
       "html#codigo",
-      "html#sku-selector",
+      "flex-layout.row#availability",
-      "flex-layout.row#availability"
+      "html#sku-selector"
     ]
   },
   "html#codigo": {

styles/css/vtex.breadcrumb.css

@@ -8,15 +8,12 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  padding-left: 40px;
+  padding: 16px 40px;
+  margin: 0 auto;
+  max-width: 96rem;
   display: flex;
   align-items: center;
 }
-@media (max-width: 1024px) {
-  .container {
-    margin-bottom: 16px;
-  }
-}
 .container .homeLink .homeIcon {
   display: none;
 }

styles/css/vtex.slider-layout.css

@@ -10,6 +10,10 @@
 .sliderLayoutContainer {
   padding: 0 40px 32px;
   margin-bottom: 32px;
+  padding: 16px 40px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 96rem;
 }
 .sliderLayoutContainer .sliderLeftArrow {
   left: 36px;

styles/css/vtex.store-components.css

@@ -547,6 +547,10 @@
   display: none;
 }
 
+.subscriberContainer {
+  margin-bottom: 56px;
+}
+
 .carouselGaleryThumbs :first-child {
   height: 90px;
 }

styles/css/vtex.tab-layout.css

@@ -14,6 +14,9 @@
   padding-right: 40px;
   padding-left: 40px;
   justify-content: space-around;
+  padding: 16px 40px;
+  margin: 0 auto;
+  max-width: 96rem;
 }
 @media (max-width: 1024px) {
   .listContainer {
@@ -30,6 +33,13 @@
     position: relative;
     top: 0px;
   }
+}
+@media (max-width: 1024px) and (max-width: 1024px) {
+  .listContainer::before {
+    margin-bottom: 8px;
+  }
+}
+@media (max-width: 1024px) {
   .listContainer::after {
     bottom: 0px;
   }
@@ -43,10 +53,17 @@
   position: relative;
   bottom: 9px;
 }
+@media (max-width: 1024px) {
+  .listContainer::after {
+    bottom: 0 !important;
+    margin-top: 8px !important;
+  }
+}
 
 @media (max-width: 1024px) {
   .listItem {
-    margin: 0;
+    margin-top: 8px;
+    margin-bottom: 8px;
     padding: 0;
   }
   .listItem :global(.vtex-button) {
@@ -54,7 +71,12 @@
     padding: 0;
   }
   .listItem :global(.vtex-button) :global(.vtex-button__label) {
-    padding: 0;
+    padding: 0 !important;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 38px;
   }
 }
 

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

@@ -1,11 +1,9 @@
 .container {
-  padding-left: 40px;
+  padding: 16px 40px;
+  margin: 0 auto;
+  max-width: 96rem;
   display: flex;
   align-items: center;
-  @media (max-width: 1024px){
-    margin-bottom: 16px;
-  }
-
   .homeLink {
     .homeIcon {
       display: none;

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

@@ -1,6 +1,10 @@
 .sliderLayoutContainer {
   padding: 0 40px 32px;
   margin-bottom: 32px;
+  padding: 16px 40px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 96rem;
 
   .sliderLeftArrow {
     left: 36px;

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

@@ -572,6 +572,9 @@
     }
   }
 }
+.subscriberContainer{
+  margin-bottom: 56px;
+}
 .carouselGaleryThumbs {
   :first-child {
     height: 90px;

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

@@ -5,6 +5,9 @@
   padding-right: 40px;
   padding-left: 40px;
   justify-content: space-around;
+  padding: 16px 40px;
+  margin: 0 auto;
+  max-width: 96rem;
   @media (max-width: 1024px) {
     flex-direction: column;
     padding: 0 40px 16px;
@@ -18,6 +21,9 @@
       height: 1px;
       position: relative;
       top: 0px;
+      @media (max-width: 1024px){
+        margin-bottom: 8px;
+      }
     }
 
     &::after {
@@ -32,17 +38,28 @@
     height: 1px;
     position: relative;
     bottom: 9px;
+    @media (max-width: 1024px){
+      bottom: 0 !important;
+      margin-top: 8px !important;
+    }
   }
 }
 .listItem {
   @media (max-width: 1024px) {
-    margin: 0;
+    margin-top: 8px;
+    margin-bottom: 8px;
     padding: 0;
+
     :global(.vtex-button) {
       margin: 0;
       padding: 0;
       :global(.vtex-button__label) {
-        padding: 0;
+        padding: 0 !important;
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 38px;
       }
     }
   }