feat: Cria área do produto mobile

store/blocks/pdp/product.jsonc

@@ -5,12 +5,13 @@
       //"example-component",
       "condition-layout.product#availability",
       "tab-layout",
-      "flex-layout.row#specifications-title",
+      //"flex-layout.row#specifications-title",
-      "product-specification-group#table",
+      //"product-specification-group#table",
-      "shelf.relatedProducts",
+      "shelf.relatedProducts"
-      "product-questions-and-answers"
+      //"product-questions-and-answers"
     ]
   },
+
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -116,6 +117,9 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
+      //"availability-subscriber",
+      //"product-assembly-options",
       "product-rating-summary",
       //"flex-layout.row#list-price-savings",
       "flex-layout.row#selling-prices",
@@ -123,12 +127,9 @@
       "pix-component",
       //"product-separator",
       "sku-selector",
-      "product-identifier.product",
       //"product-quantity",
-      "product-assembly-options",
+      //"product-gifts",
-      "product-gifts",
       "flex-layout.row#buy-button",
-      "availability-subscriber",
       "shipping-simulator",
       "placeholder-component"
       //"share#default"
@@ -190,9 +191,9 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "flex-layout.row#availability",
-      "sku-selector",
+      "sku-selector"
-      "product-identifier.product"
     ]
   },
   "flex-layout.row#availability": {

styles/css/vtex.flex-layout.css

@@ -15,6 +15,16 @@
   margin: 16px 0;
   padding: 0 40px;
 }
