feat: cria estilização para area abaico da imagem do indisponivel

store/blocks/pdp/product.jsonc

@@ -85,7 +85,8 @@
         "desktop": "1:1",
         "phone": "auto"
       },
-      "maxHeight": 664,
+      // "maxHeight": 664,
+      "maxHeight": 944,
 
       "showPaginationDots": false,
       "displayThumbnailsArrows": false,
@@ -180,12 +181,17 @@
       "blockClass": "info-availability"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "flex-layout.row#identifieAndName",
-      "product-identifier.product",
+      "flex-layout.row#availability",
-      "sku-selector",
+      "sku-selector"
-      "flex-layout.row#availability"
     ]
   },
+  "flex-layout.row#identifieAndName": {
+    "props": {
+      "blockClass": "identifieAndName"
+    },
+    "children": ["flex-layout.row#product-name", "product-identifier.product"]
+  },
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"

styles/css/vtex.flex-layout.css

@@ -8,22 +8,36 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .flexRowContent--product-main {
-  padding: 0;
+  padding: 0 40px;
   margin: 0;
   border: 1px solid red;
 }
+.flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+  min-width: 296px;
+  max-width: 664px;
+  padding: 0;
+  border-radius: 0;
+}
+@media (max-width: 1024px) {
+  .flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+    width: 100% !important;
+    max-width: 944px;
+  }
+}
 
+.flexRow--indisponivel :global(.vtex-store-components-3-x-productImagesGallerySlide) {
+  width: 100%;
+}
 .flexRow--indisponivel :global(.vtex-store-components-3-x-container) {
   padding: 0;
 }
 .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
-  padding: 0;
+  padding: 0 40px;
   margin: 0;
   gap: 32px;
 }
 @media (max-width: 1024px) {
   .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
-    padding: 0 40px;
     flex-direction: column;
   }
 }
@@ -35,13 +49,48 @@
 }
 @media (max-width: 1024px) {
   .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
-    height: 402px;
+    width: 100% !important;
+    max-width: 944px;
   }
 }
+.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  max-width: 90%;
+}
+@media (max-width: 1024px) {
+  .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) {
+    max-width: none;
+  }
+}
+.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability {
+  height: 68px;
+  margin-bottom: 8px;
+}
 .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
   justify-content: initial;
 }
 
+.flexRowContent {
+  margin-bottom: 0;
+}
+
+.flexRowContent--identifieAndName {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: center;
+}
+@media (max-width: 1024px) {
+  .flexRowContent--identifieAndName {
+    text-align: start;
+    align-items: initial;
+  }
+}
+
 .flexRow--description :global(.vtex-store-components17-x-container) {
   padding-left: 0 !important;
   padding-right: 0 !important;

styles/css/vtex.product-identifier.css

@@ -1,3 +1,34 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
 .product-identifier--productReference {
-  margin-bottom: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 40px;
+}
+@media (max-width: 1024px) {
+  .product-identifier--productReference {
+    display: block;
+    padding-right: 0;
+  }
+}
+.product-identifier--productReference .product-identifier__label,
+.product-identifier--productReference .product-identifier__separator {
+  display: none;
+}
+.product-identifier--productReference .product-identifier__value {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  /* identical to box height */
+  text-align: right;
+  color: rgba(146, 146, 146, 0.4784313725);
 }

styles/css/vtex.store-components.css

@@ -115,12 +115,15 @@
   border-bottom: 3px solid #BFBFBF;
 }
 
-.subscriberContainer {
+:global(.vtex-store-components-3-x-container) {
-  max-width: 399px;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
 }
+
 @media (max-width: 1024px) {
   .subscriberContainer {
     max-width: 765px;
+    margin-top: 24px;
   }
 }
 .subscriberContainer :global(.vtex-store-components-3-x-title) {
@@ -309,6 +312,89 @@
   }
 }
 
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
+  font-size: 0;
+  margin-left: 16px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
+  visibility: visible;
+  display: block;
+  content: "OUTRAS CORES:";
+  font-size: 14px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
+  display: none;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
+  border-radius: 30px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
+  border-radius: 21px;
+  color: #000000;
+}
+.skuSelectorContainer .diagonalCross {
+  top: 0px;
+  right: 10px;
+  bottom: 0px;
+  left: 10px;
+  transform: rotateY(180deg);
+  color: black;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
+  font-size: 0;
+  margin-left: 16px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+  visibility: visible;
+  display: block;
+  content: "OUTROS TAMANHOS:";
+  font-size: 14px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+  width: 40px;
+  height: 40px;
+  border-radius: 30px;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+  margin: auto;
+  padding: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 30px;
+  color: #000000;
+  border: 1px solid #989898;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+  padding: 0;
+  margin: auto;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue {
+  margin-right: 5px;
+}
+.skuSelectorContainer .frameAround {
+  border-color: #000;
+  z-index: 9;
+}
+
+.skuSelectorOptionsList {
+  margin: 0;
+}
+
 .productImageTag--imageDescription--main {
   max-height: 632px !important;
 }

styles/css/vtex.tab-layout.css

@@ -78,3 +78,9 @@
   line-height: 38px;
   color: #000000;
 }
+@media (max-width: 1024px) {
+  .container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button) :global(.vtex-button__label),
+  .container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
+    padding-left: 0;
+  }
+}

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

