From 0b54e92bb46c91ffd9a0fb0f0f0eaa907b31769e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Mon, 19 Dec 2022 22:50:18 -0300
Subject: [PATCH 1/4] feat: Adiciona area de entrega do carrinho 2500

---
 checkout/src/arquivos/js/components/Footer.js |   1 +
 .../sass/checkout/_checkout-carrinho.scss     | 168 +++++++++++++++++-
 checkout/src/arquivos/sass/lib/_slick.scss    |  14 +-
 3 files changed, 180 insertions(+), 3 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index db385b4..d9961b7 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -10,6 +10,7 @@ export default class Footer {
         await this.carrinho();
         this.renderPrateleira();
         this.onUpdate();
+        this.addCarrossel();
     }
 
     async selectors() {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 65a4b2b..5a6196f 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -211,6 +211,10 @@
         }
 
         .cart {
+            @include mq(xxl, min) {
+                padding: 16px 56px 16px 31px;
+            }
+
             @include mq(tablet, max) {
                 padding: 16px;
                 margin: 16px 0;
@@ -221,6 +225,20 @@
     }
 
     .summary-template-holder {
+        /*4K*/
+        @include mq(xxl, min) {
+            .span5.totalizers.summary-totalizers.cart-totalizers.pull-right {
+                width: 688.35px;
+                .coupon {
+                    width: unset;
+                    span {
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
+                }
+            }
+        }
+
         @include mq(tablet, max) {
             margin: 0 16px;
             width: auto;
@@ -322,6 +340,11 @@
         .product-name {
             padding: 0 0 0 16px;
 
+            @include mq(xxl, min) {
+                box-sizing: border-box;
+                width: 632px;
+            }
+
             @include mq(md, max) {
                 /*width: 250px;*/
                 position: absolute;
@@ -726,6 +749,10 @@
             .srp-data {
                 width: 280px;
 
+                @include mq(xxl, min) {
+                    width: 543.67px;
+                }
+
                 @include mq(tablet, max) {
                     width: 343px;
                 }
@@ -778,6 +805,10 @@
                     text-transform: uppercase;
                     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
                     left: 1px;
+
+                    @include mq(xxl, min) {
+                        height: 57px;
+                    }
                 }
 
                 &__current {
@@ -791,6 +822,18 @@
 
                 &__pickup {
                     color: $color-gray7;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
+                }
+
+                &__delivery {
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
 
                 label {
@@ -803,7 +846,15 @@
             }
 
             .srp-postal-code {
+                &__form {
+                    @include mq(xxl, min) {
+                        width: 333.96px;
+                    }
+                }
                 .ship-postalCode {
+                    @include mq(xxl, min) {
+                        width: 300px;
+                    }
                     label {
                         font-family: $font-family;
                         font-style: normal;
@@ -812,6 +863,11 @@
                         line-height: 16px;
                         color: $color-black-500;
                         margin-bottom: 2px;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 33px;
+                        }
                     }
 
                     input {
@@ -823,6 +879,12 @@
                         padding: 12px 8px;
                         width: 172px;
 
+                        @include mq(xxl, min) {
+                            width: 333.96px;
+                            height: 55px;
+                            font-size: 24px;
+                        }
+
                         @include mq(tablet, max) {
                             width: 215px;
                         }
@@ -856,6 +918,15 @@
                             background-color: darken($color-blue2, 5);
                         }
 
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                            line-height: 38px;
+                            width: 194px;
+                            height: 55px;
+                            right: -210px;
+                            top: 46px;
+                        }
+
                         @include mq(tablet, max) {
                             width: 120px;
                             right: -213px;
@@ -875,6 +946,12 @@
                             text-decoration-line: underline;
                             color: $color-black-500;
                             margin-top: 4px;
+
+                            @include mq(xxl, min) {
+                                font-size: 20px;
+                                line-height: 23px;
+                                margin-top: 5px;
+                            }
                         }
                     }
 
@@ -884,6 +961,10 @@
                         position: absolute;
                         left: 0;
                         width: 100%;
+
+                        @include mq(xxl, min) {
+                            font-size: 20px;
+                        }
                     }
                 }
             }
@@ -898,6 +979,10 @@
                     color: #303030;
                     font-weight: 400;
                     font-size: 14px;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                    }
                 }
 
                 #deliver-at-text a {
@@ -905,6 +990,10 @@
                     font-size: 16px;
                     font-weight: 500;
 
+                    @include mq(xxl, min) {
+                        font-size: 32px;
+                    }
+
                     &:hover {
                         text-decoration: underline;
                     }
@@ -920,6 +1009,25 @@
                     svg path {
                         fill: #d8c8ac;
                     }
+
+                    svg {
+                        @include mq(xxl, min) {
+                            width: 28px;
+                            height: 28px;
+                        }
+                    }
+
+                    &__sla {
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                        }
+                    }
+
+                    &__price {
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                        }
+                    }
                 }
 
                 .srp-delivery-select {
@@ -930,18 +1038,46 @@
                     border: 1px solid $color-gray4;
                     border-radius: 0;
 
+                    .srp-delivery-current-many {
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+
+                            &__name {
+                                font-size: 28px;
+                            }
+
+                            &__sla {
+                                font-size: 20px;
+                            }
+
+                            svg {
+                                width: 50px;
+                                height: 50px;
+                            }
+                        }
+                    }
+
                     .srp-shipping-current-many {
                         &__name {
                             color: #303030;
+                            @include mq(xxl, min) {
+                                font-size: 28px;
+                            }
                         }
 
                         &__sla {
                             color: #7d7d7d;
+                            @include mq(xxl, min) {
+                                font-size: 28px;
+                            }
                         }
 
                         &__price {
                             color: #7d7d7d;
                             font-weight: 500;
+                            @include mq(xxl, min) {
+                                font-size: 28px;
+                            }
                         }
 
                         &__arrow svg {
@@ -1153,6 +1289,12 @@
                             line-height: 16px;
                             color: $color-black;
                             padding: 12px 0;
+
+                            /*4K*/
+                            @include mq(xxl, min) {
+                                font-size: 28px;
+                                line-height: 33px;
+                            }
                         }
 
                         &.info {
@@ -1163,6 +1305,10 @@
                         &.monetary {
                             text-align: right;
                             font-family: $font-family-secundary;
+                            /*4K*/
+                            @include mq(xxl, min) {
+                                width: 200px;
+                            }
                         }
                     }
                 }
