feat: adiciona query mobile

styles/css/vtex.flex-layout.css

@@ -35,12 +35,23 @@
   width: unset !important;
   flex: 1;
 }
+@media (max-width: 768px) {
+  .flexRowContent--addToBag .stretchChildrenWidth:last-child {
+    padding: 0;
+    margin-top: 10px;
+  }
+}
 .flexRowContent--addToBag .stretchChildrenWidth:last-child :global(.vtex-button) {
   background-color: #000000;
   border: none;
   height: 49px;
   box-sizing: border-box;
 }
+@media (max-width: 768px) {
+  .flexRowContent--addToBag .stretchChildrenWidth:last-child :global(.vtex-button) {
+    height: 74px;
+  }
+}
 
 :global(.vtex-add-to-cart-button-0-x-buttonText) {
   font-size: 0;
@@ -53,4 +64,10 @@
   font-size: 18px;
   line-height: 25px;
   color: #ffffff;
+}
+@media (max-width: 768px) {
+  :global(.vtex-add-to-cart-button-0-x-buttonText)::after {
+    width: 116px;
+    display: block;
+  }
 }

styles/css/vtex.product-summary.css

@@ -28,4 +28,8 @@
 
 .element {
   padding: 0;
+}
+
+.imageWrapper {
+  margin-bottom: 16px;
 }

styles/css/vtex.rich-text.css

@@ -13,6 +13,16 @@
   margin-bottom: 32px;
   margin-top: 0;
 }
+@media (max-width: 1024px) {
+  .heading {
+    margin-bottom: 24px;
+  }
+}
+@media (max-width: 768px) {
+  .heading {
+    margin-bottom: 16px;
+  }
+}
 .heading::after {
   content: "Você também pode gostar:";
   font-family: "Open Sans";
@@ -22,6 +32,11 @@
   line-height: 38px;
   color: #575757;
 }
+@media (max-width: 768px) {
+  .heading::after {
+    font-size: 20px;
+  }
+}
 
 .container {
   justify-content: center;

styles/css/vtex.slider-layout.css

@@ -43,7 +43,12 @@
 }
 
 .sliderRightArrow--carousel {
-  right: 20px;
+  right: 50px;
+}
+@media (max-width: 768px) {
+  .sliderRightArrow--carousel {
+    right: 10px;
+  }
 }
 .sliderRightArrow--carousel::after {
   content: url(assets/right-arrow.png);
@@ -56,7 +61,12 @@
 }
 
 .sliderLeftArrow--carousel {
-  left: 20px;
+  left: 50px;
+}
+@media (max-width: 768px) {
+  .sliderLeftArrow--carousel {
+    left: 10px;
+  }
 }
 .sliderLeftArrow--carousel::after {
   content: url(assets/left-arrow.png);

styles/css/vtex.store-components.css

@@ -20,6 +20,12 @@
     text-align: left;
   }
 }
+@media (max-width: 768px) {
+  .productNameContainer--quickview .productBrand {
+    width: 220px !important;
+    display: block;
+  }
+}
 
 .skuSelectorContainer--sku-selector {
   display: flex;
@@ -121,6 +127,11 @@
   width: 231px;
   height: 49px;
 }
+@media (max-width: 768px) {
+  .shippingContainer :global(.vtex-input-prefix__group) {
+    width: 100%;
+  }
+}
 .shippingContainer :global(.vtex-button) {
   position: absolute;
   border: 0;
@@ -129,6 +140,12 @@
   top: 27px;
   left: 229px;
 }
+@media (max-width: 768px) {
+  .shippingContainer :global(.vtex-button) {
+    right: 0;
+    left: unset;
+  }
+}
 .shippingContainer :global(.vtex-button__label) {
   background-color: #000000;
   width: 49px;
@@ -148,6 +165,11 @@
   padding: 0;
   margin-top: 16px;
 }
+@media (max-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) {
+    display: block;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
   width: 280px;
 }
@@ -167,6 +189,12 @@
   display: flex;
   align-items: center;
 }
+@media (max-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    justify-content: right;
+    padding: 0;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :first-child {
   font-style: normal;
   font-weight: 400;
@@ -178,6 +206,13 @@
   top: 5px;
   left: 37px;
 }
+@media (max-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :first-child {
+    position: initial;
+    padding: 0;
+    padding-top: 8px;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
   display: none;
 }
@@ -196,6 +231,11 @@
     margin-bottom: 32px;
   }
 }
+@media (max-width: 768px) {
+  .carouselGaleryThumbs {
+    display: block !important;
+  }
+}
 .carouselGaleryThumbs :global(.vtex-store-components-3-x-thumbImg) {
   width: 90px;
   height: 90px;

styles/css/vtex.tab-layout.css

@@ -15,6 +15,12 @@
     padding: 16px 24px 0 24px;
   }
 }
