fix: ajustes css mobile

checkout/src/arquivos/js/components/Footer.js

@@ -7,15 +7,16 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        this.onUpdateReload();
+        // this.onUpdateReload();
         this.onUpdate();
+        this.body.onresize = this.onUpdateResize();
         await this.footerItens();
-        this.body.onresize = this.onUpdate();
     }
 
     async selectors() {
         this.footerContainerPrateleira = await waitElement(".footerCheckout__prateleira");
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.body = await waitElement("#checkoutMainContainer");
     }
 
     onUpdateReload() {
@@ -33,6 +34,11 @@ export default class Footer {
             checkoutVazioTitle.style.display = "none";
         }
     }
+    onUpdateResize() {
+        console.log("oioioio");
+        this.removeCarrossel();
+        this.onUpdateReload();
+    }
     onUpdate() {
         let observer = new MutationObserver((mutations) => {
             mutations.forEach((mutationRecord) => {
@@ -108,7 +114,6 @@ export default class Footer {
                             infinite: false,
                         },
                     },
-
                     {
                         breakpoint: 769,
                         settings: {
@@ -127,6 +132,12 @@ export default class Footer {
             });
         }
     }
+    async removeCarrossel() {
+        const prateleira = await waitElement("#prateleiraCheckout");
+        if ($(prateleira)) {
+            $(prateleira).slick("unslick");
+        }
+    }
 
     async footerItens() {
         const checkoutPayments = await waitElement(".footerCheckout__payments", {

checkout/src/arquivos/sass/checkout/_checkout-vazio.scss

@@ -11,31 +11,39 @@
 
     &-title {
         font-weight: 700;
-        font-size: 24px;
-        line-height: 33px;
         text-align: center;
         text-transform: uppercase;
+        font-size: 24px;
+        line-height: 33px;
         color: #000000;
+        margin: 0 0 32px;
+        @media (min-width: 2500px) {
+            font-size: 48px;
+            line-height: 65px;
+        }
     }
     &-message {
         display: none;
     }
     &-links {
         .link-choose-products {
-            background: $color-black;
-            border: none;
-            border-radius: 5px;
-            transition: ease-in 0.22s all;
+            border: 1px solid #000000;
+            background: transparent;
+            border-radius: 0px;
             outline: none;
-            font-family: $font-family;
+            font-family: $font-family-secundary;
             font-style: normal;
-            font-weight: 500;
+            font-weight: 400;
             font-size: 14px;
             line-height: 16px;
             text-align: center;
-            letter-spacing: 0.05em;
-            color: $color-white;
             text-transform: uppercase;
+            color: #000000;
+            width: 31.989%;
+            padding: 15px 0;
+            margin-top: 0;
+            max-width: 327px;
+            cursor: pointer;
 
             &:hover {
                 background: lighten($color-black, 5);

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -29,23 +29,32 @@ header {
 }
 footer .footerCheckout__prateleira {
     width: 79.375%;
-    margin: 0 auto;
+    margin: 13px auto 0;
     min-width: 1016px;
-    @media (min-width: 2500px) {
-        width: 79.76%;
-        max-width: 1994px;
-    }
     @media (min-width: 1280px) {
         width: 79.76%;
         max-width: 1016px;
     }
+    @media (min-width: 2500px) {
+        width: 79.76%;
+        max-width: 1994px;
+    }
     @media (max-width: 1024px) {
         width: 96.77%;
         min-width: unset;
     }
-    @media (max-width: 490px) {
+    @media (max-width: 1000px) {
+        max-width: 657px;
+    }
+    @media (max-width: 689px) {
+        max-width: 477px;
+    }
+    @media (max-width: 509px) {
+        max-width: 344px;
         width: 91.73%;
-        min-width: 344;
+    }
+    @media (max-width: 360px) {
+        max-width: 256px;
     }
 }
 body {
@@ -64,6 +73,7 @@ body {
     }
     &.body-cart {
         font-family: $font-family;
+        justify-content: space-between;
     }
 
     &.body-cart,
@@ -84,8 +94,12 @@ body {
     .container-order-form,
     .container-cart {
         width: 80%;
-        @media (max-width: 490px) {
-            width: auto;
+        @media (min-width: 2500px) {
+            width: 79.534%;
+        }
+        @media (max-width: 1024px) {
+            width: 100%;
+            padding: 0 !important;
         }
     }
 }
@@ -114,6 +128,16 @@ body {
     letter-spacing: 0.05em;
     text-transform: uppercase;
     color: #292929;
+    text-align: left;
+    margin: 17px 0 16px;
+    @media (min-width: 2500px) {
+        font-size: 48px;
+        line-height: 65px;
+        margin: 17px 0 18px;
+    }
+    @media (max-width: 1024px) {
+        margin: 17px 16px;
+    }
 }
 
 .dropdown {