feat(pdp): Adiciona produto indisponivel mobile

react/components/Html/styles.css

@@ -38,6 +38,12 @@
   display: flex;
   height: 49px;
 }
+@media screen and (max-width: 768px) {
+  [class*="html--qtd-btn"] {
+    flex-direction: column;
+    height: unset;
+  }
+}
 
 [class*="html--qtd-btn"] :global(.vtex-button) {
   background-color: #000000;
@@ -49,3 +55,9 @@
   color: #ffffff;
   border-radius: 0%;
 }
+@media screen and (max-width: 768px) {
+  [class*="html--qtd-btn"] :global(.vtex-button) {
+    height: 74px;
+    padding: 0 64px;
+  }
+}

store/blocks/pdp/product.jsonc

@@ -68,7 +68,8 @@
   "product-description": {
     "props": {
       "marginBottom": 7,
-      "blockClass": "descricao"
+      "blockClass": "descricao",
+      "collapseContent": false
     }
   },
   "condition-layout.product#availability": {

styles/css/vtex.flex-layout.css

@@ -38,4 +38,7 @@
   .flexRowContent--container-produto {
     display: block;
   }
+  .flexRowContent--container-produto .stretchChildrenWidth {
+    width: 100% !important;
+  }
 }

styles/css/vtex.product-quantity.css

@@ -48,6 +48,11 @@
   height: 100%;
   /*height: 49px;*/
 }
+@media screen and (max-width: 768px) {
+  .quantitySelectorContainer--quantidade {
+    margin: 0 0 10px 0;
+  }
+}
 
 /*.summaryContainer {
   background-color: blue;

styles/css/vtex.store-components.css

@@ -19,6 +19,7 @@
 
 .carouselGaleryThumbs {
   margin-top: 16px;
+  display: block;
 }
 
 .thumbImg {
@@ -380,9 +381,29 @@
   }
 }
 
+.productDescriptionText--descricao {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+@media screen and (max-width: 768px) {
+  .productDescriptionText--descricao {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
+
 .subscriberContainer {
   position: relative;
 }
+@media screen and (max-width: 1024px) {
+  .subscriberContainer .content {
+    display: flex;
+    width: 100% !important;
+    max-width: unset;
+  }
+}
 .subscriberContainer .title {
   font-size: 0;
   margin: 0;
@@ -443,6 +464,7 @@
   border: none;
   border-radius: 0%;
   height: 49px;
+  cursor: pointer;
 }
 .subscriberContainer .content .submit :global(.vtex-button__label) {
   font-size: 0;

styles/css/vtex.tab-layout.css

@@ -38,6 +38,11 @@
   margin: 0;
   height: 42px;
 }
+@media screen and (max-width: 1024px) {
+  .listItem {
+    margin: 5px 0;
+  }
+}
 .listItem :global(.vtex-button) {
   background-color: transparent;
   cursor: pointer;

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

@@ -24,5 +24,9 @@
   gap: 32px;
   @media screen and (max-width: 1024px) {
     display: block;
+
+    .stretchChildrenWidth {
+      width: 100% !important;
+    }
   }
 }

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

@@ -41,6 +41,9 @@
   padding: 0;
   height: 100%;
   /*height: 49px;*/
+  @media screen and (max-width: 768px) {
+    margin: 0 0 10px 0;
+  }
 }
 
 /*.summaryContainer {

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

@@ -10,6 +10,7 @@
 
 .carouselGaleryThumbs {
   margin-top: 16px;
+  display: block;
 }
 
 .thumbImg {
@@ -413,10 +414,27 @@
     line-height: 19px;
   }
 }
+.productDescriptionText--descricao {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: $color-gray6;
+  @media screen and (max-width: 768px) {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
 
 //PRODUTO INDISPONIVEL
 .subscriberContainer {
   position: relative;
+  .content {
+    @media screen and (max-width: 1024px) {
+      display: flex;
+      width: 100% !important;
+      max-width: unset;
+    }
+  }
 
   .title {
     font-size: 0;
@@ -484,6 +502,7 @@
         border: none;
         border-radius: 0%;
         height: 49px;
+        cursor: pointer;
       }
 
       :global(.vtex-button__label) {

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

@@ -27,6 +27,9 @@
   padding: 0;
   margin: 0;
   height: 42px;
+  @media screen and (max-width: 1024px) {
+    margin: 5px 0;
+  }
 
   :global(.vtex-button) {
     background-color: transparent;