From f3951d62b20871540d5706674483c1a6aaad2952 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 2 Feb 2023 16:04:52 -0300
Subject: [PATCH 01/27] =?UTF-8?q?feat:=20Adicionado=20a=20descri=C3=A7?=
 =?UTF-8?q?=C3=A3o=20de=20produto=20com=20a=20aba?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manifest.json                                 |   1 -
 package.json                                  |  19 +-
 react/ProductDescription.tsx                  |   3 +
 .../ProductDescription/ProductDescription.tsx |   7 +
 store/blocks/pdp/product.jsonc                |  66 +++-
 store/interfaces.json                         |   3 +
 styles/css/agenciamagma.store-theme.css       |   2 +-
 styles/css/vtex.breadcrumb.css                |  16 +
 styles/css/vtex.store-components.css          |   4 +-
 styles/css/vtex.tab-layout.css                |   4 +
 .../product/agenciamagma.store-theme.scss     |   3 +-
 .../sass/pages/product/vtex.breadcrumb.scss   |   8 +
 .../pages/product/vtex.store-components.scss  |   6 +-
 yarn.lock                                     | 359 +++++++++++++++++-
 14 files changed, 466 insertions(+), 35 deletions(-)
 create mode 100644 react/ProductDescription.tsx
 create mode 100644 react/components/ProductDescription/ProductDescription.tsx
 create mode 100644 styles/css/vtex.breadcrumb.css
 create mode 100644 styles/css/vtex.tab-layout.css
 create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss

diff --git a/manifest.json b/manifest.json
index 9ee3cc5..a2cde0d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",
diff --git a/package.json b/package.json
index 4b65062..b5eed60 100644
--- a/package.json
+++ b/package.json
@@ -16,28 +16,31 @@
   "keywords": [],
   "author": "",
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vtex/prettier-config": "0.1.4",
+    "concurrently": "^6.0.0",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
+    "eslint-config-vtex": "12.3.2",
+    "eslint-config-vtex-react": "^6.2.1",
     "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.23.1",
     "glob": "^7.1.6",
     "gulp": "^4.0.2",
     "gulp-concat": "^2.6.1",
     "gulp-sass": "^5.0.0",
     "gulp-wait": "0.0.2",
-    "sass": "^1.37.5",
-    "concurrently": "^6.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vtex/prettier-config": "0.1.4",
-    "eslint-config-vtex": "12.3.2",
-    "eslint-config-vtex-react": "^6.2.1",
-    "eslint-plugin-react": "^7.23.1",
     "husky": "^5.2.0",
     "lint-staged": "10.1.1",
     "prettier": "2.0.2",
+    "sass": "^1.37.5",
     "typescript": "3.8.3"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.7",
     "husky": "^5.2.0",
     "react": "^17.0.2"
   }
diff --git a/react/ProductDescription.tsx b/react/ProductDescription.tsx
new file mode 100644
index 0000000..9a2edfb
--- /dev/null
+++ b/react/ProductDescription.tsx
@@ -0,0 +1,3 @@
+import { ProductDescription } from "./components/ProductDescription/ProductDescription";
+
+export default ProductDescription;
diff --git a/react/components/ProductDescription/ProductDescription.tsx b/react/components/ProductDescription/ProductDescription.tsx
new file mode 100644
index 0000000..ca68644
--- /dev/null
+++ b/react/components/ProductDescription/ProductDescription.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const ProductDescription = () => {
+  return <div>Oaswq</div>;
+};
+
+export { ProductDescription };
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a916dc..17b739f 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -5,7 +5,9 @@
       "condition-layout.product#availability",
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
-      "product-specification-group#table",
+
+      "tab-layout#product",
+
       "shelf.relatedProducts",
       "product-questions-and-answers"
     ]
@@ -19,7 +21,7 @@
     "children": ["breadcrumb"]
   },
   "flex-layout.row#specifications-title": {
-    "children": ["rich-text#specifications"]
+    "children": []
   },
   "rich-text#specifications": {
     "props": {
@@ -30,7 +32,7 @@
     "props": {
       "marginBottom": 7
     },
-    "children": ["product-description"]
+    "children": []
   },
   "condition-layout.product#availability": {
     "props": {
@@ -91,7 +93,18 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "displayThumbnailsArrows": false,
+      "displayMode": "list"
+    }
+  },
+  "product-images#descricao": {
+    "props": {
+      "aspectRatio": {
+        "desktop": "auto",
+        "phone": "16:9"
+      },
+      "displayThumbnailsArrows": false,
+      "displayMode": "first-image"
     }
   },
   "flex-layout.col#right-col": {
@@ -113,8 +126,7 @@
       "product-gifts",
       "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
-      "share#default"
+      "shipping-simulator"
     ]
   },
 
@@ -172,14 +184,42 @@
     "children": ["availability-subscriber"]
   },
 
-  "share#default": {
+  "tab-layout#product": {
+    "children": ["tab-list#product", "tab-content#product"],
     "props": {
-      "social": {
-        "Facebook": true,
-        "WhatsApp": true,
-        "Twitter": false,
-        "Pinterest": true
-      }
+      "blockClass": "product",
+      "defaultActiveTabId": "product1"
+    }
+  },
+  "tab-list#product": {
+    "children": ["tab-list.item#product1", "tab-list.item#product2"]
+  },
+  "tab-list.item#product1": {
+    "props": {
+      "tabId": "product1",
+      "label": "Descrição",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#product2": {
+    "props": {
+      "tabId": "product2",
+      "label": "Descrição"
+    }
+  },
+  "tab-content#product": {
+    "children": ["tab-content.item#product1", "tab-content.item#product2"]
+  },
+  "tab-content.item#product1": {
+    "children": ["product-images#descricao", "product-description"],
+    "props": {
+      "tabId": "product1"
+    }
+  },
+  "tab-content.item#product2": {
+    "children": ["product-description"],
+    "props": {
+      "tabId": "product2"
     }
   }
 }
diff --git a/store/interfaces.json b/store/interfaces.json
index c4b2ac4..f5b5636 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -5,5 +5,8 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "product-description-component": {
+    "component": "ProductDescription"
   }
 }
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index 5e37ba5..1dd7d62 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/agenciamagma.store-theme.css
@@ -12,5 +12,5 @@
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: blue;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
new file mode 100644
index 0000000..58f9518
--- /dev/null
+++ b/styles/css/vtex.breadcrumb.css
@@ -0,0 +1,16 @@
+/*
+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 */
+.homeIcon {
+  display: none;
+}
+
+.homeLink::after {
+  content: "Home";
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f8fa6cb..0972b45 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -9,4 +9,6 @@
 /* Grid breakpoints */
 .newsletter {
   background: red;
-}
\ No newline at end of file
+}
+.productImagesContainer {
+}
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
new file mode 100644
index 0000000..ae31ca0
--- /dev/null
+++ b/styles/css/vtex.tab-layout.css
@@ -0,0 +1,4 @@
+.contentItem {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
index ea7d5b9..2afcc5b 100644
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ b/styles/sass/pages/product/agenciamagma.store-theme.scss
@@ -3,6 +3,5 @@
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: blue;
 }
