From 04ea65fc6eb945aef9b2113856609fc80987e124 Mon Sep 17 00:00:00 2001
From: danielmoliaribarbosa <danielmoliaribarbosa@gmail.com>
Date: Fri, 10 Feb 2023 15:47:14 -0300
Subject: [PATCH 1/2] feat(flex-layout): Implementa SASS do block flex-layout

---
 .../sass/pages/product/vtex.flex-layout.scss  | 115 ++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss

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..621d1c8
--- /dev/null
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -0,0 +1,115 @@
+:global(.vtex-breadcrumb-1-x-container) {
+  padding: 0 40px;
+}
+
+:global(.vtex-store-components-3-x-container) {
+  padding-left: 0px;
+  padding-right: 0px;
+
+  :global(.vtex-flex-layout-0-x-flexRowContent) {
+    :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+      padding-right: 0 !important;
+      overflow: hidden;
+    }
+  }
+
+  :global(.vtex-flex-layout-0-x-flexRowContent) {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0px 40px;
+    gap: 32px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+
+    @media (max-width: 1024px) {
+      flex-direction: column;
+    }
+
+    :global(.vtex-flex-layout-0-x-flexRow) {
+      :global(.vtex-flex-layout-0-x-flexRowContent) {
+        display: block;
+        padding: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.addButton {
+  width: 100%;
+}
+
+.flexRow--buyButton {
+  width: 100%;
+
+  .flexRowContent--buyButton {
+    margin: 0;
+
+    :global(.vtex-button) {
+      background-color: black;
+      height: 49px;
+      border: none;
+      border-radius: unset;
+    }
+
+    :global(.vtex-add-to-cart-button-0-x-buttonText) {
+      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;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  :global(.vtex-flex-layout-0-x-flexRowContent) {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .flexColChild {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 376px) {
+  :global(.vtex-add-to-cart-button-0-x-buttonText) {
+    max-width: 168px;
+  }
+
+  .flexRow--buyButton {
+    .flexRowContent--buyButton {
+      :global(.vtex-button) {
+        height: 74px !important;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 2500px) {
+  :global(.vtex-flex-layout-0-x-flexRow) {
+    :global(.vtex-store-components-3-x-container) {
+      max-width: 100%;
+      margin: 0 320px;
+    }
+  }
+
+  :global(.vtex-flex-layout-0-x-flexRow) {
+    :global(.vtex-telemarketing-2-x-wrapper) {
+      :global(.vtex-telemarketing-2-x-container) {
+        max-width: 100%;
+        margin: 0 !important;
+      }
+    }
+  }
+}

From 9677599b2b5504dd5db7586dbe28bc24c47e90bc Mon Sep 17 00:00:00 2001
From: danielmoliaribarbosa <danielmoliaribarbosa@gmail.com>
Date: Fri, 10 Feb 2023 15:50:28 -0300
Subject: [PATCH 2/2] feat(product-identifer): Implementa SASS do block
 product-identifier

---
 .../product/vtex.product-identifier.scss      | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss

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..b46cdd7
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@@ -0,0 +1,20 @@
+.product-identifier__label,
+.product-identifier__separator {
+  display: none;
+}
+.product-identifier__value {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  float: right;
+  margin-bottom: 24px;
+  color: rgba(146, 146, 146, 0.48);
+}
+
+@media screen and (max-width:1024px) {
+  .product-identifier__value{
+    float: left;
+  }
+}