feat(right-col): Cria componentes e estiliza a parte lateral direita do pdp

react/Installments.tsx

@@ -0,0 +1,3 @@
+import Installments from "./components/Installments";
+
+export default Installments;

react/Pix.tsx

@@ -0,0 +1,3 @@
+import Pix from "./components/Pix";
+
+export default Pix;

react/components/Html/styles.css

@@ -1,5 +1,9 @@
 [class*="html--pdp-breadcrumb"] {
-  margin: 0 40px;
+  margin: 16px 40px;
+}
+
+[class*="html--pdp-breadcrumb"] :global(.vtex-breadcrumb-1-x-container) {
+  padding: 0;
 }
 
 [class*="html--product-main"] {
@@ -8,6 +12,16 @@
   gap: 32px;
 }
 
+[class*="html--product-availability"] {
+  display: flex;
+  padding: 0 40px 16px;
+  gap: 32px;
+}
+
+[class*="html--info-availability"] {
+  width: 48.8235294%;
+}
+
 [class*="html--stack"] {
   width: 48.8235294%;
 }
@@ -16,6 +30,58 @@
   width: 48.8235294%;
 }
 
+[class*="html--product-name"] {
+  text-align: end;
+  margin-bottom: 24px;
+}
+
+[class*="html--buy-container"] {
+  display: flex;
+  margin-bottom: 16px;
+}
+[class*="html--buy-container"] :global(.vtex-flex-layout-0-x-flexRow) {
+  flex: 1;
+}
+[class*="html--buy-container"] :global(.vtex-store-components-3-x-container) {
+  padding: 0;
+  margin-left: 10px;
+}
+
+[class*="html--buy-container"] :global(.vtex-flex-layout-0-x-flexRowContent) {
+  background-color: red;
+  margin: 0;
+  padding: 0;
+}
+
+[class*="html--buy-container"] :global(.vtex-button) {
+  background-color: #000;
+  padding: 12px 0;
+  border: none;
+  /* font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #fff; */
+  border-radius: 0;
+  height: 49px;
+}
+
+[class*="html--buy-container"]
+  :global(.vtex-add-to-cart-button-0-x-buttonText) {
+  font-size: 0;
+}
+
+[class*="html--buy-container"]
+  :global(.vtex-add-to-cart-button-0-x-buttonText)::after {
+  content: "Adicionar à sacola";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #fff;
+  text-transform: uppercase;
+}
+
 @media screen and (min-width: 2500px) {
   [class*="html--pdp-breadcrumb"] {
     margin: 0 360px;
@@ -24,12 +90,15 @@
   [class*="html--product-main"] {
     padding: 0 360px 16px;
   }
+  [class*="html--product-availability"] {
+    padding: 0 360px 16px;
+  }
 
   [class*="html--stack"] {
     width: 49.13043478%;
   }
 
-  [class*="html--right-col"] {
+  [class*="html--info-availability"] {
     width: 49.13043478%;
   }
 }
@@ -40,6 +109,11 @@
     padding: 0 40px 16px;
   }
 
+  [class*="html--product-availability"] {
+    display: block;
+    padding: 0 40px 16px;
+  }
+
   [class*="html--stack"] {
     width: 100%;
   }
@@ -47,4 +121,29 @@
   [class*="html--right-col"] {
     width: 100%;
   }
+
+  [class*="html--product-name"] {
+    text-align: start;
+  }
+
+  [class*="html--buy-container"] :global(.vtex-button__label) {
+    padding: 0;
+  }
+}
+
+@media screen and (max-width: 376px) {
+  [class*="html--buy-container"] {
+    display: block;
+  }
+
+  [class*="html--buy-container"] :global(.vtex-store-components-3-x-container) {
+    margin: 0;
+    margin-top: 10px;
+  }
+
+  [class*="html--buy-container"] :global(.vtex-button) {
+    height: 70px;
+  }
+
+
 }

