From 2eaa4dbf2aa7aede89a234238901e0d89f86b687 Mon Sep 17 00:00:00 2001
From: Leonardo <rochaleo879@gmail.com>
Date: Fri, 10 Feb 2023 21:37:39 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20faz=20os=20ajustes=20finais=20na=20p?=
 =?UTF-8?q?=C3=A1gina?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/components/Html/styles.css | 190 ++++++++-
 store/blocks/pdp/product.jsonc   |   7 +-
 styles/configs/font-faces.css    |   4 +
 styles/configs/style.json        | 688 ++++++++++++++++---------------
 styles/css/vtex.breadcrumb.css   |   8 +-
 5 files changed, 542 insertions(+), 355 deletions(-)
 create mode 100644 styles/configs/font-faces.css

diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 0fb9fb9..888f379 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,10 +1,102 @@
 [class*="productImageTag--main"] {
-  object-fit: none !important;
+  object-fit: contain !important;
   width: 98.225% !important;
   height: 100% !important;
   max-height: 664px !important;
 }
 
+[class*="subscriberContainer"] {
+  position: relative;
+  bottom: 20px;
+}
+
+@media (max-width: 639px) {
+  [class*="subscriberContainer"] :global(.vtex-store-components-3-x-form) {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+[class*="subscriberContainer"] :global(.vtex-button__label) {
+  font-size: 0;
+}
+
+[class*="subscriberContainer"] :global(.vtex-button__label)::after {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  content: "AVISE-ME";
+}
+
+[class*="subscriberContainer"] :global(.vtex-store-components-3-x-form) {
+  width: 100%;
+}
+
+[class*="subscriberContainer"] :global(.vtex-input-prefix__group) {
+  width: 195.5px;
+}
+
+[class*="subscriberContainer"] :global(.vtex-store-components-3-x-submit) {
+  position: relative;
+  top: 35px;
+  right: 422px;
+  margin-top: 15px;
+}
+
+[class*="subscriberContainer"] :global(.vtex-button) {
+  width: 399px;
+  height: 49px;
+  background: black;
+  color: white;
+}
+
+[class*="arrow--1"] {
+  display: none;
+}
+
+[class*="link--1"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+[class*="link--2"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0;
+  line-height: 19px;
+  color: #929292;
+}
+
+[class*="link--2"]::after {
+  font-size: 14px;
+  content: "Sapatos";
+}
+
+[class*="homeLink"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+[class*="term"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
 [class*="vtex-store-components-3-x-caretIcon"] {
   display: none;
 }
@@ -119,6 +211,10 @@
   border-color: black;
 }
 
+[class*="vtex-product-price-1-x-sellingPriceValue--summary"] {
+  font-size: 0 !important;
+}
+
 [class*="skuSelectorSubcontainer--tamanho"]
   :global(.vtex-store-components-3-x-frameAround) {
   border-radius: 24px;
@@ -153,6 +249,10 @@
   color: #929292;
 }
 
+[class*="vtex-input__error"] {
+  display: none;
+}
+
 [class*="productNameContainer"] {
   text-align: end;
 }
@@ -307,7 +407,7 @@
   border: none;
 }
 
-[class*="imageNormal"] {
+[class*="vtex-product-summary-2-x-imageNormal"] {
   width: 434.4px;
   height: 434.4px;
 }
@@ -487,13 +587,20 @@
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 700;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 19px;
   display: flex;
   align-items: center;
   font-weight: bold;
   color: #868686;
 }
+
+@media (min-width: 2500px) {
+  [class*="subscriberContainer"]
+    :global(.vtex-store-components-3-x-title)::after {
+  }
+}
+
 [class*="subscriberContainer"]
   :global(.vtex-store-components-3-x-subscribeLabel) {
   font-size: 0;
@@ -612,7 +719,7 @@
   [class*="listItemActive"] :global(.vtex-button) {
     border-bottom: none;
   }
-  [class*="imageNormal"] {
+  [class*="vtex-product-summary-2-x-imageNormalageNormal"] {
     width: 291.4px;
     height: 291.4px;
   }
@@ -623,7 +730,7 @@
 
   [data-testid="product-description"] {
     position: relative;
-    bottom: 125px;
+    bottom: 24px;
   }
 
   [class*="thumbImg--product-images"] {
@@ -632,6 +739,43 @@
 }
 
 @media (min-width: 2500px) {
+  [class*="listItem"] :global(.vtex-button) {
+    color: #bfbfbf;
+    border-radius: 0;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+  }
+
+  [class*="listContainer"] {
+    width: 75%;
+    margin: auto;
+  }
+
+  [data-testid="product-description"]
+    :global(.vtex-store-components-3-x-container) {
+    margin-top: 64px !important;
+  }
+
+  [class="product-identifier__value"] {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+  }
+
+  [class*="productDescriptionText"]
+    :global(.vtex-store-components-3-x-container) {
+    margin: 0 !important;
+    width: 632px;
+    height: 66px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+  }
   [class*="vtex-store-components-3-x-container"] {
     width: 75%;
     margin: auto !important;
@@ -698,7 +842,7 @@
 }
 
 @media (max-width: 639px) {
-  [class*="imageNormal"] {
+  [class*="vtex-product-summary-2-x-imageNormal"] {
     width: 124.8px;
     height: 124.8px;
   }
@@ -712,9 +856,17 @@
   [class*="vtex-store-components-3-x-caretIcon"] {
     display: none;
   }
+
+  [class*="flexRow--button-cart"] {
+    width: 100% !important;
+  }
 }
 
 @media (max-width: 800px) {
+  [class*="shippingTable"] {
+    display: none;
+  }
+
   [class*="flexRow--button-cart"] {
     background-color: black;
     border-color: black;
@@ -732,5 +884,29 @@
   }
 }
 
-@media (max-width: 425px) {
+@media (max-width: 376px) {
+  [class*="vtex-store-components-3-x-imageElement"] {
+    max-width: 296px;
+  }
+
+  [class*="vtex-address-form__postalCode-forgottenURL"] {
+    bottom: 7px;
+    left: 57%;
+    margin-left: 0;
+  }
+
+  [class*="shippingContainer"] :global(.vtex-input-prefix__group) {
+    width: 83.532%;
+    height: 49px;
+  }
+
+  [class*="shippingContainer"] :global(.vtex-button) {
+    height: 49px;
+    left: 83.5%;
+    bottom: 110px;
+  }
+
+  [class*="flexRow--button-cart"] {
+    width: 100%;
+  }
 }
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index e65a029..b9aaf4d 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -6,8 +6,6 @@
       "html#product-description",
       "rich-text#textproducts",
       "list-context.product-list#produtos",
-      "rich-text#textnewsletter",
-      "newsletter",
       "product-questions-and-answers"
     ]
   },
@@ -43,9 +41,10 @@
   "html#prateleira": {
     "props": { "testId": "vtex-product-summary" },
     "children": [
-      "product-summary-image#shelf",
+      "product-summary-image",
       "product-summary-name",
-      "product-list-price",
+      "product-summary-price",
+      "product-list-price#summary",
       "product-selling-price#summary"
     ]
   },
diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css
new file mode 100644
index 0000000..39f03bc
--- /dev/null
+++ b/styles/configs/font-faces.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Open Sans", sans-serif;
+  src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
+}
diff --git a/styles/configs/style.json b/styles/configs/style.json
index 7b90b6b..8eeed02 100644
--- a/styles/configs/style.json
+++ b/styles/configs/style.json
@@ -1,349 +1,351 @@
 {
-    "typeScale": [
-        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": {
-            "value": 40,
-            "minWidth": true
-          }
-        },
-        { "m": {
-            "value": 40,
-            "minWidth": true
-          }
-        },
-        { "l": {
-          "value": 64,
-          "minWidth": true
-        }
-        },
-        { "xl": {
-            "value": 80,
-            "minWidth": true
-          }
-        }
-      ],
-      "colors": {
-        "black-90": "rgba(0,0,0,.9)",
-        "black-80": "rgba(0,0,0,.8)",
-        "black-70": "rgba(0,0,0,.7)",
-        "black-60": "rgba(0,0,0,.6)",
-        "black-50": "rgba(0,0,0,.5)",
-        "black-40": "rgba(0,0,0,.4)",
-        "black-30": "rgba(0,0,0,.3)",
-        "black-20": "rgba(0,0,0,.2)",
-        "black-10": "rgba(0,0,0,.1)",
-        "black-05": "rgba(0,0,0,.05)",
-        "black-025": "rgba(0,0,0,.025)",
-        "black-0125": "rgba(0,0,0,.0125)",
+  "typeScale": [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": {
+        "value": 40,
+        "minWidth": true
+      }
+    },
+    {
+      "m": {
+        "value": 40,
+        "minWidth": true
+      }
+    },
+    {
+      "l": {
+        "value": 64,
+        "minWidth": true
+      }
+    },
+    {
+      "xl": {
+        "value": 80,
+        "minWidth": true
+      }
+    }
+  ],
+  "colors": {
+    "black-90": "rgba(0,0,0,.9)",
+    "black-80": "rgba(0,0,0,.8)",
+    "black-70": "rgba(0,0,0,.7)",
+    "black-60": "rgba(0,0,0,.6)",
+    "black-50": "rgba(0,0,0,.5)",
+    "black-40": "rgba(0,0,0,.4)",
+    "black-30": "rgba(0,0,0,.3)",
+    "black-20": "rgba(0,0,0,.2)",
+    "black-10": "rgba(0,0,0,.1)",
+    "black-05": "rgba(0,0,0,.05)",
+    "black-025": "rgba(0,0,0,.025)",
+    "black-0125": "rgba(0,0,0,.0125)",
 
-        "white-90": "rgba(255,255,255,.9)",
-        "white-80": "rgba(255,255,255,.8)",
-        "white-70": "rgba(255,255,255,.7)",
-        "white-60": "rgba(255,255,255,.6)",
-        "white-50": "rgba(255,255,255,.5)",
-        "white-40": "rgba(255,255,255,.4)",
-        "white-30": "rgba(255,255,255,.3)",
-        "white-20": "rgba(255,255,255,.2)",
-        "white-10": "rgba(255,255,255,.1)",
-        "white-05": "rgba(255,255,255,.05)",
-        "white-025": "rgba(255,255,255,.025)",
-        "white-0125": "rgba(255,255,255,.0125)"
+    "white-90": "rgba(255,255,255,.9)",
+    "white-80": "rgba(255,255,255,.8)",
+    "white-70": "rgba(255,255,255,.7)",
+    "white-60": "rgba(255,255,255,.6)",
+    "white-50": "rgba(255,255,255,.5)",
+    "white-40": "rgba(255,255,255,.4)",
+    "white-30": "rgba(255,255,255,.3)",
+    "white-20": "rgba(255,255,255,.2)",
+    "white-10": "rgba(255,255,255,.1)",
+    "white-05": "rgba(255,255,255,.05)",
+    "white-025": "rgba(255,255,255,.025)",
+    "white-0125": "rgba(255,255,255,.0125)"
+  },
+  "semanticColors": {
+    "background": {
+      "base": "#ffffff",
+      "base--inverted": "#03044e",
+      "action-primary": "#0F3E99",
+      "action-secondary": "#eef3f7",
+      "emphasis": "#f71963",
+      "disabled": "#f2f4f5",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "hover-background": {
+      "action-primary": "#072c75",
+      "action-secondary": "#dbe9fd",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#e13232",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "active-background": {
+      "action-primary": "#0c389f",
+      "action-secondary": "#d2defc",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "text": {
+      "action-primary": "#0F3E99",
+      "action-secondary": "#eef3f7",
+      "link": "#0F3E99",
+      "emphasis": "#f71963",
+      "disabled": "#979899",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "visited-text": {
+      "link": "#0c389f"
+    },
+    "hover-text": {
+      "action-primary": "#072c75",
+      "action-secondary": "#dbe9fd",
+      "link": "#0c389f",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#e13232",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0"
+    },
+    "active-text": {
+      "link": "#0c389f",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0"
+    },
+    "border": {
+      "action-primary": "#0F3E99",
+      "action-secondary": "#eef3f7",
+      "emphasis": "#f71963",
+      "disabled": "#e3e4e6",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "hover-border": {
+      "action-primary": "#072c75",
+      "action-secondary": "#dbe9fd",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#e13232",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "active-border": {
+      "action-primary": "#0c389f",
+      "action-secondary": "#d2defc",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "on": {
+      "base": "#3f3f40",
+      "base--inverted": "#ffffff",
+      "action-primary": "#ffffff",
+      "action-secondary": "#0F3E99",
+      "emphasis": "#ffffff",
+      "disabled": "#979899",
+      "success": "#ffffff",
+      "success--faded": "#3f3f40",
+      "danger": "#ffffff",
+      "danger--faded": "#3f3f40",
+      "warning": "#ffffff",
+      "warning--faded": "#1a1a1a",
+      "muted-1": "#ffffff",
+      "muted-2": "#ffffff",
+      "muted-3": "#3f3f40",
+      "muted-4": "#3f3f40",
+      "muted-5": "#3f3f40"
+    },
+    "hover-on": {
+      "action-primary": "#ffffff",
+      "action-secondary": "#0F3E99",
+      "emphasis": "#ffffff",
+      "success": "#ffffff",
+      "success--faded": "#3f3f40",
+      "danger": "#ffffff",
+      "danger--faded": "#3f3f40",
+      "warning": "#ffffff",
+      "warning--faded": "#1a1a1a"
+    },
+    "active-on": {
+      "action-primary": "#ffffff",
+      "action-secondary": "#0F3E99",
+      "emphasis": "#ffffff",
+      "success": "#ffffff",
+      "success--faded": "#3f3f40",
+      "danger": "#ffffff",
+      "danger--faded": "#3f3f40",
+      "warning": "#ffffff",
+      "warning--faded": "#1a1a1a"
+    }
+  },
+  "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
+  "borderRadius": [0, 0.125, 0.25, 0.5, 1],
+  "widths": [1, 2, 4, 8, 16],
+  "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
+  "heights": [1, 2, 4, 8, 16],
+  "sizes": [
+    { "name": "small", "value": 2 },
+    { "name": "regular", "value": 2.5 },
+    { "name": "large", "value": 3 }
+  ],
+  "typography": {
+    "measure": [30, 34, 20],
+    "styles": {
+      "heading-1": {
+        "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"
       },
-      "semanticColors": {
-        "background": {
-          "base": "#ffffff",
-          "base--inverted": "#03044e",
-          "action-primary": "#0F3E99",
-          "action-secondary": "#eef3f7",
-          "emphasis": "#f71963",
-          "disabled": "#f2f4f5",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "hover-background": {
-          "action-primary": "#072c75",
-          "action-secondary": "#dbe9fd",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#e13232",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "active-background": {
-          "action-primary": "#0c389f",
-          "action-secondary": "#d2defc",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "text": {
-          "action-primary": "#0F3E99",
-          "action-secondary": "#eef3f7",
-          "link": "#0F3E99",
-          "emphasis": "#f71963",
-          "disabled": "#979899",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "visited-text": {
-          "link": "#0c389f"
-        },
-        "hover-text": {
-          "action-primary": "#072c75",
-          "action-secondary": "#dbe9fd",
-          "link": "#0c389f",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#e13232",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0"
-        },
-        "active-text": {
-          "link": "#0c389f",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0"
-        },
-        "border": {
-          "action-primary": "#0F3E99",
-          "action-secondary": "#eef3f7",
-          "emphasis": "#f71963",
-          "disabled": "#e3e4e6",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "hover-border": {
-          "action-primary": "#072c75",
-          "action-secondary": "#dbe9fd",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#e13232",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "active-border": {
-          "action-primary": "#0c389f",
-          "action-secondary": "#d2defc",
-          "emphasis": "#dd1659",
-          "success": "#8bc34a",
-          "success--faded": "#eafce3",
-          "danger": "#ff4c4c",
-          "danger--faded": "#ffe6e6",
-          "warning": "#ffb100",
-          "warning--faded": "#fff6e0",
-          "muted-1": "#727273",
-          "muted-2": "#979899",
-          "muted-3": "#cacbcc",
-          "muted-4": "#e3e4e6",
-          "muted-5": "#f2f4f5"
-        },
-        "on": {
-          "base": "#3f3f40",
-          "base--inverted": "#ffffff",
-          "action-primary": "#ffffff",
-          "action-secondary": "#0F3E99",
-          "emphasis": "#ffffff",
-          "disabled": "#979899",
-          "success": "#ffffff",
-          "success--faded": "#3f3f40",
-          "danger": "#ffffff",
-          "danger--faded": "#3f3f40",
-          "warning": "#ffffff",
-          "warning--faded": "#1a1a1a",
-          "muted-1": "#ffffff",
-          "muted-2": "#ffffff",
-          "muted-3": "#3f3f40",
-          "muted-4": "#3f3f40",
-          "muted-5": "#3f3f40"
-        },
-        "hover-on": {
-          "action-primary": "#ffffff",
-          "action-secondary": "#0F3E99",
-          "emphasis": "#ffffff",
-          "success": "#ffffff",
-          "success--faded": "#3f3f40",
-          "danger": "#ffffff",
-          "danger--faded": "#3f3f40",
-          "warning": "#ffffff",
-          "warning--faded": "#1a1a1a"
-        },
-        "active-on": {
-          "action-primary": "#ffffff",
-          "action-secondary": "#0F3E99",
-          "emphasis": "#ffffff",
-          "success": "#ffffff",
-          "success--faded": "#3f3f40",
-          "danger": "#ffffff",
-          "danger--faded": "#3f3f40",
-          "warning": "#ffffff",
-          "warning--faded": "#1a1a1a"
-        }
+      "heading-2": {
+        "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"
       },
-      "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
-      "borderRadius": [0, 0.125, 0.25, 0.5, 1],
-      "widths": [1, 2, 4, 8, 16],
-      "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
-      "heights": [1, 2, 4, 8, 16],
-      "sizes": [
-        {"name": "small", "value": 2},
-        {"name": "regular", "value": 2.5},
-        {"name": "large", "value": 3}
-      ],
-      "typography":{
-        "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",
-            "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",
-            "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",
-            "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",
-            "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",
-            "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",
-            "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",
-            "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",
-            "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",
-            "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",
-            "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",
-            "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",
-            "fontWeight": "500",
-            "fontSize": "1.25rem",
-            "textTransform": "uppercase",
-            "letterSpacing": "0"
-          },
-          "code": {
-            "fontFamily": "Consolas, monaco, monospace",
-            "fontWeight": "normal",
-            "fontSize": "1rem",
-            "textTransform": "initial",
-            "letterSpacing": "0"
-          }
-        }
+      "heading-3": {
+        "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"
       },
-      "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
+      "heading-4": {
+        "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": "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": "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": "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": "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": "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": "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": "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": "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",
+        "letterSpacing": "0"
+      },
+      "code": {
+        "fontFamily": "Consolas, monaco, monospace",
+        "fontWeight": "normal",
+        "fontSize": "1rem",
+        "textTransform": "initial",
+        "letterSpacing": "0"
+      }
+    }
+  },
+  "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
 }
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index b12705a..f3837a1 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -4,11 +4,17 @@
 .homeLink::after {
   content: "Home";
   position: relative;
-  bottom: 2px;
+  bottom: 1px;
 }
 
 .container {
   margin: 0 40px;
+  position: relative;
+  top: 48px;
+}
+
+[data-testid="product-price"] {
+  height: 38px;
 }
 
 @media (min-width: 2500px) {