fix: colocando as fontes certas, vendo se todo texto da page está pegando, ajustando o slick e colocando o numero dentro do sku de tamanho preto tbm como o figma

react/components/Html/styles.css

@@ -1,6 +1,5 @@
 @media (min-width: 1920px) {
   [class*="html--page-product"] {
-
     margin-left: 320px;
     padding-right: 320px;
   }
@@ -15,12 +14,39 @@
 @media (max-width: 768px) {
   [class*="html--quantidadeEBuy"] {
     display: flex;
-    flex-direction:column;
+    flex-direction: column;
     gap: 10px;
   }
 }
 
-/* [class*=""] {
+[class*="html--product-summary"] {
-  
+  padding: 0px;
-} */
+  width: 434.4px !important;
-
+  min-height: 543.4px;
+  max-height: 568.4px;
+  margin-bottom: 32px;
+}
+@media (max-width: 1920px) {
+  [class*="html--product-summary"] {
+    width: 314.4px !important;
+    min-height: 448.4px !important;
+    max-height: 448.4px !important;
+    margin-bottom: 32px !important;
+  }
+}
+@media (max-width: 1024px) {
+  [class*="html--product-summary"] {
+    width: 291.2px !important;
+    min-height: 383.2px !important;
+    max-height: 402.2px !important;
+    margin-bottom: 28px !important;
+  }
+}
+@media (max-width: 500px) {
+  [class*="html--product-summary"] {
+    width: 124.8px !important;
+    min-height: 254.8px !important;
+    max-height: 273.8px !important;
+    margin-bottom: 16px !important;
+  }
+}

react/components/pixCustom/styles.css