-
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
new file mode 100644
index 0000000..80c6236
--- /dev/null
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -0,0 +1,8 @@
+.homeIcon {
+  display: none;
+}
+.homeLink {
+  &::after {
+    content: "Home";
+  }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 36d0f22..b064643 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +1,3 @@
-.newsletter{
-    background: red;
-}
\ No newline at end of file
+.productImageTag--main {
+  display: none;
+}
diff --git a/yarn.lock b/yarn.lock
index 9ca681c..518ab58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,7 +16,24 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/helper-validator-identifier@^7.18.6":
+"@babel/helper-module-imports@^7.16.7":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-plugin-utils@^7.18.6":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
+  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
+
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
+"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
   version "7.19.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
@@ -30,6 +47,20 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/plugin-syntax-jsx@^7.17.12":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.20.13"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
+  integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/runtime@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
@@ -37,6 +68,123 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/types@^7.18.6":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f"
+  integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
+"@emotion/babel-plugin@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz#65fa6e1790ddc9e23cc22658a4c5dea423c55c3c"
+  integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.17.12"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.1"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.1.3"
+
+"@emotion/cache@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12"
+  integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/sheet" "^1.2.1"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    stylis "4.1.3"
+
+"@emotion/hash@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
+
+"@emotion/is-prop-valid@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/react@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.5.tgz#95fff612a5de1efa9c0d535384d3cfa115fe175d"
+  integrity sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.5"
+    "@emotion/cache" "^11.10.5"
+    "@emotion/serialize" "^1.1.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
+  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/unitless" "^0.8.0"
+    "@emotion/utils" "^1.2.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
+  integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
+
+"@emotion/styled@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.5.tgz#1fe7bf941b0909802cb826457e362444e7e96a79"
+  integrity sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.5"
+    "@emotion/is-prop-valid" "^1.2.0"
+    "@emotion/serialize" "^1.1.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@emotion/utils" "^1.2.0"
+
+"@emotion/unitless@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
+  integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
+
+"@emotion/utils@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
+  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
+
+"@emotion/weak-memoize@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
+  integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -66,6 +214,92 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@mui/base@5.0.0-alpha.116":
+  version "5.0.0-alpha.116"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.116.tgz#c167a66b7232088b4bcd97ba36096a357c6e4fb9"
+  integrity sha512-VwhifWdrfHc4/ZdqRZ4Gf+7P39sovNN24By1YVZdvJ9fvp0Sr8sNftGUCjYXXz+xCXVBQDXvhfxMwZrj2MvJvA==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    "@emotion/is-prop-valid" "^1.2.0"
+    "@mui/types" "^7.2.3"
+    "@mui/utils" "^5.11.7"
+    "@popperjs/core" "^2.11.6"
+    clsx "^1.2.1"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
+"@mui/core-downloads-tracker@^5.11.7":
+  version "5.11.7"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.7.tgz#b3a3aad64c6b69f6165d7a00c0d9cfeacbe357a2"
+  integrity sha512-lZgX7XQTk0zVcpwEa80r+T4y09dosnUxWvFPSikU/2Hh5wnyNOek8WfJwGCNsaRiXJHMi5eHY+z8oku4u5lgNw==
+
+"@mui/material@^5.11.7":
+  version "5.11.7"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.11.7.tgz#d460c7239013a57cc2aa3d2bbe14ba875b29d7cb"
+  integrity sha512-wDv7Pc6kMe9jeWkmCLt4JChd1lPc2u23JQHpB35L2VwQowpNFoDfIwqi0sYCnZTMKlRc7lza8LqwSwHl2G52Rw==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    "@mui/base" "5.0.0-alpha.116"
+    "@mui/core-downloads-tracker" "^5.11.7"
+    "@mui/system" "^5.11.7"
+    "@mui/types" "^7.2.3"
+    "@mui/utils" "^5.11.7"
+    "@types/react-transition-group" "^4.4.5"
+    clsx "^1.2.1"
+    csstype "^3.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.11.7":
+  version "5.11.7"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.11.7.tgz#e92b87d6ea68ae5a23d0f0d9d248361b889a98db"
+  integrity sha512-XzRTSZdc8bhuUdjablTNv3kFkZ/XIMlKkOqqJCU0G8W3tWGXpau2DXkafPd1ddjPhF9zF3qLKNGgKCChYItjgA==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    "@mui/utils" "^5.11.7"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.11.0":
+  version "5.11.0"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.11.0.tgz#79afb30c612c7807c4b77602cf258526d3997c7b"
+  integrity sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ==
+  dependencies:
+    "@babel/runtime" "^7.20.6"
+    "@emotion/cache" "^11.10.5"
+    csstype "^3.1.1"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.11.7":
+  version "5.11.7"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.11.7.tgz#5e550c621733a18cd437678f11dcd1c3468129d0"
+  integrity sha512-uGB6hBxGlAdlmbLdTtUZYNPXkgQGGnKxHdkRATqsu7UlCxNsc/yS5NCEWy/3c4pnelD1LDLD39WrntP9mwhfkQ==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    "@mui/private-theming" "^5.11.7"
+    "@mui/styled-engine" "^5.11.0"
+    "@mui/types" "^7.2.3"
+    "@mui/utils" "^5.11.7"
+    clsx "^1.2.1"
+    csstype "^3.1.1"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.3":
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.3.tgz#06faae1c0e2f3a31c86af6f28b3a4a42143670b9"
+  integrity sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==
+
+"@mui/utils@^5.11.7":
+  version "5.11.7"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.11.7.tgz#a343a5d375b4140c875bf4c96825c1a148994800"
+  integrity sha512-8uyNDeVHZA804Ego20Erv8TpxlbqTe/EbhTI2H1UYr4/RiIbBprat8W4Qqr2UQIsC/b3DLz+0RQ6R/E5BxEcLA==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    "@types/prop-types" "^15.7.5"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -87,6 +321,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.11.6":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301"
@@ -114,6 +353,39 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/prop-types@*", "@types/prop-types@^15.7.5":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
+  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-transition-group@^4.4.5":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
+  integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "18.0.27"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.27.tgz#d9425abe187a00f8a5ec182b010d4fd9da703b71"
+  integrity sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@typescript-eslint/eslint-plugin@^2.17.0":
   version "2.34.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9"
@@ -546,6 +818,15 @@ axobject-query@^3.1.1:
   dependencies:
     deep-equal "^2.0.5"
 
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 bach@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/bach/-/bach-1.2.0.tgz#4b3ce96bf27134f79a1b414a51c14e34c3bd9880"
@@ -807,6 +1088,11 @@ cloneable-readable@^1.0.0:
     process-nextick-args "^2.0.0"
     readable-stream "^2.3.5"
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -943,6 +1229,17 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -952,6 +1249,11 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+csstype@^3.0.2, csstype@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+
 d@1, d@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
@@ -1107,6 +1409,14 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
@@ -1757,6 +2067,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -2227,6 +2542,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hoist-non-react-statics@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 homedir-polyfill@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
@@ -3526,7 +3848,7 @@ progress@^2.0.0:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -3570,11 +3892,26 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -3754,7 +4091,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.4.0:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.4.0:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -3986,7 +4323,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@^0.5.1, source-map@^0.5.6:
+source-map@^0.5.1, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
@@ -4189,6 +4526,11 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+stylis@4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
+  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -4278,6 +4620,11 @@ to-absolute-glob@^2.0.0:
     is-absolute "^1.0.0"
     is-negated-glob "^1.0.0"
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -4661,7 +5008,7 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.7.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==

From f53c8e647441fd8f32cf5d1010981f3ebaaed313 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Fri, 3 Feb 2023 16:30:58 -0300
Subject: [PATCH 02/27] =?UTF-8?q?feat:=20Adicionado=20o=20conte=C3=BAdo=20?=
 =?UTF-8?q?das=20abas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 store/blocks/pdp/product.jsonc                       | 3 ---
 styles/css/vtex.store-components.css                 | 7 +------
 styles/sass/pages/product/vtex.store-components.scss | 3 ---
 3 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 17b739f..0f4c222 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -5,10 +5,7 @@
       "condition-layout.product#availability",
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
-
       "tab-layout#product",
-
-      "shelf.relatedProducts",
       "product-questions-and-answers"
     ]
   },
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 0972b45..34c4328 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -6,9 +6,4 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
-.newsletter {
-  background: red;
-}
-.productImagesContainer {
-}
+/* Grid breakpoints */
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index b064643..e69de29 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +0,0 @@
-.productImageTag--main {
-  display: none;
-}

From 076be6e53385348094a1ba2876c1a6ee7850ae0c Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Fri, 3 Feb 2023 18:11:08 -0300
Subject: [PATCH 03/27] feat: Adicionado shelf

---
 store/blocks/pdp/product.jsonc                | 22 ++++++++++++++
 .../product-summary-list.jsonc                | 30 +++++--------------
 .../product-summary/product-summary.jsonc     |  4 +--
 styles/css/vtex.breadcrumb.css                |  5 ++++
 styles/css/vtex.store-components.css          |  5 +++-
 .../sass/pages/product/vtex.breadcrumb.scss   |  4 +++
 .../pages/product/vtex.store-components.scss  |  3 ++
 7 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 0f4c222..fa56ba1 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -6,6 +6,8 @@
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
       "tab-layout#product",
+      "list-context.product-list#shelf",
+      "newsletter",
       "product-questions-and-answers"
     ]
   },
@@ -218,5 +220,25 @@
     "props": {
       "tabId": "product2"
     }
+  },
+  "list-context.product-list#shelf": {
+    "blocks": ["product-summary.shelf#shelf"],
+    "children": ["slider-layout#shelf-products"]
+  },
+  "product-summary.shelf#shelf": {
+    "children": ["product-summary-image#shelf", "product-summary-price"]
+  },
+  "slider-layout#shelf-products": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 1,
+        "phone": 1
+      },
+      "infinite": true,
+      "showNavigationArrows": "desktopOnly",
+      "blockClass": "carousel"
+    },
+    "children": []
   }
 }
diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc
index cfc3226..971cd70 100644
--- a/store/blocks/product-summary/product-summary-list.jsonc
+++ b/store/blocks/product-summary/product-summary-list.jsonc
@@ -9,14 +9,10 @@
     ]
   },
   "responsive-layout.desktop#productSummaryList": {
-    "children": [
-      "flex-layout.row#summaryListDesktop"
-    ]
+    "children": ["flex-layout.row#summaryListDesktop"]
   },
   "responsive-layout.mobile#productSummaryList": {
-    "children": [
-      "flex-layout.row#summaryListMobile"
-    ]
+    "children": ["flex-layout.row#summaryListMobile"]
   },
   "product-price-savings#summaryPercentage": {
     "props": {
@@ -36,7 +32,7 @@
     ]
   },
   "flex-layout.row#summaryListDesktop": {
-    "props":{
+    "props": {
       "fullWidth": true,
       "colSizing": "auto",
       "blockClass": "summaryListDesktop"
@@ -69,9 +65,7 @@
     ]
   },
   "flex-layout.row#productSpecifications": {
-    "children": [
-      "product-specification-group#summary"
-    ]
+    "children": ["product-specification-group#summary"]
   },
   "product-summary-name#summaryListDesktop": {
     "props": {
@@ -100,18 +94,13 @@
       "colSizing": "auto",
       "colGap": 5
     },
-    "children": [
-      "add-to-cart-button",
-      "flex-layout.row#buyNowButton"
-    ]
+    "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
   },
   "flex-layout.row#buyNowButton": {
     "props": {
       "blockClass": "buyNowButton"
     },
-    "children": [
-      "add-to-cart-button#buyNow"
-    ]
+    "children": ["add-to-cart-button#buyNow"]
   },
 
   "add-to-cart-button#buyNow": {
@@ -123,10 +112,7 @@
     }
   },
   "flex-layout.col#priceSummaryListDesktop": {
-    "children": [
-      "product-selling-price#summary",
-      "product-list-price#summary"
-    ]
+    "children": ["product-selling-price#summary", "product-list-price#summary"]
   },
   "stack-layout#summaryListDesktop": {
     "children": [
@@ -144,7 +130,7 @@
     }
   },
   "flex-layout.row#summaryListMobile": {
-    "props":{
+    "props": {
       "preserveLayoutOnMobile": true,
       "colSizing": "auto",
       "blockClass": "summaryListMobile",
diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc
index afabee3..bb93cc8 100644
--- a/store/blocks/product-summary/product-summary.jsonc
+++ b/store/blocks/product-summary/product-summary.jsonc
@@ -81,9 +81,7 @@
   },
   "product-price-savings#summary": {
     "props": {
-      "markers": [
-        "discount"
-      ],
+      "markers": ["discount"],
       "blockClass": "summary"
     }
   }
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 58f9518..9964bda 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -13,4 +13,9 @@
 
 .homeLink::after {
   content: "Home";
+}
+
+.link--1 {
+  display: flex;
+  order: -1;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 34c4328..3533ae1 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -6,4 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
\ No newline at end of file
+/* Grid breakpoints */
+.productDescriptionContainer {
+  background: red;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 80c6236..0dd25c0 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -6,3 +6,7 @@
     content: "Home";
   }
 }
+.link--1 {
+  display: flex;
+  order: -1;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index e69de29..926f0da 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -0,0 +1,3 @@
+.productDescriptionContainer {
+  background: red;
+}

From e230a4022da7feb5423e3fc649b0885537367552 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Sat, 4 Feb 2023 18:09:48 -0300
Subject: [PATCH 04/27] feat: Adicionado componente custom

---
 store/interfaces.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/store/interfaces.json b/store/interfaces.json
index f5b5636..714e4e6 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -6,7 +6,7 @@
     "component": "html",
     "composition": "children"
   },
-  "product-description-component": {
+  "product-payment-component": {
     "component": "ProductDescription"
   }
 }

From fd8ebcf90a8af35c639234f571d25591c492f8da Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Sat, 4 Feb 2023 19:20:18 -0300
Subject: [PATCH 05/27] feat: Adicionado o componente personalizado do pix

---
 react/PaymentPix.tsx                          |  3 +++
 react/ProductDescription.tsx                  |  3 ---
 react/components/PaymentPix/PaymentPix.tsx    | 23 +++++++++++++++++++
 .../ProductDescription/ProductDescription.tsx |  7 ------
 store/blocks/pdp/product.jsonc                |  3 +++
 store/interfaces.json                         |  4 ++--
 styles/css/vtex.breadcrumb.css                |  5 ----
 styles/css/vtex.store-components.css          |  5 ++--
 .../sass/pages/product/vtex.breadcrumb.scss   |  4 ----
 .../pages/product/vtex.store-components.scss  |  3 ++-
 10 files changed, 36 insertions(+), 24 deletions(-)
 create mode 100644 react/PaymentPix.tsx
 delete mode 100644 react/ProductDescription.tsx
 create mode 100644 react/components/PaymentPix/PaymentPix.tsx
 delete mode 100644 react/components/ProductDescription/ProductDescription.tsx

diff --git a/react/PaymentPix.tsx b/react/PaymentPix.tsx
new file mode 100644
index 0000000..1eb71bb
--- /dev/null
+++ b/react/PaymentPix.tsx
@@ -0,0 +1,3 @@
+import { PaymentPix } from "./components/PaymentPix/PaymentPix";
+
+export default PaymentPix;
diff --git a/react/ProductDescription.tsx b/react/ProductDescription.tsx
deleted file mode 100644
index 9a2edfb..0000000
--- a/react/ProductDescription.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ProductDescription } from "./components/ProductDescription/ProductDescription";
-
-export default ProductDescription;
diff --git a/react/components/PaymentPix/PaymentPix.tsx b/react/components/PaymentPix/PaymentPix.tsx
new file mode 100644
index 0000000..60bf463
--- /dev/null
+++ b/react/components/PaymentPix/PaymentPix.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+const PaymentPix = () => {
+  const product = useProduct();
+  const pricePix = (
+    (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9
+  ).toFixed(2);
+  {
+    /*const imagePix =*/
+  }
+
+  const convertPrice = pricePix.toString().replace(".", ",");
+
+  return (
+    <div>
+      <p>R$ {convertPrice}</p>
+      <p>10% de desconto</p>
+    </div>
+  );
+};
+
+export { PaymentPix };
diff --git a/react/components/ProductDescription/ProductDescription.tsx b/react/components/ProductDescription/ProductDescription.tsx
deleted file mode 100644
index ca68644..0000000
--- a/react/components/ProductDescription/ProductDescription.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const ProductDescription = () => {
-  return <div>Oaswq</div>;
-};
-
-export { ProductDescription };
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index fa56ba1..fc0558e 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -2,7 +2,9 @@
   "store.product": {
     "children": [
       "html#breadcrumb",
+
       "condition-layout.product#availability",
+
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
       "tab-layout#product",
@@ -117,6 +119,7 @@
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
+      "product-paymentPix-component",
       "product-separator",
       "product-identifier.product",
       "sku-selector",
diff --git a/store/interfaces.json b/store/interfaces.json
index 714e4e6..1e7bec4 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -6,7 +6,7 @@
     "component": "html",
     "composition": "children"
   },
-  "product-payment-component": {
-    "component": "ProductDescription"
+  "product-paymentPix-component": {
+    "component": "PaymentPix"
   }
 }
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 9964bda..58f9518 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -13,9 +13,4 @@
 
 .homeLink::after {
   content: "Home";
-}
-
-.link--1 {
-  display: flex;
-  order: -1;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 3533ae1..b00a4d4 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -7,6 +7,7 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.productDescriptionContainer {
+/*.productDescriptionContainer {
   background: red;
-}
\ No newline at end of file
+}
+*/
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 0dd25c0..80c6236 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -6,7 +6,3 @@
     content: "Home";
   }
 }
-.link--1 {
-  display: flex;
-  order: -1;
-}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 926f0da..4f63d46 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +1,4 @@
-.productDescriptionContainer {
+/*.productDescriptionContainer {
   background: red;
 }
+*/

From f07d5fa515ce18dc63c06fba76eaac1ce88c5618 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Sun, 5 Feb 2023 15:30:39 -0300
Subject: [PATCH 06/27] feat: Adicionado fonte das letras

---
 styles/sass/utils/_vars.scss | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index daf3adb..4c6da1c 100644
--- a/styles/sass/utils/_vars.scss
+++ b/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,
-	cstm: 400,
-	sm: 576px,
-	md: 768px,
-	lg: 992px,
-	xl: 1200px
+  xs: 0,
+  cstm: 400,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
 ) !default;
 
 $z-index: (
-	level1: 5,
-	level2: 10,
-	level3: 15,
-	level4: 20,
-	level5: 25
+  level1: 5,
+  level2: 10,
+  level3: 15,
+  level4: 20,
+  level5: 25,
 ) !default;

From 3341a993328273a5f493a53ca11db0492dc04418 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Mon, 6 Feb 2023 11:50:38 -0300
Subject: [PATCH 07/27] feat: Adicionado o estilo das imagens do display
 principal

---
 store/blocks/pdp/product.jsonc                |  14 ++-
 styles/configs/font-faces.css                 |   0
 styles/css/agenciamagma.store-theme.css       |   1 +
 styles/css/vtex.breadcrumb.css                |   1 +
 styles/css/vtex.flex-layout.css               | 108 ++----------------
 styles/css/vtex.rich-text.css                 |   1 +
 styles/css/vtex.store-components.css          |  20 +++-
 .../sass/pages/product/vtex.flex-layout.scss  |   0
 .../pages/product/vtex.store-components.scss  |  19 ++-
 9 files changed, 54 insertions(+), 110 deletions(-)
 create mode 100644 styles/configs/font-faces.css
 create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index fc0558e..f73fc24 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -81,7 +81,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "50%",
       "rowGap": 0
     }
   },
@@ -90,12 +90,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": {
@@ -115,13 +118,12 @@
     },
     "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-paymentPix-component",
       "product-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",
diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css
new file mode 100644
index 0000000..e69de29
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index 1dd7d62..689e9c1 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/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;
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 58f9518..dc77e8c 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/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;
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index a7c5732..f5ba8ae 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -1,98 +1,10 @@
-.flexRowContent--menu-link,
-.flexRowContent--main-header {
-  padding: 0 0.5rem;
-}
-
-@media screen and (min-width: 40em) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 1rem;
-  }
-}
-
-@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%;
-}
-
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 34c4328..f5ba8ae 100644
--- a/styles/css/vtex.rich-text.css
+++ b/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 */
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index b00a4d4..0d9af06 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -6,8 +6,22 @@
 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 {
-  background: red;
+.container {
+  max-width: 100%;
+  margin: 0 0 0 0 !important;
 }
-*/
\ No newline at end of file
+
+.productImageTag {
+  max-height: none !important;
+}
+
+.thumbImg {
+  width: 86%;
+  margin: 0;
+}
+
+.productImagesThumb {
+  height: auto !important;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
new file mode 100644
index 0000000..e69de29
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 4f63d46..5d9d0aa 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,4 +1,17 @@
-/*.productDescriptionContainer {
-  background: red;
+.container {
+  max-width: 100%;
+  margin: 0 0 0 0 !important;
+}
+
+.productImageTag {
+  max-height: none !important;
+}
+
+.thumbImg {
+  width: 86%;
+  margin: 0;
+}
+
+.productImagesThumb {
+  height: auto !important;
 }
-*/

From 5c9b7826b05c5010d8a84b53bbcd8a0db936cc9b Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Mon, 6 Feb 2023 14:41:25 -0300
Subject: [PATCH 08/27] feat: Adicionado os estilos do pagamento pix

---
 .vscode/settings.json                      | 11 +++++-
 react/components/PaymentPix/PaymentPix.tsx | 21 ++++++++----
 react/components/PaymentPix/styles.css     | 39 ++++++++++++++++++++++
 3 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 react/components/PaymentPix/styles.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 04540ca..bac992e 100644
--- a/.vscode/settings.json
+++ b/.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": {}
 }
diff --git a/react/components/PaymentPix/PaymentPix.tsx b/react/components/PaymentPix/PaymentPix.tsx
index 60bf463..fe6c855 100644
--- a/react/components/PaymentPix/PaymentPix.tsx
+++ b/react/components/PaymentPix/PaymentPix.tsx
@@ -1,21 +1,30 @@
 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 =*/
-  }
+
+  const imagePix =
+    "https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png";
 
   const convertPrice = pricePix.toString().replace(".", ",");
 
   return (
-    <div>
-      <p>R$ {convertPrice}</p>
-      <p>10% de desconto</p>
+    <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>
   );
 };
diff --git a/react/components/PaymentPix/styles.css b/react/components/PaymentPix/styles.css
new file mode 100644
index 0000000..23a2810
--- /dev/null
+++ b/react/components/PaymentPix/styles.css
@@ -0,0 +1,39 @@
+.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;
+  align-items: center;
+}
+.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;
+}

From f5bdaa9afa660ed61b60a81e35f16661c09c208a Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Mon, 6 Feb 2023 16:10:17 -0300
Subject: [PATCH 09/27] feat: Adicionado o estilo do nome do produto

---
 react/components/PaymentPix/styles.css        |  1 -
 styles/css/vtex.product-identifier.css        | 31 ++++++++++++++++++-
 styles/css/vtex.store-components.css          | 10 ++++++
 .../product/vtex.product-identifier.scss      | 19 ++++++++++++
 .../pages/product/vtex.store-components.scss  |  9 ++++++
 5 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss

diff --git a/react/components/PaymentPix/styles.css b/react/components/PaymentPix/styles.css
index 23a2810..20ec1da 100644
--- a/react/components/PaymentPix/styles.css
+++ b/react/components/PaymentPix/styles.css
@@ -16,7 +16,6 @@
 .paymentPixText {
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 .paymentPixValue {
   margin: 0;
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index e3aa6d5..128134d 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/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);
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 0d9af06..4eaa102 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -24,4 +24,14 @@
 
 .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;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
new file mode 100644
index 0000000..fec8794
--- /dev/null
+++ b/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);
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 5d9d0aa..4e880ed 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -15,3 +15,12 @@
 .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;
+}

From 18cd2fd0759d9c2ba5e3cc8974542a33e3cbbfdc Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Wed, 8 Feb 2023 11:51:57 -0300
Subject: [PATCH 10/27] feat: Adicionado o estilo dos tamanhos e cores