react/components/Installments/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./styles.css";
+
+const Installments = () => {
+  const product = useProduct();
+  const installment = {
+    numberOfInstallments:
+      product?.selectedItem?.sellers[0].commertialOffer?.Installments[10]
+        .NumberOfInstallments,
+    value:
+      product?.selectedItem?.sellers[0].commertialOffer?.Installments[10].Value,
+  };
+  return (
+    <p className={styles.parcelas}>
+      <strong>
+        {installment.numberOfInstallments} x{" "}
+      </strong>
+      de
+      <strong>
+        {" "}
+        R$ {installment.value?.toFixed(2).toString().replace(".", ",")}
+      </strong>{" "}
+      sem juros
+    </p>
+  );
+};
+
+export default Installments;

react/components/Installments/styles.css

@@ -0,0 +1,9 @@
+.parcelas {
+  margin: 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+  margin-bottom: 8px;
+}

react/components/Pix/index.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+import styles from "./styles.css";
+
+const Pix = () => {
+  const product = useProduct();
+  const precoAtual = Number(
+    product?.product?.priceRange.sellingPrice.highPrice
+  );
+
+  const desconto = (precoAtual * 10) / 100;
+
+  const precoNovo = precoAtual - desconto;
+
+  const fechApi = async () => {
+    fetch("/api/checkout/pub/orderForms/simulation", {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: `{
+      "items": [
+        {
+          "id": ${product?.selectedItem?.itemId},
+          "seller": ${product?.selectedItem?.sellers[0].sellerId},
+          "quantity": ${product?.selectedQuantity}
+        }
+      ],
+      "country": "BRA"
+    }`,
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+      });
+  };
+
+  fechApi();
+
+  return (
+    <div className={styles.pixWrapper}>
+      <figure className={styles.pixImageContainer}>
+        <img
+          className={styles.pixImage}
+          src=" https://agenciamagma.vteximg.com.br/arquivos/gobar-icon-pix.png"
+          alt="logo do Pix"
+        />
+      </figure>
+
+      <div className={styles.descriptionContainer}>
+        <p className={styles.newPrice}>R$ {precoNovo.toFixed(2).replace(".", ",")}</p>
+        <p className={styles.discount}>10 % de desconto</p>
+      </div>
+    </div>
+  );
+};
+
+export default Pix;

react/components/Pix/styles.css

@@ -0,0 +1,37 @@
+.pixWrapper {
+  display: flex;
+  gap: 26px;
+  margin-bottom: 16px;
+  align-items: center;
+}
+
+.pixImageContainer {
+  margin: 0;
+}
+
+.pixImage {
+  width: 66px;
+}
+/*
+.descriptionContainer {
+
+} */
+
+.newPrice {
+  margin: 0;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+.discount {
+  margin: 0;
+
+  font-style: normal;
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+  color: #929292;
+}

react/types/index.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

store/blocks/pdp/product.jsonc

@@ -85,7 +85,6 @@
   },
   "product-images": {
     "props": {
-      // "aspectRatio": "auto",
       "thumbnailAspectRatio": "1:1",
       "thumbnailMaxHeight": 90,
       "showNavigationArrows": false,
@@ -99,29 +98,41 @@
       "blockClass": "right-col"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
-      "product-rating-summary",
+      // "product-identifier.product",
-      "flex-layout.row#list-price-savings",
+      // "product-rating-summary",
-      "flex-layout.row#selling-price",
+      // "flex-layout.row#list-price-savings",
-      "product-installments",
+      "html#selling-price",
-      "product-separator",
+      // "product-installments",
-      "product-identifier.product",
+      "installments",
+      // "product-separator",
+      "pix",
       "sku-selector",
-      "product-quantity",
+      // "product-quantity",
+      "html#buy-container",
       "product-assembly-options",
       "product-gifts",
-      "flex-layout.row#buy-button",
+      // "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "shipping-simulator"
-      "share#default"
+      // "share#default"
     ]
   },