@@ -1,6 +1,3 @@
-/* [class*=""] {
-  
-} */
 .divConteiner {
   display: flex;
   align-items: center;

store/blocks/pdp/product.jsonc

@@ -10,13 +10,6 @@
       "html#breadcrumb",
       "condition-layout.product#availability",
       "html#tab-layout",
-
-      // "flex-layout.row#description",
-      // "flex-layout.row#specifications-title",
-      // "product-specification-group#table",
-      // "shelf.relatedProducts",
-      // "product-questions-and-answers",
-
       "rich-text#titleSlick",
       "list-context.product-list#demo",
       "PlaceholderCep"
@@ -123,22 +116,13 @@
     "children": [
       "html#product-name",
       "html#product-modelo",
-      // "product-rating-summary",
       "html#selling-price",
-      // "flex-layout.row#list-price-savings",
       "html#product-installments",
       "html#pixCustom",
       "html#sku-selector",
       "html#quantidadeEButtonCustom",
-      // "product-separator",
-      // "product-quantity",
-      // "product-assembly-options",
-      // "product-gifts",
-      // "flex-layout.row#buy-button",
-      // "availability-subscriber"
       "rich-text#titleCep",
       "html#shipping-simulator"
-      // "share#default"
     ]
   },
   "html#selling-price": {
@@ -461,17 +445,14 @@
 
   "html#product-summary": {
     "props": {
+      "blockClass": "product-summary",
       "testId": "vtex-product-summary"
     },
     "children": [
       "product-summary-image",
       "product-summary-name",
-      // "product-summary-description",
       "product-list-price",
       "product-selling-price"
-      // "product-summary-price"
-      // "product-summary-sku-selector",
-      // "product-summary-buy-button"
     ]
   },
   "product-list-price":{

styles/configs/font-faces.css

@@ -1,5 +1,5 @@
 @font-face {
     font-family: 'Open Sans';
-    src: url(assets/fonts/Poppins-Regular.ttf);
+    src: url(assets/fonts/OpenSans-Regular.ttf);
     font-weight: 400;
   }

styles/css/vtex.flex-layout.css

@@ -107,12 +107,6 @@
 
 .flexCol--divInfoProduct .flexRow--divNomeProduct {
   text-align: end;
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 20px;
-  line-height: 34px;
-  color: #575757;
   margin-bottom: 8px;
 }
 @media (max-width: 1024px) {

styles/css/vtex.product-price.css

@@ -16,7 +16,13 @@
   line-height: 19px;
   text-align: center;
   text-decoration-line: line-through;
-  color: #BABABA;
+  color: #bababa;
+}
+@media (max-width: 1024px) {
+  .listPrice--list-price {
+    font-size: 12px;
+    line-height: 16px;
+  }
 }
 
 .sellingPrice--hasListPrice {
@@ -28,6 +34,12 @@
   text-align: center;
   color: #000000;
 }
+@media (max-width: 1024px) {
+  .sellingPrice--hasListPrice {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
 
 .installments--divParcelamente {
   font-family: "Open Sans";

styles/css/vtex.product-summary.css

@@ -25,6 +25,12 @@
   text-align: center;
   color: #000000;
 }
+@media (max-width: 1024px) {
+  .nameContainer .brandName {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
 
 .imageStackContainer {
   width: 434.4px !important;

styles/css/vtex.rich-text.css

@@ -31,13 +31,13 @@
   text-align: center;
   color: #575757;
 }
-@media (min-width: 1024px) {
+@media (max-width: 500px) {
   .container--tituloSlick .paragraph--tituloSlick {
     font-size: 20px;
   }
 }
 
-.wrapper--titleCep {
+.wrapper--titleCep .paragraph--titleCep {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;

styles/css/vtex.slider-layout.css

@@ -30,23 +30,6 @@
 .sliderTrackContainer--carousel .sliderTrack--carousel {
   gap: 16px;
 }
-.sliderTrackContainer--carousel .slide--carousel {
-  padding: 0px;
-  width: 434.4px !important;
-  height: 543.4px;
-}
-@media (max-width: 1920px) {
-  .sliderTrackContainer--carousel .slide--carousel {
-    width: 314.4px !important;
-    height: 448.4px;
-  }
-}
-@media (max-width: 500px) {
-  .sliderTrackContainer--carousel .slide--carousel {
-    width: 291.2px !important;
-    height: 402.2px;
-  }
-}
 
 .paginationDotsContainer--carousel .paginationDot--carousel {
   background-color: black;

styles/css/vtex.store-components.css

@@ -159,6 +159,20 @@
     padding-bottom: 8px;
   }
 }
+.productDescriptionContainer .productDescriptionText--description {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+@media (max-width: 1024px) {
+  .productDescriptionContainer .productDescriptionText--description {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
 
 .listPrice {
   padding-top: 0 !important;
@@ -174,16 +188,16 @@
 }
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorName {
   font-size: 0;
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  line-height: 19px;
-  color: #929292;
 }
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorName::after {
   display: block;
   content: "OUTROS CORES:";
   font-size: 14px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19px;
+  color: #929292;
 }
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku--selected .frameAround--divSku {
   border: 3px solid black !important;
@@ -236,15 +250,15 @@
 }
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorName {
   font-size: 0;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+  display: block;
+  content: "OUTROS TAMANHOS:";
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
   line-height: 19px;
   color: #929292;
-}
-.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
-  display: block;
-  content: "OUTROS TAMANHOS:";
   font-size: 14px;
 }
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku--selected .frameAround--divSku {
@@ -258,6 +272,9 @@
   border: 1px solid black !important;
   transform: rotate(-90deg);
 }
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku--selected .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku {
+  color: #000000 !important;
+}
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku {
   width: 40px;
   height: 40px;
@@ -338,6 +355,14 @@
   height: 49px;
   border-right: 0;
 }
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #afafaf;
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
   position: absolute;
   right: -57px;
@@ -425,7 +450,12 @@
 }
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
   content: "FRETE";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
   font-size: 14px;
+  line-height: 19px;
+  color: #202020;
 }
 .shippingTable .shippingTableHead .shippingTableBody {
   display: block;
@@ -554,4 +584,13 @@
   .productDescriptionText--description {
     padding-bottom: 16px;
   }
+}
+
+.productNameContainer--quickview .productBrand--quickview {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
 }

styles/css/vtex.tab-layout.css

@@ -35,13 +35,6 @@
   }
 }
 .container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button) {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 38px;
-  color: #bfbfbf;
-  text-transform: capitalize;
   border: 0;
 }
 @media (min-width: 2500px) {
@@ -56,10 +49,18 @@
     justify-content: start;
   }
 }
-@media (max-width: 1024px) {
+.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #bfbfbf;
+  text-transform: capitalize;
+}
+@media (max-width: 1920px) {
   .container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) {
-    padding-left: 0;
+    font-size: 18px;
-    padding-right: 48px;
   }
 }
 .container--estrutura .listContainer--Guias .listItemActive--renderGuia {
@@ -73,14 +74,21 @@
   }
 }
 .container--estrutura .listContainer--Guias .listItemActive--renderGuia :global(.vtex-button) {
+  background-color: white !important;
+  border: 0;
+}
+.container--estrutura .listContainer--Guias .listItemActive--renderGuia :global(.vtex-button__label) {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
-  font-size: 18px;
+  font-size: 24px;
   line-height: 38px;
-  color: black;
+  color: black !important;
-  background-color: white !important;
+}
-  border: 0;
+@media (max-width: 1920px) {
+  .container--estrutura .listContainer--Guias .listItemActive--renderGuia :global(.vtex-button__label) {
+    font-size: 18px;
+  }
 }
 .container--estrutura .contentContainer--listRender {
   margin-left: 32px;

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

@@ -90,12 +90,6 @@
 .flexCol--divInfoProduct {
   .flexRow--divNomeProduct {
     text-align: end;
-    font-family: "Open Sans";
-    font-style: normal;
-    font-weight: 300;
-    font-size: 20px;
-    line-height: 34px;
-    color: #575757;
     margin-bottom: 8px;
     @media (max-width: 1024px) {
       text-align: left;

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

@@ -1,44 +1,50 @@
-.listPrice--list-price{
+.listPrice--list-price {
-    display: block;
+  display: block;
-    font-family: 'Open Sans';
+  font-family: "Open Sans";
-    font-style: normal;
+  font-style: normal;
-    font-weight: 400;
+  font-weight: 400;
-    font-size: 14px;
+  font-size: 14px;
-    line-height: 19px;
+  line-height: 19px;
-    text-align: center;
+  text-align: center;
-    text-decoration-line: line-through;
+  text-decoration-line: line-through;
-    color: #BABABA;
+  color: #bababa;
-    
+  @media (max-width: 1024px) {
+    font-size: 12px;
+    line-height: 16px;
+  }
 }
 
 .sellingPrice--hasListPrice {
-    font-family: 'Open Sans';
+  font-family: "Open Sans";
-    font-style: normal;
+  font-style: normal;
-    font-weight: 700;
+  font-weight: 700;
-    font-size: 24px;
+  font-size: 24px;
-    line-height: 33px;
+  line-height: 33px;
-    text-align: center;
+  text-align: center;
-    color: #000000;
+  color: #000000;
-    
+  @media (max-width: 1024px) {
+    font-size: 18px;
+    line-height: 25px;
+  }
 }
 
 .installments--divParcelamente {
-    font-family: 'Open Sans';
+  font-family: "Open Sans";
-    font-style: normal;
+  font-style: normal;
-    font-weight: 400;
+  font-weight: 400;
-    font-size: 16px;
+  font-size: 16px;
-    line-height: 22px;
+  line-height: 22px;
-    color: #929292;
+  color: #929292;
-    .installmentsNumber--divParcelamente{
+  .installmentsNumber--divParcelamente {
-        font-weight: 700;
+    font-weight: 700;
-        &::after{
+    &::after {
-            content: "x";
+      content: "x";
-        }
-    }
-    .installments-discount--divParcelamente{
-        font-weight: 700;
-    }
-    .currencyContainer--divParcelamente{
-        font-weight: 700;
     }
+  }
+  .installments-discount--divParcelamente {
+    font-weight: 700;
+  }
+  .currencyContainer--divParcelamente {
+    font-weight: 700;
+  }
 }

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

@@ -2,7 +2,7 @@
   max-width: 100% !important;
   margin: 0 !important;
 }
-.nameContainer{
+.nameContainer {
   padding-top: 8px !important;
   padding-bottom: 8px !important;
   .brandName {
@@ -13,8 +13,11 @@
     line-height: 25px;
     text-align: center;
     color: #000000;
+    @media (max-width: 1024px) {
+      font-size: 14px;
+      line-height: 19px;
+    }
   }
-
 }
 
 .imageStackContainer {
@@ -39,10 +42,10 @@
   max-height: 100% !important;
 }
 
-.priceContainer{
+.priceContainer {
   padding-top: 0px !important;
   padding-bottom: 0px !important;
-  .installmentContainer{
+  .installmentContainer {
     display: none;
   }
- }
+}

styles/sass/pages/product/vtex.rich-text.scss

@@ -9,23 +9,25 @@
     margin-bottom: 16px;
   }
   .paragraph--tituloSlick {
-    font-family: "Open Sans";
+    font-family: 'Open Sans';
     font-style: normal;
     font-weight: 400;
     font-size: 24px;
     line-height: 38px;
-    text-align: center;
+    text-align: center; 
     color: #575757;
-    @media (min-width: 1024px) {
+    @media (max-width: 500px) {
       font-size: 20px;
     }
   }
 }
 .wrapper--titleCep {
-  font-family: "Open Sans";
+  .paragraph--titleCep{
-  font-style: normal;
+    font-family: "Open Sans";
-  font-weight: 400;
+    font-style: normal;
-  font-size: 14px;
+    font-weight: 400;
-  line-height: 19px;
+    font-size: 14px;
-  color: #929292;
+    line-height: 19px;
+    color: #929292;
+  }
 }

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

@@ -6,9 +6,9 @@
       content: url("https://agenciamagma.vtexassets.com/arquivos/AdilsonFernandoNevesOrnellas-leftarrowslick.png");
     }
   }
-  .sliderRightArrow{
+  .sliderRightArrow {
     visibility: hidden;
-    &::after{
+    &::after {
       visibility: visible;
       content: url("https://agenciamagma.vtexassets.com/arquivos/AdilsonFernandoNevesOrnellas-rightarrowslick.png");
     }
@@ -19,23 +19,9 @@
   background-color: $color-white;
   margin-left: 40px;
   margin-right: 40px;
-  // margin-bottom: 105px;
   .sliderTrack--carousel {
     gap: 16px;
   }
-  .slide--carousel {
-    padding: 0px;
-    width: 434.4px !important;
-    height: 543.4px;
-    @media (max-width: 1920px) {
-      width: 314.4px !important;
-      height: 448.4px;
-    }
-    @media (max-width: 500px) {
-      width: 291.2px !important;
-      height: 402.2px;
-    }
-  }
 }
 .paginationDotsContainer--carousel {
   .paginationDot--carousel {

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

@@ -135,6 +135,18 @@
       padding-bottom: 8px;
     }
   }
+  .productDescriptionText--description {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+    @media (max-width: 1024px) {
+      font-size: 14px;
+      line-height: 19px;
+    }
+  }
 }
 
 .listPrice {
@@ -152,15 +164,15 @@
     order: 2;
     .skuSelectorName {
       font-size: 0;
-      font-family: "Open Sans";
-      font-style: normal;
-      font-weight: 400;
-      line-height: 19px;
-      color: #929292;
       &::after {
         display: block;
         content: "OUTROS CORES:";
         font-size: 14px;
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        line-height: 19px;
+        color: #929292;
       }
     }
     .skuSelectorItem--divSku--selected {
@@ -211,19 +223,19 @@
   .skuSelectorSubcontainer--tamanho {
     order: 1;
     margin: 0;
-    .skuSelectorNameContainer{
+    .skuSelectorNameContainer {
       margin: 0;
     }
     .skuSelectorName {
       font-size: 0;
-      font-family: "Open Sans";
-      font-style: normal;
-      font-weight: 400;
-      line-height: 19px;
-      color: #929292;
       &::after {
         display: block;
         content: "OUTROS TAMANHOS:";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        line-height: 19px;
+        color: #929292;
         font-size: 14px;
       }
     }
@@ -239,6 +251,11 @@
         border: 1px solid $color-black !important;
         transform: rotate(-90deg);
       }
+      .skuSelectorInternalBox--divSku {
+        .skuSelectorItemTextValue--divSku {
+          color: #000000 !important;
+        }
+      }
     }
     .skuSelectorItem--divSku {
       width: 40px;
@@ -315,6 +332,14 @@
         border-radius: 0px;
         height: 49px;
         border-right: 0;
+        :global(.vtex-address-form-4-x-input) {
+          font-family: "Open Sans";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 16px;
+          color: #afafaf;
+        }
       }
     }
     :global(.vtex-address-form__postalCode-forgottenURL) {
@@ -404,7 +429,12 @@
       }
       .shippingTableHeadDeliveryPrice::after {
         content: "FRETE";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
         font-size: 14px;
+        line-height: 19px;
+        color: #202020;
       }
     }
     .shippingTableBody {
@@ -502,7 +532,7 @@
         grid-area: name;
         margin-right: 0;
         margin-bottom: 0;
-        :global(.vtex-input-prefix__group){
+        :global(.vtex-input-prefix__group) {
           border-radius: 0;
         }
       }
@@ -510,7 +540,7 @@
         grid-area: email;
         margin-right: 0;
         margin-bottom: 0;
-        :global(.vtex-input-prefix__group){
+        :global(.vtex-input-prefix__group) {
           border-radius: 0;
         }
       }
@@ -540,8 +570,18 @@
     }
   }
 }
-.productDescriptionText--description{
+.productDescriptionText--description {
   @media (max-width: 1024px) {
     padding-bottom: 16px;
   }
 }
+.productNameContainer--quickview {
+  .productBrand--quickview {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 300;
+    font-size: 20px;
+    line-height: 34px;
+    color: #575757;
+  }
+}

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

@@ -1,8 +1,6 @@
 .container--estrutura {
   padding-left: 40px !important ;
   padding-right: 40px !important;
-  // @media (max-width: 1024px) {
-  // }
   .listContainer--Guias {
     flex-direction: row;
     justify-content: space-between;
@@ -21,13 +19,6 @@
         width: inherit;
       }
       :global(.vtex-button) {
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 18px;
-        line-height: 38px;
-        color: #bfbfbf;
-        text-transform: capitalize;
         border: 0;
         @media (min-width: 2500px) {
           font-size: 24px !important;
@@ -39,9 +30,15 @@
         }
       }
       :global(.vtex-button__label) {
-        @media (max-width: 1024px) {
+        font-family: "Open Sans";
-          padding-left: 0;
+        font-style: normal;
-          padding-right: 48px;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        color: #bfbfbf;
+        text-transform: capitalize;
+        @media (max-width: 1920px) {
+          font-size: 18px;
         }
       }
     }
@@ -53,14 +50,19 @@
         border-bottom: none;
       }
       :global(.vtex-button) {
+        background-color: white !important;
+        border: 0;
+      }
+      :global(.vtex-button__label) {
         font-family: "Open Sans";
         font-style: normal;
         font-weight: 400;
-        font-size: 18px;
+        font-size: 24px;
         line-height: 38px;
-        color: black;
+        color: black !important;
-        background-color: white !important;
+        @media (max-width: 1920px) {
-        border: 0;
+          font-size: 18px;
+        }
       }
     }
   }