Merge pull request 'feat: adiciona descricao de produtos e correção em imagens e espaçamentos' (#5) from feature/pagina-product into master

Reviewed-on: #5

react/components/Html/styles.css

@@ -8,3 +8,13 @@
     display: block;
   }
 }
+
+[class*="html--image-description"] {
+  margin-right: 16px;
+  width: 100%;
+}
+
+[class*="html--container-description"] {
+  margin: 32px 32px 16px 32px;
+}
+

store/blocks/pdp/product.jsonc

@@ -3,26 +3,14 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "tab-layout#description",
-      "list-context.product-list#prateleira",
+      "list-context.product-list#prateleira"
-      //"shelf.relatedProducts",
-      "product-questions-and-answers"
     ]
   },
 
-  "product-summary.shelf#prateleira": {
+/*
-    "children": [
+  BREADCRUMB
-      "stack-layout#prodsum",
+*/
-      "product-summary-name",
-      "product-installments",
-      "product-selling-price"
-    ]
-  },
-  "list-context.product-list#prateleira": {
-    "blocks": ["product-summary.shelf#prateleira"],
-    "children": ["slider-layout#demo-products"]
-  },
-
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -32,12 +20,150 @@
     "children": ["breadcrumb"]
   },
 
-  "flex-layout.row#description": {
+/*
+  DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#description)
+*/
+"html#container-description": {
+  "props": {
+    "tag": "div",
+    "blockClass": "container-description"
+  },
+  "children": ["flex-layout.row#product-description"]
+},
+
+  "flex-layout.row#product-description": {
+    "children": ["html#image-description", "flex-layout.row#description"]
+  },
+
+  "html#image-description":{
     "props": {
-      "marginBottom": 7
+      "tag": "div",
+      "testId": "product-images",
+      "blockClass": "image-description"
     },
+    "children": ["image#product"]
+  },
+
+  "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"]
   },
+
+
+  "tab-layout#description": {
+    "children": ["tab-list#description", "tab-content#description"],
+    "props": {
+      "blockClass": "description",
+      "defaultActiveTabId": "descricao1"
+    }
+  },
+
+  "tab-list#description": {
+    "children": [
+      "tab-list.item#descricao1",
+      "tab-list.item#descricao2",
+      "tab-list.item#descricao3",
+      "tab-list.item#descricao4",
+      "tab-list.item#descricao5"
+    ]
+  },
+
+  "tab-list.item#descricao1": {
+    "props": {
+      "tabId": "descricao1",
+      "label": "Descrição",
+      "defaultActiveTab": true
+    }
+  },
+
+  "tab-list.item#descricao2": {
+    "props": {
+      "tabId": "descricao2",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#descricao3": {
+    "props": {
+      "tabId": "descricao3",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#descricao4": {
+    "props": {
+      "tabId": "descricao4",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#descricao5": {
+    "props": {
+      "tabId": "descricao5",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-content#description": {
+    "children": [
+      "tab-content.item#descricao1",
+      "tab-content.item#descricao2",
+      "tab-content.item#descricao3",
+      "tab-content.item#descricao4",
+      "tab-content.item#descricao5"
+    ]
+  },
+
+  "tab-content.item#descricao1": {
+    "children": ["html#container-description"],
+    "props": { "tabId": "descricao1" }
+  },
+
+  "tab-content.item#descricao2": {
+    "children": ["html#container-description"],
+    "props": { "tabId": "descricao2" }
+  },
+
+  "tab-content.item#descricao3": {
+    "children": ["html#container-description"],
+    "props": { "tabId": "descricao3" }
+  },
+
+  "tab-content.item#descricao4": {
+    "children": ["html#container-description"],
+    "props": { "tabId": "descricao4" }
+  },
+
+  "tab-content.item#descricao5": {
+    "children": ["html#container-description"],
+    "props": { "tabId": "descricao5" }
+  },
+
+/*
+  PRATELEIRA DE PRODUTOS QUE QUE O CLIENTE PODE GOSTAR
+*/
+  "list-context.product-list#prateleira": {
+    "blocks": ["product-summary.shelf#prateleira"],
+    "children": ["slider-layout#demo-products"]
+},
+
+"product-summary.shelf#prateleira": {
+  "children": [
+    "stack-layout#prodsum",
+    "product-summary-name",
+    "product-list-price",
+    "product-selling-price"
+  ]
+},
+
+/*
+  IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO
+*/
   "condition-layout.product#availability": {
     "props": {
     "blockClass": "availability",
@@ -52,6 +178,7 @@
   },
   "flex-layout.row#product-main": {
     "props": {
+      "blockClass":"main",
       "colGap": 7,
       "rowGap": 7,
       "marginTop": 4,
@@ -85,6 +212,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
+      "blockClass": "stack",
       "width": "50%",
       "rowGap": 0
     }
@@ -104,6 +232,10 @@
       "displayThumbnailsArrows": true
     }
   },
+
+  /*
+  INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..)
+  */
   "flex-layout.col#right-col": {
     "props": {
       "blockClass": "right-col",
@@ -113,13 +245,10 @@
     "children": [
       "flex-layout.row#product-name",
       "product-identifier.product",
-      "product-rating-summary",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
-      "product-installments",
+      "product-installments#parcelaProduct",
       "availability-subscriber",
       "sku-selector",
-      "product-gifts",
       "html#buy-button",
       "shipping-simulator"
     ]
@@ -132,11 +261,19 @@
     "children": ["vtex.store-components:product-name"]
   },
 
+  "product-installments#parcelaProduct": {
+    "props": {
+      "markers": ["discount", "x"],
+      "blockClass": "divider",
+      "message": "{installmentsNumber} <x>x</> <discount>de</discount> {installmentValue} <discount>sem juros</discount>"
+    }
+  },
+
   "sku-selector": {
     "props": {
       "blockClass": "sku-selector",
-      "imageHeight": 48,
+      "imageHeight": 40,
-      "imageWidth": 48,
+      "imageWidth": 40,
       "variationsSpacing": 3,
       "showValueNameForImageVariation": true
     }
@@ -146,9 +283,7 @@
     "props": {
       "tag": "div",
       "testId": "buy-button",
-      "blockClass": "buy-button",
+      "blockClass": "buy-button"
-      "marginTop": 4,
-      "marginBottom": 7
     },
     "children": ["product-quantity","add-to-cart-button"]
   },

store/blocks/product-price.jsonc

@@ -10,20 +10,5 @@
     "children": [
       "product-selling-price"
     ]
-  },
-
-  "flex-layout.row#list-price-savings": {
-    "props": {
-      "blockClass": "list-price-savings",
-      "colGap": 2,
-      "preserveLayoutOnMobile": true,
-      "preventHorizontalStretch": true,
-      "marginBottom": 2,
-      "marginTop": 5
-    }
-    // "children": [
-    //   "product-list-price",
-    //   "product-price-savings"
-    // ]
   }
 }

store/blocks/product-summary/product-summary.jsonc

@@ -7,8 +7,7 @@
       "product-summary-space",
       "product-list-price#summary",
       "flex-layout.row#selling-price-savings",
-      "product-installments#summary",
+      "product-installments#summary"
-      "add-to-cart-button"
     ]
   },
   "flex-layout.col#productRating": {

store/blocks/product-summary/quickview.json

@@ -36,7 +36,7 @@
   },
   "flex-layout.col#quickviewPrice": {
     "children": [
-      "flex-layout.row#list-price-savings",
+
       "flex-layout.row#selling-price",
       "product-installments"
     ]

styles/css/agenciamagma.store-theme.css

@@ -7,6 +7,3 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.b--action-primary {
-  border-color: black;
-}

styles/css/vtex.flex-layout.css

@@ -8,17 +8,34 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.flexRowContent {
+/* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
-  padding: 0;
+@media only screen and (max-width: 1023px) {
-  margin: 0;
+  .flexRowContent--main {
-  width: 100%;
+    display: block;
+  }
 }
-.flexRowContent .flexCol--right-col .flexColChild--right-col .list-price-savings {
+.flexRowContent--main .flexCol--stack {
-  display: none;
+  padding-left: 40px;
+}
+@media only screen and (max-width: 1023px) {
+  .flexRowContent--main .flexCol--stack {
+    padding: 0 40px;
+    width: 100%;
+  }
+}
+.flexRowContent--main .flexCol--right-col {
+  padding-right: 40px;
+  margin-left: 16px;
+}
+@media only screen and (max-width: 1023px) {
+  .flexRowContent--main .flexCol--right-col {
+    padding: 0 40px;
+    margin-left: 0;
+  }
 }
 
+/* ASSINANTE DE PRODUTO INDISPONIVEL */
 .flexRowContent--message-availability {
-  margin-top: 24px;
   width: 375px;
 }
 @media only screen and (max-width: 1023px) {
@@ -27,20 +44,19 @@
   }
 }
 
-.sellingPriceValue {
+/* BOTAO DE ADICIONAR A SACOLA */
-  font-size: 50px;
-}
-
 .flexRowContent {
   padding: 0;
-  margin-top: 0;
+  margin: 0;
 }
 .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
   padding: 0;
   display: flex;
 }
-.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth):nth-child(even) {
+@media only screen and (max-width: 1023px) {
-  width: 100% !important;
+  .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+    width: 100% !important;
+  }
 }
 .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
   background-color: black;

