feat: Finaliza tela desktop

react/components/Html/styles.css

@@ -196,15 +196,22 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2
 [class*="pix-preco"] {
   font-family: "Open Sans";
   margin-top: 8px;
+  margin-left: 26px;
   font-size: 18px;
   font-weight: 700;
   line-height: 25px;
   letter-spacing: 0em;
-  text-align: left;
+
   color: rgba(0, 0, 0, 0.58);
 }
 
-[class*="pix-container"] p {
-  display: flex;
-  color: red;
+[class*="pix-p"] span {
+  font-family: "Open Sans";
+  top: -10px;
+  position: relative;
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 18px;
+  margin-top: 10px;
+  text-align: left;
 }

react/components/Pix/Pix.tsx

@@ -18,9 +18,11 @@ const Pix = () => {
           {`R$ ${(productContextValue! - productContextValue! * 0.1)
             .toFixed(2)
             .replace(".", ",")}`}
+          <div className="pix-p">
+            <span>10% de desconto</span>
+          </div>
         </div>
       </div>
-      <p>10% de desconto</p>
     </>
   );
 };

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,33 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+.homeLink .homeIcon {
+  display: none;
+}
+.homeLink::before {
+  content: "Home";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.link--1,
+.link--2,
+.link--3 {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}

styles/css/vtex.product-price.css

@@ -17,7 +17,7 @@
 }
 
 .sellingPrice {
-  color: #3f3f40;
+  color: #000000;
   font-size: 1.25rem;
   margin-bottom: -12px;
 }

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

@@ -0,0 +1,28 @@
+.homeLink {
+  .homeIcon {
+    display: none;
+  }
+
+  &::before {
+    content: "Home";
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+
+    color: #929292;
+  }
+}
+
+.link--1,
+.link--2,
+.link--3 {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+
+  color: #929292;
+}

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

@@ -7,7 +7,7 @@
 }
 
 .sellingPrice {
-  color: #3f3f40;
+  color: #000000;
   font-size: 1.25rem;
   margin-bottom: -12px;
 }