feat: adiciona css para layout mobile

react/Placeholder.tsx

@@ -0,0 +1,9 @@
+const Placeholder = () => {
+  if (typeof document !== 'undefined') {
+    const InputCep = document.querySelector('.vtex-address-form-4-x-input')
+    InputCep?.setAttribute('placeholder', 'Digite seu CEP')
+  }
+
+  return null
+}
+export default Placeholder

store/blocks/pdp/product.jsonc

@@ -349,6 +349,7 @@
       "html#pixacademy",
       "html#sku-selector",
       "html#quantityAndButton",
+      "Placeholder",
       "product-assembly-options",
       "product-gifts",
       "availability-subscriber",
@@ -482,4 +483,4 @@
       }
     }
   }
-}
+}

store/interfaces.json

@@ -11,5 +11,8 @@
   },
   "Pix-academy": {
     "component": "imagempix"
+  },
+  "Placeholder": {
+    "component": "Placeholder"
   }
 }

styles/css/vtex.store-components.css

@@ -56,7 +56,6 @@
 }
 .newsletter .container .form .label::after {
   content: "Receba ofertas e novidades por e-mail";
-  white-space: pre;
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
@@ -110,9 +109,9 @@
 .carouselGaleryThumbs {
   width: 70%;
 }
-@media (max-width: 1024px) {
+@media (max-width: 639px) {
   .carouselGaleryThumbs {
-    width: 95%;
+    display: flex;
   }
 }
 
@@ -400,13 +399,27 @@
   color: #929292;
 }
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
-  width: 231px;
+  width: 100%;
   height: 49px;
   margin: 0;
   padding: 16.5px 0 16.5px 16px;
   border: 1px solid #cccccc;
   border-radius: 0;
 }
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__error) {
+  position: absolute;
+  bottom: 0;
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
   display: flex;
   position: absolute;
@@ -414,10 +427,10 @@
   left: 312px;
   top: 41.5px;
 }
-@media (max-width: 376px) {
+@media (max-width: 476px) {
   .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
-    position: unset;
+    left: 120px;
-    justify-content: right;
+    top: 85px;
   }
 }
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
@@ -432,6 +445,7 @@
   width: 49px;
   height: 49px;
   margin-bottom: 5px;
+  padding: 0 14.5px;
   background: #000;
   border: 1px solid #000;
   border-radius: 0;
@@ -523,16 +537,11 @@
   gap: 16px !important;
 }
 .carouselGaleryThumbs :first-child :first-child .productImagesThumb {
-  width: 19%;
+  max-width: 90px;
   height: fit-content !important;
   max-height: 90px;
   margin: 0;
 }
-@media (max-width: 1024px) {
-  .carouselGaleryThumbs :first-child :first-child .productImagesThumb {
-    width: 10%;
-  }
-}
 .carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg {
   border-radius: 8px;
 }

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

@@ -47,7 +47,6 @@
           }
           &::after{
             content: 'Receba ofertas e novidades por e-mail';
-            white-space: pre;
             font-family: 'Open Sans';
             font-style: normal;
             font-weight: 400;
@@ -104,8 +103,8 @@
   }
 .carouselGaleryThumbs {
   width: 70%;
-  @media (max-width: 1024px){
+  @media (max-width: 639px){
-    width: 95%;
+    display: flex;
   }
 }
 // .productImageTag{
@@ -413,7 +412,7 @@
       }
 
       :global(.vtex-input-prefix__group) {
-        width: 231px;
+        width: 100%;
         height: 49px;
         margin: 0;
         padding: 16.5px 0 16.5px 16px;
@@ -422,16 +421,29 @@
         border-radius: 0;
       }
     }
-
+    :global(.vtex-address-form-4-x-input) {
+      font-family: 'Open Sans', sans-serif;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      display: flex;
+      align-items: center;
+      padding: 8px 0;
+    }
+    :global(.vtex-input__error) {
+      position: absolute;
+      bottom: 0;
+    }
     :global(.vtex-address-form__postalCode-forgottenURL) {
       display: flex;
       position: absolute;
       padding: 0;
       left: 312px;
       top: 41.5px;
-      @media (max-width: 376px){
+      @media (max-width: 476px){
-        position: unset;
+        left: 120px;
-        justify-content: right;
+        top: 85px;
       }
 
       :last-child{
@@ -449,6 +461,7 @@
     width: 49px;
     height: 49px;
     margin-bottom: 5px;
+    padding: 0 14.5px;
 
     background: #000;
     border: 1px solid #000;
@@ -557,14 +570,10 @@
       gap: 16px !important;
 
       .productImagesThumb {
-        width: 19%;
+        max-width: 90px;
         height: fit-content !important;
         max-height: 90px;
         margin: 0;
-
-        @media (max-width: 1024px){
-          width: 10%;
-        }
         .figure {
           .thumbImg {
             border-radius: 8px;