From f276946a1964230eb52e9b00af3e4f9a7d625e7c Mon Sep 17 00:00:00 2001
From: Carlos Lins <carloslinsdev@gmail.com>
Date: Thu, 26 Jan 2023 09:14:04 -0300
Subject: [PATCH] fix: ajuste css breadcrumb

---
 react/components/installments/index.tsx        |  2 +-
 store/blocks/pdp/product.jsonc                 | 16 +++++++++-------
 styles/css/vtex.breadcrumb.css                 | 17 +++++++++--------
 styles/sass/pages/product/vtex.breadcrumb.scss | 17 +++++++++--------
 4 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/react/components/installments/index.tsx b/react/components/installments/index.tsx
index 2bf9072..9ba7546 100644
--- a/react/components/installments/index.tsx
+++ b/react/components/installments/index.tsx
@@ -10,7 +10,7 @@ export const Installments: FC = () => {
 
   return (
     <div className={styles.containerProductReference}>
-      <span className={styles.sellingPrice}><span className={styles.sellingPriceBold}>4 x</span> de <span className={styles.sellingPriceBold}>R$ {sellingPrice.toFixed(2).replace(".", ",")}</span> sem juros</span>
+      <span className={styles.sellingPrice}><strong className={styles.sellingPriceBold}>4 x</strong> de <strong className={styles.sellingPriceBold}>R$ {sellingPrice.toFixed(2).replace(".", ",")}</strong> sem juros</span>
     </div>
   );
 }
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 8ea58e3..1f45afa 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -22,6 +22,9 @@
   },
 
   "html#DescriptionSectionPDP":{
+    "props": {
+      "tag": "section"
+    },
     "children": [
       "tab-layout#pdp"
     ]
@@ -163,7 +166,7 @@
     }
   },
 
-  "product-summary.shelf#demo1": {
+  "product-summary.shelf#related-products-pdp": {
     "children": [
       "stack-layout#prodsum",
       "product-summary-name",
@@ -174,12 +177,12 @@
       "maxWidth": "100%"
     }
   },
-  "list-context.product-list#demo1": {
-    "blocks": ["product-summary.shelf#demo1"],
-    "children": ["slider-layout#demo-products"]
+  "list-context.product-list#related-products-pdp": {
+    "blocks": ["product-summary.shelf#related-products-pdp"],
+    "children": ["slider-layout#pratileira-pdp"]
   },
 
-  "slider-layout#demo-products": {
+  "slider-layout#pratileira-pdp": {
     "props": {
       "blockClass": "container-slider-related-products-pdp",
       "itemsPerPage": {
@@ -196,7 +199,7 @@
     },
     "children": [
       "rich-text#title-related-products",
-      "list-context.product-list#demo1"
+      "list-context.product-list#related-products-pdp"
     ]
   },
 
@@ -337,7 +340,6 @@
 
   "product-quantity": {
     "props": {
-      "testId": "product-quantity",
       "width": "100%"
     }
   },
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 639b22d..eaea6be 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -9,6 +9,8 @@
 /* Grid breakpoints */
 :global(.vtex-breadcrumb-1-x-container) {
   padding: 0 40px;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .homeIcon, .caretIcon {
@@ -21,6 +23,11 @@
   font-size: 14px;
   line-height: 19px;
   color: #929292;
+  padding: 0 6px;
+}
+
+.arrow {
+  padding: 0;
 }
 
 .link, .term {
@@ -28,17 +35,11 @@
   font-size: 14px;
   line-height: 19px;
   color: #929292;
-}
-
-.link {
-  padding-left: 8px;
-}
-.link:first-child {
-  padding-left: 0;
+  padding: 0;
 }
 
 .homeLink::after {
-  content: "Home";
+  content: "Home ";
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index d1f04c3..a536d0c 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,5 +1,7 @@
 :global(.vtex-breadcrumb-1-x-container){
   padding: 0 40px;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .homeIcon, .caretIcon{
@@ -14,27 +16,26 @@
     font-size: 14px;
     line-height: 19px;
     color: #929292;
+    padding: 0 6px;
   }
 }
 
+.arrow{
+  padding: 0;
+}
+
 .link, .term{
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: #929292;
-}
 
-.link{
-  padding-left: 8px;
-
-  &:first-child{
-    padding-left: 0;
-  }
+  padding: 0;
 }
 
 .homeLink {
   &::after{
-    content: "Home";
+    content: "Home ";
     font-weight: 400;
     font-size: 14px;
     line-height: 19px;