@@ -1176,6 +1322,12 @@
                         font-size: 18px;
                         line-height: 25px;
                         color: $color-black;
+
+                        /*4K*/
+                        @include mq(xxl, min) {
+                            font-size: 36px;
+                            line-height: 49px;
+                        }
                     }
                 }
             }
@@ -1187,6 +1339,10 @@
         flex-direction: column;
         width: 352px;
 
+        @include mq(xxl, min) {
+            width: 688.35px;
+        }
+
         @include mq(tablet, max) {
             width: 100%;
             padding-bottom: 0 !important;
@@ -1196,7 +1352,6 @@
             padding: 0 16px;
             width: calc(100% - 32px);
             float: none;
-            /*margin-bottom: 50px;*/
         }
 
         @include mq(md, min) {
@@ -1220,6 +1375,11 @@
                 line-height: 14px;
                 color: $color-black-500;
                 font-family: $font-family-secundary;
+
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
             }
         }
 
@@ -1257,6 +1417,12 @@
                     text-transform: uppercase;
                     vertical-align: middle;
                     text-shadow: none;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                        letter-spacing: 0.05em;
+                    }
                 }
             }
         }
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 3776b83..629d6ff 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -226,21 +226,31 @@
     }
 }
 .slick-prev {
-    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
         no-repeat center center;
     background-size: contain;
     left: 10px;
 
+    @include mq(xxl, min) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
+            no-repeat center center;
+    }
+
     @include mq(md, max) {
         left: 0px;
     }
 }
 .slick-next {
-    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
         no-repeat center center;
     background-size: contain;
     right: 10px;
 
+    @include mq(xxl, min) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
+            no-repeat center center;
+    }
+
     @include mq(md, max) {
         right: 0;
     }
-- 
2.34.1


From a10017a22f8026e20c21e584e5ef24b31833bad6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Tue, 20 Dec 2022 23:35:48 -0300
Subject: [PATCH 2/4] feat: Adiciona identificacao 2500

---
 .../sass/checkout/_checkout-autenticacao.scss | 113 +++++++++++++++++-
 .../sass/checkout/_checkout-carrinho.scss     |  58 ++++++++-
 .../src/arquivos/sass/checkout/_checkout.scss |   5 +
 .../src/arquivos/sass/partials/_footer.scss   |   4 +
 .../src/arquivos/sass/partials/_header.scss   |   3 +-
 5 files changed, 176 insertions(+), 7 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 52e0607..f61c6ef 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -6,6 +6,11 @@ h1#orderform-title {
     color: $color-black-500;
     margin: 17px 0;
 
+    @include mq(xxl, min) {
+        font-size: 48px;
+        line-height: 65px;
+    }
+
     @include mq(tablet, max) {
         margin: 17px 16px;
     }
@@ -287,8 +292,8 @@ h1#orderform-title {
                     .client-document,
                     .client-phone {
                         float: left !important;
-
                         width: 47.4%;
+
                         @include mq(tablet, max) {
                             width: 49.4%;
                         }
@@ -428,6 +433,11 @@ h1#orderform-title {
                     margin-bottom: 14px;
                     padding: 0;
 
+                    @include mq(xxl, min) {
+                        font-size: 32px;
+                        line-height: 37px;
+                    }
+
                     i::before {
                         display: none;
                         /*fill: #303030;*/
@@ -456,6 +466,11 @@ h1#orderform-title {
                     font-size: 14px;
                     line-height: 19px;
                     color: $color-gray2;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
 
                 /* General configurations */
@@ -479,6 +494,11 @@ h1#orderform-title {
                         font-size: 14px;
                         line-height: 19px;
                         margin-bottom: 1px;
+
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                            line-height: 38px;
+                        }
                     }
                 }
 
@@ -496,6 +516,11 @@ h1#orderform-title {
                     box-sizing: border-box;
                     padding: 13px 12px;
 
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
+
                     &::placeholder {
                         color: $color-gray10;
                     }