+@media only screen and (max-width: 1024px) {
+  .flexRow .flexRowContent--productPanel {
+    flex-direction: column;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  .flexRow .flexRowContent--productPanel .stretchChildrenWidth {
+    width: 100% !important;
+  }
+}
 .flexRow .flexRowContent--productPanel .stretchChildrenWidth:first-child {
   padding: 0;
   justify-content: normal;
@@ -22,6 +32,12 @@
 .flexRow .flexRowContent--productPanel .flexCol--productShowcase {
   padding: 0 32px 0 0;
 }
+@media only screen and (max-width: 1024px) {
+  .flexRow .flexRowContent--productPanel .flexCol--productShowcase {
+    padding: 0;
+    margin: 0 0 32px;
+  }
+}
 .flexRow .flexRowContent--quantityAndBuy {
   margin: 0 0 16px;
 }

styles/css/vtex.product-identifier.css

@@ -9,14 +9,20 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */
 .product-identifier--productReference {
-  position: absolute;
+  margin: 8px 0 0;
-  top: 42px;
+  display: flex;
-  right: 0;
+  justify-content: flex-end;
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: rgba(146, 146, 146, 0.4784313725);
 }
-.product-identifier--productReference__label, .product-identifier--productReference__separator {
+@media only screen and (max-width: 1024px) {
+  .product-identifier--productReference {
+    justify-content: flex-start;
+  }
+}
+.product-identifier--productReference :global(.vtex-product-identifier-0-x-product-identifier__label),
+.product-identifier--productReference :global(.vtex-product-identifier-0-x-product-identifier__separator) {
   display: none;
 }

styles/css/vtex.product-price.css

@@ -9,7 +9,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */
 .sellingPrice--hasListPrice {
-  margin: 51px 0 0;
+  margin: 24px 0 0;
   font-weight: 700;
   font-size: 25px;
   line-height: 38px;

styles/css/vtex.store-components.css

@@ -37,6 +37,11 @@
 .container .carouselContainer .carouselThumbBorder {
   height: fit-content;
 }
+@media only screen and (max-width: 1024px) {
+  .container .productImagesGallerySlide {
+    width: 100% !important;
+  }
+}
 .container .productImagesThumb {
   max-height: 90px !important;
   margin: 0 16px 0 0;
@@ -55,9 +60,20 @@
   max-width: 664px;
   min-height: 664px;
 }
+@media only screen and (max-width: 1024px) {
+  .container .productImageTag--main {
+    min-height: 994px;
+    max-width: none;
+  }
+}
 .container .productNameContainer {
   text-align: right;
 }
+@media only screen and (max-width: 1024px) {
+  .container .productNameContainer {
+    text-align: left;
+  }
+}
 .container .productNameContainer .productBrand--quickview {
   font-weight: 300;
   font-size: 20px;
@@ -103,6 +119,12 @@
   justify-content: center;
   border: 1px solid #989898;
 }
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
 .container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
   border-radius: 50%;
   background-image: linear-gradient(to top left, transparent 44%, #d5d5d5, transparent 52%);
@@ -110,6 +132,9 @@
 .container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox {
   border: 2px solid #000;
 }
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper {
+  color: #000;
+}
 .container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer {
   margin: 0;
 }
@@ -127,7 +152,7 @@
   margin: 0;
 }
 .container .subscriberContainer {
-  margin: 43px 0 0;
+  margin: 24px 0 0;
 }
 .container .subscriberContainer :global(.vtex-store-components-3-x-title) {
   font-size: 0;
@@ -159,6 +184,8 @@
   column-gap: 10px;
   row-gap: 15px;
   margin: 16px 0 0;
+  width: 100%;
+  max-width: initial;
 }
 .container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-input) {
   margin: 0;

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

@@ -10,13 +10,28 @@
     margin: 16px 0;
     padding: 0 40px;
 
-    .stretchChildrenWidth:first-child {
+    @include mq(lg, max) {
-      padding: 0;
+      flex-direction: column;
-      justify-content: normal;
+    }
+
+    .stretchChildrenWidth {
+      @include mq(lg, max) {
+        width: 100% !important;
+      }
+
+      &:first-child {
+        padding: 0;
+        justify-content: normal;
+      }
     }
 
     .flexCol--productShowcase {
       padding: 0 32px 0 0;
+
+      @include mq(lg, max) {
+        padding: 0;
+        margin: 0 0 32px;
+      }
     }
   }
 

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

@@ -1,14 +1,18 @@
 .product-identifier--productReference {
-  position: absolute;
+  margin: 8px 0 0;
-  top: 42px;
+  display: flex;
-  right: 0;
+  justify-content: flex-end;
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: $color-gray8;
 
-  &__label,
+  @include mq(lg, max) {
-  &__separator {
+    justify-content: flex-start;
+  }
+
+  :global(.vtex-product-identifier-0-x-product-identifier__label),
+  :global(.vtex-product-identifier-0-x-product-identifier__separator) {
     display: none;
   }
 }

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

@@ -1,5 +1,5 @@
 .sellingPrice--hasListPrice {
-  margin: 51px 0 0;
+  margin: 24px 0 0;
   font-weight: 700;
   font-size: 25px;
   line-height: 38px;

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

@@ -32,6 +32,12 @@
     }
   }
 
+  .productImagesGallerySlide {
+    @include mq(lg, max) {
+      width: 100% !important;
+    }
+  }
+
   .productImagesThumb {
     max-height: 90px !important;
     margin: 0 16px 0 0;
@@ -51,11 +57,20 @@
     object-fit: fill !important;
     max-width: 664px;
     min-height: 664px;
+
+    @include mq(lg, max) {
+      min-height: 994px;
+      max-width: none;
+    }
   }
 
   .productNameContainer {
     text-align: right;
 
+    @include mq(lg, max) {
+      text-align: left;
+    }
+
     .productBrand--quickview {
       font-weight: 300;
       font-size: 20px;
@@ -105,6 +120,13 @@
             justify-content: center;
             border: 1px solid $color-gray9;
 
+            .valueWrapper {
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 19px;
+              color: $color-gray15;
+            }
+
             .diagonalCross {
               border-radius: 50%;
               background-image: linear-gradient(
@@ -118,6 +140,10 @@
 
           &--selected .skuSelectorInternalBox {
             border: 2px solid $color-black2;
+
+            .valueWrapper {
+              color: $color-black2;
+            }
           }
         }
       }
@@ -148,7 +174,7 @@
   }
 
   .subscriberContainer {
-    margin: 43px 0 0;
+    margin: 24px 0 0;
 
     :global(.vtex-store-components-3-x-title) {
       font-size: 0;
@@ -183,6 +209,8 @@
         column-gap: 10px;
         row-gap: 15px;
         margin: 16px 0 0;
+        width: 100%;
+        max-width: initial;
 
         :global(.vtex-store-components-3-x-input) {
           margin: 0;

styles/sass/utils/_vars.scss

@@ -20,6 +20,7 @@ $color-gray11: #d5d5d5;
 $color-gray12: #868686;
 $color-gray13: #b9b9b9;
 $color-gray14: #bfbfbf;
+$color-gray15: #b9b9b999;
 
 $color-blue: #4267b2;
 
@@ -31,8 +32,8 @@ $grid-breakpoints: (
   cstm: 400,
   sm: 576px,
   md: 768px,
-  lg: 992px,
+  lg: 1025px,
-  xl: 1200px,
+  xl: 2500px,
 ) !default;
 
 $z-index: (