feat(pdp): Adiciona breadcrumb e detalhes do produto

store/blocks/minicart.jsonc

@@ -2,7 +2,9 @@
   "add-to-cart-button": {
     "props": {
       "addToCartFeedback": "customEvent",
-      "customPixelEventId": "add-to-cart-button"
+      "customPixelEventId": "add-to-cart-button",
+      "blockClass": "botao",
+      "text": "ADICIONAR À SACOLA"
     }
   },
 

store/blocks/pdp/product.jsonc

@@ -1,7 +1,8 @@
 {
   "store.product": {
     "children": [
-      "html#breadcrumb",
+      /*"html#breadcrumb",*/
+      "breadcrumb#teste1",
       "condition-layout.product#availability",
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
@@ -10,6 +11,14 @@
       "product-questions-and-answers"
     ]
   },
+
+  "breadcrumb#teste1": {
+    "props": {
+      "blockClass": "testebread",
+      "showOnMobile": true
+    }
+  },
+
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -34,6 +43,7 @@
   },
   "condition-layout.product#availability": {
     "props": {
+      "blockClass": "testecontainer",
       "conditions": [
         {
           "subject": "isProductAvailable"
@@ -47,9 +57,8 @@
     "props": {
       "colGap": 7,
       "rowGap": 7,
-      "marginTop": 4,
+      "marginTop": 5,
       "marginBottom": 7,
-      "paddingTop": 7,
       "paddingBottom": 7
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
@@ -78,7 +87,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "46%",
       "rowGap": 0
     }
   },
@@ -91,7 +100,7 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "displayThumbnailsArrows": false
     }
   },
   "flex-layout.col#right-col": {
@@ -101,17 +110,18 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "html#codigo",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
+      /*"product-separator",*/
-      "product-identifier.product",
       "sku-selector",
-      "product-quantity",
+      /*"product-quantity",*/
       "product-assembly-options",
       "product-gifts",
-      "flex-layout.row#buy-button",
+      /*"flex-layout.row#buy-button",*/
+      "html#qtd-btn",
       "availability-subscriber",
       "shipping-simulator",
       "share#default"
@@ -120,26 +130,51 @@
 
   "flex-layout.row#product-name": {
     "props": {
-      "marginBottom": 3
+      "marginBottom": 3,
+      "blockClass": "name"
     },
     "children": ["vtex.store-components:product-name"]
   },
 
+  "html#codigo": {
+    "props": {
+      "blockClass": "codigo"
+    },
+    "children": ["product-identifier.product"]
+  },
+
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true
+      "showValueNameForImageVariation": true,
+      "blockClass": "skus"
     }
   },
 
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "container-btn"
     },
     "children": ["add-to-cart-button"]
   },
 
+  "html#qtd-btn": {
+    "props": {
+      "tag": "div",
+      "testId": "qtd-btn",
+      "blockClass": "qtd-btn"
+    },
+    "children": ["product-quantity", "add-to-cart-button"]
+  },
+
+  "product-quantity": {
+    "props": {
+      "blockClass": "quantidade"
+    }
+  },
+
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,

store/blocks/product-price.jsonc

@@ -4,11 +4,10 @@
       "colGap": 2,
       "preserveLayoutOnMobile": true,
       "preventHorizontalStretch": true,
-      "marginBottom": 4
+      "marginBottom": 4,
+      "blockClass": "preco"
     },
-    "children": [
+    "children": ["product-selling-price"]
-      "product-selling-price"
-    ]
   },
 
   "flex-layout.row#list-price-savings": {
@@ -19,9 +18,6 @@
       "marginBottom": 2,
       "marginTop": 5
     },
-    "children": [
+    "children": ["product-list-price", "product-price-savings"]
-      "product-list-price",
-      "product-price-savings"
-    ]
   }
 }

store/blocks/search.jsonc