---
 store/blocks/pdp/product.jsonc                |   1 -
 styles/css/vtex.add-to-cart-button.css        |  10 ++
 styles/css/vtex.product-quantity.css          |  13 ++
 styles/css/vtex.store-components.css          | 113 +++++++++++++++++
 .../product/vtex.add-to-cart-button.scss      |   2 +
 .../pages/product/vtex.product-quantity.scss  |   3 +
 .../pages/product/vtex.store-components.scss  | 118 ++++++++++++++++++
 7 files changed, 259 insertions(+), 1 deletion(-)
 create mode 100644 styles/css/vtex.add-to-cart-button.css
 create mode 100644 styles/css/vtex.product-quantity.css
 create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss
 create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index f73fc24..be7db66 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -123,7 +123,6 @@
       "flex-layout.row#selling-price",
       "product-installments",
       "product-paymentPix-component",
-      "product-separator",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",
diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css
new file mode 100644
index 0000000..f5ba8ae
--- /dev/null
+++ b/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 */
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
new file mode 100644
index 0000000..2f1d220
--- /dev/null
+++ b/styles/css/vtex.product-quantity.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 */
+.quantitySelectorTitle {
+  display: none;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 4eaa102..3c8f295 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -34,4 +34,117 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
+} /*
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+  .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;
+      }
+    }
+    .skuSelectorSelectorImageValue {
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+      text-transform: uppercase;
+    }/*
+    .frame-around {
+      border-radius: 30px;
+    }
+    .skuSelectorItemImageValue,
+    .skuSelectorInternalBox {
+      border-radius: 21px;
+    }
+  }
+  .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;
+      }
+    }
+    .frame-around {
+      border-radius: 30px;
+    }
+
+    .skuSelectorInternalBox {
+      border-radius: 30px;
+    }
+  }
+}
+*/
+.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--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;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss
new file mode 100644
index 0000000..f627ffe
--- /dev/null
+++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss
@@ -0,0 +1,2 @@
+.buttonText {
+}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
new file mode 100644
index 0000000..dd527e9
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -0,0 +1,3 @@
+.quantitySelectorTitle {
+  display: none;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 4e880ed..8f4ebd4 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -23,4 +23,122 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
+} /*
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+  .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;
+      }
+    }
+    .skuSelectorSelectorImageValue {
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+      text-transform: uppercase;
+    }/*
+    .frame-around {
+      border-radius: 30px;
+    }
+    .skuSelectorItemImageValue,
+    .skuSelectorInternalBox {
+      border-radius: 21px;
+    }
+  }
+  .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;
+      }
+    }
+    .frame-around {
+      border-radius: 30px;
+    }
+
+    .skuSelectorInternalBox {
+      border-radius: 30px;
+    }
+  }
+}
+*/
+.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;
+    }
+  }
+  .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;
+    }
+  }
 }

From 0abdeaba4fd9ef1c1744b9ac725ee7460a59d232 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Wed, 8 Feb 2023 17:54:32 -0300
Subject: [PATCH 11/27] =?UTF-8?q?feat:=20Adicionado=20o=20estilo=20do=20ad?=
 =?UTF-8?q?icionar=20=C3=A0=20sacola?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 store/blocks/pdp/product.jsonc                |  19 +--
 styles/css/vtex.flex-layout.css               |  24 +++-
 styles/css/vtex.product-quantity.css          |  17 +++
 styles/css/vtex.store-components.css          | 107 ++++++++--------
 .../product/vtex.add-to-cart-button.scss      |   2 -
 .../sass/pages/product/vtex.flex-layout.scss  |  23 ++++
 .../pages/product/vtex.product-quantity.scss  |  17 +++
 .../pages/product/vtex.store-components.scss  | 114 +++++++++---------
 8 files changed, 201 insertions(+), 122 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index be7db66..b41d781 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -2,9 +2,7 @@
   "store.product": {
     "children": [
       "html#breadcrumb",
-
       "condition-layout.product#availability",
-
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
       "tab-layout#product",
@@ -124,15 +122,21 @@
       "product-installments",
       "product-paymentPix-component",
       "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
@@ -149,9 +153,10 @@
 
   "flex-layout.row#buy-button": {
     "props": {
-      "marginTop": 4,
-      "marginBottom": 7
+      "width": "80%",
+      "blockClass": "buyButton"
     },
+
     "children": ["add-to-cart-button"]
   },
 
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index f5ba8ae..c807690 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -7,4 +8,25 @@
 */
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-/* Grid breakpoints */
\ No newline at end of file
+/* Grid breakpoints */
+.flexRowContent--cart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 25px;
+}
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) {
+  background-color: black;
+}
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) {
+  font-size: 0;
+}
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::after {
+  content: "adicionar à sacola";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #ffffff;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index 2f1d220..b5b35cc 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -10,4 +10,21 @@
 /* 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;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 3c8f295..8ea10f1 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -34,63 +34,8 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-} /*
-.skuSelectorContainer {
-  display: flex;
-  flex-direction: column-reverse;
-  .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;
-      }
-    }
-    .skuSelectorSelectorImageValue {
-      font-family: "Open Sans";
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 19px;
-      color: #929292;
-      text-transform: uppercase;
-    }/*
-    .frame-around {
-      border-radius: 30px;
-    }
-    .skuSelectorItemImageValue,
-    .skuSelectorInternalBox {
-      border-radius: 21px;
-    }
-  }
-  .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;
-      }
-    }
-    .frame-around {
-      border-radius: 30px;
-    }
-
-    .skuSelectorInternalBox {
-      border-radius: 30px;
-    }
-  }
 }
-*/
+
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
@@ -117,6 +62,15 @@
 .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;
 }
@@ -147,4 +101,45 @@
 .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";
+  color: white;
+  font-size: 10px;
+}
+
+.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: 49px;
+  top: 27px;
+  width: 49px;
+  height: 49px;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss
index f627ffe..e69de29 100644
--- a/styles/sass/pages/product/vtex.add-to-cart-button.scss
+++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss
@@ -1,2 +0,0 @@
-.buttonText {
-}
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index e69de29..4108e84 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index dd527e9..3b9d284 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -1,3 +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;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 8f4ebd4..702ed15 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -23,69 +23,15 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-} /*
-.skuSelectorContainer {
-  display: flex;
-  flex-direction: column-reverse;
-  .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;
-      }
-    }
-    .skuSelectorSelectorImageValue {
-      font-family: "Open Sans";
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 19px;
-      color: #929292;
-      text-transform: uppercase;
-    }/*
-    .frame-around {
-      border-radius: 30px;
-    }
-    .skuSelectorItemImageValue,
-    .skuSelectorInternalBox {
-      border-radius: 21px;
-    }
-  }
-  .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;
-      }
-    }
-    .frame-around {
-      border-radius: 30px;
-    }
-
-    .skuSelectorInternalBox {
-      border-radius: 30px;
-    }
-  }
 }
-*/
+
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
   .valueWrapper .skuSelectorItemTextValue {
     margin-right: 5px;
   }
+
   .skuSelectorSubcontainer--cor {
     .skuSelectorName {
       font-size: 0;
@@ -106,6 +52,15 @@
     .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 {
@@ -142,3 +97,50 @@
     }
   }
 }
+
+.shippingContainer {
+  :global(.vtex-button) {
+    width: 49px;
+    height: 49px;
+    background-color: black;
+    :global(.vtex-button__label) {
+      font-size: 0;
+      &::after {
+        content: "Ok";
+        color: white;
+        font-size: 10px;
+      }
+    }
+  }
+}
+
+.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: 49px;
+    top: 27px;
+    width: 49px;
+    height: 49px;
+  }
+}

From e73bc62040b95022e70d3abf2fc4622ad9d53c0a Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Wed, 8 Feb 2023 18:20:58 -0300
Subject: [PATCH 12/27] feat: Adicionando estilo no Cep

---
 styles/css/vtex.address-form.css              | 13 ++++++++++++
 styles/css/vtex.store-components.css          | 21 ++++++++++++++++---
 .../sass/pages/product/vtex.address-form.scss |  5 +++++
 .../pages/product/vtex.store-components.scss  | 21 ++++++++++++++++---
 4 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 styles/css/vtex.address-form.css
 create mode 100644 styles/sass/pages/product/vtex.address-form.scss

diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css
new file mode 100644
index 0000000..5eb3ef6
--- /dev/null
+++ b/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";
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 8ea10f1..17fb098 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -113,8 +113,12 @@
 }
 .shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
   content: "Ok";
-  color: white;
-  font-size: 10px;
+  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) {
@@ -138,8 +142,19 @@
 }
 .shippingContainer :global(.vtex-button) {
   position: relative;
-  right: 49px;
+  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;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.address-form.scss b/styles/sass/pages/product/vtex.address-form.scss
new file mode 100644
index 0000000..026dcd8
--- /dev/null
+++ b/styles/sass/pages/product/vtex.address-form.scss
@@ -0,0 +1,5 @@
+.input {
+  &::placeholder {
+    content: "Digite seu CEP";
+  }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 702ed15..cd73e7c 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -107,8 +107,12 @@
       font-size: 0;
       &::after {
         content: "Ok";
-        color: white;
-        font-size: 10px;
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 19px;
+        color: #ffffff;
       }
     }
   }
@@ -138,9 +142,20 @@
 
   :global(.vtex-button) {
     position: relative;
-    right: 49px;
+    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;
+  }
 }

From 1d972c38f2919a1c5b272e0b39a54fecee29ff0d Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 9 Feb 2023 10:45:27 -0300
Subject: [PATCH 13/27] =?UTF-8?q?feat:=20Adicionado=20o=20estilo=20da=20de?=
 =?UTF-8?q?scri=C3=A7=C3=A3o=20do=20produto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 store/blocks/pdp/product.jsonc                | 55 ++++++++++++++--
 styles/css/vtex.store-components.css          | 17 +++++
 styles/css/vtex.tab-layout.css                | 62 ++++++++++++++++++-
 .../pages/product/vtex.store-components.scss  | 20 ++++++
 .../sass/pages/product/vtex.tab-layout.scss   | 54 ++++++++++++++++
 5 files changed, 203 insertions(+), 5 deletions(-)
 create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index b41d781..59b8a51 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -126,7 +126,6 @@
       "flex-layout.row#cart",
       "product-assembly-options",
       "product-gifts",
-
       "availability-subscriber",
       "shipping-simulator"
     ]
@@ -200,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": {
@@ -215,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"],
@@ -225,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"]
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 17fb098..4945797 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -157,4 +157,21 @@
   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;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index ae31ca0..d63cf56 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index cd73e7c..f66a67b 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -159,3 +159,23 @@
     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;
+  }
+}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
new file mode 100644
index 0000000..e91615b
--- /dev/null
+++ b/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;
+}

From aeea58a8c67e29f9f9b36f9cb57b20a9133109d6 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 9 Feb 2023 12:07:19 -0300
Subject: [PATCH 14/27] feat: Adicionando os estilos do shelf