-
+  "html#buy-container": {
-  "flex-layout.row#product-name": {
     "props": {
-      "marginBottom": 3
+      "blockClass": "buy-container"
     },
-    "children": ["vtex.store-components:product-name"]
+    "children": ["product-quantity", "flex-layout.row#buy-button"]
+  },
+
+  "html#product-name": {
+    "props": {
+      "blockClass": "product-name"
+    },
+    "children": [
+      "vtex.store-components:product-name",
+      "product-identifier.product"
+    ]
   },
 
   "sku-selector": {
@@ -152,8 +163,9 @@
       "blockClass": "info-availability"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
-      "product-identifier.product",
+      // "product-identifier.product",
+
       "sku-selector",
       "flex-layout.row#availability"
     ]

store/blocks/product-price.jsonc

@@ -1,14 +1,10 @@
 {
-  "flex-layout.row#selling-price": {
+  "html#selling-price": {
     "props": {
-      "colGap": 2,
+
-      "preserveLayoutOnMobile": true,
+      "blockClass": "selling-price"
-      "preventHorizontalStretch": true,
-      "marginBottom": 4
     },
-    "children": [
+    "children": ["product-selling-price"]
-      "product-selling-price"
-    ]
   },
 
   "flex-layout.row#list-price-savings": {
@@ -19,9 +15,6 @@
       "marginBottom": 2,
       "marginTop": 5
     },
-    "children": [
+    "children": ["product-list-price", "product-price-savings"]
-      "product-list-price",
-      "product-price-savings"
-    ]
   }
 }

store/blocks/product-summary/quickview.json

@@ -1,9 +1,6 @@
 {
   "modal-trigger#quickview": {
-    "children": [
+    "children": ["icon-expand", "modal-layout#quickview"],
-      "icon-expand",
-      "modal-layout#quickview"
-    ],
     "props": {
       "blockClass": "quickview"
     }
@@ -37,7 +34,7 @@
   "flex-layout.col#quickviewPrice": {
     "children": [
       "flex-layout.row#list-price-savings",
-      "flex-layout.row#selling-price",
+      "html#selling-price",
       "product-installments"
     ]
   },
@@ -63,9 +60,7 @@
   },
 
   "flex-layout.col#quickview-product-quantity": {
-    "children": [
+    "children": ["product-summary-quantity#quickview"]
-      "product-summary-quantity#quickview"
-    ]
   },
   "product-summary-quantity#quickview": {
     "props": {
@@ -74,18 +69,14 @@
     }
   },
   "flex-layout.col#quickview-add-to-card-button": {
-    "children": [
+    "children": ["add-to-cart-button"],
-      "add-to-cart-button"
-    ],
     "props": {
       "width": "grow"
     }
   },
 
   "flex-layout.row#quickview-actions-2": {
-    "children": [
+    "children": ["link.product#button-pdp"]
-      "link.product#button-pdp"
-    ]
   },
   "link.product#button-pdp": {
     "props": {
@@ -107,15 +98,10 @@
     }
   },
   "flex-layout.col#quickview-images": {
-    "children": [
+    "children": ["product-images#quickview"]
-      "product-images#quickview"
-    ]
   },
   "flex-layout.col#quickview-product-details": {
-    "children": [
+    "children": ["modal-content#quickview", "modal-actions#quickview"],
-      "modal-content#quickview",
-      "modal-actions#quickview"
-    ],
     "props": {
       "preventVerticalStretch": true,
       "blockClass": "quickviewDetails"
@@ -134,7 +120,7 @@
       "blockClass": "quickview"
     }
   },
-  "product-images#quickview" : {
+  "product-images#quickview": {
     "props": {
       "blockClass": "quickview",
       "showNavigationArrows": true

store/interfaces.json

@@ -5,5 +5,13 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+
+  "installments": {
+    "component": "Installments"
+  },
+  
+  "pix": {
+    "component": "Pix"
   }
 }

styles/css/vtex.product-identifier.css

@@ -1,3 +1,19 @@
-.product-identifier--productReference {
+/*
-  margin-bottom: 1rem;
+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 */
+.product-identifier__label, .product-identifier__separator {
+  display: none;
+}
+.product-identifier__value {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.478);
 }

styles/css/vtex.product-price.css

@@ -1,79 +1,16 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
-}
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
 .sellingPrice {
-  color: #3f3f40;
+  font-style: normal;
-  font-size: 1.25rem;
-}
-
-.sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
-}
+  font-size: 25px;
-
+  line-height: 38px;
-.installments {
+  color: #000;
-  color: #727273;
-  margin-bottom: 1rem;
-}
-
-.savings {
-  font-weight: 500;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,74 @@
+/*
+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 */
+.quantitySelectorContainer {
+  margin: 0;
+}
+.quantitySelectorContainer .quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper-container) {
+  border: 1px solid #ccc;
+  width: 128px;
+  height: 49px;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__input) {
+  padding: 0;
+  border: none;
+  height: auto;
+  flex: 1;
+  color: #929292;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button-container) {
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button-container) {
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) {
+  border: none;
+  width: auto !important;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) {
+  border: none;
+  width: auto !important;
+  background-color: transparent;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button__text) {
+  color: #000;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button__text) {
+  color: #000;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}

styles/css/vtex.store-components.css

@@ -32,3 +32,262 @@
   border-radius: 8px;
   overflow: hidden;
 }
+
+.productNameContainer {
+  margin-bottom: 8px;
+}
+.productNameContainer .productBrand {
+  color: #575757;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+}
+
+.skuSelectorContainer {
+  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;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList {
+  margin: 0;
+  gap: 16px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
+  background-image: none;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after {
+  content: "";
+  display: block;
+  width: 1px;
+  height: 40px;
+  background: #D5D5D5;
+  transform: rotate(45deg);
+  bottom: 0;
+  left: 50%;
+  position: relative;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .frameAround,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .frameAround {
+  display: none;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox {
+  border: 2px solid #000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper {
+  color: #000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after {
+  background-color: #000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
+  content: "Outras Cores:";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem {
+  width: 48px;
+  height: 48px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+  border: 1px solid rgba(185, 185, 185, 0.6);
+  border-radius: 50%;
+  position: absolute;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
+  background-image: none;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after {
+  content: "";
+  height: 48px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .frameAround {
+  display: none;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox {
+  border: 2px solid #000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper {
+  color: #000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after {
+  background-color: #000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+  content: "OUTROS TAMANHOS:";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem {
+  width: 40px;
+  height: 40px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+  border: 1px solid #989898;
+  border-radius: 50%;
+  position: absolute;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper {
+  padding: 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .frameAround {
+  display: none;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox {
+  border: 2px solid #000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper {
+  color: #000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after {
+  background-color: #000;
+}
+
+.shippingContainer {
+  position: relative;
+}
+
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.shippingContainer :global(.vtex-input-prefix__group) {
+  width: 280px;
+  height: 49px;
+  border: 1px solid #cccccc;
+  border-radius: 0;
+}
+@media screen and (max-width: 376px) {
+  .shippingContainer :global(.vtex-input-prefix__group) {
+    width: 100%;
+  }
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  padding-bottom: 16px;
+}
+
+.shippingContainer :global(.vtex-input) {
+  width: auto;
+}
+@media screen and (max-width: 376px) {
+  .shippingContainer :global(.vtex-input) {
+    width: 100%;
+  }
+}
+
+.shippingContainer :global(.vtex-input__suffix) {
+  display: none;
+}
+
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+  padding: 16.5px 16px;
+  margin: 0;
+}
+
+.shippingContainer :global(.vtex__icon-external-link) {
+  display: none;
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  padding: 0 0 16.5px 32px;
+  color: #000000 !important;
+}
+@media screen and (max-width: 376px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    padding: 8px 0 0 0;
+    text-align: end;
+    width: 100%;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+  color: #000000 !important;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  text-decoration-line: underline;
+}
+@media screen and (max-width: 376px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+    margin: 0;
+  }
+}
+
+.shippingContainer :global(.vtex-button) {
+  width: auto;
+  border: none;
+  top: 27px;
+  left: 230px;
+  position: absolute;
+}
+@media screen and (max-width: 376px) {
+  .shippingContainer :global(.vtex-button) {
+    right: 0;
+    left: auto;
+  }
+}
+
+.shippingContainer :global(.vtex-button__label) {
+  font-size: 0;
+  background-color: #000000;
+  width: 49px;
+  height: 49px;
+}
+.shippingContainer :global(.vtex-button__label)::after {
+  content: "OK";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #ffffff;
+}

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

@@ -0,0 +1,13 @@
+.product-identifier {
+  &__label, &__separator {
+    display: none;
+  }
+
+  &__value {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: $gray-550;
+  }
+}

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

@@ -0,0 +1,11 @@
+.sellingPrice {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: $black;
+}
+
+.installments {
+  // background: red;
+}

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

@@ -0,0 +1,69 @@
+.quantitySelectorContainer {
+  margin: 0;
+  .quantitySelectorTitle {
+    display: none;
+  }
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper-container) {
+  border: 1px solid #ccc;
+  width: 128px;
+  height: 49px;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__input) {
+  padding: 0;
+  border: none;
+  height: auto;
+  flex: 1;
+  color: #929292;
+
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.quantitySelectorContainer
+  :global(.vtex-numeric-stepper__minus-button-container) {
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+}
+
+.quantitySelectorContainer
+  :global(.vtex-numeric-stepper__plus-button-container) {
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) {
+  border: none;
+  width: auto !important;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) {
+  border: none;
+  width: auto !important;
+  background-color: transparent;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button__text) {
+  color: #000;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button__text) {
+  color: #000;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+

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

@@ -24,3 +24,312 @@
     overflow: hidden;
   }
 }
+
+.productNameContainer {
+  margin-bottom: 8px;
+
+  .productBrand {
+    color: $gray-700;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 20px;
+    line-height: 34px;
+  }
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+  .skuSelectorSubcontainer--cor,
+  .skuSelectorSubcontainer--tamanho {
+    margin-bottom: 16px;
+    .skuSelectorNameContainer {
+      margin: 0;
+      .skuSelectorTextContainer {
+        .skuSelectorName,
+        .skuSelectorNameSeparator,
+        .skuSelectorSelectorImageValue {
+          font-size: 0;
+        }
+      }
+    }
+
+    .skuSelectorOptionsList {
+      margin: 0;
+      gap: 16px;
+      .skuSelectorItem {
+        margin: 0;
+
+        .skuSelectorInternalBox {
+          .diagonalCross {
+            background-image: none;
+
+            &::after {
+              content: "";
+              display: block;
+              width: 1px;
+              height: 40px;
+              background: $gray-300;
+
+              transform: rotate(45deg);
+              bottom: 0;
+              left: 50%;
+              // transform: translate(-50%, -50%);
+              position: relative;
+            }
+          }
+
+          .skuSelectorItem--selected {
+            .frameAround {
+              display: none;
+            }
+
+            .skuSelectorInternalBox {
+              border: 2px solid $black;
+
+              .valueWrapper {
+                color: $black;
+              }
+
+              .diagonalCross {
+                &::after {
+                  background-color: $black;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .skuSelectorSubcontainer--cor {
+    .skuSelectorName {
+      &::after {
+        content: "Outras Cores:";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+        text-transform: uppercase;
+      }
+    }
+
+    .skuSelectorOptionsList {
+      .skuSelectorItem {
+        width: 48px;
+        height: 48px;
+
+        .skuSelectorInternalBox {
+          border: 1px solid $gray-450;
+          border-radius: 50%;
+          position: absolute;
+
+          .diagonalCross {
+            background-image: none;
+
+            &::after {
+              content: "";
+              height: 48px;
+            }
+          }
+        }
+      }
+
+      .skuSelectorItem--selected {
+        .frameAround {
+          display: none;
+        }
+
+        .skuSelectorInternalBox {
+          border: 2px solid $black;
+
+          .valueWrapper {
+            color: $black;
+          }
+
+          .diagonalCross {
+            &::after {
+              background-color: $black;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .skuSelectorSubcontainer--tamanho {
+    .skuSelectorName {
+      &::after {
+        content: "OUTROS TAMANHOS:";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+        text-transform: uppercase;
+      }
+    }
+    .skuSelectorOptionsList {
+      .skuSelectorItem {
+        width: 40px;
+        height: 40px;
+
+        .skuSelectorInternalBox {
+          border: 1px solid $gray-600;
+          border-radius: 50%;
+          position: absolute;
+          .valueWrapper {
+            padding: 0;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: $gray-450;
+          }
+
+          // .diagonalCross {
+          //   background-image: none;
+
+          //   &::after {
+          //     content: "";
+          //     display: block;
+          //     width: 1px;
+          //     height: 40px;
+          //     background: $gray-300;
+
+          //     transform: rotate(45deg);
+          //     bottom: 0;
+          //     left: 50%;
+          //     // transform: translate(-50%, -50%);
+          //     position: relative;
+          //   }
+          // }
+        }
+      }
+
+      .skuSelectorItem--selected {
+        .frameAround {
+          display: none;
+        }
+
+        .skuSelectorInternalBox {
+          border: 2px solid $black;
+
+          .valueWrapper {
+            color: $black;
+          }
+
+          .diagonalCross {
+            &::after {
+              background-color: $black;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.shippingContainer {
+  position: relative;
+}
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+
+  &::after {
+    content: "CALCULAR FRETE:";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: $gray-500;
+  }
+}
+
+.shippingContainer :global(.vtex-input-prefix__group) {
+  width: 280px;
+  height: 49px;
+  border: 1px solid #cccccc;
+  border-radius: 0;
+
+  @media screen and (max-width: 376px) {
+    width: 100%;
+  }
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  padding-bottom: 16px;
+}
+.shippingContainer :global(.vtex-input) {
+  width: auto;
+
+  @media screen and (max-width: 376px) {
+    width: 100%;
+  }
+}
+.shippingContainer :global(.vtex-input__suffix) {
+  display: none;
+}
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+  padding: 16.5px 16px;
+  margin: 0;
+}
+.shippingContainer :global(.vtex__icon-external-link) {
+  display: none;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  padding: 0 0 16.5px 32px;
+  color: #000000 !important;
+
+  @media screen and (max-width: 376px) {
+    padding: 8px 0 0 0;
+    text-align: end;
+    width: 100%;
+  }
+
+  :last-child {
+    color: #000000 !important;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    text-decoration-line: underline;
+
+    @media screen and (max-width: 376px) {
+      margin: 0;
+    }
+  }
+}
+
+.shippingContainer :global(.vtex-button) {
+  width: auto;
+  border: none;
+  top: 27px;
+  left: 230px;
+  position: absolute;
+
+  @media screen and (max-width: 376px) {
+    right: 0;
+    left: auto;
+  }
+}
+.shippingContainer :global(.vtex-button__label) {
+  font-size: 0;
+  background-color: #000000;
+  width: 49px;
+  height: 49px;
+  &::after {
+    content: "OK";
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+
+    color: #ffffff;
+  }
+}

styles/sass/utils/_vars.scss

@@ -12,7 +12,15 @@ $color-blue: #4267b2;
 
 $color-green: #4caf50;
 
+$gray-300: #D5D5D5;
+$gray-400: #b9b9b9;
+$gray-450: #b9b9b999;
 $gray-500: #929292;
+$gray-550: rgba(146, 146, 146, 0.478);
+$gray-600: #989898;
+$gray-700: #575757;
+
+$black: #000;
 
 /* Grid breakpoints */
 $grid-breakpoints: (