hotfix: revendo parte02 todo css, deixando mais responsivo e proximo ao figma possivel

store/blocks/pdp/product.jsonc

@@ -4,7 +4,6 @@
       "html#pageProduct",
       "newsletter"
     ]
-    
   },
   "html#pageProduct": {
     "props": {
@@ -101,10 +100,11 @@
 
   "product-images": {
     "props": {
+      "testId":"product-images",
       "blockClass": "divImagens",
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
       "thumbnailsOrientation": "horizontal",
       "displayThumbnailsArrows": false,
@@ -140,6 +140,11 @@
       // "share#default"
     ]
   },
+  "pixCustom":{
+    "props":{
+      "testId":"pix-price"
+    }
+  },
   "shipping-simulator":{
     "props":{
       "blockClass":"divCep"
@@ -160,6 +165,7 @@
   },
   "product-quantity":{
     "props":{
+      "testId":"product-quantity",
       "blockClass":"divQuantidade",
       "size":"regular"
     }
@@ -168,7 +174,7 @@
     "props":{
       "blockClass":"divParcelamente",
       "markers": ["discount"],
-      "message": " {installmentsNumber}<discount>x</discount> de {installmentValue} <discount> sem juros </discount> ",
+      "message": "{installmentsNumber} de {installmentValue} sem juros",
       "installmentsCriteria":"max-quantity-without-interest"
     }
   },
@@ -189,6 +195,7 @@
 
   "sku-selector": {
     "props": {
+      "testId":"sku-selector",
       "blockClass":"divSku",
       "variationsSpacing": 3,
       "showValueNameForImageVariation": true
@@ -203,9 +210,14 @@
     },
     "children": ["add-to-cart-button"]
   },
-
+  "add-to-cart-button":{
+    "props":{
+      "testId":"add-to-cart-button"
+    }
+  },
   "flex-layout.row#product-availability": {
     "props": {
+      "blockClass":"divProductIndisponivel",
       "colGap": 7,
       "marginTop": 4,
       "marginBottom": 7,
@@ -225,16 +237,21 @@
     "children": [
       "flex-layout.row#product-name",
       "product-identifier.product",
-      "sku-selector",
+      "flex-layout.col#availability",
-      "flex-layout.row#availability"
+      "sku-selector"
     ]
   },
-  "flex-layout.row#availability": {
+  "flex-layout.col#availability": {
     "props": {
       "blockClass": "message-availability"
     },
     "children": ["availability-subscriber"]
   },
+  "availability-subscriber":{
+    "props":{
+      "blockClass":"buttonIndisponivel"
+    }
+  },
 
   "share#default": {
     "props": {
@@ -380,15 +397,14 @@
     }
   },
   "list-context.product-list#demo": {
-    "props":{
-      // "category":"112901"
-      // "specificationFilters":"(id:112901)"
-    },
     "blocks": ["product-summary.shelf#demo"],
     "children": ["slider-layout#demo-product"]
   },
 
   "product-summary.shelf#demo": {
+    "props":{
+      "testId":"vtex-product-summary"
+    },
     "children": [
       "product-summary-image",
       "product-summary-name",
@@ -401,6 +417,7 @@
   
   "slider-layout#demo-product": {
     "props": {
+      "testId":"product-summary-list",
       "itemsPerPage": {
         "desktop": 4,
         "tablet": 3,

styles/css/vtex.flex-layout.css

@@ -25,16 +25,57 @@
 }
 
 .flexRowContent {
+  padding: 0;
   margin: 0;
 }
 
-.flexRowContent--divProduct {
+.flexRowContent--divProductIndisponivel {
-  margin-top: 16px;
+  gap: 32px;
-  padding: 0px;
+}
-  padding-left: 40px !important;
+
-  margin-bottom: 16px;
+.flexColChild--info-availability .flexRow--divNomeProduct {
+  text-align: end;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
+}
+@media (max-width: 1024px) {
+  .flexColChild--info-availability .flexRow--divNomeProduct {
+    text-align: left;
+  }
+}
+.flexColChild--info-availability :global(.vtex-product-identifier-0-x-product-identifier) {
+  display: flex;
+  justify-content: flex-end;
+  align-items: end;
+  margin: 0;
+  margin-top: 8px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.48);
+  margin-bottom: 24px;
+}
+@media (max-width: 1024px) {
+  .flexColChild--info-availability :global(.vtex-product-identifier-0-x-product-identifier) {
+    display: block;
+  }
+}
+.flexColChild--info-availability .flexCol--message-availability {
+  width: 100%;
+}
+.flexColChild--info-availability .flexCol--message-availability .flexColChild--message-availability {
+  width: 100%;
+}
+
+.flexRowContent--divProduct {
   gap: 32px;
-  padding-right: 40px !important;
 }
 @media (max-width: 1024px) {
   .flexRowContent--divProduct {
@@ -54,8 +95,20 @@
   line-height: 34px;
   color: #575757;
 }
+@media (max-width: 1024px) {
+  .flexCol--divInfoProduct .flexRow--divNomeProduct {
+    text-align: left;
+  }
+}
 .flexCol--divInfoProduct .flexRow--divNomeProductModelo {
   text-align: end;
+}
+@media (max-width: 1024px) {
+  .flexCol--divInfoProduct .flexRow--divNomeProductModelo {
+    text-align: left;
+  }
+}
+.flexCol--divInfoProduct .flexRow--divNomeProductModelo :global(.vtex-product-identifier-0-x-product-identifier) {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;

styles/css/vtex.product-price.css

@@ -27,6 +27,9 @@
 .installments--divParcelamente .installmentsNumber--divParcelamente {
   font-weight: 700;
 }
+.installments--divParcelamente .installmentsNumber--divParcelamente::after {
+  content: "x";
+}
 .installments--divParcelamente .installments-discount--divParcelamente {
   font-weight: 700;
 }

styles/css/vtex.product-quantity.css

@@ -9,4 +9,17 @@
 /* Grid breakpoints */
 .quantitySelectorContainer .quantitySelectorTitle {
   display: none;
+}
+
+.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__input) {
+  border-left: 0px;
+  border-right: 0px;
+}
+.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__plus-button) {
+  color: black;
+  background-color: white;
+}
+.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__minus-button) {
+  color: black;
+  background-color: white;
 }

styles/css/vtex.store-components.css

@@ -13,7 +13,11 @@
 
 .container {
   margin: 0;
-  padding: 0;
+  margin-top: 16px !important;
+  padding: 0px !important;
+  padding-left: 40px !important;
+  margin-bottom: 16px !important;
+  padding-right: 40px !important;
   max-width: 100%;
 }
 .container .productImagesContainer--divImagens {
@@ -43,6 +47,11 @@
     max-width: 100% !important;
   }
 }
+@media (max-width: 641px) {
+  .container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens {
+    display: block !important;
+  }
+}
 .container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
   margin-right: 16px;
   padding: 0px;
@@ -143,6 +152,7 @@
   height: 48px;
 }
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .frameAround--divSku {
+  border: 1px solid #989898;
   border-radius: 50%;
   width: 48px;
   height: 48px;
@@ -190,6 +200,7 @@
   height: 40px;
 }
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .frameAround--divSku {
+  border: 1px solid #989898;
   border-radius: 50%;
   width: 40px;
   height: 40px;
@@ -205,6 +216,12 @@
 }
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku {
   padding: 0 !important;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
 }
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .absolute {
   height: 40px;
@@ -398,4 +415,64 @@
   background-color: black;
   border: 0;
   border-radius: 0;
+}
+
+.subscriberContainer {
+  width: 100%;
+}
+.subscriberContainer .title {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.subscriberContainer .subscribeLabel {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.subscriberContainer .form .content {
+  display: grid;
+  grid-template-areas: "1" "2";
+  justify-content: inherit;
+  gap: 10px;
+  width: 100%;
+  max-width: 100%;
+}
+.subscriberContainer .form .content .inputName {
+  grid-area: 1;
+  margin-right: 0;
+  margin-bottom: 0;
+}
+.subscriberContainer .form .content .inputEmail {
+  grid-area: 1;
+  margin-right: 0;
+  margin-bottom: 0;
+}
+.subscriberContainer .form .content .submit {
+  grid-area: 2;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) {
+  width: 100%;
+  height: 49px;
+  border: 0;
+  background-color: #000000;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button__label) {
+  font-size: 0;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button__label)::after {
+  content: "AVISE-ME";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  text-transform: uppercase;
+  color: #ffffff;
 }

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

@@ -1,30 +1,69 @@
-
+.stretchChildrenWidth {
-  .stretchChildrenWidth{
+  width: 100% !important;
-    width: 100% !important;
+  padding: 0;
-    padding: 0 ;
+  @media (max-width: 1024px) {
-    @media (max-width: 1024px) {
+    padding-right: 0px;
-      padding-right: 0px
-    }
   }
+}
 
-.flexRowContent--divDescription{
+.flexRowContent--divDescription {
   @media (max-width: 1024px) {
     display: flex;
     flex-direction: column;
   }
 }
-.flexRowContent{
+.flexRowContent {
+  padding: 0;
   margin: 0;
 }
+.flexRowContent--divProductIndisponivel {
+  gap: 32px;
+}
+.flexColChild--info-availability {
+  .flexRow--divNomeProduct {
+    text-align: end;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 300;
+    font-size: 20px;
+    line-height: 34px;
+    text-align: right;
+    color: #575757;
+    @media (max-width: 1024px) {
+      text-align: left;
+    }
+  }
+  :global(.vtex-product-identifier-0-x-product-identifier) {
+    display: flex;
+    justify-content: flex-end;
+    align-items: end;
+    margin: 0;
+    margin-top: 8px;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: rgba(146, 146, 146, 0.48);
+    margin-bottom: 24px
+  }
+  @media (max-width: 1024px) {
+    :global(.vtex-product-identifier-0-x-product-identifier) {
+    display: block;
+    }
+  };
+  .flexCol--message-availability{
+    width: 100%;
+    .flexColChild--message-availability{
+      width: 100%;
+    }
+  }
+
+}
 
 .flexRowContent--divProduct {
-  margin-top: 16px;
-  padding: 0px;
-  padding-left: 40px !important;
-  margin-bottom: 16px;
   gap: 32px;
-  padding-right: 40px !important;
+  @media (max-width: 1024px) {
-  @media (max-width:1024px) {
     flex-direction: column;
   }
   .stretchChildrenWidth {
@@ -40,28 +79,37 @@
     font-size: 20px;
     line-height: 34px;
     color: #575757;
+    @media (max-width: 1024px) {
+      text-align: left;
+    }
   }
   .flexRow--divNomeProductModelo {
     text-align: end;
-    font-family: "Open Sans";
+    @media (max-width: 1024px) {
-    font-style: normal;
+      text-align: left;
-    font-weight: 400;
+    }
-    font-size: 14px;
+    :global(.vtex-product-identifier-0-x-product-identifier){
-    line-height: 19px;
+      font-family: "Open Sans";
-    color: rgba(146, 146, 146, 0.48);
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: rgba(146, 146, 146, 0.48);
+
+    }
   }
 }
-.flexCol--divImgDescription{
+.flexCol--divImgDescription {
   margin-right: 22px;
   @media (max-width: 1024px) {
     margin-right: 0px;
   }
 }
 
-.flexRow--divButtonBuy{
+.flexRow--divButtonBuy {
   text-align: center;
   width: 100%;
-  :global(.vtex-button){
+  :global(.vtex-button) {
     background-color: black;
   }
-}
+}

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

@@ -16,6 +16,9 @@
     color: #929292;
     .installmentsNumber--divParcelamente{
         font-weight: 700;
+        &::after{
+            content: "x";
+        }
     }
     .installments-discount--divParcelamente{
         font-weight: 700;

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

@@ -10,4 +10,18 @@
     //         width: 100%;
     //     }
     // }
+}
+.quantitySelectorStepper--divQuantidade{
+    :global(.vtex-numeric-stepper__input){
+        border-left: 0px;
+        border-right: 0px;
+    }
+    :global(.vtex-numeric-stepper__plus-button){
+        color: black;
+        background-color: white;
+    }
+    :global(.vtex-numeric-stepper__minus-button){
+        color: black;
+        background-color: white;
+    }
 }

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

@@ -3,7 +3,11 @@
 }
 .container {
   margin: 0;
-  padding: 0;
+  margin-top: 16px !important;
+  padding: 0px !important;
+  padding-left: 40px !important;
+  margin-bottom: 16px !important;
+  padding-right: 40px !important;
   max-width: 100%;
   .productImagesContainer--divImagens {
     width: 100%;
@@ -28,6 +32,9 @@
       }
     }
     .carouselGaleryThumbs--divImagens {
+      @media (max-width: 641px) {
+        display: block !important;
+      }
       .productImagesThumb {
         margin-right: 16px;
         padding: 0px;
@@ -121,6 +128,7 @@
       width: 48px;
       height: 48px;
       .frameAround--divSku {
+        border: 1px solid #989898;
         border-radius: 50%;
         width: 48px;
         height: 48px;
@@ -151,7 +159,6 @@
   .skuSelectorSubcontainer--tamanho {
     order: 1;
     height: 67px;
-    // margin-bottom: 10px !important;
     .skuSelectorName {
       font-size: 0;
       font-family: "Open Sans";
@@ -169,6 +176,7 @@
       width: 40px;
       height: 40px;
       .frameAround--divSku {
+        border: 1px solid #989898;
         border-radius: 50%;
         width: 40px;
         height: 40px;
@@ -183,6 +191,12 @@
         height: 40px;
         .skuSelectorItemTextValue--divSku {
           padding: 0 !important;
+          font-family: "Open Sans";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          color: rgba(185, 185, 185, 0.6);
         }
         .absolute {
           height: 40px;
@@ -203,7 +217,6 @@
     transform: rotate(-90deg);
   }
 }
-
 .shippingContainer {
   display: flex;
   position: relative;
@@ -291,7 +304,7 @@
         line-height: 19px;
         color: #202020;
       }
-      .shippingTableHeadDeliveryEstimate{
+      .shippingTableHeadDeliveryEstimate {
         display: flex;
         order: 1;
         text-transform: uppercase;
@@ -305,7 +318,7 @@
         color: #202020;
       }
 
-      .shippingTableHeadDeliveryPrice{
+      .shippingTableHeadDeliveryPrice {
         text-transform: uppercase;
         font-size: 0;
         width: 62px;
@@ -316,7 +329,7 @@
         line-height: 19px;
         color: #202020;
       }
-      .shippingTableHeadDeliveryPrice::after{
+      .shippingTableHeadDeliveryPrice::after {
         content: "FRETE";
         font-size: 14px;
       }
@@ -373,7 +386,7 @@
     }
   }
 }
-.inputGroup--newsletter{
+.inputGroup--newsletter {
   :global(.vtex-input-prefix__group) {
     border: none;
     border-bottom: 1px solid #929292;
@@ -384,3 +397,66 @@
     }
   }
 }
+.subscriberContainer {
+  width: 100%;
+  .title {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 19px;
+    color: #868686;
+  }
+  .subscribeLabel {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #868686;
+  }
+  .form {
+    .content {
+      display: grid;
+      grid-template-areas:
+        "1"
+        "2";
+      justify-content: inherit;
+      gap: 10px;
+      width: 100%;
+      max-width: 100%;
+      .inputName {
+        grid-area: 1;
+        margin-right: 0;
+        margin-bottom: 0;
+      }
+      .inputEmail {
+        grid-area: 1;
+        margin-right: 0;
+        margin-bottom: 0;
+      }
+      .submit {
+        grid-area: 2;
+        :global(.vtex-button) {
+          width: 100%;
+          height: 49px;
+          border: 0;
+          background-color: #000000;
+        }
+        :global(.vtex-button__label) {
+          font-size: 0;
+          &::after {
+            content: "AVISE-ME";
+            font-family: "Open Sans";
+            font-style: normal;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 25px;
+            text-transform: uppercase;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+}