@@ -503,6 +528,10 @@ h1#orderform-title {
 
                 .help.error {
                     color: $color-red;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                    }
                 }
 
                 .box-client-info-pj {
@@ -526,6 +555,11 @@ h1#orderform-title {
                         font-weight: 400;
                         font-size: 12px;
                         line-height: 16px;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 33px;
+                        }
                     }
                 }
 
@@ -547,6 +581,12 @@ h1#orderform-title {
                     font-size: 14px;
                     line-height: 19px;
 
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                        height: 61px;
+                    }
+
                     @include mq(tablet, max) {
                         margin-bottom: 13px;
                     }
@@ -680,6 +720,11 @@ h1#orderform-title {
                         &::before {
                             content: "Identificação";
                             font-size: 16px;
+
+                            @include mq(xxl, min) {
+                                font-size: 32px;
+                                line-height: 37px;
+                            }
                         }
                     }
 
@@ -707,12 +752,22 @@ h1#orderform-title {
                         color: unset;
                         font-size: 0;
 
+                        @include mq(xxl, min) {
+                            width: 39.24px !important;
+                            height: 40.58px !important;
+                        }
+
                         i.icon-edit {
                             margin-left: auto;
                             background-size: contain;
                             width: 21px !important;
                             height: 21px !important;
                             background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
+
+                            @include mq(xxl, min) {
+                                width: 39.24px !important;
+                                height: 40.58px !important;
+                            }
                         }
                     }
                 }
@@ -723,6 +778,10 @@ h1#orderform-title {
                 height: 164px;
                 box-sizing: border-box;
 
+                @include mq(xxl, min) {
+                    height: 234px;
+                }
+
                 .form-step.box-info {
                     position: relative;
                     margin-top: 11px;
@@ -730,12 +789,34 @@ h1#orderform-title {
                     .client-profile-email {
                         position: absolute;
                         top: 20px;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 33px;
+                            top: 35px;
+                        }
                     }
 
                     .client-profile-summary {
+                        @include mq(xxl, min) {
+                            margin-bottom: 10px;
+                        }
+                        .name {
+                            @include mq(xxl, min) {
+                                font-size: 24px;
+                                line-height: 33px;
+                                margin-bottom: 10px;
+                            }
+                        }
                         .tel {
                             position: absolute;
                             top: 40px;
+
+                            @include mq(xxl, min) {
+                                font-size: 24px;
+                                line-height: 33px;
+                                top: 70px;
+                            }
                         }
                     }
                 }
@@ -755,6 +836,11 @@ h1#orderform-title {
                 margin: 2px 8px 2px 0px;
                 border: 1px solid $color-gray12;
                 border-radius: 3px;
+
+                @include mq(xxl, min) {
+                    height: 34px;
+                    width: 34px;
+                }
             }
         }
     }
@@ -775,11 +861,21 @@ h1#orderform-title {
                 color: unset;
                 font-size: 0;
 
+                @include mq(xxl, min) {
+                    width: 39.24px !important;
+                    height: 40.58px !important;
+                }
+
                 i.icon-edit {
                     background-size: contain;
                     width: 21px !important;
                     height: 21px !important;
                     background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
+
+                    @include mq(xxl, min) {
+                        width: 39.24px !important;
+                        height: 40.58px !important;
+                    }
                 }
             }
         }
@@ -797,6 +893,11 @@ h1#orderform-title {
                     letter-spacing: -0.01em;
                     color: $color-black;
                     margin-bottom: 0;
+
+                    @include mq(xxl, min) {
+                        font-size: 32px;
+                        line-height: 37px;
+                    }
                 }
             }
             .accordion-body {
@@ -911,12 +1012,22 @@ h1#orderform-title {
             color: unset;
             font-size: 0;
 
+            @include mq(xxl, min) {
+                width: 39.24px !important;
+                height: 40.58px !important;
+            }
+
             i.icon-edit {
                 margin-left: auto;
                 background-size: contain;
                 width: 21px !important;
                 height: 21px !important;
                 background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
+
+                @include mq(xxl, min) {
+                    width: 39.24px !important;
+                    height: 40.58px !important;
+                }
             }
         }
 
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 5a6196f..ddf0014 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -135,6 +135,7 @@
     .cart-fixed {
         font-family: $font-family;
         width: 100%;
+
         h2 {
             background: $color-white;
             border: none;
@@ -205,6 +206,15 @@
         }
     }
 
+    /*VALOR TOTAL CARRINHO FIXO 4K*/
+    @include mq(xxl, min) {
+        .cart-fixed.affix-top.cart-fixed-transition {
+            .span5.totalizers.summary-totalizers.cart-totalizers.pull-right {
+                width: 100%;
+            }
+        }
+    }
+
     //CART TABLET MOBILE
     .cart-template-holder {
         @include mq(tablet, max) {
@@ -346,11 +356,14 @@
             }
 
             @include mq(md, max) {
-                /*width: 250px;*/
                 position: absolute;
                 top: 0;
             }
 
+            @media only screen and (max-width: 490px) {
+                margin-left: 75px !important;
+            }
+
             a {
                 color: $color-black-500;
                 font-style: normal;
@@ -365,7 +378,7 @@
                 }
 
                 @include mq(md, max) {
-                    margin-left: 15px;
+                    /*margin-left: 15px; testar*/
                 }
             }
 
