feat: finalização da pagina de produto

react/components/Html/styles.css

@@ -61,6 +61,14 @@
   }
 }
 
+/*
+  PRATELEIRA DE PRODUTOS
+*/
+[class*="html--product-summary"]{
+  display: flex;
+  flex-direction: column;
+}
+
 /*
   NEWSLETTER
 */

react/components/PixDiscount/PixDiscount.tsx

@@ -1,9 +1,14 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useProduct } from "vtex.product-context";
 import styles from "./styles.module.css";
 
 const PixDiscount = () => {
 
+  useEffect(() => {
+    const inputCep = document.querySelector(".vtex-address-form-4-x-input");
+    inputCep?.setAttribute("placeholder", "Digite seu CEP");
+  });
+
   const productContextValue = useProduct();
   const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
   const discount = (Number(productPrice) * 10) / 100;
@@ -19,7 +24,7 @@ const PixDiscount = () => {
       </div>
 
       <div className={styles["container-price"]}>
-        <p className={styles["price-pix"]}>R$ {totalDiscount.toFixed(2)}</p>
+        <p className={styles["price-pix"]}>R$ {totalDiscount.toFixed(2).replace(".", ",")}</p>
         <p className={styles["discount"]}>10% de desconto</p>
       </div>
     </div>

store/blocks/pdp/product.jsonc

@@ -3,8 +3,8 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "tab-layout#description",
+      "html#description",
-      "list-context.product-list#prateleira",
+      "html#teste",
       "flex-layout.row#newsletter-container"
     ]
   },
@@ -101,6 +101,7 @@
 */
   "html#container-description": {
     "props": {
+      "testId": "product-description",
       "tag": "div",
       "blockClass": "container-description"
 
@@ -121,13 +122,6 @@
       "testId": "product-images",
       "blockClass": "image-description"
     },
-    "children": ["html#product-image"]
-  },
-
-  "html#product-image":{
-    "props": {
-      "testId": "product-images"
-    },
     "children": ["product-images#description"]
   },
 
@@ -138,16 +132,16 @@
     }
   },
 
-  "image#product": {
-    "props": {
-      "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true"
-    }
-  },
-
   "flex-layout.row#description": {
     "children": ["product-description"]
   },
 
+  "html#description":{
+    "props": {
+      "testId": "product-description"
+    },
+    "children": ["tab-layout#description"]
+  },
 
   "tab-layout#description": {
     "children": ["tab-list#description", "tab-content#description"],
@@ -241,9 +235,16 @@
 /*
   PRATELEIRA DE PRODUTOS QUE QUE O CLIENTE PODE GOSTAR
 */
+  "html#teste":{
+    "props": {
+      "testId": "product-summary-list"
+    },
+    "children": ["list-context.product-list#prateleira"]
+  },
+
   "list-context.product-list#prateleira": {
     "blocks": ["product-summary.shelf#prateleira"],
-    "children": ["rich-text#title-prateleira","slider-layout#prateleira"]
+    "children": ["rich-text#title-prateleira","html#vtex-product-summary"]
   },
 
   "product-summary.shelf#prateleira": {
@@ -252,17 +253,24 @@
 
   "html#product-summary": {
     "props":{
-      "testId": "vtex-product-summary",
+      "testId": "product-summary-list",
       "blockClass": "product-summary"
     },
     "children": [
-      "stack-layout#prodsum",
+      "product-summary-image#image-prateleira",
       "product-summary-name#name-prateleira",
       "product-list-price#promotion-prateleira",
       "product-selling-price#price-prateleira"
     ]
   },
 
+  "product-summary-image#image-prateleira": {
+    "props":{
+      "showBadge": false,
+      "blockClass": "image-prateleira"
+    }
+  },
+
   "product-summary-name#name-prateleira": {
     "props": {
       "blockClass": "name-prateleira"
@@ -290,6 +298,13 @@
       }
   },
 
+  "html#vtex-product-summary":{
+    "props":{
+      "testId": "vtex-product-summary"
+      },
+      "children": ["slider-layout#prateleira"]
+    },
+
   "slider-layout#prateleira": {
     "props": {
       "itemsPerPage": {
@@ -298,7 +313,6 @@
         "phone": 2
       },
       "infinite": true,
-      "fullWidth": false,
       "blockClass": "prateleira"
     }
   },
@@ -376,18 +390,25 @@
       "rowGap": 0
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
-      "product-identifier.product",
+      "html#product-code",
-      "flex-layout.row#selling-price",
+      "html#product-price",
-      "product-installments#parcelaProduct",
+      "html#parcelaProdutct",
       "html#pix-discount",
       "availability-subscriber",
       "html#sku-selector",
       "html#buy-button",
-      "shipping-simulator"
+      "html#shipping-simulator"
     ]
   },
 