+@media (max-width: 768px) {
+  .contentContainer {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
 .contentContainer .contentItem {
   display: flex;
 }
@@ -149,4 +155,10 @@
   line-height: 38px;
   text-transform: capitalize;
   color: #000000;
+}
+
+@media (max-width: 768px) {
+  .container--description {
+    padding: 0 40px;
+  }
 }

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

@@ -27,11 +27,20 @@
       width: unset !important;
       flex: 1;
 
+      @media (max-width: 768px) {
+        padding: 0;
+        margin-top: 10px;
+      }
+
       :global(.vtex-button) {
         background-color: #000000;
         border: none;
         height: 49px;
         box-sizing: border-box;
+
+        @media (max-width: 768px) {
+          height: 74px;
+        }
       }
     }
   }
@@ -47,5 +56,10 @@
     font-size: 18px;
     line-height: 25px;
     color: #ffffff;
+
+    @media (max-width: 768px) {
+      width: 116px;
+      display: block;
+    }
   }
 }

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

@@ -20,3 +20,7 @@
 .element {
   padding: 0;
 }
+
+.imageWrapper {
+  margin-bottom: 16px;
+}

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

@@ -2,6 +2,13 @@
   font-size: 0;
   margin-bottom: 32px;
   margin-top: 0;
+  @media (max-width: 1024px) {
+    margin-bottom: 24px;
+  }
+
+  @media (max-width: 768px) {
+    margin-bottom: 16px;
+  }
 
   &::after {
     content: "Você também pode gostar:";
@@ -11,6 +18,10 @@
     font-size: 24px;
     line-height: 38px;
     color: #575757;
+
+    @media (max-width: 768px) {
+      font-size: 20px;
+    }
   }
 }
 

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

@@ -33,7 +33,11 @@
 }
 
 .sliderRightArrow--carousel {
-  right: 20px;
+  right: 50px;
+  @media (max-width: 768px) {
+    right: 10px;
+  }
+
   &::after {
     content: url(assets/right-arrow.png);
     height: 30px;
@@ -47,7 +51,10 @@
 }
 
 .sliderLeftArrow--carousel {
-  left: 20px;
+  left: 50px;
+  @media (max-width: 768px) {
+    left: 10px;
+  }
   &::after {
     content: url(assets/left-arrow.png);
     height: 30px;

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

@@ -9,6 +9,13 @@
   @media (max-width: 1024px) {
     text-align: left;
   }
+
+  .productBrand {
+    @media (max-width: 768px) {
+      width: 220px !important;
+      display: block;
+    }
+  }
 }
 
 .skuSelectorContainer--sku-selector {
@@ -117,6 +124,10 @@
   :global(.vtex-input-prefix__group) {
     width: 231px;
     height: 49px;
+
+    @media (max-width: 768px) {
+      width: 100%;
+    }
   }
   :global(.vtex-button) {
     position: absolute;
@@ -125,6 +136,11 @@
     height: 49px;
     top: 27px;
     left: 229px;
+
+    @media (max-width: 768px) {
+      right: 0;
+      left: unset;
+    }
   }
   :global(.vtex-button__label) {
     background-color: #000000;
@@ -144,6 +160,11 @@
     display: flex;
     padding: 0;
     margin-top: 16px;
+
+    @media (max-width: 768px) {
+      display: block;
+    }
+
     :global(.vtex-input) {
       width: 280px;
     }
@@ -163,6 +184,12 @@
   :global(.vtex-address-form__postalCode-forgottenURL) {
     display: flex;
     align-items: center;
+
+    @media (max-width: 768px) {
+      justify-content: right;
+      padding: 0;
+    }
+
     :first-child {
       font-style: normal;
       font-weight: 400;
@@ -173,6 +200,12 @@
       position: relative;
       top: 5px;
       left: 37px;
+
+      @media (max-width: 768px) {
+        position: initial;
+        padding: 0;
+        padding-top: 8px;
+      }
     }
     :global(.vtex__icon-external-link) {
       display: none;
@@ -190,6 +223,10 @@
   @media (max-width: 1024px) {
     margin-bottom: 32px;
   }
+
+  @media (max-width: 768px) {
+    display: block !important;
+  }
   :global(.vtex-store-components-3-x-thumbImg) {
     width: 90px;
     height: 90px;

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

@@ -3,6 +3,10 @@
   @media (max-width: 1024px) {
     padding: 16px 24px 0 24px;
   }
+  @media (max-width: 768px) {
+    padding-left: 0;
+    padding-right: 0;
+  }
 
   .contentItem {
     display: flex;
@@ -135,3 +139,9 @@
     color: #000000;
   }
 }
+
+.container--description {
+  @media (max-width: 768px) {
+    padding: 0 40px;
+  }
+}