@@ -780,6 +793,12 @@
                     font-style: normal;
                     letter-spacing: 0.05em;
 
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                        height: 60.98px;
+                    }
+
                     &:hover {
                         background-color: lighten($color-blue2, 5);
                     }
@@ -1117,7 +1136,7 @@
                     color: $color-black-500;
                     text-decoration: none;
 
-                    @include mq(xxl, max) {
+                    @include mq(xxl, min) {
                         font-size: 24px;
                         line-height: 28px;
                     }
@@ -1193,6 +1212,13 @@
                         max-width: 204.32px;
                         padding: 0 12px;
 
+                        @include mq(xxl, min) {
+                            height: 50px;
+                            font-size: 24px;
+                            width: 278px;
+                            max-width: 278px;
+                        }
+
                         @include mq(tablet, max) {
                             width: 86.2%;
                             box-sizing: border-box;
@@ -1205,6 +1231,11 @@
                             font-weight: 400;
                             font-size: 12px;
                             line-height: 14px;
+
+                            @include mq(xxl, min) {
+                                font-size: 24px;
+                                line-height: 28px;
+                            }
                         }
 
                         @include mq(sm, max) {
@@ -1231,11 +1262,15 @@
                         width: 133px;
                         text-transform: uppercase;
 
-                        @include mq(tablet, max) {
-                            width: 13.4%;
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 28px;
+                            height: 45px;
+                            width: 200px;
                         }
 
                         @include mq(tablet, max) {
+                            width: 13.4%;
                             margin-left: 0;
                         }
 
@@ -1264,6 +1299,13 @@
                         line-height: 14px;
                         color: $color-black-500;
 
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+
+                            top: 70px;
+                            right: 180px;
+                        }
+
                         @include mq(tablet, max) {
                             font-size: 0;
                         }
@@ -1428,3 +1470,9 @@
         }
     }
 }
