feat(Informações do produto e Descrição do produto): Ajusta para telas menores que 1024px

react/components/Html/styles.css

@@ -1,29 +1,29 @@
-[class*="html--quantity-wrapper"] {
+[class*='html--quantity-wrapper'] {
   display: flex;
   align-items: center;
   margin-bottom: 16px;
 }
 
-[class*="vtex-product-quantity-1-x-quantitySelectorContainer"] {
+[class*='vtex-product-quantity-1-x-quantitySelectorContainer'] {
   margin: 0;
 }
 
-[class*="quantitySelectorTitle"] {
+[class*='quantitySelectorTitle'] {
   display: none;
 }
 
-[class*="vtex-numeric-stepper-container"] {
+[class*='vtex-numeric-stepper-container'] {
   margin-right: 10px;
   height: 49px;
 }
 
-[class*="vtex-numeric-stepper__input"],
+[class*='vtex-numeric-stepper__input'],
-[class*="vtex-numeric-stepper__plus-button"],
+[class*='vtex-numeric-stepper__plus-button'],
-[class*="vtex-numeric-stepper__minus-button"] {
+[class*='vtex-numeric-stepper__minus-button'] {
   height: 49px;
 }
 
-[class*="vtex-numeric-stepper__input"] {
+[class*='vtex-numeric-stepper__input'] {
   border: 1px solid #afafaf;
   border-right: none;
   border-left: none;
@@ -31,37 +31,38 @@
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
+  width: 44px;
 }
 
-[class*="vtex-numeric-stepper__minus-button"] {
+[class*='vtex-numeric-stepper__minus-button'] {
   border: none;
   border: 1px solid #afafaf;
   border-radius: 0;
 }
 
-[class*="vtex-numeric-stepper__minus-button-container"],
+[class*='vtex-numeric-stepper__minus-button-container'],
-[class*="vtex-numeric-stepper__minus-button__text"] {
+[class*='vtex-numeric-stepper__minus-button__text'] {
   border: none;
 }
 
-[class*="vtex-numeric-stepper__plus-button"] {
+[class*='vtex-numeric-stepper__plus-button'] {
   border: none;
   border: 1px solid #afafaf;
   border-radius: 0;
 }
 
-[class*="vtex-numeric-stepper__plus-button-container"],
+[class*='vtex-numeric-stepper__plus-button-container'],
-[class*="vtex-numeric-stepper__plus-button__text"] {
+[class*='vtex-numeric-stepper__plus-button__text'] {
   border: none;
 }
 
-[class*="vtex-numeric-stepper__plus-button__text"],
+[class*='vtex-numeric-stepper__plus-button__text'],
-[class*="vtex-numeric-stepper__minus-button__text"] {
+[class*='vtex-numeric-stepper__minus-button__text'] {
   display: flex;
   align-items: center;
   color: #000000;
 }
 
-[class*="html--buy-button"] {
+[class*='html--buy-button'] {
   width: 100%;
 }

store/blocks/pdp/product.jsonc

@@ -154,7 +154,8 @@
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
-      "paddingBottom": 7
+      "paddingBottom": 7,
+      "blockClass": "conteudo-principal"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
@@ -182,8 +183,9 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "51%",
+      // "width": "52%",
-      "rowGap": 0
+      "rowGap": 0,
+      "blockClass": "conteudo-imagens"
     }
   },
   "flex-layout.row#product-image": {

styles/css/vtex.flex-layout.css

@@ -12,6 +12,7 @@
   position: relative;
   padding: 0;
   margin: 0;
+  gap: 32px;
 }
 
 .flexRowContent--container-compra {
@@ -24,3 +25,20 @@
 .flexRowContent--preco {
   margin: 0;
 }
+
+.stretchChildrenWidth {
+  padding: 0;
+}
+
+@media screen and (max-width: 1024px) {
+  .flexRowContent--conteudo-principal {
+    flex-direction: column;
+  }
+  .flexRowContent--conteudo-principal .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
+  .flexCol {
+    position: relative;
+  }
+}

styles/css/vtex.product-identifier.css

@@ -20,3 +20,10 @@
 .product-identifier__label, .product-identifier__separator {
   display: none;
 }
+
+@media screen and (max-width: 1024px) {
+  .product-identifier {
+    left: 0;
+    top: 42px;
+  }
+}

styles/css/vtex.store-components.css

@@ -153,7 +153,7 @@
 
 .shippingContainer :global(.vtex-input-prefix__group) {
   height: 49px;
-  padding-right: 21px;
+  padding-right: 23px;
   display: flex;
   align-items: center;
 }
@@ -330,6 +330,29 @@
   color: #929292;
 }
 
+@media screen and (max-width: 1024px) {
+  .productImageTag {
+    max-height: 994px !important;
+  }
+  .productImagesThumb {
+    height: auto !important;
+    width: 90px !important;
+    margin-right: 16px;
+    padding-right: 0 !important;
+    margin-bottom: 0;
+  }
+  .figure {
+    width: 90px;
+    height: 90px;
+  }
+  .productNameContainer {
+    text-align: left !important;
+    margin-bottom: 51px !important;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: 312px;
+  }
+}
 @media screen and (min-width: 1920px) {
   .container {
     padding: 0 360px;

styles/css/vtex.tab-layout.css

@@ -43,3 +43,33 @@
   gap: 32px;
   padding: 32px 32px 0;
 }
+
+@media screen and (max-width: 1024px) {
+  .container {
+    padding-top: 0;
+  }
+  .container .listContainer {
+    flex-direction: column;
+    padding: 16px 0;
+    border-top: 1px solid #b9b9b9;
+    gap: 16px;
+  }
+  .container .listItem :global(.vtex-button) {
+    width: 100%;
+  }
+  .container .listItem :global(.vtex-button) :global(.vtex-button__label) {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .container .listItemActive :global(.vtex-button) {
+    border-bottom: none !important;
+  }
+}
+@media screen and (min-width: 1920px) {
+  .container {
+    padding: 16px 360px 0;
+  }
+}

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

@@ -2,6 +2,7 @@
   position: relative;
   padding: 0;
   margin: 0;
+  gap: 32px;
 }
 
 .flexRowContent--container-compra {
@@ -14,3 +15,26 @@
 .flexRowContent--preco {
   margin: 0;
 }
+
+.stretchChildrenWidth {
+  padding: 0;
+}
+
+// .flexCol--conteudo-imagens {
+//   width: 98.35% !important;
+// }
+
+@media screen and (max-width: 1024px) {
+  .flexRowContent--conteudo-principal {
+    flex-direction: column;
+
+    .stretchChildrenWidth {
+      width: 100% !important;
+      padding: 0;
+    }
+  }
+
+  .flexCol {
+    position: relative;
+  }
+}

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

@@ -12,3 +12,10 @@
     display: none;
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .product-identifier {
+    left: 0;
+    top: 42px;
+  }
+}

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

@@ -177,7 +177,7 @@
 .shippingContainer {
   :global(.vtex-input-prefix__group) {
     height: 49px;
-    padding-right: 21px;
+    padding-right: 23px;
     display: flex;
     align-items: center;
     :global(.vtex-input__suffix) {
@@ -386,6 +386,38 @@
   color: $color-gray7;
 }
 
+@media screen and (max-width: 1024px) {
+  .productImageTag {
+    max-height: 994px !important;
+  }
+
+  .productImagesThumb {
+    height: auto !important;
+    width: 90px !important;
+    margin-right: 16px;
+    padding-right: 0 !important;
+    margin-bottom: 0;
+  }
+
+  .figure {
+    width: 90px;
+    height: 90px;
+  }
+
+  .productNameContainer {
+    text-align: left !important;
+    margin-bottom: 51px !important;
+  }
+
+  .shippingContainer {
+    :global(.vtex-address-form__postalCode) {
+      :global(.vtex-address-form__postalCode-forgottenURL) {
+        left: 312px;
+      }
+    }
+  }
+}
+
 @media screen and (min-width: 1920px) {
   .container {
     padding: 0 360px;

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

@@ -44,3 +44,39 @@
     }
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .container {
+    padding-top: 0;
+    .listContainer {
+      flex-direction: column;
+      padding: 16px 0;
+      border-top: 1px solid $color-gray11;
+      gap: 16px;
+    }
+
+    .listItem {
+      :global(.vtex-button) {
+        width: 100%;
+        :global(.vtex-button__label) {
+          flex-direction: column;
+          align-items: flex-start;
+          padding: 0;
+          padding-top: 0 !important;
+          padding-bottom: 0 !important;
+        }
+      }
+    }
+
+    .listItemActive {
+      :global(.vtex-button) {
+        border-bottom: none !important;
+      }
+    }
+  }
+}
+@media screen and (min-width: 1920px) {
+  .container {
+    padding: 16px 360px 0;
+  }
+}