From 18d24f451901888e3d9837f60e847b688fcbb2cc Mon Sep 17 00:00:00 2001
From: Emmanuel Vitor <emmanuelvitor.ti@gmail.com>
Date: Wed, 8 Feb 2023 13:05:31 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20cria=20estiliza=C3=A7=C3=A3o=20do=20pro?=
 =?UTF-8?q?duto=20main?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/css/vtex.flex-layout.css               |  8 +++++++-
 styles/css/vtex.product-identifier.css        |  1 -
 styles/css/vtex.store-components.css          |  9 +++++++--
 styles/css/vtex.tab-layout.css                | 17 +++++++++++++++--
 .../sass/pages/product/vtex.flex-layout.scss  |  8 +++++++-
 .../product/vtex.product-identifier.scss      |  6 ++----
 .../pages/product/vtex.store-components.scss  |  8 ++++++--
 .../sass/pages/product/vtex.tab-layout.scss   | 19 +++++++++++++++++--
 8 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 8edda2a..e2913d7 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -11,6 +11,12 @@
   padding: 0 40px;
   margin: 0;
   border: 1px solid red;
+  column-gap: 32px;
+}
+@media (max-width: 1024px) {
+  .flexRowContent--product-main {
+    flex-direction: column;
+  }
 }
 .flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
   min-width: 296px;
@@ -59,7 +65,7 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-  max-width: 90%;
+  text-align: end;
 }
 @media (max-width: 1024px) {
   .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) {
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index 8f5d235..bc1fe06 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -10,7 +10,6 @@
 .product-identifier--productReference {
   display: flex;
   justify-content: flex-end;
-  padding-right: 40px;
 }
 @media (max-width: 1024px) {
   .product-identifier--productReference {
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 2b594f9..59a84aa 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -24,8 +24,8 @@
 .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) {
   padding: 32px 0 13px;
   width: 100%;
-  max-width: 774px;
   position: relative;
+  max-width: 775px;
 }
 @media (max-width: 1024px) {
   .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) {
@@ -137,7 +137,6 @@
   font-weight: 700;
   font-size: 14px;
   line-height: 19px;
-  /* or 136% */
   display: flex;
   align-items: center;
   color: #868686;
@@ -161,6 +160,12 @@
   width: 100%;
   margin: 0;
   padding: 0;
+  max-width: 399px;
+}
+@media (max-width: 1024px) {
+  .subscriberContainer .form {
+    max-width: 775px;
+  }
 }
 .subscriberContainer .form .content {
   display: grid;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 4c6e2aa..bbd2888 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -9,8 +9,7 @@
 /* Grid breakpoints */
 .container--tab-product {
   width: 100%;
-  max-width: 94.44%;
-  margin: 0 auto;
+  padding: 0 40px;
 }
 @media (min-width: 1920px) {
   .container--tab-product {
@@ -44,6 +43,11 @@
   color: #BFBFBF;
   text-transform: capitalize;
 }
+@media (max-width: 1024px) {
+  .container--tab-product .listContainer--m3-tab-list-product .listItem :global(.vtex-button) :global(.vtex-button__label) {
+    padding-left: 0;
+  }
+}
 .container--tab-product .listContainer--m3-tab-list-product .listItem--m3-tab-list-item-product {
   background: #ffffff;
   border: none !important;
@@ -83,4 +87,13 @@
   .container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
     padding-left: 0;
   }
+}
+
+.contentContainer {
+  padding: 0 32px;
+}
+@media (max-width: 1024px) {
+  .contentContainer {
+    padding: 0;
+  }
 }
\ 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 f8fc16c..c7004da 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -3,6 +3,11 @@
   padding: 0 40px;
   margin: 0;
   border: 1px solid red;
+  column-gap: 32px;
+
+  @media (max-width:1024px) {
+    flex-direction: column;
+  }
 
   :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
     min-width: 296px;
@@ -56,7 +61,8 @@
           font-weight: 300;
           font-size: 20px;
           line-height: 34px;
-          max-width: 90%;
+          // max-width: 90%;
+          text-align: end;
 
           @media (max-width:1024px) {
             max-width: none;
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
index e7ae493..8fe7da2 100644
--- a/styles/sass/pages/product/vtex.product-identifier.scss
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@@ -1,7 +1,7 @@
 .product-identifier--productReference {
   display: flex;
   justify-content: flex-end;
-  padding-right: 40px;
+  // padding-right: 40px;
 
   @media (max-width:1024px) {
     display: block;
@@ -25,6 +25,4 @@
 
     color: #9292927a;
   }
-}
-
-.product-identifier__value {}
\ No newline at end of file
+}
\ 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 0358ba4..3d0c7db 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -14,8 +14,8 @@
     :global(.vtex-store-components-3-x-form) {
       padding: 32px 0 13px;
       width: 100%;
-      max-width: 774px;
       position: relative;
+      max-width: 775px;
 
       @media (max-width:1024px) {
         max-width: 100%;
@@ -149,7 +149,6 @@
       font-weight: 700;
       font-size: 14px;
       line-height: 19px;
-      /* or 136% */
 
       display: flex;
       align-items: center;
@@ -181,6 +180,11 @@
     width: 100%;
     margin: 0;
     padding: 0;
+    max-width: 399px;
+
+    @media (max-width:1024px) {
+      max-width: 775px;
+    }
 
     .content {
       display: grid;
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 370a516..7588cb4 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,8 +1,9 @@
 .container--tab-product {
 
   width: 100%;
-  max-width: 94.44%;
-  margin: 0 auto;
+  // max-width: 94.44%;
+  // margin: 0 auto;
+  padding: 0 40px;
 
   @media (min-width:1920px) {
     max-width: 1840px;
@@ -21,6 +22,8 @@
       flex-direction: column;
     }
 
+
+
     .listItem {
       margin: 0;
       padding: 0;
@@ -40,6 +43,10 @@
 
           color: $color-gray8;
           text-transform: capitalize;
+
+          @media (max-width:1024px) {
+            padding-left: 0;
+          }
         }
       }
     }
@@ -90,5 +97,13 @@
     }
 
 
+  }
+}
+
+.contentContainer {
+  padding: 0 32px;
+
+  @media (max-width:1024px) {
+    padding: 0;
   }
 }
\ No newline at end of file