+  "html#product-name": {
+    "props": {
+      "testId": "product-name"
+    },
+    "children": ["flex-layout.row#product-name"]
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -395,6 +416,35 @@
     "children": ["vtex.store-components:product-name"]
   },
 
+  "html#product-code":{
+    "props": {
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product"]
+  },
+
+  "html#product-price": {
+    "props": {
+      "testId": "product-price"
+    },
+    "children": ["flex-layout.row#selling-price"]
+  },
+  "flex-layout.row#product-price": {
+    "props": {
+      "blockClass": "selling-price"
+    },
+    "children": [
+      "product-selling-price"
+    ]
+  },
+
+  "html#parcelaProdutct":{
+    "props": {
+      "testId": "product-installments"
+    },
+    "children": ["product-installments#parcelaProduct"]
+  },
+
   "product-installments#parcelaProduct": {
     "props": {
       "installmentsCriteria": "max-quantity-without-interest",
@@ -421,8 +471,8 @@
   "sku-selector": {
     "props": {
       "blockClass": "sku-selector",
-      "imageHeight": 40,
+      "imageHeight": 48,
-      "imageWidth": 40,
+      "imageWidth": 48,
       "variationsSpacing": 3,
       "showValueNameForImageVariation": true
     }
@@ -431,7 +481,7 @@
   "html#buy-button": {
     "props": {
       "tag": "div",
-      "testId": "buy-button",
+      "testId": "add-to-cart-button",
       "blockClass": "buy-button"
     },
     "children": ["html#product-quantity","add-to-cart-button"]
@@ -445,6 +495,20 @@
     "children": ["product-quantity"]
   },
 
+  "html#shipping-simulator":{
+    "props": {
+      "testId": "shipping-simulator"
+    },
+    "children": ["flex-layout.col#shipping-simulator"]
+  },
+
+  "flex-layout.col#shipping-simulator":{
+    "props":{
+      "blockClass": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
+  },
+
   /*
     ASSINANTES DE PRODUTOS INDISPONIVEIS
   */
@@ -465,7 +529,7 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#product-code",
       "flex-layout.row#availability",
       "sku-selector"
     ]

store/blocks/product-price.jsonc

@@ -1,4 +1,10 @@
 {
+  "html#selling-price": {
+    "props": {
+      "testId": "product-price"
+    },
+    "children": ["flex-layout.row#selling-price"]
+  },
   "flex-layout.row#selling-price": {
     "props": {
       "blockClass": "selling-price",

styles/css/vtex.flex-layout.css

@@ -73,7 +73,7 @@
   }
 }
 .flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability {
-  width: 375px;
+  width: 399px;
 }
 @media only screen and (max-width: 1024px) {
   .flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability {
@@ -99,6 +99,12 @@
   align-items: center;
   width: 100%;
   background-color: #000000;
+  margin-top: 64px;
+}
+@media only screen and (max-width: 1024px) {
+  .flexRow--newsletter-container {
+    margin-top: 34px;
+  }
 }
 .flexRow--newsletter-container .flexRowContent--newsletter-container {
   display: flex;

styles/css/vtex.product-price.css

@@ -47,17 +47,59 @@
 }
 
 /* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */
-.listPrice {
+.listPrice--promotion-prateleira {
-  font-family: "Opens Sans", sans-serif;
+  padding: 0 16px 8px 16px;
-  line-height: 19px;
+  font-weight: 400;
-  color: #bababa;
   font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  color: #bababa;
 }
-.listPrice .listPriceValue::before {
+@media only screen and (max-width: 1024px) {
+  .listPrice--promotion-prateleira {
+    padding: 0 8px 8px 8px;
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.listPrice--promotion-prateleira .listPriceValue::before {
   content: "de ";
   font-size: 14px;
+  font-weight: 400;
+  line-height: 19px;
+  color: #bababa;
 }
-.listPrice .listPriceValue::after {
+@media only screen and (max-width: 1024px) {
+  .listPrice--promotion-prateleira .listPriceValue::before {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.listPrice--promotion-prateleira .listPriceValue::after {
   content: " por";
   font-size: 14px;
+  font-weight: 400;
+  line-height: 19px;
+  color: #bababa;
+}
+@media only screen and (max-width: 1024px) {
+  .listPrice--promotion-prateleira .listPriceValue::after {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+
+.sellingPrice--price-prateleira {
+  padding: 0 16px;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
+}
+@media only screen and (max-width: 1024px) {
+  .sellingPrice--price-prateleira {
+    padding: 0 8px;
+    font-size: 18px;
+    line-height: 25px;
+  }
 }

styles/css/vtex.product-summary.css

@@ -1,42 +1,68 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
+/*
-  border-radius: 50%;
+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 */
+/*
+  PRATELEIRA DE PRODUTO
+*/
+.containerNormal {
+  max-width: unset !important;
+}
+.containerNormal .element {
+  padding: 0;
+}
+.containerNormal .element .imageContainer--image-prateleira {
+  display: flex;
+  height: 314.4px;
+}
+@media only screen and (min-width: 1921px) {
+  .containerNormal .element .imageContainer--image-prateleira {
+    height: 434.4px;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  .containerNormal .element .imageContainer--image-prateleira {
+    height: 291.21px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .containerNormal .element .imageContainer--image-prateleira {
+    height: 124.81px;
+  }
+}
+.containerNormal .element .imageContainer--image-prateleira .imageNormal {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+  max-height: unset !important;
 }
 
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+.nameContainer--name-prateleira {
-  opacity: 0;
+  padding: 16px 16px 8px 16px;
-  transition: opacity 200ms ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-
+@media only screen and (max-width: 1024px) {
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+  .nameContainer--name-prateleira {
-  opacity: 1;
+    padding: 16px 8px 8px 8px;
-}
-
-@media screen and (max-width: 40em) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
   }
 }
-
+.nameContainer--name-prateleira .productNameContainer--name-prateleira {
-.nameContainer {
+  font-weight: 400;
-  justify-content: start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.brandName {
-  font-weight: 600;
   font-size: 18px;
-  color: #2E2E2E;
+  line-height: 25px;
-}
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
   text-align: center;
+  color: #000000;
+}
+@media only screen and (max-width: 1024px) {
+  .nameContainer--name-prateleira .productNameContainer--name-prateleira {
+    font-size: 14px;
+    line-height: 19px;
   }
-
-.image {
-  border-radius: 0.25rem;
 }

styles/css/vtex.slider-layout.css

@@ -1,31 +1,58 @@
-.sliderLayoutContainer {
+/*
-  justify-content: center;
+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 */
+.sliderLayoutContainer--prateleira {
+  padding-left: 40px !important;
+  padding-right: 40px !important;
 }
-
+.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
-.sliderLayoutContainer--carousel {
+  padding: 0 19.2px 49px 19.2px;
-  background-color: #F0F0F0;
-  min-height: 450px;
 }
-
+@media only screen and (max-width: 1024px) {
-.sliderTrackContainer {
+  .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
-  max-width: 100%;
+    padding: 0 17.2px 41px 17.2px;
   }
-
-.paginationDotsContainer {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
 }
-
+@media only screen and (max-width: 768px) {
-.layoutContainer--shelf {
+  .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
-  margin-top: 20px;
+    padding: 0 14.7px 33px 14.7px;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
   }
-
+}
-.slide--shelf {
+.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
-  margin-bottom: 25px;
+  margin: 0 8px;
-  padding-left: .5rem;
+}
-  padding-right: .5rem;
+@media only screen and (max-width: 1024px) {
-  min-height: 550px;
+  .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
+    margin: 0 6px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
+    margin: 0 4px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slideChildrenContainer--prateleira {
+    height: 273.8px;
+    width: 100%;
+  }
+}
+.sliderLayoutContainer--prateleira .paginationDotsContainer--prateleira {
+  display: flex;
+  align-items: center;
+}
+.sliderLayoutContainer--prateleira .paginationDotsContainer--prateleira .paginationDot--prateleira {
+  background-color: #000000;
+}
+.sliderLayoutContainer--prateleira .paginationDotsContainer--prateleira .paginationDot--isActive {
+  width: 17px !important;
+  height: 17px !important;
+  background-color: #fff;
+  border: 0.5px solid #000000;
 }

styles/css/vtex.store-components.css

@@ -74,12 +74,11 @@
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
+  /* COR */
+  /* TAMANHO */
 }
-.skuSelectorContainer .skuSelectorName {
+.skuSelectorContainer .skuSelectorSubcontainer--cor {
-  font-size: 0;
+  margin: 0;
-}
-.skuSelectorContainer .skuSelectorNameSeparator {
-  font-size: 0;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor::before {
   content: "OUTRAS CORES:";
@@ -89,6 +88,38 @@
   font-size: 14px;
   color: #929292;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
+  margin: 8px 0 0 0;
+  height: 48px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector {
+  margin: 0 16px 0 0;
+  height: 48px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .frameAround--sku-selector {
+  width: 48px;
+  height: 48px;
+  border: 1px solid #b9b9b9;
+  border-radius: 24px;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorInternalBox--sku-selector {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround--sku-selector {
+  border: 2px solid #000000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
   content: "OUTROS TAMANHOS:";
   font-family: "Open Sans", sans-serif;
@@ -97,40 +128,57 @@
   font-size: 14px;
   color: #929292;
 }
-.skuSelectorContainer .skuSelectorTextContainer {
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
-  display: none;
+  margin: 8px 0 0 0;
+  height: 40px;
 }
-.skuSelectorContainer .skuSelectorOptionsList {
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
-  margin-top: 8px;
+  margin: 0;
-  margin-left: 0;
 }
-.skuSelectorContainer .skuSelectorSelectorImageValue {
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector {
-  font-size: 0;
+  margin: 0 16px 0 0;
-}
-
-/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
-.skuSelectorOptionsList .skuSelectorItem {
   width: 40px;
   height: 40px;
 }
-.skuSelectorOptionsList .skuSelectorItem:first-child {
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .frameAround--sku-selector {
-  margin-left: 0;
+  width: 40px;
-}
+  height: 40px;
-.skuSelectorOptionsList .skuSelectorItem .frameAround {
+  border: 1px solid #989898;
   border-radius: 50%;
-  border-color: #000000;
+  top: 0;
-  color: #000000;
+  left: 0;
+  right: 0;
+  z-index: 2;
 }
-.skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue {
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector {
-  max-width: 100%;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector .skuSelectorItemTextValue {
+  height: 19px;
+  width: 17px;
+  padding: 0;
   display: flex;
   justify-content: center;
-  color: #000000;
+  align-items: center;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
 }
-.skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround--sku-selector {
-  border-radius: 50%;
+  border: 2px solid #000000;
 }
-.skuSelectorOptionsList .diagonalCross {
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue {
+  color: #000000 !important;
+}
+.skuSelectorContainer .skuSelectorTextContainer {
+  display: none;
+}
+
+/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
+.diagonalCross {
   margin: 5px;
   background-image: linear-gradient(to top right, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 0, transparent 0%);
   transform: rotate(90deg);
@@ -168,7 +216,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 }
 .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
   display: block;
-  width: 374.65px;
+  width: 399px;
   margin-top: 16px;
 }
 @media only screen and (max-width: 1024px) {
@@ -178,7 +226,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   }
 }
 .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
-  width: 182.46px;
+  width: 195.5px;
   margin-right: 10.08px;
   margin-bottom: 15px;
 }
@@ -192,7 +240,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   border-radius: 0;
 }
 .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
-  padding: 0 14px;
+  padding: 12px 14px;
   font-size: 12px;
   line-height: 28px;
   color: #929292;
@@ -202,9 +250,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   left: 51%;
   top: 0%;
   border-radius: 0;
-  width: 182.46px;
+  width: 195.5px;
   font-weight: 400;
-  margin-bottom: 15px;
+  margin: 0;
 }
 @media only screen and (max-width: 1024px) {
   .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
@@ -218,7 +266,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   border-radius: 0;
 }
 .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
-  padding: 0 14px;
+  padding: 12px 14px;
   font-size: 12px;
   line-height: 28px;
   color: #929292;
@@ -260,11 +308,14 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 /* BUSCA DE CEP */
 .shippingContainer {
   display: flex;
+  flex-direction: column;
+  width: 409px;
+  position: relative;
 }
 @media only screen and (max-width: 768px) {
   .shippingContainer {
     display: block;
-    position: relative;
+    max-width: 296px;
   }
 }
 .shippingContainer :global(.vtex-address-form__postalCode) {
@@ -279,6 +330,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 }
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
   position: relative;
+  width: 280px;
 }
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
   font-size: 0;
@@ -300,9 +352,37 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     width: 100%;
   }
 }
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+  padding: 16.5px 62px 16.5px 16px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
   position: absolute;
 }
+@media only screen and (max-width: 1024px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
+    top: 0;
+    right: 0;
+    margin: 0;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
+    top: unset;
+    right: unset;
+    margin-top: 8px;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__suffix) {
+  padding: 0;
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
   padding: 0;
   margin-top: 25px;
@@ -330,12 +410,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   height: 49px;
   width: 49px;
   margin-top: 27px !important;
-  position: relative;
+  position: absolute;
-  right: 148px;
+  left: 231px;
-  font-size: 0;
   border-radius: 0;
   background-color: #000000;
   border: none;
+  font-size: 0;
   cursor: pointer;
 }
 @media only screen and (max-width: 768px) {
@@ -344,6 +424,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     margin: 0 !important;
     position: absolute;
     right: 0;
+    left: unset;
     top: 27px;
   }
 }
@@ -456,11 +537,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 
 /* DESCRIÇÃO DO PRODUTO */
 .productDescriptionContainer {
-  margin-left: 16px;
+  margin: 16px 0 0 16px;
 }
 @media only screen and (max-width: 1024px) {
   .productDescriptionContainer {
-    margin: 0;
+    border-bottom: 1px solid #bfbfbf;
+    margin: 16px 0 0 0;
   }
 }
 .productDescriptionContainer .productDescriptionTitle {
@@ -491,6 +573,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   .productDescriptionContainer .productDescriptionText {
     font-size: 14px;
     line-height: 19px;
+    margin-bottom: 16px;
   }
 }
 @media only screen and (min-width: 1921px) {

styles/css/vtex.store-footer.css

@@ -12,3 +12,7 @@
 .socialNetworksContainer {
   margin: 0 !important;
 }
+
+.acceptedPaymentMethodContainer {
+  margin: 0 !important;
+}

styles/sass/pages/footer/vtex.store-footer.scss

@@ -2,3 +2,6 @@
 .socialNetworksContainer {
   margin: 0 !important;
 }
+.acceptedPaymentMethodContainer {
+  margin: 0 !important;
+}

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

@@ -52,7 +52,7 @@
       margin: 0;
     }
     .flexRowContent--message-availability {
-      width: 375px;
+      width: 399px;
       @include mq(md, max) {
         width: 100%;
       }
@@ -78,6 +78,10 @@
   align-items: center;
   width: 100%;
   background-color: $color-black-padrao;
+  margin-top: 64px;
+  @include mq(md, max) {
+    margin-top: 34px;
+  }
   .flexRowContent--newsletter-container {
     display: flex;
     flex-direction: column;

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

@@ -40,20 +40,53 @@
 }
 
 /* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */
-.listPrice {
+.listPrice--promotion-prateleira {
-  font-family: "Opens Sans", sans-serif;
+  padding: 0 16px 8px 16px;
-  line-height: 19px;
+  font-weight: 400;
-  color: #bababa;
-
   font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  color: #bababa;
+  @include mq(md, max) {
+    padding: 0 8px 8px 8px;
+    font-size: 12px;
+    line-height: 16px;
+  }
   .listPriceValue {
     &::before {
       content: "de ";
       font-size: 14px;
+      font-weight: 400;
+      line-height: 19px;
+      color: #bababa;
+      @include mq(md, max) {
+        font-size: 12px;
+        line-height: 16px;
+      }
     }
     &::after {
       content: " por";
       font-size: 14px;
+      font-weight: 400;
+      line-height: 19px;
+      color: #bababa;
+      @include mq(md, max) {
+        font-size: 12px;
+        line-height: 16px;
       }
     }
   }
+}
+
+.sellingPrice--price-prateleira {
+  padding: 0 16px;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: $color-black-padrao;
+  @include mq(md, max) {
+    padding: 0 8px;
+    font-size: 18px;
+    line-height: 25px;
+  }
+}

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

@@ -0,0 +1,68 @@
+/*
+  PRATELEIRA DE PRODUTO
+*/
+
+.containerNormal {
+  max-width: unset !important;
+  .element {
+    padding: 0;
+    .imageContainer--image-prateleira {
+      display: flex;
+      height: 314.4px;
+      @include mq(xl, min) {
+        height: 434.4px;
+      }
+      @include mq(md, max) {
+        height: 291.21px;
+      }
+      @include mq(sm, max) {
+        height: 124.81px;
+      }
+      .imageNormal {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+        max-height: unset !important;
+      }
+    }
+  }
+}
+
+// .containerNormal {
+//   max-width: 100% !important;
+//   margin-right: 16px;
+//   .element {
+//     padding: 0;
+
+//     .imageStackContainer {
+//       width: 100%;
+//       height: 100%;
+//       .imageNormal {
+//         width: 100%;
+//         height: 100%;
+//         object-fit: cover;
+//         max-height: unset !important;
+//       }
+//     }
+//   }
+// }
+.nameContainer--name-prateleira {
+  padding: 16px 16px 8px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  @include mq(md, max) {
+    padding: 16px 8px 8px 8px;
+  }
+  .productNameContainer--name-prateleira {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+    text-align: center;
+    color: $color-black-padrao;
+    @include mq(md, max) {
+      font-size: 14px;
+      line-height: 19px;
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+.sliderLayoutContainer--prateleira {
+  padding-left: 40px !important;
+  padding-right: 40px !important;
+  .sliderTrackContainer--prateleira {
+    padding: 0 19.2px 49px 19.2px;
+    @include mq(md, max) {
+      padding: 0 17.2px 41px 17.2px;
+    }
+    @include mq(sm, max) {
+      padding: 0 14.7px 33px 14.7px;
+    }
+    .slide--prateleira {
+      margin: 0 8px;
+      @include mq(md, max) {
+        margin: 0 6px;
+      }
+      @include mq(sm, max) {
+        margin: 0 4px;
+      }
+      // .slideChildrenContainer--prateleira {
+      //   margin-bottom: 32px;
+      //   @include mq(md, max) {
+      //     margin-bottom: 24px;
+      //   }
+      //   @include mq(sm, max) {
+      //     margin-bottom: 16px;
+      //   }
+      // }
+    }
+
+    .slideChildrenContainer--prateleira {
+      @include mq(sm, max) {
+        height: 273.8px;
+        width: 100%;
+      }
+    }
+  }
+  .paginationDotsContainer--prateleira {
+    display: flex;
+    align-items: center;
+    .paginationDot--prateleira {
+      background-color: $color-black-padrao;
+    }
+    .paginationDot--isActive {
+      width: 17px !important;
+      height: 17px !important;
+      background-color: $color-white;
+      border: 0.5px solid $color-black-padrao;
+    }
+  }
+}

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

@@ -61,15 +61,9 @@
   display: flex;
   flex-direction: column-reverse;
 
-  .skuSelectorName {
+  /* COR */
-    font-size: 0;
-  }
-
-  .skuSelectorNameSeparator {
-    font-size: 0;
-  }
-
   .skuSelectorSubcontainer--cor {
+    margin: 0;
     &::before {
       content: "OUTRAS CORES:";
       font-family: "Open Sans", sans-serif;
@@ -78,9 +72,43 @@
       font-size: 14px;
       color: $color-gray-6;
     }
+    .skuSelectorNameContainer {
+      margin: 8px 0 0 0;
+      height: 48px;
+      .skuSelectorOptionsList {
+        margin: 0;
+        .skuSelectorItem--sku-selector {
+          margin: 0 16px 0 0;
+          height: 48px;
+          .frameAround--sku-selector {
+            width: 48px;
+            height: 48px;
+            border: 1px solid $color-gray11;
+            border-radius: 24px;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 2;
+          }
+        }
+        .skuSelectorInternalBox--sku-selector {
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
         }
 
+        .skuSelectorItem--selected {
+          .frameAround--sku-selector {
+            border: 2px solid $color-black-padrao;
+          }
+        }
+      }
+    }
+  }
+
+  /* TAMANHO */
   .skuSelectorSubcontainer--tamanho {
+    margin-bottom: 10px;
     &::before {
       content: "OUTROS TAMANHOS:";
       font-family: "Open Sans", sans-serif;
@@ -89,45 +117,63 @@
       font-size: 14px;
       color: $color-gray-6;
     }
+    .skuSelectorNameContainer {
+      margin: 8px 0 0 0;
+      height: 40px;
+      .skuSelectorOptionsList {
+        margin: 0;
+
+        .skuSelectorItem--sku-selector {
+          margin: 0 16px 0 0;
+          width: 40px;
+          height: 40px;
+          .frameAround--sku-selector {
+            width: 40px;
+            height: 40px;
+            border: 1px solid $color-gray-8;
+            border-radius: 50%;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 2;
+          }
+
+          .skuSelectorInternalBox--sku-selector {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            .skuSelectorItemTextValue {
+              height: 19px;
+              width: 17px;
+              padding: 0;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 19px;
+              color: rgba(185, 185, 185, 0.6);
+            }
+          }
+        }
+
+        .skuSelectorItem--selected {
+          .frameAround--sku-selector {
+            border: 2px solid $color-black-padrao;
+          }
+          .skuSelectorItemTextValue {
+            color: $color-black-padrao !important;
+          }
+        }
+      }
+    }
   }
 
   .skuSelectorTextContainer {
     display: none;
   }
-
-  .skuSelectorOptionsList {
-    margin-top: 8px;
-    margin-left: 0;
-  }
-
-  .skuSelectorSelectorImageValue {
-    font-size: 0;
-  }
 }
 /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
-.skuSelectorOptionsList {
-  .skuSelectorItem {
-    width: 40px;
-    height: 40px;
-    &:first-child {
-      margin-left: 0;
-    }
-    .frameAround {
-      border-radius: 50%;
-      border-color: $color-black-padrao;
-      color: $color-black-padrao;
-    }
-
-    .skuSelectorItemTextValue {
-      max-width: 100%;
-      display: flex;
-      justify-content: center;
-      color: $color-black-padrao;
-    }
-    .skuSelectorInternalBox {
-      border-radius: 50%;
-    }
-  }
 
 .diagonalCross {
   margin: 5px;
@@ -141,7 +187,6 @@
   );
   transform: rotate(90deg);
 }
-}
 
 /*PRODUTO INDISPONIVEL &&
 FORMULARIO DE PRODUTO INDISPONIVEL */
@@ -176,14 +221,14 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     position: relative;
     :global(.vtex-store-components-3-x-content) {
       display: block;
-      width: 374.65px;
+      width: 399px;
       margin-top: 16px;
       @include mq(md, max) {
         width: 100%;
         max-width: 100%;
       }
       .inputName {
-        width: 182.46px;
+        width: 195.5px;
         margin-right: 10.08px;
         margin-bottom: 15px;
         @include mq(md, max) {
@@ -195,7 +240,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
           border-radius: 0;
         }
         :global(.vtex-styleguide-9-x-input) {
-          padding: 0 14px;
+          padding: 12px 14px;
           font-size: 12px;
           line-height: 28px;
           color: $color-gray-6;
@@ -206,9 +251,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
         left: 51%;
         top: 0%;
         border-radius: 0;
-        width: 182.46px;
+        width: 195.5px;
         font-weight: 400;
-        margin-bottom: 15px;
+        margin: 0;
         @include mq(md, max) {
           width: -webkit-fill-available;
           margin: 0 0 0 8px;
@@ -219,7 +264,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
           border: 0.6px solid $color-gray-6;
           border-radius: 0;
           :global(.vtex-styleguide-9-x-input) {
-            padding: 0 14px;
+            padding: 12px 14px;
             font-size: 12px;
             line-height: 28px;
             color: $color-gray-6;
@@ -266,9 +311,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 /* BUSCA DE CEP */
 .shippingContainer {
   display: flex;
+  flex-direction: column;
+  width: 409px;
+  position: relative;
   @include mq(sm, max) {
     display: block;
-    position: relative;
+    max-width: 296px;
   }
   :global(.vtex-address-form__postalCode) {
     display: flex;
@@ -277,8 +325,10 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     @include mq(sm, max) {
       display: block;
     }
+
     :global(.vtex-input) {
       position: relative;
+      width: 280px;
       :global(.vtex-input__label) {
         font-size: 0;
         &::before {
@@ -296,10 +346,34 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
         @include mq(sm, max) {
           width: 100%;
         }
+        :global(.vtex-address-form-4-x-input) {
+          padding: 16.5px 62px 16.5px 16px;
+          &::placeholder {
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            display: flex;
+            align-items: center;
+            color: $color-gray-10;
+          }
+        }
       }
       :global(.vtex-input__error) {
         position: absolute;
+        @include mq(md, max) {
+          top: 0;
+          right: 0;
+          margin: 0;
         }
+        @include mq(sm, max) {
+          top: unset;
+          right: unset;
+          margin-top: 8px;
+        }
+      }
+    }
+    :global(.vtex-input__suffix) {
+      padding: 0;
     }
 
     :global(.vtex-address-form__postalCode-forgottenURL) {
@@ -311,6 +385,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
       font-size: 12px;
       line-height: 16px;
       text-decoration: underline;
+
       @include mq(sm, max) {
         left: 0;
         margin-top: 8px;
@@ -328,12 +403,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     height: 49px;
     width: 49px;
     margin-top: 27px !important;
-    position: relative;
+    position: absolute;
-    right: 148px;
+    left: 231px;
-    font-size: 0;
     border-radius: 0;
-    background-color: $color-black-padrao;
+    background-color: #000000;
     border: none;
+    font-size: 0;
     cursor: pointer;
 
     @include mq(sm, max) {
@@ -341,6 +416,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
       margin: 0 !important;
       position: absolute;
       right: 0;
+      left: unset;
       top: 27px;
     }
     &::before {
@@ -456,9 +532,10 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 
 /* DESCRIÇÃO DO PRODUTO */
 .productDescriptionContainer {
-  margin-left: 16px;
+  margin: 16px 0 0 16px;
   @include mq(md, max) {
-    margin: 0;
+    border-bottom: 1px solid $color-gray12;
+    margin: 16px 0 0 0;
   }
   .productDescriptionTitle {
     font-weight: 400;
@@ -482,6 +559,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     @include mq(md, max) {
       font-size: 14px;
       line-height: 19px;
+      margin-bottom: 16px;
     }
     @include mq(xl, min) {
       font-size: 18px;