feat: Responsividade Mobile finalizada

react/components/description-section/styles.css

@@ -46,7 +46,14 @@
     border-bottom: 1px solid #BFBFBF;
   }
 
+  .descriptionSectionTitle{
+    font-size: 20px;
+    line-height: 32px;
+  }
+
   .descriptionSectionParagraph{
+    font-size: 14px;
+    line-height: 19px;
     margin-bottom: 16px;
   }
 }

store/blocks/pdp/product.jsonc

@@ -160,7 +160,8 @@
       "blockClass": "container-slider-related-products-pdp",
       "itemsPerPage": {
         "desktop": 4,
-        "tablet": 3
+        "tablet": 3,
+        "phone": 2
       }
     }
   },

styles/css/vtex.flex-layout.css

@@ -42,6 +42,9 @@
   border: 0;
   border-radius: 0;
 }
+.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 12px 0 !important;
+}
 
 .container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
   width: 100%;
@@ -60,5 +63,25 @@
     display: flex;
     flex-direction: column;
     padding-top: 16px;
+    padding-bottom: 0;
+  }
+  .flexRowContent--container-related-products-pdp {
+    padding: 0 53px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .flexRowContent--container-quantity-and-buy-button {
+    display: flex;
+    flex-direction: column;
+  }
+  .flexRowContent--container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+    justify-content: flex-start;
+  }
+  .flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) {
+    display: inline-block;
+    width: 56.7567%;
+  }
+  .flexRowContent--container-related-products-pdp {
+    padding: 0 48px;
   }
 }

styles/css/vtex.product-quantity.css

@@ -7,10 +7,6 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.quantitySelectorContainer {
-  margin-top: 6px;
-}
-
 .quantitySelectorTitle {
   display: none;
 }
@@ -40,4 +36,10 @@
   font-size: 16px;
   line-height: 22px;
   color: #000000;
+}
+
+@media screen and (max-width: 768px) {
+  .quantitySelectorContainer {
+    width: 128px !important;
+  }
 }

styles/css/vtex.product-summary.css

@@ -78,4 +78,27 @@
 }
 .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .installmentContainer {
   display: none;
+}
+
+@media screen and (max-width: 1024px) {
+  .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .nameContainer .productBrand {
+    font-size: 14px;
+    line-height: 19px;
+  }
+  .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::before {
+    font-size: 12px;
+    line-height: 16px;
+  }
+  .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::after {
+    font-size: 12px;
+    line-height: 16px;
+  }
+  .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice .currencyContainer {
+    font-size: 12px;
+    line-height: 16px;
+  }
+  .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer .currencyContainer {
+    font-size: 18px;
+    line-height: 25px;
+  }
 }

styles/css/vtex.rich-text.css

@@ -24,4 +24,9 @@
   .container--title-related-products {
     margin-bottom: 24px;
   }
+}
+@media screen and (max-width: 768px) {
+  .container--title-related-products .heading--title-related-products {
+    font-size: 20px;
+  }
 }

styles/css/vtex.slider-layout.css

@@ -44,4 +44,21 @@
   height: 17px !important;
   background-color: #FFFFFF;
   border: 0.5px solid #000000;
+}
+
+@media screen and (max-width: 1024px) {
+  .sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp {
+    left: -23px;
+  }
+  .sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp {
+    right: -22px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp {
+    left: -21px;
+  }
+  .sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp {
+    right: -20px;
+  }
 }

styles/css/vtex.store-components.css

@@ -185,10 +185,10 @@
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
-  text-decoration-line: underline;
 }
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
   color: #000000;
+  text-decoration-line: underline;
 }
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
   display: none;
@@ -296,6 +296,8 @@
     width: 100%;
     grid-template-areas: "label button" "notCep notCep";
     grid-template-columns: 83.4459% 1fr;