+
+.checkout-container.row-fluid.cart-active {
+    @include mq(md, max) {
+        overflow: hidden;
+    }
+}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 3f9a975..384d388 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -83,6 +83,11 @@ body {
     margin: 40px 0 30px;
     text-transform: uppercase;
 
+    @include mq(xxl, min) {
+        font-size: 48px;
+        line-height: 65px;
+    }
+
     @include mq(md, max) {
         margin-left: 30px;
     }
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 61f1cac..3243c6c 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -20,6 +20,10 @@
             align-items: center;
             justify-content: space-between;
 
+            @include mq(xxl, min) {
+                margin: 16px 62px 16px 63px;
+            }
+
             @include mq(tablet, max) {
                 align-items: flex-start;
                 flex-direction: column;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index d4874d7..5019043 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -34,7 +34,7 @@
         }
 
         @include mq(cstm, max) {
-            margin-right: 50px;
+            margin-right: 40px;
         }
 
         img {
@@ -43,6 +43,7 @@
     }
 
     &__safeBuy {
+        justify-content: end;
         display: flex;
         width: 15.2829%;
 
-- 
2.34.1


From d7d3fdbc1ef2d41807f1c81bda384f8bd9d29fc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Tue, 20 Dec 2022 23:37:56 -0300
Subject: [PATCH 3/4] feat: Adiciona identificao 2500

---
 bash.exe.stackdump | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 bash.exe.stackdump

diff --git a/bash.exe.stackdump b/bash.exe.stackdump
deleted file mode 100644
index 512b978..0000000
--- a/bash.exe.stackdump
+++ /dev/null
@@ -1,16 +0,0 @@
-Stack trace:
-Frame        Function    Args
-000FFFFCD30  00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
-000FFFFCD30  0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
-000FFFFCD30  002100484A2 (000007D0000, 000007D0101, 00000000001, 5C74DE1CAC3C)
-000FFFFCD30  0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
-000FFFFCD30  0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
-000FFFFCD30  002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
-000FFFFCD30  0021005AB65 (000FFFFCA60, 00000000000, 000FFFFCA68, 000FFFFFFFF)
-000FFFFCD30  0021005B335 (00210358290, 00000001000, 00000000004, 00210355C90)
-000FFFFCD30  0021005B847 (002100DF51E, 00000000000, 00000000000, 00000000000)
-000FFFFCD30  0021005BB86 (00000000000, 000FFFFCD30, FFFFFFFFFFFFFFC6, 00000000000)
-000FFFFCD30  00210048C0C (00000000000, 00000000000, 00000000000, 00000000000)
-000FFFFFFF0  00210047716 (00000000000, 00000000000, 00000000000, 00000000000)
-000FFFFFFF0  002100477C4 (00000000000, 00000000000, 00000000000, 00000000000)
-End of stack trace
-- 
2.34.1


From c61f735d7c9df0c0bc92efab6ef1fdd8c8faac40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Wed, 21 Dec 2022 23:50:31 -0300
Subject: [PATCH 4/4] feat: Finaliza layout 2500

---
 checkout/src/arquivos/js/components/Footer.js |  60 +++--
 checkout/src/arquivos/js/components/Header.js | 184 ++++----------
 .../sass/checkout/_checkout-autenticacao.scss | 240 +++++++++++++++++-
 .../src/arquivos/sass/checkout/_checkout.scss |   7 +-
 .../src/arquivos/sass/utils/_variaveis.scss   |   2 +-
 5 files changed, 323 insertions(+), 170 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index d9961b7..8b701ad 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,15 +7,13 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        await this.carrinho();
+        await this.replaceHtml();
         this.renderPrateleira();
         this.onUpdate();
         this.addCarrossel();
     }
 
     async selectors() {
-        //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
-        // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
         this.title = await waitElement("#cart-title");
         this.checkoutVazio = await waitElement(".empty-cart-content");
         //CARRINHO VAZIO
@@ -87,30 +85,28 @@ export default class Footer {
     }
 
     async addCarrossel() {
-        const prateleira = await waitElement(".carrosel-items", { timeout: 5000, interval: 500 });
+        const prateleira = await waitElement(".carrosel-items", { timeout: 6000, interval: 500 });
 
-        if (window.screen.width > 1024) {
-            $(prateleira).slick({
-                slidesToShow: 4,
-                slidesToScroll: 1,
-                infinite: true,
-                arrows: true,
-            });
-        } else if (window.screen.width < 600) {
-            $(prateleira).slick({
-                slidesToShow: 2,
-                slidesToScroll: 1,
-                infinite: true,
-                arrows: true,
-            });
-        } else if (window.screen.width <= 1024) {
-            $(prateleira).slick({
-                slidesToShow: 3,
-                slidesToScroll: 1,
-                infinite: true,
-                arrows: true,
-            });
-        }
+        $(prateleira).slick({
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            infinite: true,
+            arrows: true,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                    },
+                },
+                {
+                    breakpoint: 600,
+                    settings: {
+                        slidesToShow: 2,
+                    },
+                },
+            ],
+        });
     }
 
     async onUpdate() {
@@ -140,10 +136,20 @@ export default class Footer {
         if (window.location.hash == "#/cart") {
             this.onUpdate();
             this.prateleira();
+        } else {
+            window.addEventListener("hashchange", () => {
+                if (window.location.hash !== "#/cart") {
+                    this.removePrateleira();
+                }
+                if (window.location.hash == "#/cart") {
+                    this.requestApi();
+                    this.addCarrossel();
+                }
+            });
         }
     }
 
-    carrinho() {
+    replaceHtml() {
         this.title.innerHTML = ``;
         this.continuarCompra.innerHTML = `continuar comprando`;
         this.frete.innerHTML = `Frete`;
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 79dfc97..e40730f 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -67,34 +67,24 @@ export default class Header {
             const progressBarLista = document.querySelectorAll("#progressBar ul li");
 
             progressBarLista.forEach((li) => {
+                const circle1 = li.children[0].children[0].children["progress-bar-circle-1"];
+                const circle2 = li.children[0].children[0].children["progress-bar-circle-2"];
+                const circle3 = li.children[0].children[0].children["progress-bar-circle-3"];
+
                 if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
-                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
-                        li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
-                            "active"
-                        );
+                    if (circle1) {
+                        circle1.classList.add("active");
                     }
 
-                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
-                        if (
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-2"
-                            ].classList.contains("active")
-                        ) {
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-2"
-                            ].classList.remove("active");
+                    if (circle2) {
+                        if (circle2.classList.contains("active")) {
+                            circle2.classList.remove("active");
                         }
                     }
 
-                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
-                        if (
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-3"
-                            ].classList.contains("active")
-                        ) {
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-3"
-                            ].classList.remove("active");
+                    if (circle3) {
+                        if (circle3.classList.contains("active")) {
+                            circle3.classList.remove("active");
                         }
                     }
                 } else if (
@@ -102,98 +92,56 @@ export default class Header {
                     window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
                     window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping"
                 ) {
-                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
-                        if (
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-1"
-                            ].classList.contains("active")
-                        ) {
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-1"
-                            ].classList.remove("active");
+                    if (circle1) {
+                        if (circle1.classList.contains("active")) {
+                            circle1.classList.remove("active");
                         }
                     }
 
-                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
-                        li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
-                            "active"
-                        );
+                    if (circle2) {
+                        circle2.classList.add("active");
                     }
 
-                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
-                        if (
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-3"
-                            ].classList.contains("active")
-                        ) {
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-3"
-                            ].classList.remove("active");
+                    if (circle3) {
+                        if (circle3.classList.contains("active")) {
+                            circle3.classList.remove("active");
                         }
                     }
                 } else if (
                     window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
                 ) {
-                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
-                        if (
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-1"
-                            ].classList.contains("active")
-                        ) {
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-1"
-                            ].classList.remove("active");
+                    if (circle1) {
+                        if (circle1.classList.contains("active")) {
+                            circle1.classList.remove("active");
                         }
                     }
 
-                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
-                        if (
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-2"
-                            ].classList.contains("active")
-                        ) {
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-2"
-                            ].classList.remove("active");
+                    if (circle2) {
+                        if (circle2.classList.contains("active")) {
+                            circle2.classList.remove("active");
                         }
                     }
 
