From df9c8abca0950f477266415cd79c0435a8c11cb4 Mon Sep 17 00:00:00 2001
From: guiprj <guilhermecamargo90@hotmail.com>
Date: Mon, 26 Dec 2022 23:41:48 -0300
Subject: [PATCH] feat: melhorando a responsividade

---
 checkout/src/arquivos/js/components/Footer.js |   4 +-
 .../sass/checkout/_checkout-autenticacao.scss | 282 ++++++-
 .../sass/checkout/_checkout-carrinho.scss     | 700 ++++++++++++++----
 .../sass/checkout/_checkout-pagamento.scss    |   5 +
 .../src/arquivos/sass/checkout/_checkout.scss |  42 +-
 .../src/arquivos/sass/partials/_footer.scss   |   3 +
 .../src/arquivos/sass/partials/_header.scss   |  33 +-
 .../src/arquivos/sass/utils/_variaveis.scss   |   6 +
 8 files changed, 890 insertions(+), 185 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 264b55d..9daf5cd 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -75,7 +75,7 @@ export default class Footer {
             slidesToScroll: 1,
             responsive: [
                 {
-                  breakpoint: 1024,
+                  breakpoint: 1025,
                   settings: {
                     slidesToShow: 3,
                     slidesToScroll: 3,
@@ -84,7 +84,7 @@ export default class Footer {
                   }
                 },
                 {
-                    breakpoint: 375,
+                    breakpoint: 376,
                     settings: {
                       slidesToShow: 2,
                       slidesToScroll: 2
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 8f39df2..a6c1b85 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -3,13 +3,20 @@
         border-top: 1px solid $color-black;
         font-family: $font-family;
         padding-top: 8px;
+        width: 100.2% !important;
+
+        @media (max-width: 1024px) {
+            width: 100% !important;
+            left: 0;
+        }
 
         .link-cart {
             a {
-                color: $color-black;
+                color: $color-blackTotal;
                 font-size: 14px;
                 font-family: $font-family-secundary;
                 text-transform: uppercase;
+                text-decoration: none;
 
                 &:hover {
                     color: lighen($color-black, 10);
@@ -24,14 +31,18 @@
             justify-content: center;
 
             h3 {
-                margin-bottom: 16px;
+                margin-bottom: 20px;
 
                 span {
                     font-family: $font-family-secundary;
                     text-transform: uppercase;
-                    color: $color-black;
+                    color: $color-blackTotal;
                     font-weight: 400;
                     font-size: 1.25rem;
+
+                    @media (max-width: 1024px) {
+                        font-size: 14px;
+                    }
                 }
 
                 small {
@@ -40,36 +51,58 @@
                     color: $color-black;
                     font-weight: 400;
                     font-size: 1.25rem;
+
+                    @media (max-width: 1024px) {
+                        font-size: 14px;
+                    }
                 }
             }
         }
 
         .client-email {
             margin: 0 0 16px;
+            max-width: 562px;
+
+            @media (max-width: 1024px) {
+                width: 100%;
+                max-width: unset;
+                padding: 0 16px;
+            }
 
             input {
                 box-shadow: none;
                 color: $color-black;
                 font-family: $font-family;
+                font-weight: 400;
+                font-size: 12px;
                 padding: 0 16px;
-                border: 1px solid $color-black;
+                border: 1px solid $color-blackTotal;
                 box-sizing: border-box;
-                border-radius: 5px;
+                border-radius: 5px 9px 9px 5px;
+                height: 50px !important;
+                position: relative;
 
                 @media (max-width: 490px) {
                     width: auto;
                 }
+
+                &::-webkit-input-placeholder {
+                    color: $color-blackTotal;
+                    font-family: $font-family;
+                    font-weight: 400;
+                    font-size: 12px;
+                }
             }
 
             button {
                 background-color: $color-blue2;
-                border-radius: 5px;
+                border-radius: 0 0.5rem 0.5rem 0;
                 border: none;
                 font-family: $font-family;
-                height: 54px;
+                height: 50px;
                 right: 0;
                 top: 0;
-                color: $color-black;
+                color: $color-blackTotal;
                 text-transform: uppercase;
                 font-weight: 700;
 
@@ -78,22 +111,36 @@
                     margin: 0;
                     position: absolute;
                 }
+
+                @media (max-width: 1024px) {
+                    right: 10px;
+                }
             }
 
             span.help.error {
                 color: red;
+                position: absolute;
+                top: 70px;
+
+                font-weight: 700;
             }
         }
 
         .emailInfo {
-            padding: 16px;
+            padding: 16px 16px 26.56px 17px;
             background-color: $color-white;
-            border: 1px solid $color-black;
-            border-radius: 0;
+            border: 1px solid $color-blackTotal;
+            border-radius: 0.5rem;
+            min-width: 400px;
 
             h3 {
                 color: #303030;
-                margin: 0 0 8px 0;
+                margin: 0 0 9.56px 0;
+                font-size: 12px;
+                font-family: $font-family;
+                line-height: 16.34px;
+                color: $color-blackTotal;
+                font-weight: 700;
             }
 
             ul {
@@ -101,11 +148,17 @@
 
                 li {
                     span {
-                        color: $color-black;
+                        color: #303030;
+                        font-size: 12px;
+                        font-family: $font-family;
+                        line-height: 16.34px;
+                        color: $color-blackTotal;
+                        font-weight: 700;
+                        margin-left: 6px;
                     }
 
                     i::before {
-                        color: $color-black;
+                        color: $color-blue2;
                         font-size: 1rem;
                         opacity: 1;
                     }
@@ -120,6 +173,12 @@
         }
     }
 
+    .shipping-data {
+        .accordion-toggle-active {
+            margin-bottom: 25px !important;
+        }
+    }
+
     .shipping-data,
     .payment-data,
     .client-profile-data {
@@ -130,8 +189,12 @@
             padding: 16px;
 
             .accordion-heading {
+                position: relative;
                 span {
-                    color: #303030;
+                    color: $color-black;
+                    font-family: $font-family-secundary;
+                    font-weight: 400;
+
                     margin-bottom: 8px;
                     padding: 0;
 
@@ -166,14 +229,36 @@
                     label {
                         color: $color-gray2;
                         font-weight: 400;
+                        font-family: $font-family;
+                    }
+
+                    label[for="ship-postalCode"] {
+                        font-size: 0;
+                        font-weight: 700 !important;
+                        display: flex;
+                    }
+
+                    label[for="ship-postalCode"]::after {
+                        content: "CEP:";
+                        font-weight: 700 !important;
+                        color: $color-gray2;
+                        font-family: $font-family;
+                        font-size: 12px;
                     }
 
                     select,
                     input {
                         border-radius: 5px;
                         height: 42px;
-                        border: 1px solid $color-gray5;
+                        border: 1px solid $color-gray10;
                         box-shadow: none;
+
+                        &::-webkit-input-placeholder {
+                            color: $color-gray11;
+                            font-family: $font-family;
+                            font-weight: 400;
+                            font-size: 14px;
+                        }
                     }
 
                     .help.error {
@@ -198,7 +283,7 @@
                     border: none;
                     border-radius: 0.5rem;
                     background: $color-blue2;
-                    margin-top: 8px;
+                    margin-top: 44px;
                     outline: none;
                     transition: all 0.2s linear;
                     text-transform: uppercase;
@@ -263,15 +348,17 @@
                     background: none;
                     border-color: $color-gray4;
                     border-radius: 0;
-                    color: #303030;
-                    padding: 12px;
+                    color: $color-gray2;
+                    /* padding: 12px; */
+                    padding: 0 0 0 8px;
+                    margin: 0;
 
                     @include mq(md, max) {
                         background-position: 8px 9px;
                     }
 
                     a {
-                        color: #303030;
+                        color: $color-blue2;
                         font-weight: 500;
                         text-decoration: underline;
                     }
@@ -287,7 +374,7 @@
                 }
 
                 .shp-summary-package {
-                    padding-left: 16px;
+                    padding-left: 7px;
                 }
 
                 .vtex-omnishipping-1-x-summaryChange {
@@ -300,17 +387,72 @@
                     //border: 1px solid #d8c8ac;
                 }
 
-                .vtex-omnishipping-1-x-deliveryOptionActive {
+                /* .vtex-omnishipping-1-x-deliveryOptionActive {
                     text-shadow: 1.3px 1px lighten($color-black, 50);
-                }
+                } */
             }
         }
     }
 }
 
+p.client-email.input.text,
+p.client-first-name.input.pull-left.text,
+p.client-last-name.input.pull-left.text {
+    margin-bottom: 16px;
+}
+
+p.client-document.input.pull-left.text,
+p.client-phone.input.pull-left.text {
+    margin-bottom: 0;
+}
+
+.box-client-info {
+    position: relative;
+
+    @media (max-width: 1024px) {
+        fieldset.box-client-info-pf {
+            width: 100%;
+        }
+    }
+}
+
+.newsletter {
+    margin: 0;
+}
+
+.box-info {
+    line-height: inherit !important;
+}
+
+.srp-unavailable.flex.items-center.tl.pa3.br2.ba.b--yellow,
+.shp-alert.vtex-omnishipping-1-x-warning {
+    border-color: $color-blue2;
+
+    span {
+        border-color: $color-blue2;
+    }
+
+    svg {
+        g {
+            fill: $color-blue2;
+        }
+    }
+}
+
 .vtex-omnishipping-1-x-SummaryItemContent {
     display: flex;
-    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-end !important;
+
+    .vtex-omnishipping-1-x-SummaryItemInfo {
+        flex: 1;
+        padding: 0;
+    }
+
+    .vtex-omnishipping-1-x-SummaryItemPrice {
+        padding: 0;
+        flex: 1;
+    }
 
     span {
         font-family: $font-family;
@@ -320,21 +462,16 @@
 }
 
 .vtex-omnishipping-1-x-SummaryItemInfo {
-  border: none !important;
+    border: none !important;
 }
 
 .link-change-shipping.vtex-omnishipping-1-x-summaryChange {
     display: none;
 }
 
-/* .step.active,
-.cart.active,
-.totalizers.active {
-    //border: 1px solid $color-gray3;
-} */
-
 .summary-cart-template-holder {
     border: none;
+    height: unset !important;
 }
 
 .accordion-group.shipping-data .accordion-toggle,
@@ -356,6 +493,12 @@
     }
 }
 
+div#client-profile-data {
+    span.accordion-toggle.collapsed.accordion-toggle-active {
+        margin-bottom: 2.25rem;
+    }
+}
+
 .client-profile-data .accordion-heading .accordion-toggle a {
     display: flex !important;
 }
@@ -364,6 +507,20 @@
 span[data-i18n="clientProfileData.identification"] {
     font-size: 0;
     color: $color-black;
+    margin: 0;
+}
+
+.checkbox.newsletter-label {
+    input {
+        border: 1px solid $color-gray13 !important;
+        height: unset !important;
+    }
+
+    span {
+        color: $color-gray12 !important;
+        font-size: 12px;
+        margin-top: 5px;
+    }
 }
 
 span[data-i18n="clientProfileData.identification"]::after {
@@ -376,15 +533,66 @@ span[data-i18n="clientProfileData.identification"]::after {
 
 .checkbox.newsletter-label {
     display: flex;
-    justify-content: space-around;
+    justify-content: flex-start;
     align-items: center;
+    width: 100%;
+    padding-left: 17px;
 
-    label {
-        font-family: $font-family;
-        font-weight: 400;
-        font-size: 0.75rem;
-        color: $color-gray4;
+    font-family: $font-family;
+    font-weight: 400;
+    font-size: 0.75rem;
+    color: $color-gray4;
+
+    input {
+        margin-right: 8px;
     }
 }
 
+.step.accordion-group.shipping-data.active {
+    p.input.ship-postalCode.required.text {
+        margin-bottom: 9px !important;
 
+        #ship-postalCode {
+            border: 1px solid $color-gray6;
+            border-radius: 0.5rem;
+            margin-bottom: 10px;
+            height: 45px;
+            padding: 0 0.6rem;
+            width: unset;
+        }
+
+        small {
+            margin: 0 !important;
+        }
+    }
+}
+
+/* #ship-number,
+#ship-complement,
+#ship-receiverName {
+    padding: 8px;
+    height: 35px !important;
+    width: unset !important;
+} */
+
+.vtex-omnishipping-1-x-address {
+    margin-bottom: 0 !important;
+}
+
+#edit-profile-data,
+#edit-shipping-data,
+.link-box-edit.btn.btn-small {
+    i {
+        display: none;
+    }
+    &::after {
+        content: "";
+        background: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
+        position: absolute;
+        top: 0;
+        right: 0;
+        background-size: contain;
+        width: 20.26px;
+        height: 20.89px;
+    }
+}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 6d87f05..1f7e1e3 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -13,11 +13,15 @@
         display: none;
     }
     .cart {
-        //border: 1px solid $color-gray3;
+        border: 1px solid $color-gray3 !important;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
 
+        @media (max-width: 1024px) {
+            padding: 0;
+        }
+
         @include mq(md, max) {
             margin: 0px 0 25px 0;
             border-left: none;
@@ -32,7 +36,6 @@
         font-family: $font-family;
         width: 100%;
         h2 {
-            background: $color-white;
             border: none;
             color: #303030;
             font-size: 14px;
@@ -74,8 +77,9 @@
         }
 
         #go-to-cart-button a {
-            color: #303030;
+            color: $color-blackTotal;
             text-decoration: underline;
+            text-decoration-style: $color-blackTotal;
         }
 
         .summary-totalizers {
@@ -250,7 +254,7 @@
                 max-height: 38px;
                 margin: 0.75rem !important;
                 padding: 8px 0;
-                width: 24px;
+                width: 24px !important;
                 color: $color-blackTotal;
                 box-shadow: none;
             }
@@ -366,19 +370,20 @@
         .cart-more-options {
             margin: 0;
             width: max-content;
+            padding-left: 16px;
 
             .srp-container {
-                @include mq(md, max) {
+                /* @include mq(md, max) {
                     padding: 0 16px;
-                }
+                } */
 
                 .srp-main-title {
-                    margin: 32px 0 12px;
+                    /* margin: 48px 0 11px; */
+                    margin: 0 0 11px;
                     font-family: $font-family;
-                    font-style: normal;
                     font-weight: 400;
                     font-size: 24px;
-                    line-height: 28px;
+                    line-height: 32.68px;
                     color: $color-blackTotal;
 
                     @include mq(md, max) {
@@ -404,7 +409,7 @@
                     line-height: 19px;
                     font-weight: 500;
                     outline: none;
-                    padding: 0.749rem 2.563rem 0.804rem 2.563rem ;
+                    padding: 0.749rem 2.563rem 0.804rem 2.563rem;
                     transition: all 0.2s linear;
                     margin: unset;
 
@@ -442,13 +447,14 @@
                     outline: none;
                     width: 100%;
 
-                    font-family: $font-family-secundary;
+                    font-family: $font-family;
                     font-style: normal;
                     font-weight: 700;
                     font-size: 14px;
-                    line-height: 16px;
+                    line-height: 19.07px;
                     letter-spacing: 0.05em;
-                    padding: 0.75rem 0;
+                    padding: 0.75rem 0 0.688rem 0;
+                    margin-top: 0.625rem;
 
                     &:hover {
                         opacity: 0.8;
@@ -461,7 +467,7 @@
             }
 
             .srp-toggle {
-                margin: 0 0 1.25rem;
+                margin: 0 0 0.625rem;
 
                 &__wrapper {
                     background-color: $color-white;
@@ -473,22 +479,23 @@
                     font-size: 14px;
                     line-height: 16px;
                     text-transform: uppercase;
+                    box-shadow: 0 0 5px #00000020;
                 }
 
                 &__current {
-                    border: 1px solid $color-black;
+                    border: 1px solid $color-blackTotal;
                     border-radius: 100px;
                 }
 
                 .blue {
-                    color: $color-black;
+                    color: $color-blackTotal;
                 }
 
                 label {
                     width: 50%;
 
                     &:active {
-                        background-color: #f0f0f0;
+                        background-color: $color-white;
                     }
                 }
             }
@@ -501,8 +508,8 @@
                         font-weight: normal;
                         font-size: 12px;
                         line-height: 14px;
-                        color: $color-black;
-                        margin-bottom: 12px;
+                        color: $color-blackTotal;
+                        margin-bottom: 2px;
                     }
 
                     input {
@@ -521,16 +528,19 @@
                         border: none;
                         border-radius: 5px;
                         color: $color-white;
-                        font-size: 12px;
+                        font-size: 14px;
                         height: 36px;
                         letter-spacing: 1px;
                         outline: none;
                         position: absolute;
-                        right: -150px;
-                        top: 36px;
+                        right: -105px;
+                        top: 25px;
                         transition: all 0.2s linear;
                         width: 96px;
                         text-transform: uppercase;
+                        font-family: $font-family;
+                        font-weight: 700;
+                        padding: 8px 0 9px 0;
 
                         &:hover {
                             opacity: 0.8;
@@ -545,7 +555,7 @@
                         font-family: $font-family-secundary;
                         font-style: normal;
                         font-weight: 400;
-                        font-size: 10px;
+                        font-size: 0;
                         line-height: 12px;
                         color: $color-black;
                         margin-top: 7px;
@@ -557,7 +567,8 @@
                         position: absolute;
                         left: 0;
                         width: 100%;
-                        top: 17px;
+                        top: 5px;
+                        left: 37px;
                     }
                 }
             }
@@ -627,6 +638,7 @@
             width: 346px;
 
             .coupon-data {
+                display: block !important;
                 #cart-link-coupon-add {
                     font-family: $font-family-secundary;
                     font-weight: 400;
@@ -666,21 +678,20 @@
 
                 .coupon-label {
                     display: flex;
+                    margin: 0;
 
-                    .coupon-label label {
-                        margin-bottom: 12px;
-                        font-family: $font-family;
-                        font-style: normal;
-                        font-weight: normal;
+                    label {
+                        margin-bottom: 4px;
+                        font-family: $font-family-secundary;
+                        font-weight: 400;
                         font-size: 12px;
                         line-height: 14px;
                         color: $color-gray2;
-                        cursor: none;
                     }
                 }
 
                 .coupon-fields {
-                    margin-bottom: 32px;
+                    margin-bottom: 20px;
 
                     span {
                         display: flex;
@@ -707,16 +718,23 @@
                     } */
 
                     input {
-                        border: 2px solid $color-gray3;
+                        border: 1px solid $color-gray5;
                         border-radius: 5px;
                         box-shadow: none;
-                        color: $color-gray4;
+                        color: $color-gray6;
                         font-size: 12px;
                         height: 36px;
-                        padding: 0 12px;
-                        //max-width: 160px;
+                        padding: 0 16.18px;
+                        max-width: 160px;
+                        min-width: 160px;
                         flex: 2;
 
+                        @media (max-width: 1024px) {
+                            max-width: unset;
+                            min-width: unset;
+                            flex: 7;
+                        }
+
                         @include mq(sm, max) {
                             max-width: 100%;
                             width: 100%;
@@ -727,16 +745,17 @@
                         background: $color-blue2;
                         border: none;
                         border-radius: 0.5rem;
-                        color: $color-black;
-                        font-size: 12px;
+                        color: $color-blackTotal;
+                        font-size: 14px;
                         height: 36px;
                         letter-spacing: 1px;
-                        margin-left: 6px;
                         outline: none;
                         transition: all 0.2s linear;
                         //width: 94px;
                         flex: 1;
                         text-transform: uppercase;
+                        font-family: $font-family;
+                        font-weight: 400;
 
                         /* @include mq(md, max) {
                             width: 138px;
@@ -761,7 +780,6 @@
                             padding: 0.625rem 0;
                         }
                     }
-
                 }
 
                 tr {
@@ -802,6 +820,7 @@
                         font-size: 18px;
                         line-height: 21px;
                         color: $color-black;
+                        white-space: nowrap;
                     }
                 }
             }
@@ -822,7 +841,6 @@
 
         @include mq(md, min) {
             margin: 0;
-            padding-bottom: 50px;
         }
 
         .link-choose-more-products-wrapper {
@@ -830,6 +848,10 @@
             text-align: center;
             margin-bottom: 0.932rem;
 
+            @media (max-width: 1024px) {
+                margin-top: 7px;
+            }
+
             @include mq(md, max) {
                 margin-bottom: 0px;
             }
@@ -887,7 +909,7 @@
     overflow: initial !important;
 }
 
-.cart-fixed.affix-top.cart-fixed-transition {
+.cart-fixed.cart-fixed-transition {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -900,18 +922,23 @@
 #go-to-cart-button {
     font-family: $font-family;
     font-weight: 400;
-    color: $color-black;
+    color: $color-blackTotal;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     border-bottom: 1px solid $color-gray5;
-    padding: 0.625rem 1rem;
+    padding: 0.813rem 1.063rem 0.625rem;
 }
 
 .cart-template.mini-cart.span4 .accordion-inner tr {
     border-bottom: 1px solid $color-gray5;
 }
 
+.cart-template.mini-cart.span4 .summary-template-holder {
+    margin-top: 0;
+    padding-top: 0;
+}
+
 .cart-template.mini-cart.span4 .accordion-inner tr td::before {
     content: "oi";
     color: $color-white;
@@ -929,6 +956,10 @@ li.hproduct.item.muted {
 
     a {
         flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-width: 60px;
     }
 
     span.fn.product-name {
@@ -937,23 +968,34 @@ li.hproduct.item.muted {
         width: 100%;
         white-space: initial;
         color: black;
+        min-width: 115px;
     }
 
     span.quantity.badge {
         display: none;
     }
 
+    span.shipping-date.pull-left {
+        display: none;
+    }
+
     .description {
         flex: 2;
+        margin: 0;
+
+        @media (max-width: 1024px) {
+            flex: 10;
+        }
+
+        .price.pull-right {
+            font-family: $font-family;
+            font-weight: 400;
+            font-size: 12px;
+            color: $color-black;
+        }
     }
 }
 
-/* .step.accordion-group.shipping-data .accordion-heading span::after {
-    content: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
-    font-size: 1.197rem;
-    display: flex;
-} */
-
 .shipping-method-toggle.vtex-omnishipping-1-x-deliveryChannelsToggle.shipping-method-toggle-delivery {
     background: white !important;
     border: 1px solid $color-black;
@@ -979,10 +1021,11 @@ li.hproduct.item.muted {
 }
 
 h2[data-i18n="totalizers.summary"] {
+    background: unset !important;
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    padding-top: 1.5rem;
+    padding: 1.5rem 1.063rem 1.125rem;
 }
 
 p.input.ship-postalCode.required.text {
@@ -994,7 +1037,19 @@ p.input.ship-postalCode.required.text {
 p.input.ship-postalCode.required.text small {
     text-decoration: none;
     margin: initial;
-    margin-top: 10px;
+    margin-top: 4px;
+    font-size: 0;
+
+    &::after {
+        content: "Não sei meu código postal";
+        font-size: 10px;
+        font-family: $font-family-secundary;
+        font-weight: 400;
+        line-height: 11.7px;
+        color: $color-blackTotal;
+        text-decoration: underline;
+        cursor: pointer;
+    }
 }
 
 p.input.ship-postalCode.required.text input {
@@ -1032,16 +1087,21 @@ p.vtex-omnishipping-1-x-shippingSectionTitle.delivery-address-title {
 }
 
 .vtex-omnishipping-1-x-addressSummary.vtex-omnishipping-1-x-addressSummaryActive {
-    border: 1px solid $color-gray6;
+    border: 1px solid $color-gray10;
     border-radius: 0.5rem;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     padding: 10px;
 
     &::before {
-        content: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
+        content: "";
+        background: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
+        width: 24px;
+        height: 24px;
+        background-size: contain;
+        background-repeat: no-repeat;
     }
 }
 
@@ -1066,44 +1126,61 @@ p.vtex-omnishipping-1-x-shippingSectionTitle.delivery-address-title {
     width: 100%;
 }
 
-p.input.ship-number.required.text {
-    margin-right: 0 !important;
+
+.vtex-omnishipping-1-x-address {
+    p {
+        margin-right: 0 !important;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 15px;
+
+        input {
+            box-sizing: border-box !important;
+            padding: 8px !important;
+            border-radius: 5px;
+            height: 42px !important;
+            border: 1px solid #e0e0e0 !important;
+        }
+    }
 }
 
-button#payment-data-submit {
-    background-color: $color-green2 !important;
-    color: $color-white !important;
-    font-weight: 700;
-    font-family: $font-family;
-    text-transform: uppercase;
-    border-radius: 0.5rem !important;
+#btn-go-to-payment {
+    margin-top: 0;
+    margin-bottom: 44px;
 }
 
-a#payment-group-custom204PaymentGroupPaymentGroup,
-a#payment-group-custom205PaymentGroupPaymentGroup,
-a#payment-group-creditControlPaymentGroup,
-a#payment-group-creditDirectSalePaymentGroup,
-a#payment-group-promissoryPaymentGroup,
-a#payment-group-custom203PaymentGroupPaymentGroup,
-a#payment-group-PSEPaymentGroup,
-a#payment-group-Bancolombia\ TransferPaymentGroup,
-a#payment-group-customPrivate_502PaymentGroup,
-a#payment-group-custom201PaymentGroupPaymentGroup,
-a#payment-group-MercadoPagoPaymentGroup,
-a#payment-group-SPEIPaymentGroup,
-a#show-gift-card-group {
-    display: none !important;
+.payment-submit-wrap {
+    position: relative;
+    button#payment-data-submit {
+        position: absolute;
+        top: 20px;
+        background-color: $color-green2 !important;
+        color: $color-white !important;
+        font-weight: 700;
+        font-family: $font-family;
+        text-transform: uppercase;
+        border-radius: 0.5rem !important;
+
+        i {
+            display: none !important;
+        }
+    }
+}
+
+.payment-confirmation-wrap {
+    height: 0;
 }
 
 div#payments-title {
     margin-bottom: 1rem;
 }
 
-div#payments-title::after {
+.step.accordion-group.active div#payments-title::after {
     content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
     font-weight: 400;
     font-family: $font-family;
     color: $color-gray2;
+    font-size: 14px;
 }
 
 .payment-group {
@@ -1112,11 +1189,10 @@ div#payments-title::after {
 
 .payment-group-item {
     background-color: $color-gray3 !important;
-    border-color: $color-black;
     border-radius: 0.375rem;
-    margin: 0 !important;
-    margin-bottom: 0.75rem !important;
-    border: 1px solid $color-black !important;
+    margin: 0 0 0.75rem 0 !important;
+    border: 1px solid $color-blackTotal !important;
+    width: unset !important;
 
     span {
         display: flex;
@@ -1130,16 +1206,76 @@ div#payments-title::after {
 
 .payment-group-item.active {
     border-color: $color-orange !important;
+    background-color: $color-gray15 !important;
 
     span {
         color: $color-orange;
     }
 }
 
+.link.link-gift-card {
+    display: flex !important;
+    position: relative !important;
+    width: 100%;
+    justify-content: flex-start;
+    all: unset;
+    margin: 0 0 0.75rem 0;
+
+    a {
+        color: $color-gray7;
+        text-decoration: underline;
+    }
+}
+
+.box-step-content {
+    form {
+        display: grid;
+        grid-template-columns: 2fr 1fr 10fr;
+        grid-template-rows: 1fr 30fr;
+    }
+
+    .link.link-gift-card {
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
+    }
+
+    .gift-card-section.form-step.box-default {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2;
+
+        margin: 0 0 15px;
+        width: unset;
+    }
+
+    fieldset.payment-group {
+        grid-column: 1 / 2;
+        grid-row: 2 / 3;
+    }
+
+    .steps-view {
+        grid-column: 3 / 4;
+        grid-row: 2 / 3;
+
+        width: 100% !important;
+        box-sizing: border-box !important;
+    }
+}
+
 .steps-view iframe {
     height: 500px !important;
 }
 
+.summary-cart-template-holder .cart {
+    border: none !important;
+    padding-bottom: 0;
+}
+
+.vtex-omnishipping-1-x-cta.ask-for-geolocation-cta {
+    button {
+        background-color: $color-blue2;
+    }
+}
+
 @media (max-width: 1024px) {
     .container.container-main.container-cart {
         width: 100%;
@@ -1155,26 +1291,53 @@ div#payments-title::after {
     }
 
     tr.product-item {
-        display: grid;
+        display: grid !important;
         grid-template-columns: 1fr 6fr 1fr 1fr;
         grid-template-rows: 1fr;
+        padding-right: 16px !important;
 
         td.product-image {
             grid-column: 1 / 2;
             grid-row: 1 / 3;
 
-            display: flex;
+            display: flex !important;
             justify-content: center;
             align-items: flex-start;
             background-image: unset;
+            position: unset !important;
+            margin-right: 16px;
+            width: 100% !important;
+
+            a {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: flex-start;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    max-width: 60px;
+                    min-width: 60px;
+                }
+            }
         }
 
         td.product-name {
             grid-column: 2 / 3;
             grid-row: 1 / 2;
-            display: flex;
+            display: flex !important;
             justify-content: flex-start;
             align-items: flex-start;
+
+            @media (max-width: 1024px) {
+                margin-left: unset !important;
+                justify-content: flex-start;
+                align-items: center;
+                a {
+                    margin-left: unset !important;
+                }
+            }
         }
 
         td.shipping-date {
@@ -1187,10 +1350,17 @@ div#payments-title::after {
             grid-row: 2 / 3;
 
             width: 100%;
-            display: flex;
+            display: flex !important;
             flex-direction: column;
             justify-content: flex-start;
             align-items: end;
+            position: inherit !important;
+
+            @media (max-width: 1024px) {
+                br {
+                    display: none;
+                }
+            }
         }
 
         td.quantity {
@@ -1209,14 +1379,19 @@ div#payments-title::after {
             grid-row: 1 / 2;
 
             width: 100%;
-            display: flex;
+            display: flex !important;
             justify-content: flex-end;
             align-items: flex-start;
+
+            @media (max-width: 1024px) {
+                position: inherit !important;
+                width: unset !important;
+            }
         }
     }
 
     .row-fluid.summary {
-        display: flex !important;
+        display: flex;
         flex-direction: column;
         width: 100% !important;
         justify-content: center;
@@ -1225,10 +1400,30 @@ div#payments-title::after {
 
     .span5.totalizers.summary-totalizers.cart-totalizers.pull-right {
         width: 100%;
+        margin: unset;
+    }
+
+    .cart-fixed {
+        .span5.totalizers.summary-totalizers.cart-totalizers.pull-right {
+            padding: 0;
+        }
+    }
+
+    .span5.totalizers.summary-totalizers.cart-totalizers.pull-right {
+        padding: 0 16px;
+    }
+
+    .btn-place-order-wrapper {
+        padding: 0 16px;
+    }
+
+    fieldset.coupon-fieldset {
+        margin-top: 48.35px;
     }
 
     .clearfix.pull-right.cart-links.cart-links-bottom.hide {
         width: 100%;
+        padding-left: 0;
     }
 }
 
@@ -1264,6 +1459,7 @@ th.shipping-date {
 
     .orderform-template-holder.span8 {
         width: 100%;
+        padding: 16px;
     }
 
     .orderform-template-holder.span8 .row-fluid {
@@ -1280,6 +1476,7 @@ th.shipping-date {
 
     div#shipping-data {
         width: 100%;
+        margin: unset;
     }
 
     fieldset.payment-group {
@@ -1290,7 +1487,9 @@ th.shipping-date {
     }
 
     .required.payment-group-list-btn {
-        width: 100%;
+        width: 100% !important;
+        display: flex;
+        flex-direction: column;
     }
 
     .steps-view {
@@ -1310,10 +1509,6 @@ th.shipping-date {
         width: 100%;
     }
 
-    h2[data-i18n="totalizers.summary"] {
-        width: 100%;
-    }
-
     td.monetary {
         width: 100%;
     }
@@ -1328,45 +1523,11 @@ th.shipping-date {
 
     div#payment-data {
         width: 100%;
-    }
-
-    fieldset.box-client-info-pf {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr 1fr;
-
-        p.client-email.input.text.required {
-            grid-column: 1 / 3;
-            grid-row: 1 / 2;
-        }
-
-        p.client-first-name.input.pull-left.text.required {
-            grid-column: 1 / 2;
-            grid-row: 2/ 3;
-        }
-
-        p.client-last-name.input.pull-left.text.required {
-            grid-column: 2 / 3;
-            grid-row: 2 / 3;
-        }
-
-        p.client-document.input.pull-left.text.required.mask {
-            grid-column: 1 / 2;
-            grid-row: 3/ 4;
-        }
-
-        div {
-            grid-column: 2/ 3;
-            grid-row: 3/ 4;
-
-            width: 100%;
-        }
+        margin: unset;
     }
 
     input#client-email {
         all: unset;
-        width: 100% !important;
         border: 1px solid $color-gray5;
         height: 42px;
         border-radius: 0.5rem;
@@ -1377,10 +1538,6 @@ th.shipping-date {
         width: 100% !important;
     }
 
-    p.client-first-name.input.pull-left.text.required {
-        width: 98%;
-    }
-
     input#client-first-name {
         width: 100%;
     }
@@ -1416,3 +1573,280 @@ th.shipping-date {
         gap: 10px;
     }
 }
+
+.cart-fixed {
+    .info,
+    .monetary {
+        padding: 1.563rem 0 !important;
+        color: $color-gray2 !important;
+    }
+
+    tfoot {
+        tr {
+            border-bottom: none !important;
+
+            .info,
+            .monetary {
+                padding: 1.875rem 0 0.75rem !important;
+                color: $color-black !important;
+            }
+        }
+    }
+}
+
+input#client-email,
+input#client-first-name,
+input#client-last-name,
+input#client-document,
+input#client-phone {
+    /* width: unset; */
+    width: 100%;
+    box-sizing: border-box;
+
+    &:focus {
+        width: 100%;
+    }
+}
+
+p.client-email.input.text.required {
+    display: flex;
+    flex-direction: column;
+    width: 100% !important;
+}
+
+p.client-first-name.input.pull-left.text.required,
+p.client-last-name.input.pull-left.text.required,
+p.client-document.input.pull-left.text.required.mask,
+p.client-phone.input.pull-left.text.required.mask {
+    display: flex;
+    flex-direction: column;
+    /*  width: 48.9% !important; */
+    position: relative;
+}
+
+#postalCode-finished-loading {
+    .vtex-omnishipping-1-x-isActive {
+        width: 100%;
+    }
+}
+
+#delivery-packages-options {
+    border-top: 1px solid $color-gray10;
+    border-radius: 0.5rem;
+
+    label {
+        padding: 0.75rem 0.875rem;
+        color: $color-gray2;
+        font-weight: 400;
+        font-family: $font-family;
+        font-size: 12px;
+        .shp-option-text-label {
+            color: $color-gray2;
+            font-weight: 400;
+            font-family: $font-family;
+            font-size: 12px;
+        }
+
+        .shp-option-icon {
+            width: 12px;
+            height: 12px;
+            border: 1px solid $color-gray13;
+            padding: 3px;
+            border-radius: 3px;
+        }
+
+        svg {
+            display: none;
+        }
+    }
+
+    label.shp-lean-option-active {
+        background-color: $color-gray14 !important;
+        .shp-option-text-label {
+            color: $color-gray2;
+            font-weight: 400;
+            font-family: $font-family;
+            font-size: 12px;
+        }
+
+        .shp-option-icon::after {
+            content: "";
+            width: 100%;
+            background-color: $color-blue2;
+            border-radius: 3px;
+        }
+    }
+}
+
+.address-summary.address-summary-BRA {
+    .street,
+    .number-delimiter,
+    .number,
+    .line1-delimiter,
+    .neighborhood-delimiter-after,
+    .neighborhood,
+    .postalCode {
+        display: none;
+    }
+}
+
+.step.accordion-group.shipping-data.active {
+    .street,
+    .number-delimiter,
+    .number,
+    .line1-delimiter,
+    .neighborhood-delimiter-after,
+    .neighborhood,
+    .postalCode {
+        display: unset !important;
+    }
+}
+
+.step.accordion-group.client-profile-data.active {
+    .box-edit {
+        .box-client-info-pf {
+            display: grid;
+            /* grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr 1fr; */
+            grid-template-areas:
+                "email email"
+                "firstName lastName"
+                "cpf phone";
+
+            column-gap: 15px;
+
+            p.client-notice.notice {
+                display: none;
+            }
+
+            p.client-email.input.text.required {
+                grid-area: email;
+                position: relative;
+
+                label {
+                    font-size: 0;
+                    line-height: initial;
+
+                    &::after {
+                        content: "Email";
+                        font-family: $font-family;
+                        font-size: 14px;
+                        color: $color-gray2;
+                        font-weight: 400;
+                        line-height: 19.07px;
+                        white-space: nowrap;
+                    }
+                }
+
+                .help.error {
+                    position: absolute;
+                    top: 70px;
+                }
+            }
+
+            p.client-first-name.input.pull-left.text.required {
+                grid-area: firstName;
+
+                label {
+                    font-size: 0;
+                    line-height: initial;
+
+                    &::after {
+                        content: "Primeiro Nome";
+                        font-family: $font-family;
+                        font-size: 14px;
+                        color: $color-gray2;
+                        font-weight: 400;
+                        line-height: 19.07px;
+                        white-space: nowrap;
+                    }
+                }
+
+                .help.error {
+                    position: absolute;
+                    top: 70px;
+                }
+            }
+
+            p.client-last-name.input.pull-left.text.required {
+                grid-area: lastName;
+
+                label {
+                    font-size: 0;
+                    line-height: initial;
+
+                    &::after {
+                        content: "Último Nome";
+                        font-family: $font-family;
+                        font-size: 14px;
+                        color: $color-gray2;
+                        font-weight: 400;
+                        line-height: 19.07px;
+                        white-space: nowrap;
+                    }
+                }
+
+                .help.error {
+                    position: absolute;
+                    top: 70px;
+                }
+            }
+
+            p.client-document.input.pull-left.text.required.mask {
+                grid-area: cpf;
+
+                label {
+                    font-family: $font-family;
+                    font-size: 14px;
+                    color: $color-gray2;
+                    font-weight: 400;
+                    line-height: 19.07px;
+                    white-space: nowrap;
+                }
+
+                .help.error {
+                    position: absolute;
+                    top: 70px;
+                }
+            }
+
+            div[data-bind="template: {name: phoneTemplate(), afterRender: window.vtex.i18n.translateHtml }"] {
+                grid-area: phone;
+
+                p.client-phone.input.pull-left.text.required.mask {
+
+                    label {
+                        font-family: $font-family;
+                        font-size: 14px;
+                        color: $color-gray2;
+                        font-weight: 400;
+                        line-height: 19.07px;
+                        white-space: nowrap;
+                    }
+
+                    .help.error {
+                        position: absolute;
+                        top: 70px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.shipping-summary-info,
+.notification,
+.client-profile-email,
+.client-profile-summary {
+    color: $color-gray2;
+    font-style: normal;
+    font-size: 14px;
+    font-weight: 400;
+    font-family: $font-family;
+}
+
+.payment-confirmation-wrap {
+    border: none !important;
+}
+
+/* open-shipping */
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 9a52731..6b7f09b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -4,7 +4,12 @@ body .container-main.container-order-form .orderform-template.active {
         margin-left: unset;
         margin-right: 0;
         float: right;
+
+        @media (max-width: 1024px) {
+            padding: 16px;
+        }
     }
+
     .orderform-template-holder {
         width: 66.1132%;
     }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index d5fb1c2..295d04f 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -22,18 +22,31 @@ footer .footerCheckout__wrapper {
         width: 100%;
         font-family: $font-family-secundary;
         font-weight: 400;
-        font-size: 1.4rem;
+        font-size: 1.5rem;
         display: flex;
         justify-content: center;
         align-items: center;
-        color: $color-black;
+        color: $color-blackTotal;
         margin-bottom: 1.25rem;
+        line-height: 38px;
+
+        @media (max-width: 1024px) {
+            font-size: 14px;
+        }
+
+        @media (max-width: 375px) {
+            font-size: 12px;
+        }
     }
 
     &__container-Slick {
         width: 79.53125%;
         margin: 0 auto;
 
+        @media (max-width: 375px) {
+            width: 95%;
+        }
+
         .slick-slide {
             margin: 0 0.5rem;
         }
@@ -54,10 +67,14 @@ footer .footerCheckout__wrapper {
 
         .cardProduct__contentName {
             margin: 1.25rem 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
             span {
                 font-family: $font-family;
-                color: $color-black;
+                font-weight: 400;
+                color: $color-blackTotal;
                 font-size: 0.813rem;
 
             }
@@ -68,6 +85,7 @@ footer .footerCheckout__wrapper {
             justify-content: center;
             align-items: center;
             gap: 0.313rem;
+            flex-wrap: wrap;
 
             span {
                 white-space: nowrap;
@@ -89,7 +107,7 @@ footer .footerCheckout__wrapper {
         }
 
         .cardProduct__contentBtn {
-            margin-top: 1.125rem;
+            margin-top: 1.25rem;
             a {
                 text-decoration: none;
 
@@ -156,6 +174,10 @@ body {
         justify-content: center;
         align-items: center;
         width: 80%;
+
+        @media (max-width: 1024px) {
+            width: 100%;
+        }
     }
 }
 
@@ -175,18 +197,22 @@ body {
 #cart-title,
 #orderform-title {
     width: 100%;
-    color: $color-black;
+    color: $color-blackTotal;
     font-family: $font-family;
     font-weight: 700;
     font-size: 1.5rem;
     line-height: 42px;
-    margin: 40px 0 30px;
+    margin: 17px 0;
     letter-spacing: 0.1em;
     text-transform: uppercase;
 
-    @include mq(md, max) {
-        margin-left: 30px;
+    @media (max-width: 1024px) {
+        padding-left: 16px;
     }
+
+    /* @include mq(md, max) {
+        margin-left: 30px;
+    } */
 }
 
 .dropdown {
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 65deefc..b3bdea6 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -115,6 +115,9 @@
             display: grid;
             grid-template-columns: fr 1fr 1fr;
             grid-template-rows: 1fr 1fr 1fr;
+            margin: unset !important;
+
+            max-width: 342px;
 
             .footerCheckout__address {
                 grid-column: 1 / 2;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 17a27da..f9dd0e0 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -10,17 +10,23 @@
         align-items: center;
         display: flex;
         justify-content: space-between;
+
+        @media (max-width: 300px) {
+            flex-wrap: wrap;
+        }
     }
 
     &__logo {
         img {
-            height: 37.14px;
-            width: auto;
+            width: 100%;
+            max-width: 155.58px;
+            min-width: 155.58px
         }
     }
 
     &__safeBuy {
         display: flex;
+        max-width: 119px;
         span {
             align-items: center;
             display: flex;
@@ -31,10 +37,13 @@
             font-size: 12px;
             line-height: 14px;
             color: $color-gray;
+            white-space: nowrap;
         }
 
         img {
-            width: 12px;
+            width: 100%;
+            max-width: 29.47px;
+            min-width: 12px;
             margin-right: 8px;
         }
     }
@@ -102,11 +111,25 @@
         }
 
         &__logo {
-            min-width: 140px;
+            max-width: 155.58px;
+            min-width: 100px;
         }
 
         &__safeBuy {
-            min-width: 140px;
+            max-width: 119px;
+            min-width: 100px;
+        }
+    }
+}
+
+@media (min-width: 2500px) {
+    .headerCheckout {
+        &__logo {
+            max-width: 382.07px;
+        }
+
+        &__safeBuy {
+            max-width: 235.28px;
         }
     }
 }
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 0f4f9ed..fb150e3 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -19,6 +19,12 @@ $color-gray6: #c4c4c4;
 $color-gray7: #58595B;
 $color-gray8: #989898;
 $color-gray9: #EDEDED;
+$color-gray10: #E0E0E0;
+$color-gray11: #BDBDBD;
+$color-gray12: #808080;
+$color-gray13: #828282;
+$color-gray14: #F2F2F2;
+$color-gray15: #dcdde360;
 
 $color-blue: #4267b2;
 $color-blue2: #00C8FF;