feat: Ajusta alguns espaçamentos errados

react/components/Html/styles.css

@@ -32,7 +32,7 @@
 
 [class*="html--product-name"] {
   text-align: end;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 [class*="html--buy-container"] {
@@ -264,7 +264,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-
 }
 
 [class*="html--product-item"] :global(.vtex-product-price-1-x-listPrice) {
@@ -273,6 +272,7 @@
   line-height: 19px;
   text-align: center;
   color: #bababa;
+  margin: 8px 0;
 }
 [class*="html--product-item"] :global(.vtex-product-price-1-x-sellingPrice) {
   font-weight: 700;
@@ -360,6 +360,11 @@
     :global(.vtex-slider-layout-0-x-paginationDotsContainer) {
     margin-top: 24px;
   }
+
+  [class*="html--related-product"] :global(.vtex-rich-text-0-x-heading) {
+    margin-bottom: 24px;
+    margin-top: 16px;
+  }
 }
 
 @media screen and (max-width: 768px) {

store/blocks/pdp/product.jsonc

@@ -91,6 +91,13 @@
     ]
   },
 
+  "product-list-price": {
+    "props": {
+      "message": "de {listPriceValue} por"
+    }
+  },
+
+
   "product-summary.shelf#related-product": {
     "children": [
       "html#product-item"
@@ -358,7 +365,7 @@
     "props": {
       "markers": ["discount"],
       "blockClass": "installments",
-      "message": "ou <discount>{installmentsNumber}x</discount> de <discount>R${installmentValue}</discount> sem juros",
+      "message": "ou <discount>{installmentsNumber}x</discount> de <discount>{installmentValue}</discount> sem juros",
       "installmentsCriteria": "max-quantity-without-interest"
     }
   },

styles/css/vtex.store-components.css

@@ -44,10 +44,6 @@
   display: flex;
   flex-direction: column-reverse;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--cor,
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
-  margin-bottom: 16px;
-}
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer,
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
   margin: 0;
@@ -101,6 +97,9 @@
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after {
   background-color: #000;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--cor {
+  margin-bottom: 16px;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
   content: "Outras Cores:";
   font-style: normal;
@@ -138,6 +137,9 @@
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after {
   background-color: #000;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
   content: "OUTROS TAMANHOS:";
   font-style: normal;
@@ -341,6 +343,11 @@
 .shippingTableRow {
   display: flex;
   gap: 32px;
+  padding-bottom: 15px;
+}
+
+.shippingTableBody .shippingTableRow:last-child {
+  padding-bottom: 0;
 }
 
 .shippingTableCell {

styles/css/vtex.tab-layout.css

@@ -55,10 +55,11 @@
   text-transform: capitalize;
   border: none;
   padding: 0 16px;
+  width: 100%;
 }
 @media screen and (min-width: 1920px) {
   .container .listItem :global(.vtex-button) {
-    font-size: 18px;
+    font-size: 24px;
     line-height: 38px;
   }
 }
@@ -69,6 +70,8 @@
 }
 .container .listItem :global(.vtex-button__label) {
   padding: 0 !important;
+  text-align: start;
+  display: block;
 }
 .container .listItemActive :global(.vtex-button__label) {
   color: #000;
@@ -121,6 +124,12 @@
   color: #575757;
   margin-bottom: 8px;
 }
+@media screen and (min-width: 1920px) {
+  .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) {
+    font-size: 32px;
+    margin-bottom: 16px;
+  }
+}
 @media screen and (max-width: 1024px) {
   .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) {
     font-size: 20px;
@@ -141,6 +150,12 @@
   line-height: 22px;
   color: #929292;
 }
+@media screen and (min-width: 1920px) {
+  .container .contentContainer .contentItem :global(.vtex-store-components-3-x-content) {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
 @media screen and (max-width: 1024px) {
   .container .contentContainer .contentItem :global(.vtex-store-components-3-x-content) {
     font-size: 14px;

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

@@ -38,7 +38,6 @@
   flex-direction: column-reverse;
   .skuSelectorSubcontainer--cor,
   .skuSelectorSubcontainer--tamanho {
-    margin-bottom: 16px;
     .skuSelectorNameContainer {
       margin: 0;
       .skuSelectorTextContainer {
@@ -100,6 +99,8 @@
   }
 
   .skuSelectorSubcontainer--cor {
+    margin-bottom: 16px;
+
     .skuSelectorName {
       &::after {
         content: "Outras Cores:";
@@ -156,6 +157,7 @@
   }
 
   .skuSelectorSubcontainer--tamanho {
+    margin-bottom: 10px;
     .skuSelectorName {
       &::after {
         content: "OUTROS TAMANHOS:";
@@ -382,6 +384,15 @@
 .shippingTableRow {
   display: flex;
   gap: 32px;
+  padding-bottom: 15px;
+}
+
+.shippingTableBody {
+  .shippingTableRow {
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
 }
 
 .shippingTableCell {

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

@@ -44,9 +44,10 @@
     text-transform: capitalize;
     border: none;
     padding: 0 16px;
+    width: 100%;
 
     @media screen and (min-width: 1920px) {
-      font-size: 18px;
+      font-size: 24px;
       line-height: 38px;
     }
 
@@ -57,6 +58,8 @@
 
   .listItem :global(.vtex-button__label) {
     padding: 0 !important;
+    text-align: start;
+    display: block;
   }
   .listItemActive :global(.vtex-button__label) {
     color: $black;
@@ -110,6 +113,11 @@
       color: #575757;
       margin-bottom: 8px;
 
+      @media screen and (min-width: 1920px) {
+        font-size: 32px;
+        margin-bottom: 16px;
+      }
+
       @media screen and (max-width: 1024px) {
         font-size: 20px;
         line-height: 32px;
@@ -132,6 +140,11 @@
 
       color: #929292;
 
+      @media screen and (min-width: 1920px) {
+        font-size: 18px;
+        line-height: 25px;
+      }
+
       @media screen and (max-width: 1024px) {
         font-size: 14px;
         line-height: 19px;