react/components/Html/style.css

@@ -6,3 +6,7 @@
   height: 100%;
   width: 100%;
 }
+
+[class*="html--cep"] {
+  margin: 16px 0;
+}

store/blocks/pdp/product.jsonc

@@ -121,7 +121,7 @@
       // "product-gifts",
       // "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "html#shipping-simulator",
       "share#default"
     ]
   },
@@ -190,6 +190,13 @@
     "children": ["html#product-quantity","html#button-addCart"]
   },
 
+  "html#shipping-simulator": {
+    "props":{
+      "blockClass": "cep"
+    },
+    "children": ["shipping-simulator"]
+  },
+
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,

styles/css/vtex.breadcrumb.css

@@ -17,7 +17,7 @@
   line-height: 19px;
   color: #929292;
 }
-@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
   .container {
     padding: 16px 40px;
   }

styles/css/vtex.flex-layout.css

@@ -181,4 +181,18 @@
   font-size: 18px;
   line-height: 25px;
   color: #fff;
+}
+
+.flexRow--cep {
+  margin: 16px 0;
+  width: 409px;
+}
+@media (min-width: 280px) and (max-width: 768px) {
+  .flexRow--cep {
+    width: 100%;
+  }
+}
+.flexRow--cep .flexRowContent--cep .stretchChildrenWidth {
+  padding: 0;
+  margin: 0;
 }

styles/css/vtex.product-identifier.css

@@ -14,7 +14,7 @@
   justify-content: end;
   margin-bottom: 24px;
 }
-@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
   .product-identifier--productReference {
     justify-content: flex-start;
     padding-top: 8px;

styles/css/vtex.store-components.css

@@ -13,7 +13,7 @@
   margin: 0;
   max-width: 100%;
 }
-@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
   .container {
     padding: 16px 40px;
   }
@@ -32,17 +32,17 @@
   max-height: 904px !important;
   cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
 }
-@media (min-width: 1025px) and (max-width: 2499px) {
+@media (min-width: 1025px) and (max-width: 2560px) {
   .productImageTag--main, .videoContainer {
     max-height: 664px !important;
   }
 }
-@media (min-width: 491px) and (max-width: 1024px) {
+@media (min-width: 769px) and (max-width: 1024px) {
   .productImageTag--main, .videoContainer {
     max-height: 944px !important;
   }
 }
-@media (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 280px) and (max-width: 768px) {
   .productImageTag--main, .videoContainer {
     max-height: 296px !important;
   }
@@ -51,7 +51,7 @@
 .carouselGaleryThumbs {
   margin-top: 0;
 }
-@media (min-width: 280px) and (max-width: 490px), (min-width: 491px) and (max-width: 1024px) {
+@media (min-width: 280px) and (max-width: 768px), (min-width: 769px) and (max-width: 1024px) {
   .carouselGaleryThumbs {
     display: block !important;
   }
@@ -63,7 +63,7 @@
   border-radius: 8px;
   max-width: calc(100% - 16px);
 }
-@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
   .carouselGaleryThumbs .productImagesThumb {
     width: 90px !important;
     height: 90px !important;
@@ -87,7 +87,7 @@
   line-height: 34px;
   color: #575757;
 }
-@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
   .productNameContainer--quickview {
     justify-content: flex-start;
     margin-top: 32px;
@@ -248,4 +248,95 @@
 }
 .skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue {
   color: #000;
+}
+
+.shippingContainer {
+  display: flex;
+  align-items: flex-end;
+  width: 409px;
+  position: relative;
+}
+@media (min-width: 280px) and (max-width: 768px) {
+  .shippingContainer {
+    width: 296px;
+  }
+}
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+  margin-bottom: 8px;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  padding: 0;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  width: 250px;
+  height: 49px;
+  border: none;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+  width: 250px;
+  height: 49px;
+  padding: 16px;
+  border: 1px solid #CCC;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-input__suffix) {
+  display: none;
+}
+.shippingContainer :global(.vtex-button) {
+  background-color: #000;
+  border: none;
+  border-radius: 0;
+  width: 49px;
+  height: 49px;
+}
+.shippingContainer :global(.vtex-button__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-button__label)::after {
+  content: "OK";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  position: absolute;
+  left: 312px;
+  bottom: 18px;
+  padding: 0;
+}
+@media (min-width: 280px) and (max-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: 200px;
+    bottom: -24px;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-decoration-line: underline;
+  color: #000;
+  padding: 0;
+  margin: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+  display: none;
 }

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

@@ -180,5 +180,20 @@
       }
     }
   }
-
+}
+
+.flexRow--cep {
+  margin: 16px 0;
+  width: 409px;
+
+  @media #{$mq-mobile} {
+    width: 100%;
+  }
+
+  .flexRowContent--cep {
+    .stretchChildrenWidth {
+      padding: 0;
+      margin: 0;
+    }
+  }
 }

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

@@ -272,3 +272,105 @@
   }
 }
 
+.shippingContainer  {
+  display: flex;
+  align-items: flex-end;
+  width: 409px;
+  position: relative;
+
+  @media #{$mq-mobile}{
+    width: 296px;
+  }
+
+  :global(.vtex-input__label) {
+    font-size: 0;
+    margin-bottom: 8px;
+
+    &::after {
+      content: "CALCULAR FRETE:";
+      font-family: $font-family;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-gray6;
+    }
+
+  }
+
+  :global(.vtex-address-form__postalCode){
+    padding: 0;
+  }
+
+  :global(.vtex-input-prefix__group) {
+    width: 250px;
+    height: 49px;
+    border: none;
+    border-radius: 0;
+  }
+
+  :global(.vtex-address-form-4-x-input){
+    width: 250px;
+    height: 49px;
+    padding: 16px;
+    border: 1px solid #CCC;
+    border-radius: 0;
+  }
+
+  :global(.vtex-input__suffix) {
+    display: none;
+  }
+
+  :global(.vtex-button) {
+    background-color: $color-black0;
+    border: none;
+    border-radius: 0;
+    width: 49px;
+    height: 49px;
+  }
+
+  :global(.vtex-button__label){
+    font-size: 0;
+    &::after{
+      content: ("OK");
+      font-family: $font-family;
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-white;
+    }
+  }
+
+  :global(.vtex-address-form__postalCode-forgottenURL) {
+    position: absolute;
+    // width: 100%;
+    left: 312px;
+    bottom: 18px;
+    // transform: translate(0, -50%);
+    padding: 0;
+
+    @media #{$mq-mobile}{
+      left: 200px;
+      bottom: -24px;
+    }
+
+    :last-child{
+      font-family: $font-family;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      display: flex;
+      align-items: center;
+      text-decoration-line: underline;
+      color: $color-black0;
+      padding: 0;
+      margin: 0;
+    }
+
+    :global(.vtex__icon-external-link) {
+      display: none;
+    }
+  }
+}