Merge pull request 'development' (#11) from development into feature/shelf

Reviewed-on: #11

.vscode/settings.json

@@ -164,5 +164,14 @@
         }
       }
     }
-  ]
+  ],
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": false
+  },
+  "explorerExclude.backup": {}
 }

react/PaymentPix.tsx

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

react/ProductDescription.tsx

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

react/components/PaymentPix/PaymentPix.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+import styles from "./styles.css";
+
+const PaymentPix = () => {
+  const product = useProduct();
+  const pricePix = (
+    (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9
+  ).toFixed(2);
+
+  const imagePix =
+    "https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png";
+
+  const convertPrice = pricePix.toString().replace(".", ",");
+
+  return (
+    <div className={styles.paymentPixWrapper}>
+      <img
+        className={styles.paymentPixImg}
+        src={imagePix}
+        alt="Imagem do Pix"
+      />
+      <div className={styles.paymentPixText}>
+        <p className={styles.paymentPixValue}>R$ {convertPrice}</p>
+        <p className={styles.paymentPixDiscount}>10% de desconto</p>
+      </div>
+    </div>
+  );
+};
+
+export { PaymentPix };

react/components/PaymentPix/styles.css

@@ -0,0 +1,38 @@
+.paymentPixWrapper {
+  display: flex;
+  flex-direction: row;
+  margin-top: 8px;
+  margin-bottom: 16px;
+  height: 39px;
+  gap: 26px;
+  align-items: center;
+}
+.paymentPixImg {
+  display: flex;
+  width: 66px;
+  height: 24px;
+  align-items: center;
+}
+.paymentPixText {
+  display: flex;
+  flex-direction: column;
+}
+.paymentPixValue {
+  margin: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+
+  color: rgba(0, 0, 0, 0.58);
+}
+.paymentPixDiscount {
+  margin: 0;
+  color: #929292;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+}

react/components/ProductDescription/ProductDescription.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const ProductDescription = () => {
-  return <div>Oaswq</div>;
-};
-
-export { ProductDescription };

store/blocks/pdp/product.jsonc

@@ -79,7 +79,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "50%",
       "rowGap": 0
     }
   },
@@ -88,12 +88,15 @@
   },
   "product-images": {
     "props": {
+      "thumbnailsOrientation": "horizontal",
+
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
-      "displayThumbnailsArrows": false,
+
-      "displayMode": "list"
+      "showPaginationDots": false,
+      "showNavigationArrows": false
     }
   },
   "product-images#descricao": {
@@ -113,22 +116,26 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
+      "product-paymentPix-component",
-      "product-identifier.product",
       "sku-selector",
-      "product-quantity",
+
+      "flex-layout.row#cart",
       "product-assembly-options",
       "product-gifts",
-      "flex-layout.row#buy-button",
       "availability-subscriber",
       "shipping-simulator"
     ]
   },
-
+  "flex-layout.row#cart": {
+    "props": {
+      "blockClass": "cart"
+    },
+    "children": ["product-quantity", "flex-layout.row#buy-button"]
+  },
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -145,9 +152,10 @@
 
   "flex-layout.row#buy-button": {
     "props": {
-      "marginTop": 4,
+      "width": "80%",
-      "marginBottom": 7
+      "blockClass": "buyButton"
     },
+
     "children": ["add-to-cart-button"]
   },
 
@@ -191,7 +199,13 @@
     }
   },
   "tab-list#product": {
-    "children": ["tab-list.item#product1", "tab-list.item#product2"]
+    "children": [
+      "tab-list.item#product1",
+      "tab-list.item#product2",
+      "tab-list.item#product3",
+      "tab-list.item#product4",
+      "tab-list.item#product5"
+    ]
   },
   "tab-list.item#product1": {
     "props": {
@@ -206,8 +220,32 @@
       "label": "Descrição"
     }
   },