---
 store/blocks/pdp/product.jsonc                | 21 ++++++--
 styles/css/vtex.rich-text.css                 | 10 +++-
 styles/css/vtex.slider-layout.css             | 49 ++++++++-----------
 styles/sass/pages/product/vtex.rich-text.scss |  9 ++++
 .../pages/product/vtex.slider-layout.scss     | 12 +++++
 5 files changed, 68 insertions(+), 33 deletions(-)
 create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 59b8a51..dbdd649 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -9,7 +9,10 @@
       "list-context.product-list#shelf",
       "newsletter",
       "product-questions-and-answers"
-    ]
+    ],
+    "props": {
+      "blockClass": "productAll"
+    }
   },
   "html#breadcrumb": {
     "props": {
@@ -279,10 +282,22 @@
   },
   "list-context.product-list#shelf": {
     "blocks": ["product-summary.shelf#shelf"],
-    "children": ["slider-layout#shelf-products"]
+    "children": ["rich-text#shelf", "slider-layout#shelf-products"]
+  },
+  "rich-text#shelf": {
+    "props": {
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "text": "Você também pode gostar: ",
+      "blockClass": "shelfTitle"
+    }
   },
   "product-summary.shelf#shelf": {
-    "children": ["product-summary-image#shelf", "product-summary-price"]
+    "children": [
+      "product-summary-image#shelf",
+      "product-summary-name",
+      "product-summary-price"
+    ]
   },
   "slider-layout#shelf-products": {
     "props": {
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index f5ba8ae..f03cef1 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -7,4 +7,12 @@
 */
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-/* Grid breakpoints */
\ No newline at end of file
+/* Grid breakpoints */
+.container--shelfTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 55f431f..72afeb0 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -1,31 +1,22 @@
+/*
+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 */
+/*.sliderLayoutContainer {
+  margin: 0 40px 0 40px;
+  .sliderRightArrow {
+    right: 100px;
+  }
+}*/
 .sliderLayoutContainer {
+  width: 95%;
+  padding: 0 16px 0 16px;
+  display: flex;
   justify-content: center;
-}
-
-.sliderLayoutContainer--carousel {
-  background-color: #F0F0F0;
-  min-height: 450px;
-}
-
-.sliderTrackContainer {
-  max-width: 100%;
-}
-
-.paginationDotsContainer {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-}
-
-.layoutContainer--shelf {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
-}
-
-.slide--shelf {
-  margin-bottom: 25px;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  min-height: 550px;
-}
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index e69de29..91c03e5 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -0,0 +1,9 @@
+.container--shelfTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+
+  color: #575757;
+}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
new file mode 100644
index 0000000..8052275
--- /dev/null
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -0,0 +1,12 @@
+/*.sliderLayoutContainer {
+  margin: 0 40px 0 40px;
+  .sliderRightArrow {
+    right: 100px;
+  }
+}*/
+.sliderLayoutContainer {
+  width: 95%;
+  padding: 0 16px 0 16px;
+  display: flex;
+  justify-content: center;
+}

From 1c414418014ead382b2204a942d5226f47ec23b5 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 9 Feb 2023 13:33:02 -0300
Subject: [PATCH 15/27] feat: Adicionado o estilo do newsletter

---
 store/blocks/pdp/product.jsonc                | 17 +++++--
 styles/css/vtex.store-components.css          | 50 +++++++++++++++++++
 .../pages/product/vtex.store-components.scss  | 50 +++++++++++++++++++
 3 files changed, 113 insertions(+), 4 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index dbdd649..c85f564 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -137,7 +137,7 @@
     "props": {
       "blockClass": "cart"
     },
-    "children": ["product-quantity", "flex-layout.row#buy-button"]
+    "children": ["product-quantity#qtd", "flex-layout.row#buy-button"]
   },
   "flex-layout.row#product-name": {
     "props": {
@@ -152,11 +152,20 @@
       "showValueNameForImageVariation": true
     }
   },
-
+  "product-quantity#qtd": {
+    "props": {
+      "width": "25%",
+      "size": "regular",
+      "blockClass": "buyQtd"
+    }
+    //"children": ["product-quantity"]
+  },
   "flex-layout.row#buy-button": {
     "props": {
-      "width": "80%",
-      "blockClass": "buyButton"
+      "blockClass": "buyButton",
+      "marginTop": "4",
+      "marginBottom": "7",
+      "paddingRight": "0"
     },
 
     "children": ["add-to-cart-button"]
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 4945797..b40abe3 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -174,4 +174,54 @@
   font-size: 16px;
   line-height: 22px;
   color: #929292;
+}
+
+.newsletter {
+  margin-top: 64px;
+}
+.newsletter .container {
+  display: flex;
+  height: 175px;
+  padding: 0 0 0 0;
+  background: black;
+  align-items: center;
+  justify-content: center;
+}
+.newsletter .container .label {
+  display: flex;
+  flex-direction: column;
+  font-size: 0;
+}
+.newsletter .container .label::before {
+  content: "Assine nossa Newsletter";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #ffffff;
+}
+.newsletter .container .label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+}
+.newsletter .container :global(.vtex-input-prefix__group) {
+  display: flex;
+  justify-content: center;
+  width: 774px;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-bottom: 1px solid #929292;
+}
+.newsletter .container :global(.vtex-styleguide-9-x-input) {
+  background: transparent;
+  padding: 0 0 0 0;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index f66a67b..9f70129 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -179,3 +179,53 @@
     color: #929292;
   }
 }
+
+.newsletter {
+  margin-top: 64px;
+  .container {
+    display: flex;
+    height: 175px;
+    padding: 0 0 0 0;
+    background: black;
+    align-items: center;
+    justify-content: center;
+    .label {
+      display: flex;
+      flex-direction: column;
+      font-size: 0;
+      &::before {
+        content: "Assine nossa Newsletter";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+        color: #ffffff;
+      }
+      &::after {
+        content: "Receba ofertas e novidades por e-mail";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        text-align: center;
+        color: #929292;
+      }
+    }
+    :global(.vtex-input-prefix__group) {
+      display: flex;
+      justify-content: center;
+      width: 774px;
+      border-top: none;
+      border-right: none;
+      border-left: none;
+      border-bottom: 1px solid #929292;
+    }
+    :global(.vtex-styleguide-9-x-input) {
+      background: transparent;
+      padding: 0 0 0 0;
+    }
+  }
+}

From 557d8de30af30c08ec5ce05507b590d62a411145 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 9 Feb 2023 16:33:22 -0300
Subject: [PATCH 16/27] feat: Adicionado os estilos do breadcrumb