-                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
-                        li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
-                            "active"
-                        );
+                    if (circle3) {
+                        circle3.classList.add("active");
                     }
                 }
 
                 window.addEventListener("hashchange", () => {
                     if (window.location.hash == "#/cart") {
-                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-1"
-                            ].classList.add("active");
+                        if (circle1) {
+                            circle1.classList.add("active");
                         }
 
-                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
-                            if (
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-2"
-                                ].classList.contains("active")
-                            ) {
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-2"
-                                ].classList.remove("active");
+                        if (circle2) {
+                            if (circle2.classList.contains("active")) {
+                                circle2.classList.remove("active");
                             }
                         }
 
-                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
-                            if (
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-3"
-                                ].classList.contains("active")
-                            ) {
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-3"
-                                ].classList.remove("active");
+                        if (circle3) {
+                            if (circle3.classList.contains("active")) {
+                                circle3.classList.remove("active");
                             }
                         }
                     } else if (
@@ -201,64 +149,36 @@ export default class Header {
                         window.location.hash == "#/profile" ||
                         window.location.hash == "#/shipping"
                     ) {
-                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
-                            if (
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-1"
-                                ].classList.contains("active")
-                            ) {
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-1"
-                                ].classList.remove("active");
+                        if (circle1) {
+                            if (circle1.classList.contains("active")) {
+                                circle1.classList.remove("active");
                             }
                         }
 
-                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-2"
-                            ].classList.add("active");
+                        if (circle2) {
+                            circle2.classList.add("active");
                         }
 
-                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
-                            if (
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-3"
-                                ].classList.contains("active")
-                            ) {
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-3"
-                                ].classList.remove("active");
+                        if (circle3) {
+                            if (circle3.classList.contains("active")) {
+                                circle3.classList.remove("active");
                             }
                         }
                     } else if (window.location.hash == "#/payment") {
-                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
-                            if (
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-1"
-                                ].classList.contains("active")
-                            ) {
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-1"
-                                ].classList.remove("active");
+                        if (circle1) {
+                            if (circle1.classList.contains("active")) {
+                                circle1.classList.remove("active");
                             }
                         }
 
-                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
-                            if (
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-2"
-                                ].classList.contains("active")
-                            ) {
-                                li.children[0].children[0].children[
-                                    "progress-bar-circle-2"
-                                ].classList.remove("active");
+                        if (circle2) {
+                            if (circle2.classList.contains("active")) {
+                                circle2.classList.remove("active");
                             }
                         }
 
-                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
-                            li.children[0].children[0].children[
-                                "progress-bar-circle-3"
-                            ].classList.add("active");
+                        if (circle3) {
+                            circle3.classList.add("active");
                         }
                     }
                 });
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index f61c6ef..126c401 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -49,6 +49,11 @@ h1#orderform-title {
                     color: lighen($color-black-500, 10);
                 }
 
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
+
                 @include mq(tablet, max) {
                     font-size: 10px;
                     line-height: 12px;
@@ -78,6 +83,11 @@ h1#orderform-title {
                     text-transform: uppercase;
                     font-family: $font-family-secundary;
 
+                    @include mq(xxl, min) {
+                        font-size: 40px;
+                        line-height: 47px;
+                    }
+
                     @include mq(tablet, max) {
                         font-size: 14px;
                         line-height: 16px;
@@ -98,6 +108,11 @@ h1#orderform-title {
                     text-transform: uppercase;
                     font-family: $font-family-secundary;
 
+                    @include mq(xxl, min) {
+                        font-size: 40px;
+                        line-height: 47px;
+                    }
+
                     @include mq(tablet, max) {
                         font-size: 12px;
                         line-height: 14px;
@@ -130,6 +145,11 @@ h1#orderform-title {
                 font-size: 12px;
                 line-height: 16px;
 
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 33px;
+                }
+
                 @include mq(tablet, max) {
                     width: 90% !important;
                 }
@@ -156,6 +176,12 @@ h1#orderform-title {
                 letter-spacing: 0.05em;
                 text-transform: uppercase;
 
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 38px;
+                    width: 219px;
+                }
+
                 @include mq(tablet, max) {
                     right: 1.7%;
                 }
@@ -186,6 +212,11 @@ h1#orderform-title {
                 line-height: 16px;
                 text-transform: capitalize;
 
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 33px;
+                }
+
                 @include mq(tablet, max) {
                     text-align: center;
                 }
@@ -200,6 +231,11 @@ h1#orderform-title {
             border: 1px solid $color-black-500;
             border-radius: 5px;
 
+            @include mq(xxl, min) {
+                width: 742px;
+                height: 200px;
+            }
+
             @include mq(tablet, max) {
                 width: 309px;
 
@@ -220,6 +256,11 @@ h1#orderform-title {
                 font-size: 12px;
                 line-height: 16px;
                 margin: 0 0 9.56px 0;
+
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 33px;
+                }
             }
 
             ul {
@@ -232,6 +273,11 @@ h1#orderform-title {
                         font-size: 12px;
                         line-height: 16px;
                         color: $color-black-500;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 33px;
+                        }
                     }
 
                     i::before {
@@ -239,6 +285,10 @@ h1#orderform-title {
                         font-size: 1rem;
                         opacity: 1;
                         margin-right: 6px;
+
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                        }
                     }
                 }
             }
@@ -252,6 +302,10 @@ h1#orderform-title {
                 color: $color-black;
                 font-size: 6rem;
                 opacity: 0.5;
+
+                @include mq(xxl, min) {
+                    font-size: unset;
+                }
             }
         }
     }