+    padding-bottom: 23px;
+    margin-bottom: 16px;
   }
   .shippingContainer :global(.vtex-address-form__postalCode) {
     padding: 0;

styles/css/vtex.tab-layout.css

@@ -52,11 +52,15 @@
   .listContainer--container-list-tab-layout-pdp {
     flex-direction: column;
     padding: 0;
-    gap: 16px;
     margin-bottom: 16px;
+    border-top: 1px solid #B9B9B9;
   }
   .listContainer--container-list-tab-layout-pdp .listItem {
     width: max-content;
+    margin-bottom: 16px;
+  }
+  .listContainer--container-list-tab-layout-pdp .listItem:first-child {
+    margin-top: 16px;
   }
   .listContainer--container-list-tab-layout-pdp .listItemActive {
     border: 0;

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

@@ -36,6 +36,10 @@
     background-color: #000000;
     border: 0;
     border-radius: 0;
+
+    :global(.vtex-button__label){
+      padding: 12px 0 !important;
+    }
   }
 }
 
@@ -58,6 +62,33 @@
       display: flex;
       flex-direction: column;
       padding-top: 16px;
+      padding-bottom: 0;
      }
   }
+
+  .flexRowContent--container-related-products-pdp{
+    padding: 0 53px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .flexRowContent--container-quantity-and-buy-button{
+    display: flex;
+    flex-direction: column;
+
+    :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
+      justify-content: flex-start;
+    }
+
+    :global(.vtex-button){
+      :global(.vtex-button__label){
+        display: inline-block;
+        width: 56.7567%;
+      }
+    }
+  }
+
+  .flexRowContent--container-related-products-pdp{
+    padding: 0 48px;
+  }
 }

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

@@ -1,7 +1,3 @@
-.quantitySelectorContainer{
-  margin-top: 6px;
-}
-
 .quantitySelectorTitle {
   display: none;
 }
@@ -36,3 +32,9 @@
     color: #000000;
   }
 }
+
+@media screen and (max-width: 768px) {
+    .quantitySelectorContainer{
+      width: 128px !important;
+    }
+}

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

@@ -86,3 +86,42 @@
     }
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .containerNormal--container-product-summary-related-products-pdp{
+    .element--container-product-summary-related-products-pdp{
+      .nameContainer{
+        .productBrand{
+          font-size: 14px;
+          line-height: 19px;
+        }
+      }
+
+      .priceContainer{
+        .listPrice{
+          &::before{
+            font-size: 12px;
+            line-height: 16px;
+          }
+
+          &::after{
+            font-size: 12px;
+            line-height: 16px;
+          }
+
+          .currencyContainer{
+            font-size: 12px;
+            line-height: 16px;
+          }
+        }
+
+        .sellingPriceContainer{
+          .currencyContainer{
+            font-size: 18px;
+            line-height: 25px;
+          }
+        }
+      }
+    }
+  }
+}

styles/sass/pages/product/vtex.rich-text.scss

@@ -18,3 +18,11 @@
     margin-bottom: 24px;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .container--title-related-products{
+    .heading--title-related-products{
+      font-size: 20px;
+    }
+  }
+}

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

@@ -46,4 +46,26 @@
   }
 }
 
+@media screen and (max-width: 1024px) {
+  .sliderLayoutContainer--container-slider-related-products-pdp {
+    .sliderLeftArrow--container-slider-related-products-pdp{
+      left: -23px;
+    }
 
+    .sliderRightArrow--container-slider-related-products-pdp{
+      right: -22px;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .sliderLayoutContainer--container-slider-related-products-pdp {
+    .sliderLeftArrow--container-slider-related-products-pdp{
+      left: -21px;
+    }
+
+    .sliderRightArrow--container-slider-related-products-pdp{
+      right: -20px;
+    }
+  }
+}

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

@@ -207,10 +207,10 @@
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
-      text-decoration-line: underline;
 
       :last-child{
         color: #000000;
+        text-decoration-line: underline;
       }
 
       :global(.vtex__icon-external-link){
@@ -341,6 +341,8 @@
     grid-template-areas: "label button"
                           "notCep notCep";
     grid-template-columns: 83.4459% 1fr;
+    padding-bottom: 23px;
+    margin-bottom: 16px;
 
     :global(.vtex-address-form__postalCode){
       padding: 0;

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

@@ -54,11 +54,18 @@
   .listContainer--container-list-tab-layout-pdp{
     flex-direction: column;
     padding: 0;
-    gap: 16px;
+    // gap: 16px;
     margin-bottom: 16px;
 
+    border-top: 1px solid #B9B9B9;
+
     .listItem{
       width: max-content;
+      margin-bottom: 16px;
+
+      &:first-child{
+        margin-top: 16px;
+      }
     }
 
     .listItemActive{