feat: adiciona ultra wide

styles/css/vtex.flex-layout.css

@@ -8,14 +8,27 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.flexRow--product-container :global(.vtex-store-components-3-x-container) {
+@media (min-width: 1921px) {
-  padding: 0;
+  .flexRow--product-container :global(.vtex-store-components-3-x-container) {
+    padding: 0;
+  }
+}
+@media (min-width: 1921px) {
+  .flexRow--product-container .stretchChildrenWidth {
+    padding: 0;
+  }
 }
 
 .flexRowContent--product-container {
   margin: 0;
   padding: 16px 40px;
 }
+@media (min-width: 1921px) {
+  .flexRowContent--product-container {
+    width: 1920px;
+    gap: 32px;
+  }
+}
 @media (max-width: 1024px) {
   .flexRowContent--product-container {
     flex-direction: column;

styles/css/vtex.product-price.css

@@ -75,4 +75,9 @@
   font-size: 24px;
   line-height: 33px;
   color: #000000;
+}
+@media (min-width: 1921px) {
+  .sellingPrice {
+    font-size: 25px;
+  }
 }

styles/css/vtex.slider-layout.css

@@ -12,6 +12,11 @@
   width: 1300px;
   margin: auto;
 }
+@media (min-width: 1921px) {
+  .sliderTrackContainer {
+    width: 1920px;
+  }
+}
 @media (max-width: 1024px) {
   .sliderTrackContainer {
     width: 944px;
@@ -22,6 +27,22 @@
 .sliderTrack--carousel {
   padding: 0 28px;
 }
+@media (min-width: 1921px) {
+  .sliderTrack--carousel :global(.vtex-product-summary-2-x-containerNormal) {
+    max-width: 434px !important;
+    height: 543px !important;
+  }
+}
+@media (min-width: 1921px) {
+  .sliderTrack--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-imageContainer) {
+    width: 100%;
+    height: 434px;
+  }
+  .sliderTrack--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
+    width: 100% !important;
+    max-height: 434px !important;
+  }
+}
 
 .paginationDotsContainer {
   align-items: center;
@@ -45,6 +66,11 @@
 .sliderRightArrow--carousel {
   right: 50px;
 }
+@media (min-width: 1920px) {
+  .sliderRightArrow--carousel {
+    right: 0;
+  }
+}
 @media (max-width: 768px) {
   .sliderRightArrow--carousel {
     right: 10px;
@@ -63,6 +89,11 @@
 .sliderLeftArrow--carousel {
   left: 50px;
 }
+@media (min-width: 1920px) {
+  .sliderLeftArrow--carousel {
+    left: 0;
+  }
+}
 @media (max-width: 768px) {
   .sliderLeftArrow--carousel {
     left: 10px;
@@ -85,4 +116,11 @@
   .slide--carousel {
     padding: 0 6px;
   }
+}
+
+@media (min-width: 1920px) {
+  .sliderLayoutContainer {
+    width: 1920px;
+    margin: auto;
+  }
 }

styles/css/vtex.store-components.css

@@ -8,6 +8,13 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+@media (min-width: 1921px) {
+  :global(.vtex-store-components-3-x-container) {
+    margin: auto !important;
+    max-width: 1920px;
+  }
+}
+
 .productNameContainer--quickview {
   text-align: right;
   color: #575757;
@@ -274,6 +281,11 @@
   display: flex;
 }
 
+@media (min-width: 1921px) {
+  .productImagesGallerySlide {
+    width: 100% !important;
+  }
+}
 @media (max-width: 1024px) {
   .productImagesGallerySlide {
     width: 100% !important;

styles/css/vtex.tab-layout.css

@@ -67,6 +67,12 @@
   width: 632px;
   height: 632px;
 }
+@media (min-width: 1921px) {
+  .contentContainer .contentItem :global(.vtex-store-components-3-x-productImage) {
+    width: 904px;
+    height: 904px;
+  }
+}
 @media (max-width: 1024px) {
   .contentContainer .contentItem :global(.vtex-store-components-3-x-productImage) {
     width: 100%;
@@ -81,6 +87,12 @@
   display: flex;
   gap: 120px;
 }
+@media (min-width: 1921px) {
+  .listContainer {
+    width: 1840px;
+    gap: 260px;
+  }
+}
 @media (max-width: 1360px) {
   .listContainer {
     gap: 0;

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

@@ -1,12 +1,23 @@
 .flexRow--product-container {
   :global(.vtex-store-components-3-x-container) {
-    padding: 0;
+    @media (min-width: 1921px) {
+      padding: 0;
+    }
+  }
+  .stretchChildrenWidth {
+    @media (min-width: 1921px) {
+      padding: 0;
+    }
   }
 }
 
 .flexRowContent--product-container {
   margin: 0;
   padding: 16px 40px;
+  @media (min-width: 1921px) {
+    width: 1920px;
+    gap: 32px;
+  }
 
   @media (max-width: 1024px) {
     flex-direction: column;

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

@@ -67,4 +67,8 @@
   font-size: 24px;
   line-height: 33px;
   color: #000000;
+
+  @media (min-width: 1921px) {
+    font-size: 25px;
+  }
 }

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

@@ -3,6 +3,10 @@
   width: 1300px;
   margin: auto;
 
+  @media (min-width: 1921px) {
+    width: 1920px;
+  }
+
   @media (max-width: 1024px) {
     width: 944px;
     padding: 28px;
@@ -11,6 +15,24 @@
 
 .sliderTrack--carousel {
   padding: 0 28px;
+
+  :global(.vtex-product-summary-2-x-containerNormal) {
+    @media (min-width: 1921px) {
+      max-width: 434px !important;
+      height: 543px !important;
+    }
+    :global(.vtex-product-summary-2-x-imageContainer) {
+      @media (min-width: 1921px) {
+        width: 100%;
+        height: 434px;
+
+        :global(.vtex-product-summary-2-x-imageNormal) {
+          width: 100% !important;
+          max-height: 434px !important;
+        }
+      }
+    }
+  }
 }
 
 .paginationDotsContainer {
@@ -34,6 +56,9 @@
 
 .sliderRightArrow--carousel {
   right: 50px;
+  @media (min-width: 1920px) {
+    right: 0;
+  }
   @media (max-width: 768px) {
     right: 10px;
   }
@@ -52,6 +77,10 @@
 
 .sliderLeftArrow--carousel {
   left: 50px;
+
+  @media (min-width: 1920px) {
+    left: 0;
+  }
   @media (max-width: 768px) {
     left: 10px;
   }
@@ -74,3 +103,10 @@
     padding: 0 6px;
   }
 }
+
+.sliderLayoutContainer {
+  @media (min-width: 1920px) {
+    width: 1920px;
+    margin: auto;
+  }
+}

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

@@ -1,3 +1,10 @@
+:global(.vtex-store-components-3-x-container) {
+  @media (min-width: 1921px) {
+    margin: auto !important;
+    max-width: 1920px;
+  }
+}
+
 .productNameContainer--quickview {
   text-align: right;
   color: #575757;
@@ -265,6 +272,10 @@
 }
 
 .productImagesGallerySlide {
+  @media (min-width: 1921px) {
+    width: 100% !important;
+  }
+
   @media (max-width: 1024px) {
     width: 100% !important;
   }

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

@@ -53,6 +53,11 @@
       width: 632px;
       height: 632px;
 
+      @media (min-width: 1921px) {
+        width: 904px;
+        height: 904px;
+      }
+
       @media (max-width: 1024px) {
         width: 100%;
         height: auto;
@@ -67,6 +72,12 @@
   margin: auto;
   display: flex;
   gap: 120px;
+
+  @media (min-width: 1921px) {
+    width: 1840px;
+    gap: 260px;
+  }
+
   @media (max-width: 1360px) {
     gap: 0;
     justify-content: space-around;