feat: adiciona responsividade mobile

react/components/Html/styles.css

@@ -17,3 +17,14 @@
     width: 100%;
   }
 }
+
+@media only screen and (max-width: 768px) {
+  [class*="html--buy-button"] {
+    flex-direction: column;
+    margin-bottom: 16px;
+  }
+
+  [class*="html--buy-button"] :global(.vtex-button) {
+    height: 74px;
+  }
+}

react/components/Pix-bloco/Pix.tsx

@@ -29,7 +29,7 @@ const Pix = () => {
           <img src="https://agenciamagma.vtexassets.com/arquivos/pix-logo-vitor-soares.png" alt="desconto" />
         </div>
         <div className={styles["discount"]}>
-          <p className={styles["value"]}>R${totalValue.toFixed(2)}</p>
+          <p className={styles["value"]}>R${totalValue.toFixed(2).replace(".", ",")}</p>
           <p className={styles["text"]}>10 % de desconto</p>
         </div>
       </div>

styles/css/vtex.flex-layout.css

@@ -43,6 +43,11 @@
 :global(.vtex-flex-layout-0-x-flexCol--image-description) {
   padding-right: 32px;
 }
+@media only screen and (max-width: 1025px) {
+  :global(.vtex-flex-layout-0-x-flexCol--image-description) {
+    padding-right: 0;
+  }
+}
 
 @media only screen and (max-width: 1025px) {
   :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {

styles/css/vtex.product-quantity.css

@@ -6,7 +6,12 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Cores */
 /* Grid breakpoints */
-.numeric-stepper__input {
-  background: black;
+@media only screen and (max-width: 767px) {
+  .quantitySelectorContainer {
+    margin-bottom: 0;
+  }
 }

styles/css/vtex.product-summary.css

@@ -16,6 +16,12 @@
   max-height: unset;
   max-width: 314px;
 }
+@media only screen and (max-width: 1025px) {
+  .imageNormal {
+    height: 291.2px;
+    max-width: 291.2px;
+  }
+}
 
 .brandName {
   font-weight: 400;
@@ -23,6 +29,12 @@
   line-height: 25px;
   color: #000000;
 }
+@media only screen and (max-width: 1025px) {
+  .brandName {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
 
 .nameContainer {
   padding: 16px 0 8px 0;
@@ -37,6 +49,12 @@
   line-height: 19px;
   color: #bababa;
 }
+@media only screen and (max-width: 1025px) {
+  .priceContainer .listPriceContainer {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
 .priceContainer .listPriceContainer::after {
   content: "por";
 }
@@ -55,6 +73,12 @@
   line-height: 33px;
   color: #000000;
 }
+@media only screen and (max-width: 1025px) {
+  .priceContainer .price_sellingPrice {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
 .priceContainer .sellingPriceContainer {
   padding: 0 0 32px 0;
 }

styles/css/vtex.store-components.css

@@ -468,6 +468,7 @@
 }
 @media only screen and (max-width: 1025px) {
   .productDescriptionContainer .productDescriptionTitle {
+    font-size: 20px;
     padding-top: 16px;
   }
 }
@@ -485,6 +486,8 @@
 }
 @media only screen and (max-width: 1025px) {
   .productDescriptionContainer .productDescriptionText {
+    font-size: 14px;
+    line-height: 19px;
     border-bottom: 1px solid #bfbfbf;
     padding-bottom: 16px;
   }

styles/css/vtex.tab-layout.css

@@ -24,6 +24,12 @@
   padding: 16px 0 32px 0;
   color: #575757;
 }
+@media only screen and (max-width: 1025px) {
+  .container--structure::after {
+    font-size: 20px;
+    line-height: 32px;
+  }
+}
 
 .contentContainer {
   padding: 0 32px;

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

@@ -29,6 +29,10 @@
 
 :global(.vtex-flex-layout-0-x-flexCol--image-description) {
   padding-right: 32px;
+
+  @include mq(md, max) {
+    padding-right: 0;
+  }
 }
 
 :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {

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

@@ -0,0 +1,5 @@
+.quantitySelectorContainer {
+  @include mq(sm, max) {
+    margin-bottom: 0;
+  }
+}

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

@@ -3,6 +3,11 @@
   height: 314px;
   max-height: unset;
   max-width: 314px;
+
+  @include mq(md, max) {
+    height: 291.2px;
+    max-width: 291.2px;
+  }
 }
 
 .brandName {
@@ -11,6 +16,11 @@
   line-height: 25px;
 
   color: $black;
+
+  @include mq(md, max) {
+    font-size: 14px;
+    line-height: 19px;
+  }
 }
 
 .nameContainer {
@@ -27,6 +37,11 @@
 
     color: $gray-700;
 
+    @include mq(md, max) {
+      font-size: 12px;
+      line-height: 16px;
+    }
+
     &::after {
       content: "por";
     }
@@ -50,6 +65,11 @@
     line-height: 33px;
 
     color: $black;
+
+    @include mq(md, max) {
+      font-size: 18px;
+      line-height: 25px;
+    }
   }
 
   .sellingPriceContainer {

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

@@ -561,6 +561,7 @@ margin-top: 16px;
     }
 
     @include mq(md, max) {
+      font-size: 20px;
       padding-top: 16px;
     }
   }
@@ -578,6 +579,8 @@ margin-top: 16px;
     }
 
     @include mq(md, max) {
+      font-size: 14px;
+      line-height: 19px;
       border-bottom: 1px solid $gray-400;
       padding-bottom: 16px;
     }

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

@@ -11,6 +11,11 @@
     padding: 16px 0 32px 0;
 
     color: $gray-100;
+
+    @include mq(md, max) {
+      font-size: 20px;
+      line-height: 32px;
+    }
   }
 }
 

styles/sass/utils/_vars.scss

@@ -34,7 +34,7 @@ $color-green: #4caf50;
 $grid-breakpoints: (
 	xs: 0,
 	cstm: 400,
-	mobile: 768px,
+	sm: 768px,
 	md: 1026px,
 	xl: 1920px
 ) !default;