From c8c8d5ab4239134a5e4c21f371bd2fc605d1ad4c Mon Sep 17 00:00:00 2001
From: vitorsoaresdev <dev.vitors@gmail.com>
Date: Tue, 31 Jan 2023 19:28:50 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o=20do?=
 =?UTF-8?q?=20bloco=20customizavel=20pix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/css/vtex.store-components.css                | 10 ++++++++++
 styles/css/vtex.tab-layout.css                      | 12 ++++++++++++
 .../sass/pages/product/vtex.store-components.scss   |  9 +++++++++
 styles/sass/pages/product/vtex.tab-layout.scss      | 13 +++++++++++++
 4 files changed, 44 insertions(+)

diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 5d2e382..9e88af1 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -354,6 +354,8 @@
 
 .subscriberContainer .title {
   font-size: 0;
+  line-height: 0;
+  margin: 0;
 }
 .subscriberContainer .title::after {
   content: "Produto Indisponível";
@@ -372,21 +374,29 @@
   line-height: 19px;
   color: #868686;
 }
+.subscriberContainer .form {
+  margin-bottom: 16px;
+}
 .subscriberContainer .form .content {
   display: grid;
   grid-template-areas: " nome email" " submit submit";
   justify-content: inherit;
   gap: 8px;
+  margin-top: 15px;
 }
 .subscriberContainer .form .content .inputName {
   grid-area: nome;
+  margin-bottom: 0;
 }
 .subscriberContainer .form .content .inputEmail {
   grid-area: email;
+  margin-bottom: 0;
 }
 .subscriberContainer .form .content .submit {
   grid-area: submit;
   width: 100%;
+  margin-top: 7px;
+  margin-bottom: 0;
 }
 .subscriberContainer .form .content .submit :global(.vtex-button) {
   width: 100%;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index afbe7a8..0d3647e 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -13,6 +14,16 @@
 .container--structure {
   padding: 0 40px;
 }
+.container--structure::after {
+  content: "Você também pode gostar:";
+  display: block;
+  text-align: center;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  padding: 16px 0 32px 0;
+  color: #575757;
+}
 
 .contentContainer {
   padding: 0 32px;
@@ -38,6 +49,7 @@
 }
 .listContainer .listItemActive :global(.vtex-button) {
   background-color: #fff;
+  width: 114px;
   border: none;
 }
 .listContainer .listItemActive :global(.vtex-button__label) {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 6ef9d21..1cf9466 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -430,6 +430,8 @@ margin-top: 16px;
 
   .title {
     font-size: 0;
+    line-height: 0;
+    margin: 0;
 
     &::after {
       content: "Produto Indisponível";
@@ -455,24 +457,31 @@ margin-top: 16px;
   }
 
   .form {
+    margin-bottom: 16px;
+
     .content {
       display: grid;
       grid-template-areas: " nome email"
       " submit submit";
       justify-content: inherit;
       gap: 8px;
+      margin-top: 15px;
 
       .inputName {
         grid-area: nome;
+        margin-bottom: 0;
       }
 
       .inputEmail {
         grid-area: email;
+        margin-bottom: 0;
       }
 
       .submit {
         grid-area: submit;
         width: 100%;
+        margin-top: 7px;
+        margin-bottom: 0;
 
         :global(.vtex-button) {
           width: 100%;
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index f7bbd67..5e2f99c 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,5 +1,17 @@
 .container--structure {
   padding: 0 40px;
+
+  &::after {
+    content: "Você também pode gostar:";
+    display: block;
+    text-align: center;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+    padding: 16px 0 32px 0;
+
+    color: $gray-100;
+  }
 }
 
 .contentContainer {
@@ -34,6 +46,7 @@
   .listItemActive {
     :global(.vtex-button) {
       background-color: $white;
+      width: 114px;
       border: none;
     }