---
 styles/css/vtex.breadcrumb.css                | 23 ++++++++++++--
 .../sass/pages/product/vtex.breadcrumb.scss   | 30 +++++++++++++++----
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index dc77e8c..aaf448f 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -8,10 +8,27 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
-.homeIcon {
+.container {
+  margin-left: 40px;
+}
+.container .homeIcon {
   display: none;
 }
-
-.homeLink::after {
+.container .Link,
+.container .term {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.container .homeLink::after {
   content: "Home";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 80c6236..5452501 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,8 +1,26 @@
-.homeIcon {
-  display: none;
-}
-.homeLink {
-  &::after {
-    content: "Home";
+.container {
+  margin-left: 40px;
+  .homeIcon {
+    display: none;
+  }
+  .Link,
+  .term {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #929292;
+  }
+  .homeLink {
+    &::after {
+      content: "Home";
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+    }
   }
 }

From 3ffb27280c2b2910a8de1ad57e3bf4e453f4ed58 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 9 Feb 2023 16:51:24 -0300
Subject: [PATCH 17/27] =?UTF-8?q?feat:=20Adicionado=20estilo=20do=20bot?=
 =?UTF-8?q?=C3=A3o=20do=20newsletter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/css/vtex.store-components.css          | 22 ++++++++++++++++++
 .../pages/product/vtex.store-components.scss  | 23 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index b40abe3..55f8050 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -224,4 +224,26 @@
 .newsletter .container :global(.vtex-styleguide-9-x-input) {
   background: transparent;
   padding: 0 0 0 0;
+}
+.newsletter .container :global(.vtex-button) {
+  position: relative;
+  left: 145px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  border-bottom: 3px solid #bfbfbf;
+}
+.newsletter .container :global(.vtex-button):hover {
+  border-bottom: 5px solid #bfbfbf;
+}
+.newsletter .container :global(.vtex-button) :global(.vtex-button__label) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  color: #ffffff;
+  border: 1px solid #000000;
+  text-transform: uppercase;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 9f70129..756b124 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -227,5 +227,28 @@
       background: transparent;
       padding: 0 0 0 0;
     }
+    :global(.vtex-button) {
+      position: relative;
+      left: 145px;
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      border-bottom: 3px solid #bfbfbf;
+      &:hover {
+        border-bottom: 5px solid #bfbfbf;
+      }
+
+      :global(.vtex-button__label) {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 19px;
+        text-align: center;
+        color: #ffffff;
+        border: 1px solid #000000;
+        text-transform: uppercase;
+      }
+    }
   }
 }

From a3392fd35d3b5e2f1c2774da28dc48e319830ce5 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 9 Feb 2023 18:09:03 -0300
Subject: [PATCH 18/27] fix: Consertado as margens principais do produto

---
 store/blocks/pdp/product.jsonc                     |  2 +-
 styles/css/vtex.flex-layout.css                    | 13 +++++++++++++
 styles/css/vtex.store-components.css               | 11 +----------
 styles/css/vtex.tab-layout.css                     |  2 +-
 styles/sass/pages/product/vtex.flex-layout.scss    | 12 ++++++++++++
 .../sass/pages/product/vtex.store-components.scss  | 14 ++++----------
 styles/sass/pages/product/vtex.tab-layout.scss     |  2 +-
 7 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index c85f564..1706b60 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -312,7 +312,7 @@
     "props": {
       "itemsPerPage": {
         "desktop": 4,
-        "tablet": 1,
+        "tablet": 3,
         "phone": 1
       },
       "infinite": true,
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index c807690..c59897a 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -9,6 +9,19 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
+.flexRow {
+  margin: 0 40px;
+}
+
+:global(.vtex-stack-layout-0-x-stackItem) .flexRow {
+  margin: 0;
+}
+
+.flexRowContent {
+  margin: 8px 0 0 0;
+  padding: 0;
+}
+
 .flexRowContent--cart {
   display: flex;
   align-items: center;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 55f8050..ff19d1c 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -13,19 +13,10 @@
   margin: 0 0 0 0 !important;
 }
 
-.productImageTag {
+.carouselContainer .productImageTag {
   max-height: none !important;
 }
 
-.thumbImg {
-  width: 86%;
-  margin: 0;
-}
-
-.productImagesThumb {
-  height: auto !important;
-}
-
 .productBrand {
   display: flex;
   justify-content: flex-end;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index d63cf56..79c6c7f 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -9,7 +9,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .container {
-  margin-bottom: 16px;
+  padding: 0 40px 16px 40px;
 }
 
 .listContainer {
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 4108e84..3d2f750 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,3 +1,15 @@
+.flexRow {
+  margin: 0 40px;
+}
+:global(.vtex-stack-layout-0-x-stackItem) {
+  .flexRow {
+    margin: 0;
+  }
+}
+.flexRowContent {
+  margin: 8px 0 0 0;
+  padding: 0;
+}
 .flexRowContent--cart {
   display: flex;
   align-items: center;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 756b124..828efdc 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -3,18 +3,12 @@
   margin: 0 0 0 0 !important;
 }
 
-.productImageTag {
-  max-height: none !important;
+.carouselContainer {
+  .productImageTag {
+    max-height: none !important;
+  }
 }
 
-.thumbImg {
-  width: 86%;
-  margin: 0;
-}
-
-.productImagesThumb {
-  height: auto !important;
-}
 .productBrand {
   display: flex;
   justify-content: flex-end;
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index e91615b..d7ad334 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,5 +1,5 @@
 .container {
-  margin-bottom: 16px;
+  padding: 0 40px 16px 40px;
 }
 .listContainer {
   display: flex;

From 02fa36c2261d0640ac06ea8567dce97c47ec0cbb Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 9 Feb 2023 20:14:30 -0300
Subject: [PATCH 19/27] fix: Consertado o tamanho da imagem

---
 styles/css/vtex.store-components.css            | 13 ++++++++++++-
 .../pages/product/vtex.store-components.scss    | 17 ++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index ff19d1c..d66941f 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -13,10 +13,21 @@
   margin: 0 0 0 0 !important;
 }
 
-.carouselContainer .productImageTag {
+.productImageTag {
   max-height: none !important;
 }
 
+/*
+.productImagesGallerySlide {
+  .productImageTag {
+    width: 800px;
+  }
+}
+*/
+.productImagesThumb {
+  margin-right: 16px;
+}
+
 .productBrand {
   display: flex;
   justify-content: flex-end;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 828efdc..0dd1aef 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -2,12 +2,20 @@
   max-width: 100%;
   margin: 0 0 0 0 !important;
 }
-
-.carouselContainer {
+.productImageTag {
+  max-height: none !important;
+}
+/*
+.productImagesGallerySlide {
   .productImageTag {
-    max-height: none !important;
+    width: 800px;
   }
 }
+*/
+
+.productImagesThumb {
+  margin-right: 16px;
+}
 
 .productBrand {
   display: flex;
@@ -246,3 +254,6 @@
     }
   }
 }
+
+@media screen and (max-width: 1024px) {
+}

From 8a5c9887e49f6aa05b6c43341bce9fcef763d5c1 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 9 Feb 2023 21:34:14 -0300
Subject: [PATCH 20/27] feat: Adicionado estilo tablet do produto

---
 styles/css/vtex.flex-layout.css               |   7 +
 styles/css/vtex.product-summary.css           |  52 ++----
 styles/css/vtex.store-components.css          | 159 ++++++++++++------
 styles/css/vtex.tab-layout.css                |  16 ++
 .../sass/pages/product/vtex.flex-layout.scss  |   6 +
 .../pages/product/vtex.product-summary.scss   |   2 +
 .../pages/product/vtex.slider-layout.scss     |   2 +
 .../pages/product/vtex.store-components.scss  |  71 +++++++-
 .../sass/pages/product/vtex.tab-layout.scss   |  15 ++
 9 files changed, 234 insertions(+), 96 deletions(-)
 create mode 100644 styles/sass/pages/product/vtex.product-summary.scss

diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index c59897a..79d4bec 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -42,4 +42,11 @@
   font-size: 18px;
   line-height: 25px;
   color: #ffffff;
+}
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .flexRowContent {
+    display: flex;
+    flex-direction: column;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 0a6e420..f5ba8ae 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -1,42 +1,10 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
-  border-radius: 50%;
-}
-
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
-}
-
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
-  opacity: 1;
-}
-
-@media screen and (max-width: 40em) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
-  }
-}
-
-.nameContainer {
-  justify-content: start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.brandName {
-  font-weight: 600;
-  font-size: 18px;
-  color: #2E2E2E;
-}
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
-  text-align: center;
-}
-
-.image {
-  border-radius: 0.25rem;
-}
+/*
+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 */
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index d66941f..75263f1 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -178,24 +178,97 @@
   color: #929292;
 }
 
+/*
 .newsletter {
-  margin-top: 64px;
-}
-.newsletter .container {
-  display: flex;
-  height: 175px;
-  padding: 0 0 0 0;
   background: black;
-  align-items: center;
-  justify-content: center;
-}
-.newsletter .container .label {
+  border-bottom: 1px solid #ffffff;
+  margin: 0;
   display: flex;
   flex-direction: column;
-  font-size: 0;
+  justify-content: center;
+  align-items: center;
+  .container {
+    display: flex;
+    //height: 175px;
+    //padding: 0 0 0 0;
+    //background: black;
+    align-items: center;
+    justify-content: center;
+    .label {
+      display: flex;
+      flex-direction: column;
+      font-size: 0;
+      &::before {
+        content: "Assine nossa Newsletter";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+        color: #ffffff;
+      }
+      &::after {
+        content: "Receba ofertas e novidades por e-mail";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        text-align: center;
+        color: #929292;
+      }
+    }
+    :global(.vtex-input-prefix__group) {
+      display: flex;
+      justify-content: center;
+      width: 774px;
+      border-top: none;
+      border-right: none;
+      border-left: none;
+      border-bottom: 1px solid #929292;
+    }
+    :global(.vtex-styleguide-9-x-input) {
+      background: transparent;
+      padding: 0 0 0 0;
+    }
+    :global(.vtex-button) {
+      position: relative;
+      left: 145px;
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      border-bottom: 3px solid #bfbfbf;
+      &:hover {
+        border-bottom: 5px solid #bfbfbf;
+      }
+
+      :global(.vtex-button__label) {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 19px;
+        text-align: center;
+        color: #ffffff;
+        border: 1px solid #000000;
+        text-transform: uppercase;
+      }
+    }
+  }
 }
-.newsletter .container .label::before {
-  content: "Assine nossa Newsletter";
+*/
+.newsletter {
+  background: black;
+  border-bottom: 1px solid #ffffff;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.label {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
@@ -203,49 +276,41 @@
   line-height: 38px;
   text-align: center;
   color: #ffffff;
+  border: none;
 }
-.newsletter .container .label::after {
+
+.label::after {
   content: "Receba ofertas e novidades por e-mail";
-  font-family: "Open Sans";
+  font-family: sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
   color: #929292;
-}
-.newsletter .container :global(.vtex-input-prefix__group) {
   display: flex;
-  justify-content: center;
-  width: 774px;
-  border-top: none;
-  border-right: none;
-  border-left: none;
-  border-bottom: 1px solid #929292;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
 }
-.newsletter .container :global(.vtex-styleguide-9-x-input) {
-  background: transparent;
-  padding: 0 0 0 0;
-}
-.newsletter .container :global(.vtex-button) {
-  position: relative;
-  left: 145px;
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  border-bottom: 3px solid #bfbfbf;
-}
-.newsletter .container :global(.vtex-button):hover {
-  border-bottom: 5px solid #bfbfbf;
-}
-.newsletter .container :global(.vtex-button) :global(.vtex-button__label) {
-  font-family: "Open Sans";
+
+.productDescriptionTitle {
+  font-family: sans-serif;
   font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 19px;
-  text-align: center;
-  color: #ffffff;
-  border: 1px solid #000000;
-  text-transform: uppercase;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  margin-bottom: 8px;
+}
+
+.productDescriptionText {
+  text-align: left;
+}
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 79c6c7f..2150530 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -61,4 +61,20 @@
   display: flex;
   flex-direction: row;
   gap: 32px;
+}
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .listContainer {
+    display: flex;
+    flex-direction: column;
+  }
+  .contentItem {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #b9b9b9;
+    padding-bottom: 16px;
+  }
+  .productDescriptionText {
+    text-align: justify;
+  }
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 3d2f750..e52a860 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -33,3 +33,9 @@
     }
   }
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .flexRowContent {
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
new file mode 100644
index 0000000..595f5d8
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -0,0 +1,2 @@
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 8052275..a233b64 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -10,3 +10,5 @@
   display: flex;
   justify-content: center;
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 0dd1aef..3a94064 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -181,14 +181,20 @@
     color: #929292;
   }
 }
-
+/*
 .newsletter {
-  margin-top: 64px;
+  background: black;
+  border-bottom: 1px solid #ffffff;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   .container {
     display: flex;
-    height: 175px;
-    padding: 0 0 0 0;
-    background: black;
+    //height: 175px;
+    //padding: 0 0 0 0;
+    //background: black;
     align-items: center;
     justify-content: center;
     .label {
@@ -254,6 +260,57 @@
     }
   }
 }
-
-@media screen and (max-width: 1024px) {
+*/
+.newsletter {
+  background: black;
+  border-bottom: 1px solid #ffffff;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.label {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #ffffff;
+  border: none;
+}
+.label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.productDescriptionTitle {
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  margin-bottom: 8px;
+}
+
+.productDescriptionText {
+  text-align: left;
+}
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
 }
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index d7ad334..6678e7d 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -52,3 +52,18 @@
   flex-direction: row;
   gap: 32px;
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .listContainer {
+    display: flex;
+    flex-direction: column;
+  }
+  .contentItem {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #b9b9b9;
+    padding-bottom: 16px;
+  }
+  .productDescriptionText {
+    text-align: justify;
+  }
+}

From 92789c1daa54f3720e2d6d9451da34dbface444e Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Fri, 10 Feb 2023 10:13:51 -0300
Subject: [PATCH 21/27] feat: Adicionado o estilo do frete

---
 styles/css/vtex.flex-layout.css               |  6 +-
 styles/css/vtex.store-components.css          | 95 ++++++++++++++++++-
 .../sass/pages/product/vtex.flex-layout.scss  |  4 +-
 .../pages/product/vtex.store-components.scss  | 87 ++++++++++++++++-
 4 files changed, 183 insertions(+), 9 deletions(-)

diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 79d4bec..065f1ad 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -9,16 +9,12 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
-.flexRow {
-  margin: 0 40px;
-}
-
 :global(.vtex-stack-layout-0-x-stackItem) .flexRow {
   margin: 0;
 }
 
 .flexRowContent {
-  margin: 8px 0 0 0;
+  margin: 8px 0 0 0px;
   padding: 0;
 }
 
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 75263f1..d86410a 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -10,7 +10,7 @@
 /* Grid breakpoints */
 .container {
   max-width: 100%;
-  margin: 0 0 0 0 !important;
+  margin: 0 40px 0 40px !important;
 }
 
 .productImageTag {
@@ -161,6 +161,99 @@
   top: 8px;
 }
 
+.shippingTableRadioBtn {
+  display: none;
+}
+
+.shippingTableHead {
+  display: grid;
+  position: relative;
+  right: 60px;
+}
+
+.shippingTable {
+  border: none;
+  grid-template-columns: none !important;
+}
+
+.shippingTableRow {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+.shippingTableCellDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTableCellDeliveryPrice {
+  order: 1;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTableCellDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTableHeadDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+
+.shippingTableHeadDeliveryPrice {
+  order: 1;
+  font-size: 0;
+}
+.shippingTableHeadDeliveryPrice::before {
+  content: "FRETE";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+
+.shippingTableHeadDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+
 .productDescriptionContainer .productDescriptionTitle {
   font-family: "Open Sans";
   font-style: normal;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index e52a860..7db885a 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,13 +1,13 @@
 .flexRow {
-  margin: 0 40px;
 }
+
 :global(.vtex-stack-layout-0-x-stackItem) {
   .flexRow {
     margin: 0;
   }
 }
 .flexRowContent {
-  margin: 8px 0 0 0;
+  margin: 8px 0 0 0px;
   padding: 0;
 }
 .flexRowContent--cart {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 3a94064..286cbfb 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,6 +1,6 @@
 .container {
   max-width: 100%;
-  margin: 0 0 0 0 !important;
+  margin: 0 40px 0 40px !important;
 }
 .productImageTag {
   max-height: none !important;
@@ -161,7 +161,92 @@
     top: 8px;
   }
 }
+.shippingTableRadioBtn {
+  display: none;
+}
+.shippingTableHead {
+  display: grid;
+  position: relative;
+  right: 60px;
+}
+.shippingTable {
+  //display: grid;
+  border: none;
+  //flex-direction: column;
+  grid-template-columns: none !important;
+}
+.shippingTableRow {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+.shippingTableCellDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+.shippingTableCellDeliveryPrice {
+  order: 1;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+.shippingTableCellDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
 
+.shippingTableHeadDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+.shippingTableHeadDeliveryPrice {
+  order: 1;
+  font-size: 0;
+  &::before {
+    content: "FRETE";
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 19px;
+    color: #202020;
+    text-transform: uppercase;
+  }
+}
+.shippingTableHeadDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
 //Estilização da descrição do produto
 .productDescriptionContainer {
   .productDescriptionTitle {

From eb6440c499663c296e58f587217055757524daa6 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Fri, 10 Feb 2023 11:00:00 -0300
Subject: [PATCH 22/27] =?UTF-8?q?feat:=20Adicionado=20os=20estilos=20dos?=
 =?UTF-8?q?=20pre=C3=A7os=20e=20parcelados?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/css/vtex.flex-layout.css               | 14 ++-
 styles/css/vtex.product-price.css             | 96 +++++--------------
 .../sass/pages/product/vtex.flex-layout.scss  | 20 ++--
 .../pages/product/vtex.product-price.scss     | 17 ++++
 4 files changed, 61 insertions(+), 86 deletions(-)
 create mode 100644 styles/sass/pages/product/vtex.product-price.scss

diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 065f1ad..c2619c5 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -9,18 +9,22 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
-:global(.vtex-stack-layout-0-x-stackItem) .flexRow {
-  margin: 0;
-}
-
 .flexRowContent {
   margin: 8px 0 0 0px;
   padding: 0;
 }
 
+:global(.vtex-stack-layout-0-x-stackItem) .flexRow {
+  margin: 0;
+}
+
+.flexRow--buyButton .flexRowContent {
+  margin: 0 0 0 0 !important;
+  padding: 0;
+}
+
 .flexRowContent--cart {
   display: flex;
-  align-items: center;
   justify-content: center;
   margin-bottom: 25px;
 }
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 95f4cfe..b8cd188 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -1,79 +1,27 @@
-.listPrice {
-  color: #727273;
-  margin-bottom: .25rem;
-  font-size: 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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
 .sellingPrice {
-  color: #3f3f40;
-  font-size: 1.25rem;
-}
-
-.sellingPriceValue {
-  font-size: 2.25rem;
+  font-family: "Open Sans";
+  font-style: normal;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
 }
 
 .installments {
-  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;
-}
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 7db885a..8a1039d 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,18 +1,24 @@
 .flexRow {
 }
-
-:global(.vtex-stack-layout-0-x-stackItem) {
-  .flexRow {
-    margin: 0;
-  }
-}
 .flexRowContent {
   margin: 8px 0 0 0px;
   padding: 0;
 }
+:global(.vtex-stack-layout-0-x-stackItem) {
+  .flexRow {
+    margin: 0;
+  }
+}
+.flexRow--buyButton {
+  .flexRowContent {
+    margin: 0 0 0 0 !important;
+    padding: 0;
+  }
+}
+
 .flexRowContent--cart {
   display: flex;
-  align-items: center;
+
   justify-content: center;
   margin-bottom: 25px;
   .flexRow--buyButton {
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
new file mode 100644
index 0000000..0d16003
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -0,0 +1,17 @@
+.sellingPrice {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+}
+
+.installments {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}

From c7689808107b941944e8e3a3a1167f648ab4869c Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Fri, 10 Feb 2023 11:31:20 -0300
Subject: [PATCH 23/27] =?UTF-8?q?feat:=20Adicionado=20os=20estilo=20dos=20?=
 =?UTF-8?q?bot=C3=B5es=20do=20newsletter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/css/vtex.flex-layout.css               |   3 +-
 styles/css/vtex.store-components.css          | 130 +++++++----------
 .../sass/pages/product/vtex.flex-layout.scss  |   4 +-
 .../pages/product/vtex.store-components.scss  | 133 +++++++-----------
 4 files changed, 104 insertions(+), 166 deletions(-)

diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index c2619c5..fd74ea1 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -25,8 +25,7 @@
 
 .flexRowContent--cart {
   display: flex;
-  justify-content: center;
-  margin-bottom: 25px;
+  gap: 10px;
 }
 .flexRowContent--cart .flexRow--buyButton :global(.vtex-button) {
   background-color: black;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index d86410a..f9bd86b 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -271,94 +271,64 @@
   color: #929292;
 }
 
-/*
 .newsletter {
   background: black;
   border-bottom: 1px solid #ffffff;
-  margin: 0;
+  margin: 64px 0 0 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  .container {
-    display: flex;
-    //height: 175px;
-    //padding: 0 0 0 0;
-    //background: black;
-    align-items: center;
-    justify-content: center;
-    .label {
-      display: flex;
-      flex-direction: column;
-      font-size: 0;
-      &::before {
-        content: "Assine nossa Newsletter";
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 24px;
-        line-height: 38px;
-        text-align: center;
-        color: #ffffff;
-      }
-      &::after {
-        content: "Receba ofertas e novidades por e-mail";
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 18px;
-        line-height: 25px;
-        text-align: center;
-        color: #929292;
-      }
-    }
-    :global(.vtex-input-prefix__group) {
-      display: flex;
-      justify-content: center;
-      width: 774px;
-      border-top: none;
-      border-right: none;
-      border-left: none;
-      border-bottom: 1px solid #929292;
-    }
-    :global(.vtex-styleguide-9-x-input) {
-      background: transparent;
-      padding: 0 0 0 0;
-    }
-    :global(.vtex-button) {
-      position: relative;
-      left: 145px;
-      background: transparent;
-      border: none;
-      border-radius: 0;
-      border-bottom: 3px solid #bfbfbf;
-      &:hover {
-        border-bottom: 5px solid #bfbfbf;
-      }
-
-      :global(.vtex-button__label) {
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 700;
-        font-size: 14px;
-        line-height: 19px;
-        text-align: center;
-        color: #ffffff;
-        border: 1px solid #000000;
-        text-transform: uppercase;
-      }
-    }
-  }
 }
-*/
-.newsletter {
-  background: black;
-  border-bottom: 1px solid #ffffff;
-  margin: 0;
+.newsletter .container {
+  padding: 32px 0 16px 0;
+}
+.newsletter .label {
+  font-size: 0;
+}
+.newsletter .label::before {
+  content: "Assine nossa newsletter";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #ffffff;
+}
+.newsletter .label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+}
+.newsletter :global(.vtex-input-prefix__group) {
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: center;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-bottom: 1px solid #929292;
+  border-radius: 0;
+}
+.newsletter :global(.vtex-styleguide-9-x-input) {
+  background: transparent;
+  padding: 0 0 0 0;
+  width: 774px;
+}
+.newsletter :global(.vtex-button) {
+  position: relative;
+  right: 40px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  border-bottom: 3px solid #bfbfbf;
+}
+.newsletter :global(.vtex-button):hover {
+  border-bottom: 5px solid #bfbfbf;
 }
 
 .label {
@@ -374,7 +344,7 @@
 
 .label::after {
   content: "Receba ofertas e novidades por e-mail";
-  font-family: sans-serif;
+  font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 18px;
@@ -388,7 +358,7 @@
 }
 
 .productDescriptionTitle {
-  font-family: sans-serif;
+  font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 24px;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 8a1039d..cf13ac1 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -18,9 +18,7 @@
 
 .flexRowContent--cart {
   display: flex;
-
-  justify-content: center;
-  margin-bottom: 25px;
+  gap: 10px;
   .flexRow--buyButton {
     :global(.vtex-button) {
       background-color: black;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 286cbfb..ddb4e2b 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -170,9 +170,8 @@
   right: 60px;
 }
 .shippingTable {
-  //display: grid;
   border: none;
-  //flex-direction: column;
+
   grid-template-columns: none !important;
 }
 .shippingTableRow {
@@ -266,94 +265,66 @@
     color: #929292;
   }
 }
-/*
+
 .newsletter {
   background: black;
   border-bottom: 1px solid #ffffff;
-  margin: 0;
+  margin: 64px 0 0 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   .container {
-    display: flex;
-    //height: 175px;
-    //padding: 0 0 0 0;
-    //background: black;
-    align-items: center;
-    justify-content: center;
-    .label {
-      display: flex;
-      flex-direction: column;
-      font-size: 0;
-      &::before {
-        content: "Assine nossa Newsletter";
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 24px;
-        line-height: 38px;
-        text-align: center;
-        color: #ffffff;
-      }
-      &::after {
-        content: "Receba ofertas e novidades por e-mail";
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 18px;
-        line-height: 25px;
-        text-align: center;
-        color: #929292;
-      }
-    }
-    :global(.vtex-input-prefix__group) {
-      display: flex;
-      justify-content: center;
-      width: 774px;
-      border-top: none;
-      border-right: none;
-      border-left: none;
-      border-bottom: 1px solid #929292;
-    }
-    :global(.vtex-styleguide-9-x-input) {
-      background: transparent;
-      padding: 0 0 0 0;
-    }
-    :global(.vtex-button) {
-      position: relative;
-      left: 145px;
-      background: transparent;
-      border: none;
-      border-radius: 0;
-      border-bottom: 3px solid #bfbfbf;
-      &:hover {
-        border-bottom: 5px solid #bfbfbf;
-      }
+    padding: 32px 0 16px 0;
+  }
+  .label {
+    font-size: 0;
+    &::before {
+      content: "Assine nossa newsletter";
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 38px;
 
-      :global(.vtex-button__label) {
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 700;
-        font-size: 14px;
-        line-height: 19px;
-        text-align: center;
-        color: #ffffff;
-        border: 1px solid #000000;
-        text-transform: uppercase;
-      }
+      color: #ffffff;
+    }
+    &::after {
+      content: "Receba ofertas e novidades por e-mail";
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 25px;
+      text-align: center;
+      color: #929292;
+    }
+  }
+  :global(.vtex-input-prefix__group) {
+    display: flex;
+    justify-content: center;
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    border-bottom: 1px solid #929292;
+    border-radius: 0;
+  }
+  :global(.vtex-styleguide-9-x-input) {
+    background: transparent;
+    padding: 0 0 0 0;
+    width: 774px;
+  }
+  :global(.vtex-button) {
+    position: relative;
+    right: 40px;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    border-bottom: 3px solid #bfbfbf;
+    &:hover {
+      border-bottom: 5px solid #bfbfbf;
     }
   }
-}
-*/
-.newsletter {
-  background: black;
-  border-bottom: 1px solid #ffffff;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }
 .label {
   font-family: "Open Sans";
@@ -367,7 +338,7 @@
 }
 .label::after {
   content: "Receba ofertas e novidades por e-mail";
-  font-family: sans-serif;
+  font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 18px;
@@ -381,7 +352,7 @@
 }
 
 .productDescriptionTitle {
-  font-family: sans-serif;
+  font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 24px;

From c97a1031228745153a607bb056becc68fc6fe39b Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Fri, 10 Feb 2023 12:06:26 -0300
Subject: [PATCH 24/27] feat: Adicionado os estilo dos pontos do carroussel

---
 styles/css/vtex.slider-layout.css                 | 10 +++++++++-
 styles/sass/pages/product/vtex.slider-layout.scss | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 72afeb0..ba43044 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -15,8 +15,16 @@
   }
 }*/
 .sliderLayoutContainer {
-  width: 95%;
+  width: 100%;
   padding: 0 16px 0 16px;
   display: flex;
   justify-content: center;
+}
+.sliderLayoutContainer .paginationDot {
+  background: black;
+}
+.sliderLayoutContainer .paginationDot--isActive {
+  background: white;
+  border: 0.5px solid black;
+  font-size: large;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index a233b64..36042b3 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -5,10 +5,18 @@
   }
 }*/
 .sliderLayoutContainer {
-  width: 95%;
+  width: 100%;
   padding: 0 16px 0 16px;
   display: flex;
   justify-content: center;
+  .paginationDot {
+    background: black;
+  }
+  .paginationDot--isActive {
+    background: white;
+    border: 0.5px solid black;
+    font-size: large;
+  }
 }
 @media screen and (max-width: 1024px) and (min-width: 768px) {
 }

From d1984b5b3c0da2b7ef075e331a2bd5c3038a1015 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Fri, 10 Feb 2023 12:15:24 -0300
Subject: [PATCH 25/27] fix: Consertado margem errado

---
 styles/css/vtex.store-components.css                 | 3 +++
 styles/sass/pages/product/vtex.store-components.scss | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f9bd86b..f0c04ee 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -270,6 +270,9 @@
   line-height: 22px;
   color: #929292;
 }
+.productDescriptionContainer .productDescriptionText .container {
+  margin: 0 0 0 0 !important;
+}
 
 .newsletter {
   background: black;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index ddb4e2b..175d514 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -257,6 +257,9 @@
     color: #575757;
   }
   .productDescriptionText {
+    .container {
+      margin: 0 0 0 0 !important;
+    }
     font-family: "Open Sans";
     font-style: normal;
     font-weight: 400;

From 6260212e86363c56fb1eb239f7ef135de13fd3a9 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Fri, 10 Feb 2023 14:53:14 -0300
Subject: [PATCH 26/27] fix: Consertado o tamanho do slider do carroussel

---
 store/blocks/pdp/product.jsonc                       | 2 +-
 styles/css/vtex.slider-layout.css                    | 7 ++++++-
 styles/css/vtex.store-components.css                 | 9 ++++++++-
 styles/sass/pages/product/vtex.slider-layout.scss    | 7 ++++++-
 styles/sass/pages/product/vtex.store-components.scss | 9 ++++++++-
 5 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 1706b60..ca093e9 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -316,7 +316,7 @@
         "phone": 1
       },
       "infinite": true,
-      "showNavigationArrows": "desktopOnly",
+      "showNavigationArrows": "always",
       "blockClass": "carousel"
     },
     "children": []
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index ba43044..20531bb 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -24,7 +24,12 @@
   background: black;
 }
 .sliderLayoutContainer .paginationDot--isActive {
+  width: 17px !important;
+  height: 17px !important;
   background: white;
   border: 0.5px solid black;
-  font-size: large;
+}
+.sliderLayoutContainer .paginationDotsContainer {
+  display: flex;
+  align-items: center;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f0c04ee..15d38b6 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -10,7 +10,7 @@
 /* Grid breakpoints */
 .container {
   max-width: 100%;
-  margin: 0 40px 0 40px !important;
+  padding: 0 40px 0 40px;
 }
 
 .productImageTag {
@@ -25,9 +25,15 @@
 }
 */
 .productImagesThumb {
+  width: 100%;
+  max-width: 90px;
   margin-right: 16px;
 }
 
+.thumbImg {
+  height: 90px;
+}
+
 .productBrand {
   display: flex;
   justify-content: flex-end;
@@ -272,6 +278,7 @@
 }
 .productDescriptionContainer .productDescriptionText .container {
   margin: 0 0 0 0 !important;
+  padding: 0 0 0 0 !important;
 }
 
 .newsletter {
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 36042b3..565499c 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -13,9 +13,14 @@
     background: black;
   }
   .paginationDot--isActive {
+    width: 17px !important;
+    height: 17px !important;
     background: white;
     border: 0.5px solid black;
-    font-size: large;
+  }
+  .paginationDotsContainer {
+    display: flex;
+    align-items: center;
   }
 }
 @media screen and (max-width: 1024px) and (min-width: 768px) {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 175d514..737b135 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,6 +1,7 @@
 .container {
   max-width: 100%;
-  margin: 0 40px 0 40px !important;
+  //margin: 0 40px 0 40px !important;
+  padding: 0 40px 0 40px;
 }
 .productImageTag {
   max-height: none !important;
@@ -14,8 +15,13 @@
 */
 
 .productImagesThumb {
+  width: 100%;
+  max-width: 90px;
   margin-right: 16px;
 }
+.thumbImg {
+  height: 90px;
+}
 
 .productBrand {
   display: flex;
@@ -259,6 +265,7 @@
   .productDescriptionText {
     .container {
       margin: 0 0 0 0 !important;
+      padding: 0 0 0 0 !important;
     }
     font-family: "Open Sans";
     font-style: normal;

From e6c7d5004fd32a3bdfd280ea7f6e0b9b960e6b79 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Fri, 10 Feb 2023 15:22:02 -0300
Subject: [PATCH 27/27] feat: Adicionado estilos mobile do carroussel

---
 styles/css/vtex.flex-layout.css                    |  4 ++++
 styles/css/vtex.product-identifier.css             |  6 ++++++
 styles/css/vtex.store-components.css               | 13 ++++++-------
 styles/sass/pages/product/vtex.flex-layout.scss    |  4 ++++
 .../pages/product/vtex.product-identifier.scss     |  5 +++++
 .../sass/pages/product/vtex.store-components.scss  | 14 ++++++--------
 6 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index fd74ea1..6ca4d50 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -48,4 +48,8 @@
     display: flex;
     flex-direction: column;
   }
+  .flexRowContent .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index 128134d..0b08252 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -29,4 +29,10 @@
   font-size: 14px;
   line-height: 19px;
   color: rgba(146, 146, 146, 0.48);
+}
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .product-identifier--productReference {
+    justify-content: flex-start;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 15d38b6..3141e90 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -17,13 +17,6 @@
   max-height: none !important;
 }
 
-/*
-.productImagesGallerySlide {
-  .productImageTag {
-    width: 800px;
-  }
-}
-*/
 .productImagesThumb {
   width: 100%;
   max-width: 90px;
@@ -386,4 +379,10 @@
     display: flex;
     flex-direction: column;
   }
+  .productBrand {
+    justify-content: flex-start;
+  }
+  .product-identifier--productReference {
+    justify-content: none;
+  }
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index cf13ac1..9bb0e4a 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -41,5 +41,9 @@
   .flexRowContent {
     display: flex;
     flex-direction: column;
+    .stretchChildrenWidth {
+      width: 100% !important;
+      padding: 0;
+    }
   }
 }
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
index fec8794..619122b 100644
--- a/styles/sass/pages/product/vtex.product-identifier.scss
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@@ -17,3 +17,8 @@
   line-height: 19px;
   color: rgba(146, 146, 146, 0.48);
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .product-identifier--productReference {
+    justify-content: flex-start;
+  }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 737b135..25c7ca1 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,18 +1,10 @@
 .container {
   max-width: 100%;
-  //margin: 0 40px 0 40px !important;
   padding: 0 40px 0 40px;
 }
 .productImageTag {
   max-height: none !important;
 }
-/*
-.productImagesGallerySlide {
-  .productImageTag {
-    width: 800px;
-  }
-}
-*/
 
 .productImagesThumb {
   width: 100%;
@@ -379,4 +371,10 @@
     display: flex;
     flex-direction: column;
   }
+  .productBrand {
+    justify-content: flex-start;
+  }
+  .product-identifier--productReference {
+    justify-content: none;
+  }
 }