hotfix: revendo parte01 todo css, deixando mais responsivo e proximo ao figma possivel

styles/css/vtex.flex-layout.css

@@ -9,6 +9,7 @@
 /* Grid breakpoints */
 .stretchChildrenWidth {
   width: 100% !important;
+  padding: 0;
 }
 @media (max-width: 1024px) {
   .stretchChildrenWidth {
@@ -32,6 +33,7 @@
   padding: 0px;
   padding-left: 40px !important;
   margin-bottom: 16px;
+  gap: 32px;
   padding-right: 40px !important;
 }
 @media (max-width: 1024px) {
@@ -63,7 +65,7 @@
 }
 
 .flexCol--divImgDescription {
-  margin-right: 32px;
+  margin-right: 22px;
 }
 @media (max-width: 1024px) {
   .flexCol--divImgDescription {

styles/css/vtex.slider-layout.css

@@ -11,7 +11,6 @@
   background-color: #fff;
   margin-left: 40px;
   margin-right: 40px;
-  margin-bottom: 105px;
 }
 .sliderTrackContainer--carousel .sliderTrack--carousel {
   gap: 16px;
@@ -33,6 +32,7 @@
     height: 402.2px;
   }
 }
+
 .paginationDotsContainer--carousel .paginationDot--carousel {
   background-color: black;
 }

styles/css/vtex.store-components.css

@@ -30,17 +30,17 @@
 }
 .container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
   max-height: 100% !important;
-  max-width: 664px;
+  max-width: 100% !important;
   margin-bottom: 16px;
 }
 @media (min-width: 2500px) {
   .container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
-    max-width: 904px;
+    max-width: 100% !important;
   }
 }
 @media (max-width: 1024px) {
   .container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
-    max-width: 100%;
+    max-width: 100% !important;
   }
 }
 .container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
@@ -81,20 +81,20 @@
 
 .productImageTag--imgDescription {
   width: 100%;
-  max-height: 664px !important;
+  max-height: 100% !important;
-  max-width: 664px;
+  max-width: 100% !important;
 }
 @media (min-width: 2500px) {
   .productImageTag--imgDescription {
-    max-width: 904px;
+    max-width: 100% !important;
-    max-height: 904px !important;
+    max-height: 100% !important;
   }
 }
 @media (max-width: 1024px) {
   .productImageTag--imgDescription {
-    max-width: 944px;
+    max-width: 100% !important;
     margin-bottom: 16px;
-    max-height: 944px !important;
+    max-height: 100% !important;
   }
 }
 
@@ -389,3 +389,13 @@
   align-items: center;
   color: #afafaf;
 }
+
+.inputGroup--newsletter :global(.vtex-input-prefix__group) {
+  border: none;
+  border-bottom: 1px solid #929292;
+}
+.inputGroup--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  background-color: black;
+  border: 0;
+  border-radius: 0;
+}

styles/css/vtex.styleguide.css

@@ -1,19 +0,0 @@
-/*
-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 */
-:global(.vtex-input-prefix__group) {
-  border: none;
-  border-bottom: 1px solid #929292;
-}
-
-.noAppearance {
-  background-color: black;
-  border: 0;
-  border-radius: 0;
-}

styles/css/vtex.tab-layout.css

@@ -47,6 +47,7 @@
 .container--estrutura .listContainer--Guias .listItemActive--renderGuia {
   border-bottom: 3px solid #000000;
   background-color: white;
+  line-height: 0%;
 }
 @media (max-width: 1024px) {
   .container--estrutura .listContainer--Guias .listItemActive--renderGuia {

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

@@ -1,6 +1,7 @@
 
   .stretchChildrenWidth{
     width: 100% !important;
+    padding: 0 ;
     @media (max-width: 1024px) {
       padding-right: 0px
     }
@@ -21,6 +22,7 @@
   padding: 0px;
   padding-left: 40px !important;
   margin-bottom: 16px;
+  gap: 32px;
   padding-right: 40px !important;
   @media (max-width:1024px) {
     flex-direction: column;
@@ -50,7 +52,7 @@
   }
 }
 .flexCol--divImgDescription{
-  margin-right: 32px;
+  margin-right: 22px;
   @media (max-width: 1024px) {
     margin-right: 0px;
   }

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

@@ -1,8 +1,12 @@
+// .sliderLayoutContainer--carousel{
+  
+// }
+
 .sliderTrackContainer--carousel {
   background-color: $color-white;
   margin-left: 40px;
   margin-right: 40px;
-  margin-bottom: 105px;
+  // margin-bottom: 105px;
   .sliderTrack--carousel {
     gap: 16px;
   }
@@ -19,14 +23,14 @@
       height: 402.2px;
     }
   }
-  .sliderArrows--carousel {
+  // .sliderArrows--carousel {
-    .caretIcon--carousel {
+  //   .caretIcon--carousel {
-    }
+  //   }
-  }
+  // }
-  .sliderArrows--carousel {
+  // .sliderArrows--carousel {
-    .caretIcon--carousel {
+  //   .caretIcon--carousel {
-    }
+  //   }
-  }
+  // }
 
 }
 .paginationDotsContainer--carousel {

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

@@ -16,13 +16,13 @@
         width: 100% !important;
         .productImageTag {
           max-height: 100% !important;
-          max-width: 664px;
+          max-width: 100% !important;
           margin-bottom: 16px;
           @media (min-width: 2500px) {
-            max-width: 904px;
+            max-width: 100% !important;
           }
           @media (max-width: 1024px) {
-            max-width: 100%;
+            max-width: 100% !important;
           }
         }
       }
@@ -67,16 +67,16 @@
 
 .productImageTag--imgDescription {
   width: 100%;
-  max-height: 664px !important;
+  max-height: 100% !important;
-  max-width: 664px;
+  max-width: 100% !important;
   @media (min-width: 2500px) {
-    max-width: 904px;
+    max-width: 100% !important;
-    max-height: 904px !important;
+    max-height: 100% !important;
   }
   @media (max-width: 1024px) {
-    max-width: 944px;
+    max-width: 100% !important;
     margin-bottom: 16px;
-    max-height: 944px !important;
+    max-height: 100% !important;
   }
 }
 .productDescriptionContainer {
@@ -373,3 +373,14 @@
     }
   }
 }
+.inputGroup--newsletter{
+  :global(.vtex-input-prefix__group) {
+    border: none;
+    border-bottom: 1px solid #929292;
+    :global(.vtex-styleguide-9-x-input) {
+      background-color: black;
+      border: 0;
+      border-radius: 0;
+    }
+  }
+}

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

@@ -1,9 +0,0 @@
-:global(.vtex-input-prefix__group) {
-  border: none;
-  border-bottom: 1px solid #929292;
-}
-.noAppearance {
-  background-color: black;
-  border: 0;
-  border-radius: 0;
-}

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

@@ -34,6 +34,7 @@
     .listItemActive--renderGuia {
       border-bottom: 3px solid #000000;
       background-color: white;
+      line-height: 0%;
       @media (max-width: 1024px) {
         border-bottom: none;
       }