@@ -1,25 +1,40 @@
 // INICIO PRODUCT
 .flexRowContent--product-main {
-  padding: 0;
+  padding: 0 40px;
   margin: 0;
   border: 1px solid red;
+
+  :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+    min-width: 296px;
+    max-width: 664px;
+    padding: 0;
+    border-radius: 0;
+
+    @media (max-width:1024px) {
+      width: 100% !important;
+      max-width: 944px;
+    }
+  }
 }
 
 // FIM PRODUCT
 
 // INICIO INDISPONIVEL
 .flexRow--indisponivel {
+  :global(.vtex-store-components-3-x-productImagesGallerySlide) {
+    width: 100%;
+  }
 
   :global(.vtex-store-components-3-x-container) {
     padding: 0;
 
     .flexRowContent--indisponivel {
-      padding: 0;
+      padding: 0 40px;
       margin: 0;
       gap: 32px;
 
       @media (max-width:1024px) {
-        padding: 0 40px;
+        // padding: 0 40px;
         flex-direction: column;
       }
 
@@ -30,20 +45,58 @@
         padding: 0;
         border-radius: 0;
 
+        @media (max-width:1024px) {
+          width: 100% !important;
+          max-width: 944px;
+        }
+
+        :global(.vtex-store-components-3-x-productNameContainer--quickview) {
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 300;
+          font-size: 20px;
+          line-height: 34px;
+          max-width: 90%;
+
+          @media (max-width:1024px) {
+            max-width: none;
+          }
+        }
+
         @media (max-width:1024px) {
           // width: 100% !important;
           // max-width: none;
-          height: 402px;
         }
 
         .flexColChild--info-availability {
+          height: 68px;
+          margin-bottom: 8px;
+
           :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
             justify-content: initial;
+
+          }
+
         }
       }
     }
   }
 }
+
+.flexRowContent {
+  margin-bottom: 0;
+}
+
+.flexRowContent--identifieAndName {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: center;
+
+  @media (max-width:1024px) {
+    text-align: start;
+    align-items: initial;
+  }
 }
 
 // FIM INDISPONIVEL

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

@@ -0,0 +1,30 @@
+.product-identifier--productReference {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 40px;
+
+  @media (max-width:1024px) {
+    display: block;
+    padding-right: 0;
+  }
+
+  .product-identifier__label,
+  .product-identifier__separator {
+    display: none;
+  }
+
+  .product-identifier__value {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    /* identical to box height */
+
+    text-align: right;
+
+    color: #9292927a;
+  }
+}
+
+.product-identifier__value {}

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

@@ -118,13 +118,23 @@
 }
 
 // FIM NEWSLETTER
+// INICIO MAIN
+:global(.vtex-store-components-3-x-container) {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+
+
+// FIM MAIN
 
 // INICIO INDISPONIVEL
 .subscriberContainer {
-  max-width: 399px;
+  // max-width: 399px;
 
   @media (max-width:1024px) {
     max-width: 765px;
+    margin-top: 24px;
 
   }
 
@@ -351,6 +361,113 @@
   }
 }
 
+// SKU E TAMANHOS
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+
+  .skuSelectorSubcontainer--cor {
+    .skuSelectorName {
+      font-size: 0;
+
+      margin-left: 16px;
+
+      &::after {
+        visibility: visible;
+        display: block;
+        content: "OUTRAS CORES:";
+        font-size: 14px;
+      }
+    }
+
+    .skuSelectorSelectorImageValue,
+    .skuSelectorNameSeparator {
+      display: none;
+    }
+
+    .frameAround {
+      border-radius: 30px;
+    }
+
+    .skuSelectorItemImageValue,
+    .skuSelectorInternalBox {
+      border-radius: 21px;
+      color: $color-black;
+    }
+  }
+
+  .diagonalCross {
+    top: 0px;
+    right: 10px;
+    bottom: 0px;
+    left: 10px;
+    transform: rotateY(180deg);
+    color: black;
+  }
+
+  .skuSelectorSubcontainer--tamanho {
+
+    .skuSelectorName {
+      font-size: 0;
+
+      margin-left: 16px;
+
+      &::after {
+        visibility: visible;
+        display: block;
+        content: "OUTROS TAMANHOS:";
+        font-size: 14px;
+      }
+    }
+
+    .frameAround {
+      // border: 1px solid #989898;
+      width: 40px;
+      height: 40px;
+      border-radius: 30px;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    .skuSelectorInternalBox {
+      margin: auto;
+      padding: 0;
+      width: 40px;
+      height: 40px;
+      border-radius: 30px;
+      color: $color-black;
+      border: 1px solid #989898;
+    }
+
+    .skuSelectorItemTextValue {
+      padding: 0;
+      margin: auto;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+
+
+      color: rgba(185, 185, 185, 0.6);
+    }
+  }
+
+  .valueWrapper .skuSelectorItemTextValue {
+    margin-right: 5px;
+  }
+
+  .frameAround {
+    border-color: #000;
+    z-index: 9;
+  }
+}
+
+.skuSelectorOptionsList {
+  margin: 0;
+}
+
 .productImageTag--imageDescription--main {
   max-height: 632px !important;
 

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

@@ -80,6 +80,10 @@
 
           color: #000000;
 
+          @media (max-width:1024px) {
+            padding-left: 0;
+          }
+
 
         }
       }