@@ -108,7 +108,10 @@
     }
   },
   "flex-layout.row#searchinfo": {
-    "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"]
+    "children": [
+      "flex-layout.col#productCount",
+      "flex-layout.row#orderByAndSwitcher"
+    ]
   },
   "flex-layout.row#orderByAndSwitcher": {
     "children": ["order-by.v2", "gallery-layout-switcher"],
@@ -231,7 +234,9 @@
 
   "breadcrumb": {
     "props": {
-      "showOnMobile": true
+      "showOnMobile": true,
+      "homeIconSize": 1,
+      "blockClass": "bread"
     }
   },
 
@@ -272,29 +277,19 @@
     "props": {
       "name": "grid"
     },
-    "children": [
+    "children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"]
-      "icon-grid",
-      "responsive-layout.desktop#textOptionGrid"
-    ]
   },
   "gallery-layout-option#list": {
     "props": {
       "name": "list"
     },
-    "children": [
+    "children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"]
-      "icon-inline-grid",
-      "responsive-layout.desktop#textOptionList"
-    ]
   },
   "responsive-layout.desktop#textOptionGrid": {
-    "children": [
+    "children": ["rich-text#option-grid"]
-      "rich-text#option-grid"
-    ]
   },
   "responsive-layout.desktop#textOptionList": {
-    "children": [
+    "children": ["rich-text#option-list"]
-      "rich-text#option-list"
-    ]
   },
   "rich-text#option-grid": {
     "props": {

styles/configs/style.json

@@ -1,26 +1,28 @@
 {
-    "typeScale": [
+  "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75],
-        3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
-      ],
   "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
   "customMedia": [
     { "s": 20 },
-        { "ns": {
+    {
+      "ns": {
         "value": 40,
         "minWidth": true
       }
     },
-        { "m": {
+    {
+      "m": {
         "value": 40,
         "minWidth": true
       }
     },
-        { "l": {
+    {
+      "l": {
         "value": 64,
         "minWidth": true
       }
     },
-        { "xl": {
+    {
+      "xl": {
         "value": 80,
         "minWidth": true
       }
@@ -253,84 +255,84 @@
     "measure": [30, 34, 20],
     "styles": {
       "heading-1": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "3rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-2": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "2.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-3": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "1.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-4": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.5rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-5": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-6": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "body": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.875rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "mini": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "action": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "1rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "0.875rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--large": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "1.25rem",
         "textTransform": "uppercase",

styles/css/agenciamagma.store-theme.css

@@ -7,10 +7,23 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.html {
+.html--codigo {
-  background-color: red;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: end;
 }
 
-.html--pdp-breadcrumb {
+.html--qtd-btn {
-  background-color: green;
+  display: flex;
+  height: 49px;
+}
+.html--qtd-btn :global(.vtex-button) {
+  background-color: #000000;
+  border: none;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #ffffff;
 }

styles/css/vtex.add-to-cart-button.css

@@ -0,0 +1,9 @@
+/*
+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 */

styles/css/vtex.bread-crumb.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.html--pdp-breadcrumb {
+  border: 1px solid red;
+}

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,32 @@
+/*
+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--testebread {
+  margin-left: 40px;
+  margin-right: 40px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.container--testebread .homeIcon--testebread {
+  display: none;
+}
+.container--testebread .homeLink--testebread {
+  vertical-align: top;
+}
+.container--testebread .homeLink--testebread::after {
+  content: "Home";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}

styles/css/vtex.condition-layout.css

@@ -0,0 +1,14 @@
+/*
+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 */
+.testecontainer {
+  margin-left: 50px;
+  border: 1px solid red;
+  background-color: yellow;
+}

styles/css/vtex.flex-layout.css

@@ -1,98 +1,35 @@
-.flexRowContent--menu-link,
+/*
-.flexRowContent--main-header {
+0 - 600PX: Phone
-  padding: 0 0.5rem;
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+/*NOME PRODUTO*/
+.flexRowContent--name {
+  text-align: end;
 }
 
-@media screen and (min-width: 40em) {
+.flexRowContent--testecontainer {
-  .flexRowContent--menu-link,
+  margin-left: 50px;
-  .flexRowContent--main-header {
+  border: 1px solid red;
-    padding: 0 1rem;
+  background-color: yellow;
-  }
 }
 
-@media screen and (min-width: 80rem) {
+.flexRowContent--preco {
-  .flexRowContent--menu-link,
+  border: 1px solid red;
-  .flexRowContent--main-header {
+  font-style: normal;
-    padding: 0 0.25rem;
+  font-weight: 700;
-  }
+  font-size: 25px;
+  line-height: 38px;
+  /* identical to box height, or 152% */
+  color: #000000;
 }
 
-.flexRowContent--menu-link {
+.flexRowContent--container-btn .stretchChildrenWidth {
-  background-color: #03044e;
+  background-color: yellow;
-  color: #fff;
+  width: 90%;
-}
+  padding: 0;
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
-  display: flex;
-  max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
 }

styles/css/vtex.product-identifier.css

@@ -1,3 +1,18 @@
-.product-identifier--productReference {
+/*
-  margin-bottom: 1rem;
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.product-identifier--productReference .product-identifier__label {
+  display: none;
+}
+.product-identifier--productReference .product-identifier__separator {
+  display: none;
+}
+.product-identifier--productReference .product-identifier__value {
+  color: rgba(146, 146, 146, 0.48);
 }

styles/css/vtex.product-price.css

@@ -1,79 +1,12 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
-}
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
-.sellingPrice {
+*/
-  color: #3f3f40;
+/* Media Query M3 */
-  font-size: 1.25rem;
+/* Grid breakpoints */
-}
+.interestRate {
-
+  color: red;
-.sellingPriceValue {
-  font-size: 2.25rem;
-  font-weight: 700;
-}
-
-.installments {
-  color: #727273;
-  margin-bottom: 1rem;
-}
-
-.savings {
-  font-weight: 500;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,55 @@
+/*
+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 */
+.quantitySelectorStepper {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.quantitySelectorTitle {
+  display: none;
+}
+
+/*.vtex-numeric-stepper__input {
+  border-left: none;
+  border-right: none;
+  height: 50px;
+}*/
+/*.hideDecorators {
+  border: 1px solid red;
+  border-left: none;
+  border-right: none;
+}*/
+/*.numeric-stepper__plus-button {
+  border: none;
+  height: 50px;
+}*/
+/*.quantitySelectorInputContainer {
+  height: 50px;
+}*/
+/*.availableQuantityContainer {
+  border: 1px solid yellow;
+  margin: 0;
+  padding: 0;
+}
+*/
+.quantitySelectorContainer--quantidade {
+  border: 1px solid green;
+  margin-right: 5px;
+  padding: 0;
+  height: 100%;
+  /*height: 49px;*/
+}
+
+/*.summaryContainer {
+  background-color: blue;
+  border: 1px solid orange;
+  height: 49px;
+}*/

styles/css/vtex.stack-layout.css

@@ -1,6 +1,6 @@
 .stackItem--product {
   width: 100%;
-  min-height: 257px
+  min-height: 257px;
 }
 
 .stackItem--quickview {

styles/css/vtex.store-components.css

@@ -10,3 +10,58 @@
 .newsletter {
   background: red;
 }
+
+.skuSelectorContainer--skus {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.productBrand--quickview {
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}
+
+.testecontainer {
+  margin-left: 50px;
+  border: 1px solid red;
+  background-color: yellow;
+}
+
+.frameAround--skus {
+  border: none;
+}
+
+.skuSelectorItemTextValue--skus {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+
+.skuSelectorInternalBox--skus {
+  border: 1px solid #989898;
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus {
+  border: 2px solid #000000;
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+.skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #000000;
+}

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

@@ -1,8 +1,21 @@
-.html {
+.html--codigo {
-  background-color: red;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: end;
 }
 
-.html--pdp-breadcrumb {
+.html--qtd-btn {
-  background-color: green;
+  display: flex;
-}
+  height: 49px;
 
+  :global(.vtex-button) {
+    background-color: #000000;
+    border: none;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+    color: #ffffff;
+  }
+}

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -0,0 +1 @@
+

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -0,0 +1,25 @@
+.container--testebread {
+  margin-left: 40px;
+  margin-right: 40px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+
+  .homeIcon--testebread {
+    display: none;
+  }
+
+  .homeLink--testebread {
+    vertical-align: top;
+    &::after {
+      content: "Home";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+.testecontainer {
+  margin-left: 50px;
+  border: 1px solid red;
+  background-color: yellow;
+}

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

@@ -0,0 +1,30 @@
+/*NOME PRODUTO*/
+.flexRowContent--name {
+  text-align: end;
+}
+
+.flexRowContent--testecontainer {
+  margin-left: 50px;
+  border: 1px solid red;
+  background-color: yellow;
+}
+
+.flexRowContent--preco {
+  border: 1px solid red;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  /* identical to box height, or 152% */
+
+  color: #000000;
+}
+
+//CONTAINER QUANTIDADE E BOTAO
+.flexRowContent--container-btn {
+  .stretchChildrenWidth {
+    background-color: yellow;
+    width: 90%;
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,13 @@
+.product-identifier--productReference {
+  .product-identifier__label {
+    display: none;
+  }
+
+  .product-identifier__separator {
+    display: none;
+  }
+
+  .product-identifier__value {
+    color: rgba(146, 146, 146, 0.48);
+  }
+}

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

@@ -0,0 +1,3 @@
+.interestRate {
+  color: red;
+}

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

@@ -0,0 +1,50 @@
+.quantitySelectorStepper {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.quantitySelectorTitle {
+  display: none;
+}
+
+/*.vtex-numeric-stepper__input {
+  border-left: none;
+  border-right: none;
+  height: 50px;
+}*/
+
+/*.hideDecorators {
+  border: 1px solid red;
+  border-left: none;
+  border-right: none;
+}*/
+
+/*.numeric-stepper__plus-button {
+  border: none;
+  height: 50px;
+}*/
+
+/*.quantitySelectorInputContainer {
+  height: 50px;
+}*/
+
+/*.availableQuantityContainer {
+  border: 1px solid yellow;
+  margin: 0;
+  padding: 0;
+}
+*/
+.quantitySelectorContainer--quantidade {
+  border: 1px solid green;
+  margin-right: 5px;
+  padding: 0;
+  height: 100%;
+  /*height: 49px;*/
+}
+
+/*.summaryContainer {
+  background-color: blue;
+  border: 1px solid orange;
+  height: 49px;
+}*/

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

@@ -1,3 +1,62 @@
 .newsletter {
   background: red;
 }
+
+.skuSelectorContainer--skus {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+//NOME DO PRODUTO
+.productBrand--quickview {
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}
+
+.testecontainer {
+  margin-left: 50px;
+  border: 1px solid red;
+  background-color: yellow;
+}
+
+.frameAround--skus {
+  border: none;
+}
+
+.skuSelectorItemTextValue--skus {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+
+.skuSelectorInternalBox--skus {
+  border: 1px solid #989898;
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.skuSelectorItem--skus--selected {
+  .skuSelectorInternalBox--skus {
+    border: 2px solid #000000;
+    border-radius: 100%;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+  }
+
+  .skuSelectorItemTextValue--skus {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #000000;
+  }
+}