+  "tab-list.item#product3": {
+    "props": {
+      "tabId": "product3",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#product4": {
+    "props": {
+      "tabId": "product4",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#product5": {
+    "props": {
+      "tabId": "product5",
+      "label": "Descrição"
+    }
+  },
   "tab-content#product": {
-    "children": ["tab-content.item#product1", "tab-content.item#product2"]
+    "children": [
+      "tab-content.item#product1",
+      "tab-content.item#product2",
+      "tab-content.item#product3",
+      "tab-content.item#product4",
+      "tab-content.item#product5"
+    ]
   },
   "tab-content.item#product1": {
     "children": ["product-images#descricao", "product-description"],
@@ -216,11 +254,29 @@
     }
   },
   "tab-content.item#product2": {
-    "children": ["product-description"],
+    "children": ["product-images#descricao", "product-description"],
     "props": {
       "tabId": "product2"
     }
   },
+  "tab-content.item#product3": {
+    "children": ["product-images#descricao", "product-description"],
+    "props": {
+      "tabId": "product3"
+    }
+  },
+  "tab-content.item#product4": {
+    "children": ["product-images#descricao", "product-description"],
+    "props": {
+      "tabId": "product4"
+    }
+  },
+  "tab-content.item#product5": {
+    "children": ["product-images#descricao", "product-description"],
+    "props": {
+      "tabId": "product5"
+    }
+  },
   "list-context.product-list#shelf": {
     "blocks": ["product-summary.shelf#shelf"],
     "children": ["slider-layout#shelf-products"]

store/interfaces.json

@@ -6,7 +6,7 @@
     "component": "html",
     "composition": "children"
   },
-  "product-payment-component": {
+  "product-paymentPix-component": {
-    "component": "ProductDescription"
+    "component": "PaymentPix"
   }
 }

styles/css/agenciamagma.store-theme.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .html {
   background-color: red;

styles/css/vtex.add-to-cart-button.css

@@ -0,0 +1,10 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */

styles/css/vtex.address-form.css

@@ -0,0 +1,13 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
+.input::placeholder {
+  content: "Digite seu CEP";
+}

styles/css/vtex.breadcrumb.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .homeIcon {
   display: none;
@@ -14,8 +15,3 @@
 .homeLink::after {
   content: "Home";
 }
-
-.link--1 {
-  display: flex;
-  order: -1;
-}

styles/css/vtex.flex-layout.css

@@ -1,98 +1,32 @@
-.flexRowContent--menu-link,
+@charset "UTF-8";
-.flexRowContent--main-header {
+/*
-  padding: 0 0.5rem;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-@media screen and (min-width: 40em) {
+[1200 - 1800] is where our nortal styles apply
-  .flexRowContent--menu-link,
+1800px + : Big desktop
-  .flexRowContent--main-header {
+*/
-    padding: 0 1rem;
+/* Media Query M3 */
-  }
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-}
+/* Grid breakpoints */
-
+.flexRowContent--cart {
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
   display: flex;
-  max-height: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 25px;
 }
-
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) {
-.flexColChild--quickviewDetails:first-child {
+  background-color: black;
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
 }
-
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) {
-.flexColChild--quickviewDetails:last-child {
+  font-size: 0;
-  height: 34% !important;
 }
-
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::after {
-.flexRow--addToCartRow {
+  content: "adicionar à sacola";
-  padding-bottom: 1rem;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #ffffff;
 }

styles/css/vtex.product-identifier.css

@@ -1,3 +1,32 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
 .product-identifier--productReference {
-  margin-bottom: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.product-identifier__label {
+  display: none;
+}
+
+.product-identifier__separator {
+  display: none;
+}
+
+.product-identifier__value {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.48);
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,30 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
+.quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorStepper {
+  background-color: white;
+}
+
+:global(.vtex-numeric-stepper__input) {
+  border-right: none;
+  border-left: none;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  background-color: white;
+}
+
+.quantitySelectorStepper {
+  border: none;
+}

styles/css/vtex.rich-text.css

@@ -6,4 +6,5 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */

styles/css/vtex.store-components.css

@@ -6,7 +6,172 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
-.productDescriptionContainer {
+.container {
-  background: red;
+  max-width: 100%;
+  margin: 0 0 0 0 !important;
+}
+
+.productImageTag {
+  max-height: none !important;
+}
+
+.thumbImg {
+  width: 86%;
+  margin: 0;
+}
+
+.productImagesThumb {
+  height: auto !important;
+}
+
+.productBrand {
+  display: flex;
+  justify-content: flex-end;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue {
+  margin-right: 5px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
+  content: "OUTRAS CORES";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
+  border-radius: 30px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
+  border-radius: 21px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+  content: "OUTROS TAMANHOS:";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+  width: 40px;
+  height: 40px;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 30px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+  width: 40px;
+  height: 40px;
+  border-radius: 30px;
+  padding: 0;
+  margin: auto;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+  padding: 0;
+  margin: auto;
+}
+
+.shippingContainer :global(.vtex-button) {
+  width: 49px;
+  height: 49px;
+  background-color: black;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "Ok";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #ffffff;
+}
+
+.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.shippingContainer {
+  display: flex;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  height: 49px;
+}
+.shippingContainer :global(.vtex-button) {
+  position: relative;
+  right: 127px;
+  top: 27px;
+  width: 49px;
+  height: 49px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  position: relative;
+  left: 70px;
+  top: 8px;
+}
+
+.productDescriptionContainer .productDescriptionTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+}
+.productDescriptionContainer .productDescriptionText {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
 }

styles/css/vtex.tab-layout.css

@@ -1,4 +1,64 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
+.container {
+  margin-bottom: 16px;
+}
+
+.listContainer {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #b9b9b9;
+  margin-bottom: 32px;
+}
+.listContainer .listItem {
+  padding: 0;
+  margin: 0;
+}
+.listContainer .listItem :global(.vtex-button) {
+  background: white;
+  border: none;
+  border-radius: 0;
+}
+.listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #bfbfbf;
+  text-transform: initial;
+}
+.listContainer .listItemActive :global(.vtex-button) {
+  background: white;
+  border-bottom: 2px solid #000000;
+  border-radius: 0;
+}
+.listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #000000;
+  text-transform: initial;
+}
+
 .contentItem {
   display: flex;
   flex-direction: row;
+  gap: 32px;
 }

styles/sass/pages/product/vtex.address-form.scss

@@ -0,0 +1,5 @@
+.input {
+  &::placeholder {
+    content: "Digite seu CEP";
+  }
+}

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

@@ -6,7 +6,3 @@
     content: "Home";
   }
 }
-.link--1 {
-  display: flex;
-  order: -1;
-}

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

@@ -0,0 +1,23 @@
+.flexRowContent--cart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 25px;
+  .flexRow--buyButton {
+    :global(.vtex-button) {
+      background-color: black;
+    }
+    :global(.vtex-button__label) {
+      font-size: 0;
+      &::after {
+        content: "adicionar à sacola";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        color: #ffffff;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+.product-identifier--productReference {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+.product-identifier__label {
+  display: none;
+}
+.product-identifier__separator {
+  display: none;
+}
+.product-identifier__value {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.48);
+}

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

@@ -0,0 +1,20 @@
+.quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorStepper {
+  background-color: white;
+}
+
+:global(.vtex-numeric-stepper__input) {
+  border-right: none;
+  border-left: none;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  background-color: white;
+}
+
+.quantitySelectorStepper {
+  border: none;
+}

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

@@ -1,3 +1,181 @@
-.productDescriptionContainer {
+.container {
-  background: red;
+  max-width: 100%;
+  margin: 0 0 0 0 !important;
+}
+
+.productImageTag {
+  max-height: none !important;
+}
+
+.thumbImg {
+  width: 86%;
+  margin: 0;
+}
+
+.productImagesThumb {
+  height: auto !important;
+}
+.productBrand {
+  display: flex;
+  justify-content: flex-end;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+  .valueWrapper .skuSelectorItemTextValue {
+    margin-right: 5px;
+  }
+
+  .skuSelectorSubcontainer--cor {
+    .skuSelectorName {
+      font-size: 0;
+      &::after {
+        content: "OUTRAS CORES";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+      }
+    }
+    .frameAround {
+      border-radius: 30px;
+    }
+    .skuSelectorItemImageValue,
+    .skuSelectorInternalBox {
+      border-radius: 21px;
+    }
+    .skuSelectorSelectorImageValue {
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+      text-transform: uppercase;
+    }
+  }
+  .skuSelectorSubcontainer--tamanho {
+    .skuSelectorName {
+      font-size: 0;
+      &::after {
+        content: "OUTROS TAMANHOS:";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+      }
+    }
+    .frameAround {
+      width: 40px;
+      height: 40px;
+      top: 0;
+      left: 0;
+      right: 0;
+      border-radius: 30px;
+    }
+
+    .skuSelectorInternalBox {
+      width: 40px;
+      height: 40px;
+      border-radius: 30px;
+      padding: 0;
+      margin: auto;
+    }
+    .skuSelectorItemTextValue {
+      padding: 0;
+      margin: auto;
+    }
+  }
+}
+
+.shippingContainer {
+  :global(.vtex-button) {
+    width: 49px;
+    height: 49px;
+    background-color: black;
+    :global(.vtex-button__label) {
+      font-size: 0;
+      &::after {
+        content: "Ok";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 19px;
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+.shippingContainer {
+  :global(.vtex-input) {
+    :global(.vtex-input__label) {
+      font-size: 0;
+      &::after {
+        content: "CALCULAR FRETE:";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+      }
+    }
+  }
+}
+.shippingContainer {
+  display: flex;
+  :global(.vtex-input-prefix__group) {
+    height: 49px;
+  }
+
+  :global(.vtex-button) {
+    position: relative;
+    right: 127px;
+    top: 27px;
+    width: 49px;
+    height: 49px;
+  }
+  :global(.vtex-address-form__postalCode) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+  :global(.vtex-address-form__postalCode-forgottenURL) {
+    position: relative;
+    left: 70px;
+    top: 8px;
+  }
+}
+
+//Estilização da descrição do produto
+.productDescriptionContainer {
+  .productDescriptionTitle {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    color: #575757;
+  }
+  .productDescriptionText {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+  }
 }

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

@@ -0,0 +1,54 @@
+.container {
+  margin-bottom: 16px;
+}
+.listContainer {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #b9b9b9;
+  margin-bottom: 32px;
+  .listItem {
+    padding: 0;
+    margin: 0;
+    :global(.vtex-button) {
+      background: white;
+      border: none;
+      border-radius: 0;
+      :global(.vtex-button__label) {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 38px;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        color: #bfbfbf;
+        text-transform: initial;
+      }
+    }
+  }
+  .listItemActive {
+    :global(.vtex-button) {
+      background: white;
+      border-bottom: 2px solid #000000;
+      border-radius: 0;
+      :global(.vtex-button__label) {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 38px;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        color: #000000;
+        text-transform: initial;
+      }
+    }
+  }
+}
+.contentItem {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+}

styles/sass/utils/_vars.scss

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+
 $color-black: #292929;
 
 $color-white: #fff;
@@ -14,18 +16,18 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+  xs: 0,
-	cstm: 400,
+  cstm: 400,
-	sm: 576px,
+  sm: 576px,
-	md: 768px,
+  md: 768px,
-	lg: 992px,
+  lg: 992px,
-	xl: 1200px
+  xl: 1200px,
 ) !default;
 
 $z-index: (
-	level1: 5,
+  level1: 5,
-	level2: 10,
+  level2: 10,
-	level3: 15,
+  level3: 15,
-	level4: 20,
+  level4: 20,
-	level5: 25
+  level5: 25,
 ) !default;