@@ -613,6 +667,11 @@ h1#orderform-title {
                         color: #303030;
                         font-size: 14px;
                         font-weight: 500;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 32px;
+                        }
                     }
 
                     .shp-lean {
@@ -636,6 +695,11 @@ h1#orderform-title {
                     color: #303030;
                     font-size: 14px;
                     font-weight: 500;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
 
                 .shp-summary-group-info {
@@ -658,6 +722,11 @@ h1#orderform-title {
                         background-position: 8px 9px;
                     }
 
+                    @include mq(xxl, min) {
+                        background-size: 46.45px 46.45px;
+                        padding: 12px 90px 12px 72px;
+                    }
+
                     a {
                         position: absolute;
                         right: 13px;
@@ -668,6 +737,11 @@ h1#orderform-title {
                         line-height: 16px;
                         text-transform: lowercase;
                         color: $color-blue2;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 32px;
+                        }
                     }
                 }
 
@@ -760,8 +834,8 @@ h1#orderform-title {
                         i.icon-edit {
                             margin-left: auto;
                             background-size: contain;
-                            width: 21px !important;
-                            height: 21px !important;
+                            width: 20.26px !important;
+                            height: 20.89px !important;
                             background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
 
                             @include mq(xxl, min) {
@@ -868,8 +942,8 @@ h1#orderform-title {
 
                 i.icon-edit {
                     background-size: contain;
-                    width: 21px !important;
-                    height: 21px !important;
+                    width: 20.26px !important;
+                    height: 20.89px !important;
                     background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
 
                     @include mq(xxl, min) {
@@ -915,6 +989,21 @@ h1#orderform-title {
                             letter-spacing: -0.01em;
                             color: $color-gray2;
                             margin-bottom: 16px;
+
+                            @include mq(xxl, min) {
+                                font-size: 28px;
+                                line-height: 48px;
+                            }
+                        }
+                        p,
+                        button,
+                        span,
+                        div,
+                        h3 {
+                            @include mq(xxl, min) {
+                                font-size: 24px;
+                                line-height: 32px;
+                            }
                         }
                     }
 
@@ -962,8 +1051,12 @@ h1#orderform-title {
                                     color: $color-gray14;
                                     margin: 0;
                                     padding: 0;
-
                                     background-image: none !important;
+
+                                    @include mq(xxl, min) {
+                                        font-size: 28px;
+                                        line-height: 24px;
+                                    }
                                 }
                             }
 
@@ -974,13 +1067,13 @@ h1#orderform-title {
                             #payment-group-custom203PaymentGroupPaymentGroup,
                             #payment-group-instantPaymentPaymentGroup,
                             #payment-group-PSEPaymentGroup,
-                            #TransferPaymentGroup,
+                            #TransferPaymentGroup,*/
                             #payment-group-customPrivate_502PaymentGroup,
                             #payment-group-custom201PaymentGroupPaymentGroup,
                             #payment-group-MercadoPagoPaymentGroup,
                             #payment-group-SPEIPaymentGroup {
                                 display: none;
-                            }*/
+                            }
                         }
                     }
 
@@ -1002,6 +1095,17 @@ h1#orderform-title {
     .step.accordion-group.shipping-data {
         padding: 24px 17px 17px 17px;
 
+        /*PADRAO 4K PARA TEXTOS ALTERNATIVOS*/
+        p,
+        button,
+        span,
+        div {
+            @include mq(xxl, min) {
+                font-size: 24px;
+                line-height: 32px;
+            }
+        }
+
         //ICONE
         #edit-shipping-data {
             display: contents !important;
@@ -1020,8 +1124,8 @@ h1#orderform-title {
             i.icon-edit {
                 margin-left: auto;
                 background-size: contain;
-                width: 21px !important;
-                height: 21px !important;
+                width: 20.26px !important;
+                height: 20.89px !important;
                 background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
 
                 @include mq(xxl, min) {
@@ -1054,6 +1158,11 @@ h1#orderform-title {
                 border-radius: 100px;
                 color: #41115d;
                 text-shadow: none;
+
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 38px;
+                }
             }
 
             .vtex-omnishipping-1-x-deliveryOptionInactive {
@@ -1064,6 +1173,11 @@ h1#orderform-title {
                 line-height: 19px;
                 text-transform: uppercase;
                 color: #c4c4c4;
+
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 38px;
+                }
             }
         }
         .input.ship-country.text {
@@ -1084,6 +1198,11 @@ h1#orderform-title {
                     font-size: 12px;
                     line-height: 16px;
                     color: $color-gray2;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
                 }
             }
             #ship-postalCode {
@@ -1100,6 +1219,11 @@ h1#orderform-title {
                 font-size: 12px;
                 line-height: 16px;
                 color: $color-black;
+
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 33px;
+                }
             }
         }
         /*FORMA DE ENTREGA*/
@@ -1113,6 +1237,11 @@ h1#orderform-title {
                 font-size: 14px;
                 line-height: 19px;
                 color: $color-gray2;
+
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
             }
 
             #delivery-packages-options {
@@ -1129,6 +1258,11 @@ h1#orderform-title {
                         line-height: 16px;
                         letter-spacing: 0.05em;
                         color: $color-gray2;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 32px;
