From 02f056b3b757caa29f72f3977f3e33392b88c5ca Mon Sep 17 00:00:00 2001
From: ueberjames <ueberjames@gmail.com>
Date: Thu, 9 Feb 2023 00:09:50 -0300
Subject: [PATCH] =?UTF-8?q?estiliza=C3=A7=C3=A3o=20do=20mobile=20slid=20de?=
 =?UTF-8?q?=20produtos=20indicados?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/css/vtex.flex-layout.css                  |  9 +++++++++
 styles/css/vtex.slider-layout.css                | 14 ++++++++++++--
 styles/css/vtex.store-components.css             | 15 +++++++++++++++
 styles/sass/pages/product/vtex.flex-layout.scss  | 10 ++++++++++
 .../sass/pages/product/vtex.slider-layout.scss   | 16 +++++++++++++---
 .../pages/product/vtex.store-components.scss     | 14 ++++++++++++++
 styles/sass/utils/_vars.scss                     |  2 +-
 7 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 7cb1c76..d2ed01e 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -69,4 +69,13 @@
   .flexRowContent--indisponivel .stretchChildrenWidth {
     width: 100% !important;
   }
+  .flexRowContent--indisponivel :global(.vtex-store-components-3-x-content) {
+    width: 100%;
+    max-width: 100%;
+    justify-content: initial;
+    gap: 10px;
+  }
+  .flexRowContent--indisponivel .inputName {
+    margin-bottom: 0;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 2d8c1bc..e10f68f 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -30,8 +30,18 @@
   padding: 0 40px 0 40px;
 }
 .sliderLayoutContainer--carousel .sliderLeftArrow--carousel {
-  margin-left: 12px;
+  visibility: hidden;
+}
+.sliderLayoutContainer--carousel .sliderLeftArrow--carousel::before {
+  visibility: visible;
+  content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-left-ueber.png");
+  margin-left: 40px;
 }
 .sliderLayoutContainer--carousel .sliderRightArrow--carousel {
-  margin-right: 12px;
+  visibility: hidden;
+}
+.sliderLayoutContainer--carousel .sliderRightArrow--carousel::after {
+  visibility: visible;
+  content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-right-ueber.png");
+  margin-right: 40px;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index ca2bc08..87eace8 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -50,6 +50,11 @@
     justify-content: flex-start;
   }
 }
+@media only screen and (max-width: 375px) {
+  .container .carouselGaleryThumbs {
+    display: block;
+  }
+}
 
 .skuSelectorContainer {
   display: flex;
@@ -282,9 +287,19 @@
 .subscriberContainer .form .content .inputName {
   grid-area: nome;
 }
+@media only screen and (max-width: 1024px) {
+  .subscriberContainer .form .content .inputName {
+    margin-bottom: 0;
+  }
+}
 .subscriberContainer .form .content .inputEmail {
   grid-area: email;
 }
+@media only screen and (max-width: 1024px) {
+  .subscriberContainer .form .content .inputEmail {
+    margin-bottom: 0;
+  }
+}
 .subscriberContainer .form .content .submit {
   grid-area: submit;
   width: 100%;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 8c4acab..895a919 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -66,6 +66,16 @@ margin-left: 10px;
     width: 100% !important;
 
    }
+   :global(.vtex-store-components-3-x-content){
+    width: 100%;
+    max-width: 100%;
+    justify-content: initial;
+    gap: 10px;
+   }
+
+   .inputName{
+    margin-bottom: 0;
+   }
 }
 }
 
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index a9094a3..5252858 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -22,11 +22,21 @@
   margin-bottom: 64px;
   padding: 0 40px 0 40px;
   .sliderLeftArrow--carousel{
-    margin-left: 12px;
+    visibility: hidden;
+    &::before{
+      visibility: visible;
+      content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-left-ueber.png");
+      margin-left: 40px;
+    }
   }
 
   .sliderRightArrow--carousel{
-    margin-right: 12px;}
+    visibility: hidden;
+    &::after{
+      visibility: visible;
+      content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-right-ueber.png");
+      margin-right: 40px;
+    }
 
 }
-
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index cebeb50..33b7094 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -46,10 +46,17 @@ gap: 16px;
   @include mq (md, max) {
     .productNameContainer {
       justify-content: flex-start;
+
+
     }
 
 
 
+  }
+  @include mq (sm, max) {
+    .carouselGaleryThumbs{
+display: block;
+    }
   }
 }
 
@@ -412,10 +419,17 @@ padding-bottom: 15px;
 
       .inputName {
         grid-area: nome;
+        @include mq (md, max) {
+          margin-bottom: 0;
+        }
+
       }
 
       .inputEmail {
         grid-area: email;
+        @include mq (md, max) {
+          margin-bottom: 0;
+        }
       }
 
       .submit {
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index 0f27e3e..4602603 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -22,7 +22,7 @@ $color-green: #4caf50;
 $grid-breakpoints: (
 	xs: 0,
 	cstm: 400,
-	sm: 768px,
+	sm: 376px,
 	md: 1025px,
 	lg: 1920px,
 	xl: 1921px