styles/css/vtex.product-identifier.css

@@ -7,6 +7,7 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+/* REFERENCIA DO PRODUTO */
 .product-identifier--productReference {
   display: flex;
   justify-content: end;

styles/css/vtex.product-price.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -7,6 +8,7 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+/* VALOR PRINCIPAL DO PRODUTO */
 .sellingPrice--hasListPrice {
   font-weight: 700;
   font-size: 25px;
@@ -14,35 +16,48 @@
   color: #000000;
 }
 
-.installments {
+/* VALORES DE PARCELAMENTOS E JUROS */
-  display: flex;
+.installments--divider {
-  font-size: 0;
-  color: #929292;
   margin-bottom: 8px;
 }
-.installments .installmentsNumber {
+.installments--divider .installmentsNumber {
   font-weight: 700;
   font-size: 16px;
   line-height: 22px;
+  color: #929292;
 }
-.installments .installmentsNumber::after {
+.installments--divider .installments-x--divider {
-  content: "x ";
-}
-.installments .installmentValue {
   font-weight: 700;
   font-size: 16px;
   line-height: 22px;
+  color: #929292;
 }
-.installments .installmentValue::before {
+.installments--divider .installmentValue--divider {
+  margin-bottom: 8px;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installments--divider .installments-discount--divider {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+/* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */
+.listPrice {
+  font-family: "Opens Sans", sans-serif;
+  line-height: 19px;
+  color: #bababa;
+  font-size: 14px;
+}
+.listPrice .listPriceValue::before {
   content: "de ";
-  margin-left: 5px;
+  font-size: 14px;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
 }
-.installments .installmentValue::after {
+.listPrice .listPriceValue::after {
-  content: " sem juros";
+  content: " por";
-  font-weight: 400;
+  font-size: 14px;
-  font-size: 16px;
-  line-height: 22px;
 }

styles/css/vtex.product-quantity.css

@@ -7,6 +7,7 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+/* INPUT CONTADOR DE PRODUTO */
 .quantitySelectorContainer {
   height: 49px;
   margin-top: 8px;

styles/css/vtex.store-components.css

@@ -9,17 +9,40 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  margin: 0;
+  padding: 0;
-  padding: 0 40px;
   max-width: 100%;
-  /* TITULO (NOME DO PRODUTO PRINCIPAL)*/
-  /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
-  /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
-  /*PRODUTO INDISPONIVEL, TEXTOS */
-  /* BUSCA DE CEP */
-  /* TRANSPORTADORAS */
 }
-.container .productNameContainer--quickview {
+
+/*IMAGEM PRINCIPAL DO PRODUTO */
+.productImage {
+  margin-right: 16px;
+}
+.productImage .productImageTag {
+  width: 100%;
+  max-height: 100% !important;
+  object-fit: contain;
+}
+
+/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
+.carouselGaleryThumbs {
+  margin: 16px 0;
+}
+.carouselGaleryThumbs .thumbImg {
+  width: 90px;
+  height: 90px;
+  border-radius: 8px;
+}
+.carouselGaleryThumbs .productImagesThumb {
+  margin: 0 16px 0 0;
+  height: 100% !important;
+  width: 90px !important;
+}
+.carouselGaleryThumbs .productImagesThumbCaret {
+  display: none;
+}
+
+/* TITULO (NOME DO PRODUTO PRINCIPAL)*/
+.productNameContainer--quickview {
   text-align: end;
   font-weight: 300;
   font-size: 20px;
@@ -27,21 +50,23 @@
   color: #575757;
 }
 @media only screen and (max-width: 1023px) {
-  .container .productNameContainer--quickview {
+  .productNameContainer--quickview {
     text-align: start;
   }
 }
-.container .skuSelectorContainer {
+
+/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
+.skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
 }
-.container .skuSelectorContainer .skuSelectorName {
+.skuSelectorContainer .skuSelectorName {
   font-size: 0;
 }
-.container .skuSelectorContainer .skuSelectorNameSeparator {
+.skuSelectorContainer .skuSelectorNameSeparator {
   font-size: 0;
 }
-.container .skuSelectorContainer .skuSelectorSubcontainer--cor::before {
+.skuSelectorContainer .skuSelectorSubcontainer--cor::before {
   content: "OUTRAS CORES:";
   font-family: "Open Sans", sans-serif;
   font-weight: 400;
@@ -49,7 +74,7 @@
   font-size: 14px;
   color: #929292;
 }
-.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
   content: "OUTROS TAMANHOS:";
   font-family: "Open Sans", sans-serif;
   font-weight: 400;
@@ -57,119 +82,107 @@
   font-size: 14px;
   color: #929292;
 }
-.container .skuSelectorContainer .skuSelectorTextContainer {
+.skuSelectorContainer .skuSelectorTextContainer {
   display: none;
 }
-.container .skuSelectorContainer .skuSelectorOptionsList {
+.skuSelectorContainer .skuSelectorOptionsList {
   margin-top: 8px;
   margin-left: 0;
 }
-.container .skuSelectorContainer .skuSelectorSelectorImageValue {
+.skuSelectorContainer .skuSelectorSelectorImageValue {
   font-size: 0;
 }
-.container .skuSelectorOptionsList .skuSelectorItem {
+
+/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
+.skuSelectorOptionsList .skuSelectorItem {
   width: 40px;
   height: 40px;
 }
-.container .skuSelectorOptionsList .skuSelectorItem:first-child {
+.skuSelectorOptionsList .skuSelectorItem:first-child {
   margin-left: 0;
 }
-.container .skuSelectorOptionsList .skuSelectorItem .frameAround {
+.skuSelectorOptionsList .skuSelectorItem .frameAround {
   border-radius: 50%;
   border-color: #000000;
   color: #000000;
 }
-.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue {
+.skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue {
   max-width: 100%;
   display: flex;
   justify-content: center;
   color: #000000;
 }
-.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+.skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
   border-radius: 50%;
 }
-.container .skuSelectorOptionsList .diagonalCross {
+.skuSelectorOptionsList .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);
 }
-.container .carouselGaleryThumbs {
+
-  margin: 16px 0;
+/*PRODUTO INDISPONIVEL &&
-}
+FORMULARIO DE PRODUTO INDISPONIVEL */
-.container .carouselGaleryThumbs .thumbImg {
+.subscriberContainer {
-  width: 90px;
-  height: 90px;
-  border-radius: 8px;
-}
-.container .carouselGaleryThumbs .productImagesThumb {
-  margin-right: 16px;
-  height: 100% !important;
-  width: 90px !important;
-}
-.container .carouselGaleryThumbs .productImagesThumbCaret {
-  display: none;
-}
-.container .subscriberContainer {
   width: 100%;
   margin-top: 24px;
-  /* FORMULARIO DE PRODUTO INDISPONIVEL */
 }
-.container .subscriberContainer .title {
+.subscriberContainer .title {
   font-size: 0;
   margin-bottom: 0;
 }
-.container .subscriberContainer .title::before {
+.subscriberContainer .title::before {
   content: "Produto indisponível";
   font-weight: 700;
   font-size: 14px;
   line-height: 19px;
   color: #868686;
 }
-.container .subscriberContainer .subscribeLabel {
+.subscriberContainer .subscribeLabel {
   font-size: 0;
 }
-.container .subscriberContainer .subscribeLabel::before {
+.subscriberContainer .subscribeLabel::before {
   content: "Deseja saber quando estiver disponível?";
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: #868686;
 }
-.container .subscriberContainer .form {
+.subscriberContainer .form {
   position: relative;
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) {
-  width: 374.65px;
   display: block;
+  width: 374.65px;
   margin-top: 16px;
 }
 @media only screen and (max-width: 1023px) {
-  .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
+  .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
     width: 100%;
     max-width: 100%;
   }
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
   width: 182.46px;
   margin-right: 10.08px;
   margin-bottom: 15px;
 }
 @media only screen and (max-width: 1023px) {
-  .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
+  .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
     width: 49%;
   }
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
   border: 0.6px solid #929292;
   border-radius: 0;
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
   padding: 0 14px;
   font-size: 12px;
   line-height: 28px;
   color: #929292;
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
   position: absolute;
   left: 51%;
   top: 0%;
@@ -179,27 +192,27 @@
   margin-bottom: 15px;
 }
 @media only screen and (max-width: 1023px) {
-  .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
+  .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
     width: -webkit-fill-available;
     margin: 0 0 0 8px;
     left: 49%;
   }
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
   border: 0.6px solid #929292;
   border-radius: 0;
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
   padding: 0 14px;
   font-size: 12px;
   line-height: 28px;
   color: #929292;
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
   width: 100%;
   margin-bottom: 16px;
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
   width: 100%;
   height: 49px;
   background-color: #000000;
@@ -210,7 +223,7 @@
   align-items: center;
   justify-content: center;
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
   content: "AVISE-ME";
   color: #fff;
   font-weight: 600;
@@ -218,49 +231,51 @@
   line-height: 25px;
   font-family: "Open sans", sans-serif;
 }
-.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
   padding: 0;
 }
-.container .shippingContainer {
+
+/* BUSCA DE CEP */
+.shippingContainer {
   display: flex;
 }
 @media only screen and (max-width: 767px) {
-  .container .shippingContainer {
+  .shippingContainer {
     display: block;
     position: relative;
   }
 }
-.container .shippingContainer :global(.vtex-address-form__postalCode) {
+.shippingContainer :global(.vtex-address-form__postalCode) {
   display: flex;
   align-items: center;
   padding: 0;
 }
 @media only screen and (max-width: 767px) {
-  .container .shippingContainer :global(.vtex-address-form__postalCode) {
+  .shippingContainer :global(.vtex-address-form__postalCode) {
     display: block;
   }
 }
-.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
   font-size: 0;
 }
-.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before {
   content: "CALCULAR FRETE";
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: #929292;
 }
-.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
   width: 280px;
   height: 49px;
   border-radius: 0;
 }
 @media only screen and (max-width: 767px) {
-  .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
     width: 100%;
   }
 }
-.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
   padding: 0;
   margin-top: 25px;
   position: relative;
@@ -271,22 +286,22 @@
   text-decoration: underline;
 }
 @media only screen and (max-width: 767px) {
-  .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
     left: 0;
     margin-top: 8px;
     text-align: end;
   }
 }
-.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
   color: #000000;
 }
-.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
   display: none;
 }
-.container .shippingContainer :global(.vtex-button) {
+.shippingContainer :global(.vtex-button) {
   height: 49px;
   width: 49px;
-  margin-top: 27px;
+  margin-top: auto !important;
   position: relative;
   right: 148px;
   font-size: 0;
@@ -294,37 +309,41 @@
   cursor: pointer;
 }
 @media only screen and (max-width: 767px) {
-  .container .shippingContainer :global(.vtex-button) {
+  .shippingContainer :global(.vtex-button) {
+    height: 49px !important;
+    margin: 0 !important;
     position: absolute;
     right: 0px;
-    top: 0px;
+    top: 26px;
   }
 }
-.container .shippingContainer :global(.vtex-button)::before {
+.shippingContainer :global(.vtex-button)::before {
   content: "OK";
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
   color: #fff;
 }
-.container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
   height: fit-content;
 }
-.container .shippingTable {
+
+/* TRANSPORTADORAS */
+.shippingTable {
   border: none;
   padding: 0;
   margin: 15px 0;
 }
-.container .shippingTable .shippingTableHead {
+.shippingTable .shippingTableHead {
   display: block;
   text-transform: uppercase;
   margin-bottom: 15px;
 }
-.container .shippingTable .shippingTableHead .shippingTableRow {
+.shippingTable .shippingTableHead .shippingTableRow {
   display: flex;
   flex-direction: row;
 }
-.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
   margin-right: 39px;
   font-weight: 400;
   font-size: 14px;
@@ -332,11 +351,11 @@
   color: #202020;
 }
 @media only screen and (max-width: 767px) {
-  .container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+  .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
     margin-right: 32px;
   }
 }
-.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
   display: flex;
   order: 1;
   font-weight: 400;
@@ -344,27 +363,27 @@
   line-height: 19px;
   color: #202020;
 }
-.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
   font-size: 0;
   margin-right: 30px;
 }
 @media only screen and (max-width: 767px) {
-  .container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
     margin-right: 32px;
   }
 }
-.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
   content: "Frete";
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: #202020;
 }
-.container .shippingTable .shippingTableBody .shippingTableRow {
+.shippingTable .shippingTableBody .shippingTableRow {
   display: flex;
   flex-direction: row;
 }
-.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
   width: 82px;
   margin-right: 28px;
   font-weight: 400;
@@ -373,11 +392,11 @@
   color: #afafaf;
 }
 @media only screen and (max-width: 767px) {
-  .container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+  .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
     margin-right: 22px;
   }
 }
-.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
   display: flex;
   order: 1;
   font-weight: 400;
@@ -385,7 +404,7 @@
   line-height: 16px;
   color: #afafaf;
 }
-.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
   width: 50px;
   margin-right: 28px;
   font-weight: 400;
@@ -393,16 +412,33 @@
   line-height: 16px;
   color: #afafaf;
 }
-.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
   padding: 0 0 15px;
 }
-.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
   display: none;
 }
 
-.productImage {
+/* IMAGEM DA DESCRIÇÃO DO PRODUTO */
-  width: max-content;
+.imageElement {
+  width: 100%;
 }
-.productImage .productImageTag--main {
+
-  max-height: 664px !important;
+/* DESCRIÇÃO DO PRODUTO */
+.productDescriptionContainer {
+  margin-left: 16px;
+}
+.productDescriptionContainer .productDescriptionTitle {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  height: 40px;
+  margin-bottom: 8px;
+  color: #575757;
+}
+.productDescriptionContainer .productDescriptionText {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
 }

styles/css/vtex.tab-layout.css

@@ -0,0 +1,42 @@
+/*
+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 */
+.container--description {
+  padding: 0 40px;
+}
+.container--description .listContainer {
+  display: flex;
+  padding: 0 80px;
+  border-bottom: 1px solid #b9b9b9;
+  justify-content: space-between;
+}
+.container--description .listContainer .listItem {
+  margin: 0;
+  padding: 0;
+  height: 38px;
+  width: 114px;
+}
+.container--description .listContainer .listItem :global(.vtex-button) {
+  background-color: transparent;
+  border: none;
+  color: #bfbfbf;
+  width: 100%;
+}
+.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 0 !important;
+  height: 38px;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  text-transform: capitalize;
+}
+.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover {
+  color: black;
+  border-bottom: 2px solid #000000;
+}

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,11 +0,0 @@
-// .html {
-//   background-color: red;
-// }
-
-// .html--pdp-breadcrumb {
-//   background-color: green;
-// }
-
-.b--action-primary {
-  border-color: black;
-}

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

@@ -1,35 +1,41 @@
-.flexRowContent {
+/* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
-  padding: 0;
+.flexRowContent--main {
-  margin: 0;
+  @include mq(md, max) {
-  width: 100%;
+    display: block;
-
+  }
+  .flexCol--stack {
+    padding-left: 40px;
+    @include mq(md, max) {
+      padding: 0 40px;
+      width: 100%;
+    }
+  }
   .flexCol--right-col {
-    .flexColChild--right-col {
+    padding-right: 40px;
-      .list-price-savings {
+    margin-left: 16px;
-        display: none;
+    @include mq(md, max) {
-      }
+      padding: 0 40px;
+      margin-left: 0;
     }
   }
 }
+
+/* ASSINANTE DE PRODUTO INDISPONIVEL */
 .flexRowContent--message-availability {
-  margin-top: 24px;
   width: 375px;
   @include mq(md, max) {
     width: 100%;
   }
 }
 
-.sellingPriceValue {
+/* BOTAO DE ADICIONAR A SACOLA */
-  font-size: 50px;
-}
-
 .flexRowContent {
   padding: 0;
-  margin-top: 0;
+  margin: 0;
   :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
     padding: 0;
     display: flex;
-    &:nth-child(even) {
+    @include mq(md, max) {
       width: 100% !important;
     }
     :global(.vtex-button) {

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

@@ -1,3 +1,4 @@
+/* REFERENCIA DO PRODUTO */
 .product-identifier--productReference {
   display: flex;
   justify-content: end;

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

@@ -1,3 +1,4 @@
+/* VALOR PRINCIPAL DO PRODUTO */
 .sellingPrice--hasListPrice {
   font-weight: 700;
   font-size: 25px;
@@ -5,36 +6,54 @@
   color: $color-black-padrao;
 }
 
-.installments {
+/* VALORES DE PARCELAMENTOS E JUROS */
-  display: flex;
+.installments--divider {
-  font-size: 0;
-  color: $color-gray-6;
   margin-bottom: 8px;
   .installmentsNumber {
     font-weight: 700;
     font-size: 16px;
     line-height: 22px;
-
+    color: $color-gray14;
-    &::after {
-      content: "x ";
-    }
   }
-  .installmentValue {
+
+  .installments-x--divider {
     font-weight: 700;
     font-size: 16px;
     line-height: 22px;
+    color: $color-gray14;
+  }
+
+  .installmentValue--divider {
+    margin-bottom: 8px;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    color: $color-gray14;
+  }
+
+  .installments-discount--divider {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: $color-gray14;
+  }
+}
+
+/* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */
+.listPrice {
+  font-family: "Opens Sans", sans-serif;
+  line-height: 19px;
+  color: #bababa;
+
+  font-size: 14px;
+  .listPriceValue {
     &::before {
       content: "de ";
-      margin-left: 5px;
+      font-size: 14px;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 22px;
     }
     &::after {
-      content: " sem juros";
+      content: " por";
-      font-weight: 400;
+      font-size: 14px;
-      font-size: 16px;
-      line-height: 22px;
     }
   }
 }

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

@@ -1,3 +1,4 @@
+/* INPUT CONTADOR DE PRODUTO */
 .quantitySelectorContainer {
   height: 49px;
   margin-top: 8px;

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

@@ -1,176 +1,212 @@
 .container {
-  margin: 0;
+  padding: 0;
-  padding: 0 40px;
   max-width: 100%;
+}
 
-  /* TITULO (NOME DO PRODUTO PRINCIPAL)*/
+/*IMAGEM PRINCIPAL DO PRODUTO */
-  .productNameContainer--quickview {
+.productImage {
-    text-align: end;
+  margin-right: 16px;
-    font-weight: 300;
+  .productImageTag {
-    font-size: 20px;
+    width: 100%;
-    line-height: 34px;
+    max-height: 100% !important;
-    color: $color-gray-7;
+    object-fit: contain;
-    @include mq(md, max) {
+  }
-      text-align: start;
+}
+
+/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
+.carouselGaleryThumbs {
+  margin: 16px 0;
+
+  .thumbImg {
+    width: 90px;
+    height: 90px;
+    border-radius: 8px;
+  }
+  .productImagesThumb {
+    margin: 0 16px 0 0;
+    height: 100% !important;
+    width: 90px !important;
+  }
+
+  .productImagesThumbCaret {
+    display: none;
+  }
+}
+
+/* TITULO (NOME DO PRODUTO PRINCIPAL)*/
+.productNameContainer--quickview {
+  text-align: end;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: $color-gray-7;
+  @include mq(md, max) {
+    text-align: start;
+  }
+}
+
+/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+
+  .skuSelectorName {
+    font-size: 0;
+  }
+
+  .skuSelectorNameSeparator {
+    font-size: 0;
+  }
+
+  .skuSelectorSubcontainer--cor {
+    &::before {
+      content: "OUTRAS CORES:";
+      font-family: "Open Sans", sans-serif;
+      font-weight: 400;
+      line-height: 19px;
+      font-size: 14px;
+      color: $color-gray-6;
     }
   }
 
-  /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
+  .skuSelectorSubcontainer--tamanho {
-  .skuSelectorContainer {
+    &::before {
-    display: flex;
+      content: "OUTROS TAMANHOS:";
-    flex-direction: column-reverse;
+      font-family: "Open Sans", sans-serif;
-
+      font-weight: 400;
-    .skuSelectorName {
+      line-height: 19px;
-      font-size: 0;
+      font-size: 14px;
+      color: $color-gray-6;
     }
+  }
 
-    .skuSelectorNameSeparator {
+  .skuSelectorTextContainer {
-      font-size: 0;
+    display: none;
-    }
+  }
 
-    .skuSelectorSubcontainer--cor {
+  .skuSelectorOptionsList {
-      &::before {
+    margin-top: 8px;
-        content: "OUTRAS CORES:";
+    margin-left: 0;
-        font-family: "Open Sans", sans-serif;
+  }
-        font-weight: 400;
-        line-height: 19px;
-        font-size: 14px;
-        color: $color-gray-6;
-      }
-    }
 
-    .skuSelectorSubcontainer--tamanho {
+  .skuSelectorSelectorImageValue {
-      &::before {
+    font-size: 0;
-        content: "OUTROS TAMANHOS:";
+  }
-        font-family: "Open Sans", sans-serif;
+}
-        font-weight: 400;
+/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
-        line-height: 19px;
+.skuSelectorOptionsList {
-        font-size: 14px;
+  .skuSelectorItem {
-        color: $color-gray-6;
+    width: 40px;
-      }
+    height: 40px;
-    }
+    &:first-child {
-
-    .skuSelectorTextContainer {
-      display: none;
-    }
-
-    .skuSelectorOptionsList {
-      margin-top: 8px;
       margin-left: 0;
     }
+    .frameAround {
+      border-radius: 50%;
+      border-color: $color-black-padrao;
+      color: $color-black-padrao;
+    }
 
-    .skuSelectorSelectorImageValue {
+    .skuSelectorItemTextValue {
-      font-size: 0;
+      max-width: 100%;
+      display: flex;
+      justify-content: center;
+      color: $color-black-padrao;
+    }
+    .skuSelectorInternalBox {
+      border-radius: 50%;
     }
   }
-  /*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 {
+  .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);
+  }
+}
+
+/*PRODUTO INDISPONIVEL &&
+FORMULARIO DE PRODUTO INDISPONIVEL */
+.subscriberContainer {
+  width: 100%;
+  margin-top: 24px;
+  .title {
+    font-size: 0;
+    margin-bottom: 0;
+
+    &::before {
+      content: "Produto indisponível";
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-gray-9;
+    }
+  }
+
+  .subscribeLabel {
+    font-size: 0;
+    &::before {
+      content: "Deseja saber quando estiver disponível?";
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-gray-9;
+    }
+  }
+
+  .form {
+    position: relative;
+    :global(.vtex-store-components-3-x-content) {
+      display: block;
+      width: 374.65px;
+      margin-top: 16px;
+      @include mq(md, max) {
+        width: 100%;
         max-width: 100%;
-        display: flex;
-        justify-content: center;
-        color: $color-black-padrao;
       }
-      .skuSelectorInternalBox {
+      .inputName {
-        border-radius: 50%;
+        width: 182.46px;
-      }
+        margin-right: 10.08px;
-    }
+        margin-bottom: 15px;
-
-    .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);
-    }
-  }
-
-  .carouselGaleryThumbs {
-    margin: 16px 0;
-
-    .thumbImg {
-      width: 90px;
-      height: 90px;
-      border-radius: 8px;
-    }
-    .productImagesThumb {
-      margin-right: 16px;
-      height: 100% !important;
-      width: 90px !important;
-    }
-
-    .productImagesThumbCaret {
-      display: none;
-    }
-  }
-
-  /*PRODUTO INDISPONIVEL, TEXTOS */
-  .subscriberContainer {
-    width: 100%;
-    margin-top: 24px;
-    .title {
-      font-size: 0;
-      margin-bottom: 0;
-
-      &::before {
-        content: "Produto indisponível";
-        font-weight: 700;
-        font-size: 14px;
-        line-height: 19px;
-        color: $color-gray-9;
-      }
-    }
-
-    .subscribeLabel {
-      font-size: 0;
-      &::before {
-        content: "Deseja saber quando estiver disponível?";
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 19px;
-        color: $color-gray-9;
-      }
-    }
-    /* FORMULARIO DE PRODUTO INDISPONIVEL */
-    .form {
-      position: relative;
-      :global(.vtex-store-components-3-x-content) {
-        width: 374.65px;
-        display: block;
-        margin-top: 16px;
         @include mq(md, max) {
-          width: 100%;
+          width: 49%;
-          max-width: 100%;
         }
-        .inputName {
-          width: 182.46px;
-          margin-right: 10.08px;
-          margin-bottom: 15px;
-          @include mq(md, max) {
-            width: 49%;
-          }
 
-          :global(.vtex-input-prefix__group) {
+        :global(.vtex-input-prefix__group) {
-            border: 0.6px solid $color-gray-6;
+          border: 0.6px solid $color-gray-6;
-            border-radius: 0;
+          border-radius: 0;
-          }
+        }
+        :global(.vtex-styleguide-9-x-input) {
+          padding: 0 14px;
+          font-size: 12px;
+          line-height: 28px;
+          color: $color-gray-6;
+        }
+      }
+      .inputEmail {
+        position: absolute;
+        left: 51%;
+        top: 0%;
+        border-radius: 0;
+        width: 182.46px;
+        font-weight: 400;
+        margin-bottom: 15px;
+        @include mq(md, max) {
+          width: -webkit-fill-available;
+          margin: 0 0 0 8px;
+          left: 49%;
+        }
+
+        :global(.vtex-input-prefix__group) {
+          border: 0.6px solid $color-gray-6;
+          border-radius: 0;
           :global(.vtex-styleguide-9-x-input) {
             padding: 0 14px;
             font-size: 12px;
@@ -178,232 +214,207 @@
             color: $color-gray-6;
           }
         }
-        .inputEmail {
+      }
-          position: absolute;
+      .submit {
-          left: 51%;
+        width: 100%;
-          top: 0%;
+        margin-bottom: 16px;
-          border-radius: 0;
+        :global(.vtex-button) {
-          width: 182.46px;
-          font-weight: 400;
-          margin-bottom: 15px;
-          @include mq(md, max) {
-            width: -webkit-fill-available;
-            margin: 0 0 0 8px;
-            left: 49%;
-          }
-
-          :global(.vtex-input-prefix__group) {
-            border: 0.6px solid $color-gray-6;
-            border-radius: 0;
-            :global(.vtex-styleguide-9-x-input) {
-              padding: 0 14px;
-              font-size: 12px;
-              line-height: 28px;
-              color: $color-gray-6;
-            }
-          }
-        }
-        .submit {
           width: 100%;
-          margin-bottom: 16px;
+          height: 49px;
-          :global(.vtex-button) {
+          background-color: $color-black-padrao;
-            width: 100%;
+          border: none;
-            height: 49px;
+          border-radius: 0;
-            background-color: $color-black-padrao;
+          font-size: 0;
-            border: none;
+          display: flex;
-            border-radius: 0;
+          align-items: center;
-            font-size: 0;
+          justify-content: center;
-            display: flex;
+          &::before {
-            align-items: center;
+            content: "AVISE-ME";
-            justify-content: center;
+            color: $color-white;
-            &::before {
+            font-weight: 600;
-              content: "AVISE-ME";
+            font-size: 18px;
-              color: $color-white;
+            line-height: 25px;
-              font-weight: 600;
+            font-family: "Open sans", sans-serif;
-              font-size: 18px;
+          }
-              line-height: 25px;
+          :global(.vtex-button__label) {
-              font-family: "Open sans", sans-serif;
+            padding: 0;
-            }
-
-            :global(.vtex-button__label) {
-              padding: 0;
-            }
           }
         }
       }
     }
   }
+}
 
-  /* BUSCA DE CEP */
+/* BUSCA DE CEP */
-  .shippingContainer {
+.shippingContainer {
+  display: flex;
+  @include mq(sm, max) {
+    display: block;
+    position: relative;
+  }
+  :global(.vtex-address-form__postalCode) {
     display: flex;
+    align-items: center;
+    padding: 0;
     @include mq(sm, max) {
       display: block;
-      position: relative;
     }
-    :global(.vtex-address-form__postalCode) {
+    :global(.vtex-input__label) {
-      display: flex;
+      font-size: 0;
-      align-items: center;
+      &::before {
-      padding: 0;
+        content: "CALCULAR FRETE";
-      @include mq(sm, max) {
+        font-weight: 400;
-        display: block;
+        font-size: 14px;
+        line-height: 19px;
+        color: $color-gray-6;
       }
-      :global(.vtex-input__label) {
+    }
+    :global(.vtex-input-prefix__group) {
+      width: 280px;
+      height: 49px;
+      border-radius: 0;
+      @include mq(sm, max) {
+        width: 100%;
+      }
+    }
+    :global(.vtex-address-form__postalCode-forgottenURL) {
+      padding: 0;
+      margin-top: 25px;
+      position: relative;
+      left: 32px;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      text-decoration: underline;
+      @include mq(sm, max) {
+        left: 0;
+        margin-top: 8px;
+        text-align: end;
+      }
+      :last-child {
+        color: $color-black-padrao;
+      }
+      :global(.vtex__icon-external-link) {
+        display: none;
+      }
+    }
+  }
+  :global(.vtex-button) {
+    height: 49px;
+    width: 49px;
+    margin-top: auto !important;
+    position: relative;
+    right: 148px;
+    font-size: 0;
+    border-radius: 0;
+    cursor: pointer;
+
+    @include mq(sm, max) {
+      height: 49px !important;
+      margin: 0 !important;
+      position: absolute;
+      right: 0px;
+      top: 26px;
+    }
+    &::before {
+      content: "OK";
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-white;
+    }
+    :global(.vtex-button__label) {
+      height: fit-content;
+    }
+  }
+}
+
+/* TRANSPORTADORAS */
+.shippingTable {
+  border: none;
+  padding: 0;
+  margin: 15px 0;
+  .shippingTableHead {
+    display: block;
+    text-transform: uppercase;
+    margin-bottom: 15px;
+    .shippingTableRow {
+      display: flex;
+      flex-direction: row;
+      .shippingTableHeadDeliveryName {
+        margin-right: 39px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: $color-black2;
+        @include mq(sm, max) {
+          margin-right: 32px;
+        }
+      }
+      .shippingTableHeadDeliveryEstimate {
+        display: flex;
+        order: 1;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: $color-black2;
+      }
+
+      .shippingTableHeadDeliveryPrice {
         font-size: 0;
+        margin-right: 30px;
+        @include mq(sm, max) {
+          margin-right: 32px;
+        }
         &::before {
-          content: "CALCULAR FRETE";
+          content: "Frete";
           font-weight: 400;
           font-size: 14px;
           line-height: 19px;
-          color: $color-gray-6;
+          color: $color-black2;
         }
       }
-      :global(.vtex-input-prefix__group) {
+    }
-        width: 280px;
+  }
-        height: 49px;
+
-        border-radius: 0;
+  .shippingTableBody {
-        @include mq(sm, max) {
+    .shippingTableRow {
-          width: 100%;
+      display: flex;
-        }
+      flex-direction: row;
-      }
+      .shippingTableCellDeliveryName {
-      :global(.vtex-address-form__postalCode-forgottenURL) {
+        width: 82px;
-        padding: 0;
+        margin-right: 28px;
-        margin-top: 25px;
-        position: relative;
-        left: 32px;
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
-        text-decoration: underline;
+        color: $color-gray-10;
         @include mq(sm, max) {
-          left: 0;
+          margin-right: 22px;
-          margin-top: 8px;
-          text-align: end;
-        }
-        :last-child {
-          color: $color-black-padrao;
-        }
-        :global(.vtex__icon-external-link) {
-          display: none;
         }
       }
-    }
-    :global(.vtex-button) {
-      height: 49px;
-      width: 49px;
-      margin-top: 27px;
-      position: relative;
-      right: 148px;
-      font-size: 0;
-      border-radius: 0;
-      cursor: pointer;
 
-      @include mq(sm, max) {
+      .shippingTableCellDeliveryEstimate {
-        position: absolute;
-        right: 0px;
-        top: 0px;
-      }
-      &::before {
-        content: "OK";
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 19px;
-        color: $color-white;
-      }
-      :global(.vtex-button__label) {
-        height: fit-content;
-      }
-    }
-  }
-
-  /* TRANSPORTADORAS */
-  .shippingTable {
-    border: none;
-    padding: 0;
-    margin: 15px 0;
-    .shippingTableHead {
-      display: block;
-      text-transform: uppercase;
-      margin-bottom: 15px;
-      .shippingTableRow {
         display: flex;
-        flex-direction: row;
+        order: 1;
-        .shippingTableHeadDeliveryName {
+        font-weight: 400;
-          margin-right: 39px;
+        font-size: 12px;
-          font-weight: 400;
+        line-height: 16px;
-          font-size: 14px;
+        color: $color-gray-10;
-          line-height: 19px;
-          color: $color-black2;
-          @include mq(sm, max) {
-            margin-right: 32px;
-          }
-        }
-
-        .shippingTableHeadDeliveryEstimate {
-          display: flex;
-          order: 1;
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 19px;
-          color: $color-black2;
-        }
-
-        .shippingTableHeadDeliveryPrice {
-          font-size: 0;
-          margin-right: 30px;
-          @include mq(sm, max) {
-            margin-right: 32px;
-          }
-          &::before {
-            content: "Frete";
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 19px;
-            color: $color-black2;
-          }
-        }
       }
-    }
 
-    .shippingTableBody {
+      .shippingTableCellDeliveryPrice {
-      .shippingTableRow {
+        width: 50px;
-        display: flex;
+        margin-right: 28px;
-        flex-direction: row;
+        font-weight: 400;
-        .shippingTableCellDeliveryName {
+        font-size: 12px;
-          width: 82px;
+        line-height: 16px;
-          margin-right: 28px;
+        color: $color-gray-10;
-          font-weight: 400;
+      }
-          font-size: 12px;
+      .shippingTableCell {
-          line-height: 16px;
+        padding: 0 0 15px;
-          color: $color-gray-10;
+        .shippingTableLabel {
-          @include mq(sm, max) {
+          .shippingTableRadioBtn {
-            margin-right: 22px;
+            display: none;
-          }
-        }
-
-        .shippingTableCellDeliveryEstimate {
-          display: flex;
-          order: 1;
-          font-weight: 400;
-          font-size: 12px;
-          line-height: 16px;
-          color: $color-gray-10;
-        }
-
-        .shippingTableCellDeliveryPrice {
-          width: 50px;
-          margin-right: 28px;
-          font-weight: 400;
-          font-size: 12px;
-          line-height: 16px;
-          color: $color-gray-10;
-        }
-        .shippingTableCell {
-          padding: 0 0 15px;
-          .shippingTableLabel {
-            .shippingTableRadioBtn {
-              display: none;
-            }
           }
         }
       }
@@ -411,9 +422,26 @@
   }
 }
 
-.productImage {
+/* IMAGEM DA DESCRIÇÃO DO PRODUTO */
-  width: max-content;
+.imageElement {
-  .productImageTag--main {
+  width: 100%;
-    max-height: 664px !important;
+}
+
+/* DESCRIÇÃO DO PRODUTO */
+.productDescriptionContainer {
+  margin-left: 16px;
+  .productDescriptionTitle {
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    height: 40px;
+    margin-bottom: 8px;
+    color: $color-gray13;
+  }
+  .productDescriptionText {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: $color-gray14;
   }
 }

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

@@ -0,0 +1,35 @@
+.container--description {
+  padding: 0 40px;
+  .listContainer {
+    display: flex;
+    padding: 0 80px;
+    border-bottom: 1px solid $color-gray11;
+    justify-content: space-between;
+    .listItem {
+      margin: 0;
+      padding: 0;
+      height: 38px;
+      width: 114px;
+
+      :global(.vtex-button) {
+        background-color: transparent;
+        border: none;
+        color: $color-gray12;
+        width: 100%;
+
+        :global(.vtex-button__label) {
+          padding: 0 !important;
+          height: 38px;
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 38px;
+          text-transform: capitalize;
+          &:hover {
+            color: black;
+            border-bottom: 2px solid $color-black-padrao;
+          }
+        }
+      }
+    }
+  }
+}

styles/sass/utils/_vars.scss

@@ -1,6 +1,7 @@
 $color-black: #292929;
 $color-black-padrao: #000000;
 $color-black2: #202020;
+
 $color-white: #fff;
 
 $color-gray: #6c6c6c;
@@ -13,6 +14,10 @@ $color-gray-7: #575757;
 $color-gray-8: #989898;
 $color-gray-9: #868686;
 $color-gray-10: #afafaf;
+$color-gray11: #b9b9b9;
+$color-gray12: #bfbfbf;
+$color-gray13: #575757;
+$color-gray14: #929292;
 
 $color-blue: #4267b2;