+                        }
                     }
 
                     .shp-option-text-time,
@@ -1138,6 +1272,11 @@ h1#orderform-title {
                         font-size: 12px;
                         line-height: 16px;
                         color: $color-gray2;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 32px;
+                        }
                     }
                 }
 
@@ -1150,6 +1289,13 @@ h1#orderform-title {
                         border-radius: 3px;
                         background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png");
 
+                        @include mq(xxl, min) {
+                            width: 29px;
+                            height: 29px;
+                            background-repeat: no-repeat;
+                            background-size: contain;
+                        }
+
                         path {
                             fill: transparent;
                         }
@@ -1203,6 +1349,11 @@ h1#orderform-title {
                     letter-spacing: 0.05em;
                     color: $color-gray2;
 
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 32px;
+                    }
+
                     &::after {
                         content: "-";
                         margin-left: 2px;
@@ -1217,6 +1368,11 @@ h1#orderform-title {
                     line-height: 16px;
                     letter-spacing: 0.05em;
                     color: $color-gray2;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 32px;
+                    }
                 }
             }
 
@@ -1234,6 +1390,11 @@ h1#orderform-title {
             line-height: 16px;
             letter-spacing: 0.05em;
             color: $color-gray2;
+
+            @include mq(xxl, min) {
+                font-size: 24px;
+                line-height: 32px;
+            }
         }
 
         .address-summary {
@@ -1245,6 +1406,11 @@ h1#orderform-title {
             font-size: 12px;
             line-height: 16px;
             color: $color-gray2;
+
+            @include mq(xxl, min) {
+                font-size: 24px;
+                line-height: 32px;
+            }
         }
 
         .vtex-omnishipping-1-x-address {
@@ -1265,6 +1431,11 @@ h1#orderform-title {
                         line-height: 16px;
                         letter-spacing: 0.05em;
                         color: $color-gray2;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 32px;
+                        }
                     }
 
                     input {
@@ -1315,6 +1486,11 @@ h1#orderform-title {
         font-size: 16px;
         line-height: 19px;
         color: $color-black;
+
+        @include mq(xxl, min) {
+            font-size: 32px;
+            line-height: 37px;
+        }
     }
 
     .summary-cart-template-holder {
@@ -1336,11 +1512,22 @@ h1#orderform-title {
                     width: 60px;
                     height: 60px;
 
+                    @include mq(xxl, min) {
+                        width: 116.5px;
+                        height: 116.5px;
+                    }
+
                     img {
                         max-width: 60px;
                         height: 60px;
                         width: 60px;
                         object-fit: cover;
+
+                        @include mq(xxl, min) {
+                            max-width: 116.5px;
+                            width: 116.5px;
+                            height: 116.5px;
+                        }
                     }
                 }
 
@@ -1352,6 +1539,10 @@ h1#orderform-title {
                     align-items: end;
                     justify-content: center;
 
+                    @include mq(xxl, min) {
+                        font-size: 15px;
+                    }
+
                     .shipping-date {
                         width: max-content;
                     }
@@ -1377,6 +1568,12 @@ h1#orderform-title {
                     line-height: 14px;
                     color: $color-black;
 
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 28px;
+                        width: 227px;
+                    }
+
                     @include mq(md, max) {
                         top: 25%;
                         margin-left: 70px;
@@ -1395,6 +1592,11 @@ h1#orderform-title {
                     font-weight: 400;
                     font-size: 12px;
                     line-height: 16px;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
                 }
             }
         }
@@ -1412,6 +1614,11 @@ h1#orderform-title {
             line-height: 16px;
             margin-right: 17px;
 
+            @include mq(xxl, min) {
+                font-size: 24px;
+                line-height: 33px;
+            }
+
             @include mq(tablet, max) {
                 margin-right: 0;
             }
@@ -1437,6 +1644,11 @@ h1#orderform-title {
                     line-height: 19px;
                     padding-top: 25px;
                     padding-bottom: 25px;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
 
                 &.info {
@@ -1465,11 +1677,21 @@ h1#orderform-title {
                 font-size: 18px;
                 line-height: 25px;
                 color: $color-black;
+
+                @include mq(xxl, min) {
+                    font-size: 36px;
+                    line-height: 49px;
+                }
             }
 
             td.monetary {
                 font-size: 14px;
                 line-height: 19px;
+
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 33px;
+                }
             }
         }
     }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 384d388..db74f01 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -10,7 +10,6 @@ html {
 
 footer .footerCheckout__wrapper {
     width: 94.9734%;
-    margin: auto auto 0 auto;
 }
 footer .footerCheckout__prateleira,
 header {
@@ -25,6 +24,12 @@ body {
     flex-direction: column;
     min-height: 100% !important;
     padding-top: 0 !important;
+    justify-content: space-between;
+
+    @include mq(lg, max) {
+        padding-right: 0;
+        padding-left: 0;
+    }
 
     @include mq(md, max) {
         padding-left: 0;
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 296bc65..7bbe7e3 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -41,7 +41,7 @@ $grid-breakpoints: (
     fold: 350,
     cstm: 400,
     sm: 576px,
-    md: 768px,
+    md: 599px,
     lg: 992px,
     tablet: 1025px,
     xl: 1200px,
-- 
2.34.1