From eb8298ebede1245eb3885500f9856677688fa2d6 Mon Sep 17 00:00:00 2001
From: Filipe Quintanilha <feliipequintanilha@gmail.com>
Date: Tue, 20 Dec 2022 15:18:53 -0300
Subject: [PATCH 1/3] =?UTF-8?q?fix(checkout):=20Ajusta=20espa=C3=A7amento?=
 =?UTF-8?q?=20do=20checkout=20em=20todas=20as=20telas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sass/checkout/_checkout-autenticacao.scss | 201 ++++++++++++++----
 .../sass/checkout/_checkout-pagamento.scss    |   4 +
 .../src/arquivos/sass/partials/_tablet.scss   |  72 +++++--
 3 files changed, 207 insertions(+), 70 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index a8013f1..6c21a93 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -303,8 +303,25 @@
 
     .client-profile-data {
         .active {
+            padding: 24px 17px 44px !important;
+            width: 89.5%;
+
+            @include mq(sm, max) {
+                width: 89.51% !important;
+            }
+
             @include mq(xl, min) {
-                width: 94.1%;
+                width: 89.2% !important;
+                padding: 24px 33px 44px !important;
+
+                .box-step {
+                    width: 100%;
+                    padding-left: 0;
+                }
+
+                .form-step {
+                    width: 100.3%;
+                }
             }
         }
     }
@@ -322,15 +339,12 @@
             font-family: $font-family;
             padding: 24px 17px;
 
-            @include mq(xl, min) {
-                width: 93.8%;
-            }
-
             .accordion-heading {
                 .link-box-edit {
                     outline: 0 !important;
                     border: 0 !important;
                     box-shadow: none !important;
+                    cursor: pointer;
                 }
 
                 .icon-edit {
@@ -427,12 +441,14 @@
                     }
 
                     #client-email {
+                        width: 95.3%;
+                        height: 32px;
                         @include mq(sm, max) {
-                            height: 40px;
+                            height: 42px;
                         }
 
                         @include mq(xl, min) {
-                            width: 92.5%;
+                            width: 97.6%;
                             height: 51px;
                             font-size: 21px;
                         }
@@ -463,6 +479,7 @@
 
                 p.submit {
                     margin-top: 45px;
+                    margin-bottom: 0;
 
                     @include mq(sm, max) {
                         margin-bottom: 20px;
@@ -568,6 +585,7 @@
 
                         .vtex-omnishipping-1-x-leanShippingOption {
                             border-bottom: 1px solid #e0e0e0;
+                            width: auto;
                         }
 
                         .shp-lean-option-active {
@@ -720,8 +738,8 @@
                         left: 10px;
                         top: 50%;
                         transform: translateY(-50%);
-                        width: 18px;
-                        height: 18px;
+                        width: 16px;
+                        height: 16px;
                         border-radius: 3px;
                         background: $color-white;
                         border: 1px solid #c4c4c4;
@@ -734,7 +752,7 @@
                     &::after {
                         content: "";
                         position: absolute;
-                        left: 14px;
+                        left: 13px;
                         top: 50%;
                         transform: translateY(-50%);
                         width: 12px;
@@ -792,12 +810,12 @@
 
                 .vtex-omnishipping-1-x-deliveryChannelsWrapper {
                     @include mq(sm, max) {
-                        width: 100%;
+                        width: 99.31%;
                     }
 
                     @include mq(xl, min) {
-                        height: 55px;
-                        width: 99.6%;
+                        height: 53px;
+                        width: 99.8%;
                     }
                 }
 
@@ -855,8 +873,8 @@
                             max-width: 100%;
 
                             @include mq(xl, min) {
-                                height: 51px;
-                                width: 97.5%;
+                                height: 51px !important;
+                                width: 97.5% !important;
                                 font-size: 20px;
                             }
                         }
@@ -934,6 +952,7 @@
 }
 
 .box-client-info-pf {
+    width: 100.7%;
     @include mq(sm, max) {
         width: 100%;
     }
@@ -981,7 +1000,7 @@
 }
 
 .newsletter {
-    margin-top: -8px;
+    margin-top: 8px;
     margin-bottom: 0 !important;
 
     @include mq(sm, max) {
@@ -990,14 +1009,16 @@
 
     input {
         @include mq(xl, min) {
-            width: 34px;
-            height: 34px;
+            width: 35px;
+            height: 35px;
         }
     }
 
     &-text {
         @include mq(xl, min) {
             padding-left: 10px;
+            font-size: 24px;
+            line-height: 33px;
         }
     }
 
@@ -1015,6 +1036,45 @@
 .shipping-data {
     position: relative;
 
+    .active {
+        width: 89.2%;
+        padding: 24px 17px 44px !important;
+
+        @include mq(sm, max) {
+            width: 89.51%;
+        }
+
+        .shipping-container {
+            width: 100.7%;
+
+            #ship-postalCode {
+                width: 95.2%;
+                max-width: 100%;
+                height: 35px;
+            }
+
+            .vtex-omnishipping-1-x-deliveryChannelsWrapper {
+                width: 99.3%;
+            }
+        }
+    }
+
+    @include mq(xl, min) {
+        .active {
+            padding: 24px 34px 44px !important;
+            width: 88.5%;
+        }
+
+        .box-step {
+            width: 100.6%;
+            padding-left: 0;
+        }
+
+        .vtex-omnishipping-1-x-addressSummaryActive {
+            width: auto !important;
+        }
+    }
+
     .vtex-omnishipping-1-x-SummaryItemGroup {
         padding: 0;
     }
@@ -1041,11 +1101,11 @@
         .postalCode {
             position: absolute;
             top: 68px;
-            left: 137px;
+            left: 146px;
 
             @include mq(xl, min) {
                 top: 87px;
-                left: 272px;
+                left: 287px;
             }
         }
 
@@ -1070,7 +1130,7 @@
 
         .forma-entrega {
             @include mq(xl, min) {
-                left: 29px !important;
+                left: 18px !important;
             }
         }
     }
@@ -1262,10 +1322,18 @@ div#payments-title {
 
 div {
     .steps-view {
-        width: 393px;
+        width: 56.7%;
+        float: left;
+        left: 50px;
+
+        @include mq(sm, max) {
+            left: 0;
+            width: 91.6%;
+        }
 
         @include mq(xl, min) {
             width: 674px;
+            left: 290px;
         }
     }
 }
@@ -1280,7 +1348,7 @@ div.cart-template.mini-cart.span4 {
             text-align: left;
             padding: 24px 0 34px 17px;
 
-            @include mq(sm, max) {
+            @include mq(md, max) {
                 margin: 0;
             }
 
@@ -1465,9 +1533,17 @@ div.cart-template.mini-cart.span4 {
             background: #298541;
             border-radius: 8px;
             margin-top: 20px;
+            text-transform: uppercase;
+            top: -20px;
 
             @include mq(sm, max) {
                 margin-top: 0;
+                top: 25px;
+            }
+
+            @include mq(xl, min) {
+                font-size: 28px;
+                line-height: 38px;
             }
 
             i {
@@ -1498,21 +1574,35 @@ p.client-profile-summary {
 
 #client-first-name,
 #client-last-name {
+    width: 90%;
+
     @include mq(xl, min) {
-        width: 95%;
+        width: 94.7%;
         height: 51px;
         font-size: 21px;
     }
 }
 
+.client-last-name {
+    margin-left: 13px;
+
+    @include mq(xl, min) {
+        margin-left: 28px;
+    }
+}
+
 .client-first-name,
 .client-last-name {
+    margin-right: 0 !important;
+    width: 47.8%;
+
     @include mq(sm, max) {
         width: 45.7%;
     }
 
     @include mq(xl, min) {
-        width: 45%;
+        width: 47.5%;
+        margin-right: 0 !important;
     }
 }
 
@@ -1522,34 +1612,37 @@ p.client-profile-summary {
         top: 75px;
         right: 5px;
     }
-
-    @include mq(xl, min) {
-        margin-left: 19px;
-    }
 }
 
 #client-document,
 #client-phone {
+    width: 90%;
     @include mq(sm, max) {
         width: 90.3%;
     }
 
     @include mq(xl, min) {
-        width: 95%;
+        width: 94.7%;
         height: 51px;
         font-size: 21px;
     }
 }
 
 .client-phone {
+    margin-left: 13px;
     @include mq(xl, min) {
-        margin-left: 19px;
+        margin-left: 28px;
     }
 }
 
+.client-phone,
 .client-document {
+    margin-right: 0 !important;
+    width: 47.8%;
+    margin-bottom: 0 !important;
     @include mq(xl, min) {
-        width: 45%;
+        width: 47.5%;
+        margin-right: 0 !important;
     }
 }
 
@@ -1558,10 +1651,6 @@ p.client-profile-summary {
         position: absolute;
         right: -2px;
     }
-
-    @include mq(xl, min) {
-        width: 45%;
-    }
 }
 
 .dados-wrapper {
@@ -1571,14 +1660,20 @@ p.client-profile-summary {
 
 #ship-number {
     @include mq(sm, max) {
-        width: 99.4%;
+        width: 98.62% !important;
         height: 25px;
     }
 }
 
 #ship-complement {
     @include mq(sm, max) {
-        width: 100%;
+        width: 100% !important;
+    }
+}
+
+#ship-receiverName {
+    @include mq(sm, max) {
+        width: 100% !important;
     }
 }
 
@@ -1602,7 +1697,8 @@ p.client-profile-summary {
 
 .btn-submit-wrapper {
     @include mq(xl, min) {
-        width: 95%;
+        width: 100%;
+        margin-bottom: 0 !important;
     }
 }
 
@@ -1628,7 +1724,7 @@ p.client-profile-summary {
 
 #ship-number {
     @include mq(xl, min) {
-        width: 99.3%;
+        width: 99.3% !important;
         height: 51px;
         font-size: 20px;
     }
@@ -1637,25 +1733,36 @@ p.client-profile-summary {
 #ship-complement,
 #ship-receiverName {
     @include mq(xl, min) {
-        width: 97.5%;
+        width: 97.5% !important;
         height: 51px;
         font-size: 20px;
     }
 }
 
 #ship-number {
-    width: 99.5%;
-}
-
-#ship-complement {
-    width: 96%;
+    width: 98.53%;
 }
 
+#ship-complement,
 #ship-receiverName {
-    width: 96%;
+    width: 95.2%;
+}
+
+.shipping-summary-info {
+    font-size: 14px;
+    line-height: 19px;
+
+    @include mq(xl, min) {
+        font-size: 28px;
+        line-height: 38px;
+    }
 }
 //Pagamento
 
 .card-flags {
     display: block;
 }
+
+p.PaymentCardHolderDocument.input.text.required.mask {
+    display: none;
+}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 831f5b4..eedc0cc 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -14,6 +14,10 @@ body .container-main.container-order-form .orderform-template.active {
             margin-top: 17px;
         }
 
+        @include mq(xl, min) {
+            width: 32.14%;
+        }
+
         .cart-fixed {
             @include mq(sm, max) {
                 width: 91.5%;
diff --git a/checkout/src/arquivos/sass/partials/_tablet.scss b/checkout/src/arquivos/sass/partials/_tablet.scss
index c4fac49..7a3802f 100644
--- a/checkout/src/arquivos/sass/partials/_tablet.scss
+++ b/checkout/src/arquivos/sass/partials/_tablet.scss
@@ -1,6 +1,10 @@
 @media screen and (min-width: 376px) and (max-width: 1024px) {
     .checkout-container {
         padding-bottom: 109px;
+
+        .client-profile-data {
+            width: auto !important;
+        }
     }
 
     .orderform-template-holder {
@@ -27,7 +31,7 @@
     }
 
     #client-email {
-        width: 98.8%;
+        width: 97.9% !important;
         height: 32px;
     }
 
@@ -35,24 +39,24 @@
     .client-last-name,
     .client-document,
     .client-phone {
-        width: 50%;
+        width: 48.9% !important;
         margin-right: 0 !important;
     }
 
     #client-first-name,
     #client-document {
-        width: 95.7%;
-        height: 34px;
+        width: 97% !important;
+        height: 32px;
     }
 
     #client-last-name,
     #client-phone {
-        width: 97%;
-        height: 34px;
+        width: 97% !important;
+        height: 32px;
     }
 
-    .newsletter-label {
-        margin-top: -23px;
+    .newsletter {
+        margin-top: 12px !important;
     }
 
     .box-step {
@@ -60,34 +64,47 @@
     }
 
     #shipping-data {
-        width: 93.4%;
-        margin-left: 16px;
+        width: 100%;
+        margin-left: -1px;
+        padding: 0 16px;
     }
 
     .shipping-data {
-        width: 100%;
         .active {
-            width: 100%;
-            padding: 24px 17px 44px !important;
+            width: auto !important;
         }
     }
 
+    .shipping-container {
+        width: 100.21% !important;
+
+        .box-step {
+            width: auto;
+        }
+    }
+
+    .vtex-omnishipping-1-x-deliveryChannelsWrapper {
+        width: 98.51% !important;
+    }
+
     #postalCode-finished-loading {
         width: 32.31%;
     }
 
     #ship-postalCode {
-        width: 98.51%;
-        max-width: 100%;
-        height: 35px;
+        width: auto !important;
     }
 
     small {
         padding-top: 10px;
     }
 
+    .vtex-omnishipping-1-x-leanShippingOption {
+        width: auto !important;
+    }
+
     #delivery-packages-options {
-        width: 100%;
+        width: auto;
     }
 
     #force-shipping-fields {
@@ -95,27 +112,35 @@
     }
 
     #ship-number {
-        width: 99.6%;
+        width: 99.6% !important;
         height: 25px;
     }
 
     #ship-complement,
     #ship-receiverName {
-        width: 98.51% !important;
+        width: 98.6% !important;
         height: 25px;
     }
 
+    #btn-go-to-payment {
+        height: 42px;
+    }
+
+    div#payments-title span.accordion-toggle.collapsed.accordion-toggle-active {
+        margin-bottom: 52px !important;
+    }
+
     .postalCode {
         left: 149px !important;
     }
 
     #payment-data {
-        width: 93.4%;
-        margin-left: 16px;
+        width: 100%;
+        padding: 0 16px;
+        margin: -1px;
     }
 
     .store-country-BRA {
-        width: 100%;
         margin-bottom: 17px !important;
     }
 
@@ -125,6 +150,7 @@
 
     .steps-view {
         width: 96.85% !important;
+        left: 0 !important;
     }
 
     .SecurityEnvironmentIcon {
@@ -161,6 +187,6 @@
     }
 
     #payment-data-submit {
-        margin-top: 5px !important;
+        margin-top: 20px !important;
     }
 }

From 9ad80491b4d669b5d7205383876d169cfb263b6b Mon Sep 17 00:00:00 2001
From: Filipe Quintanilha <feliipequintanilha@gmail.com>
Date: Wed, 21 Dec 2022 17:30:58 -0300
Subject: [PATCH 2/3] fix(slick): Ajusta bug em que o slick iniciava com width
 0

---
 checkout/src/arquivos/js/components/Footer.js | 25 +++++++++++++++++--
 .../sass/checkout/_checkout-autenticacao.scss |  7 ++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index c7f4e81..647f8e0 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -16,6 +16,7 @@ export default class Footer {
         this.titleCart();
         this.buildSlickItems();
         this.onUpdate();
+        this.reload();
     }
 
     async selectors() {
@@ -46,6 +47,21 @@ export default class Footer {
         window.addEventListener("hashchange", this.onUpdate.bind(this));
     }
 
+    reload() {
+        if (window.performance) {
+            console.info("window.performance works fine on this browser");
+        }
+        if (
+            performance.navigation.type == performance.navigation.TYPE_RELOAD &&
+            this.checkoutVazio.style.display == "none"
+        ) {
+            this.addCarrossel();
+            console.log("This page is reloaded");
+        } else {
+            console.log("This page is not reloaded");
+        }
+    }
+
     buildSlickItems() {
         const slickItems = fetch(
             "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
@@ -118,10 +134,11 @@ export default class Footer {
                     if (mutation.type === "attributes" && mutation.attributeName === "style") {
                         if (target.style.display === "none") {
                             if (!this.footerPrateleira.classList.contains("slick-initialized"))
-                                this.addCarrossel();
-                            this.footerPrateleira.style.display = "";
+                                this.footerPrateleira.style.display = "";
+                            this.addCarrossel();
                         } else {
                             this.footerPrateleira.style.display = "none";
+                            this.removeCarrossel();
                         }
                     }
                 }.bind(this)
@@ -155,6 +172,10 @@ export default class Footer {
         });
     }
 
+    removeCarrossel() {
+        $(this.footerPrateleira).slick("unslick");
+    }
+
     pagamentos() {
         this.payments.innerHTML = `
         <ul class="lista-pagamentos" >
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 6c21a93..09defa6 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -701,6 +701,7 @@
 
                         @include mq(sm, max) {
                             padding: 0 15px 0 15px;
+                            float: right;
                         }
                     }
                 }
@@ -1757,6 +1758,12 @@ p.client-profile-summary {
         line-height: 38px;
     }
 }
+
+p.client-email.input.text.required {
+    @include mq(sm, max) {
+        width: 100.7%;
+    }
+}
 //Pagamento
 
 .card-flags {

From a24ee69827a81bbbae7b07676a23fc7496892527 Mon Sep 17 00:00:00 2001
From: Filipe Quintanilha <feliipequintanilha@gmail.com>
Date: Fri, 23 Dec 2022 14:29:49 -0300
Subject: [PATCH 3/3] =?UTF-8?q?docs:=20Substitui=20os=20numeros=20hexadeci?=
 =?UTF-8?q?mais=20por=20vari=C3=A1veis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sass/checkout/_checkout-autenticacao.scss | 66 +++++++++----------
 .../sass/checkout/_checkout-carrinho.scss     | 28 ++++----
 .../sass/checkout/_checkout-vazio.scss        |  4 +-
 .../src/arquivos/sass/checkout/_checkout.scss |  2 +-
 .../arquivos/sass/partials/_prateleira.scss   |  4 +-
 .../src/arquivos/sass/partials/_tablet.scss   |  7 +-
 .../src/arquivos/sass/utils/_variaveis.scss   |  1 +
 7 files changed, 52 insertions(+), 60 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 09defa6..6f7530d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -65,7 +65,7 @@
                     line-height: 23px;
                     text-align: center;
                     text-transform: uppercase;
-                    color: #000000;
+                    color: $color-black2;
 
                     @include mq(sm, max) {
                         font-size: 12px !important;
@@ -91,7 +91,7 @@
                     line-height: 23px;
                     text-align: center;
                     text-transform: uppercase;
-                    color: #000000;
+                    color: $color-black2;
                     padding: 0;
 
                     @include mq(sm, max) {
@@ -127,10 +127,10 @@
             }
 
             input {
-                border: 1px solid #000000;
+                border: 1px solid $color-black2;
                 border-radius: 5px 0px 0px 5px;
                 box-shadow: none;
-                color: #000000;
+                color: $color-black2;
                 font-family: $font-family;
                 padding: 0 16px;
                 box-sizing: border-box;
@@ -162,7 +162,7 @@
             button {
                 min-width: fit-content;
                 background: #00c8ff;
-                color: #000000;
+                color: $color-black2;
                 font-weight: 700;
                 border-radius: 0px 8px 8px 0px;
                 border: none;
@@ -225,7 +225,7 @@
             margin-top: 47px;
             padding: 16px;
             background-color: $color-white;
-            border: 1px solid #000000;
+            border: 1px solid $color-black2;
             border-radius: 5px;
 
             @include mq(md, max) {
@@ -246,7 +246,7 @@
             }
 
             h3 {
-                color: #000000;
+                color: $color-black2;
                 margin: 0 0 9px 0;
                 font-weight: 700;
 
@@ -269,7 +269,7 @@
                         font-weight: 700;
                         font-size: 12px;
                         line-height: 16px;
-                        color: #000000;
+                        color: $color-black2;
 
                         @include mq(xl, min) {
                             font-size: 24px;
@@ -334,7 +334,7 @@
         }
 
         .accordion-group {
-            border: 1px solid #f0f0f0;
+            border: 1px solid $color-gray3;
             border-radius: 8px;
             font-family: $font-family;
             padding: 24px 17px;
@@ -378,7 +378,7 @@
                     font-weight: 400;
                     font-size: 16px;
                     line-height: 19px;
-                    color: #292929;
+                    color: $color-black;
 
                     i::before {
                         fill: #303030;
@@ -421,7 +421,7 @@
                         font-weight: 400;
                         font-size: 14px;
                         line-height: 19px;
-                        color: #7d7d7d;
+                        color: $color-gray2;
 
                         @include mq(xl, min) {
                             font-size: 28px;
@@ -566,7 +566,7 @@
 
                         label {
                             box-shadow: none;
-                            color: #7d7d7d;
+                            color: $color-gray2;
                             padding: 8px 12px;
 
                             @include mq(xl, min) {
@@ -592,7 +592,7 @@
                             background: #f2f2f2;
                         }
                         .vtex-omnishipping-1-x-leanShippingTextLabel {
-                            color: #7d7d7d;
+                            color: $color-gray2;
                             font-family: $font-family;
                             font-weight: 400;
                             font-size: 12px;
@@ -613,7 +613,7 @@
                     font-size: 12px;
                     line-height: 16px;
                     letter-spacing: 0.05em;
-                    color: #7d7d7d;
+                    color: $color-gray2;
                     margin-bottom: 11px;
 
                     @include mq(xl, min) {
@@ -679,7 +679,7 @@
                     font-weight: 400;
                     font-size: 12px;
                     line-height: 16px;
-                    color: #7d7d7d;
+                    color: $color-gray2;
 
                     background: none;
                     border: 0px;
@@ -821,7 +821,7 @@
                 }
 
                 .vtex-omnishipping-1-x-deliveryOptionActive {
-                    color: #292929;
+                    color: $color-black;
                 }
 
                 .vtex-omnishipping-1-x-deliveryOptionInactive {
@@ -853,7 +853,7 @@
                             font-weight: 700;
                             font-size: 0;
                             line-height: 16px;
-                            color: #7d7d7d;
+                            color: $color-gray2;
                         }
 
                         label::after {
@@ -898,7 +898,7 @@
                         font-weight: 700;
                         font-size: 14px;
                         line-height: 19px;
-                        color: #7d7d7d;
+                        color: $color-gray2;
 
                         @include mq(sm, max) {
                             margin-bottom: 11px;
@@ -1159,9 +1159,9 @@
         justify-content: center;
         align-items: center;
 
-        background: #f0f0f0;
+        background: $color-gray3;
         mix-blend-mode: normal;
-        border: 1px solid #000000;
+        border: 1px solid $color-black2;
         border-radius: 6px;
         margin: 0;
         color: #58595b;
@@ -1306,7 +1306,7 @@ div#payments-title {
                 font-size: 14px;
                 line-height: 24px;
                 letter-spacing: -0.01em;
-                color: #7d7d7d;
+                color: $color-gray2;
                 position: absolute;
                 top: 27px;
                 left: 0px;
@@ -1343,7 +1343,7 @@ div.cart-template.mini-cart.span4 {
     .cart-fixed {
         height: auto !important;
         h2 {
-            border: 1px solid #e5e5e5;
+            border: 1px solid $color-gray5;
             border-radius: 8px 8px 0 0;
             border-bottom: none;
             text-align: left;
@@ -1365,8 +1365,8 @@ div.cart-template.mini-cart.span4 {
 
                 border: none;
 
-                border-right: 1px solid #e5e5e5;
-                border-left: 1px solid #e5e5e5;
+                border-right: 1px solid $color-gray5;
+                border-left: 1px solid $color-gray5;
                 border-radius: 0;
                 padding: 0 17px 19px 17px;
                 margin: 0;
@@ -1391,7 +1391,7 @@ div.cart-template.mini-cart.span4 {
                     font-weight: 400;
                     font-size: 12px;
                     line-height: 14px;
-                    color: #000000;
+                    color: $color-black2;
 
                     @include mq(sm, max) {
                         max-width: 120px;
@@ -1427,7 +1427,7 @@ div.cart-template.mini-cart.span4 {
                     font-weight: 400;
                     font-size: 12px;
                     line-height: 16px;
-                    color: #292929;
+                    color: $color-black;
 
                     @include mq(xl, min) {
                         font-size: 24px;
@@ -1438,7 +1438,7 @@ div.cart-template.mini-cart.span4 {
         }
 
         .summary {
-            border: 1px solid #e5e5e5;
+            border: 1px solid $color-gray5;
             border-radius: 0 0 8px 8px;
             border-top: none;
             width: 99.4%;
@@ -1457,7 +1457,7 @@ div.cart-template.mini-cart.span4 {
             line-height: 16px;
             text-align: right;
             text-decoration-line: underline;
-            color: #000000;
+            color: $color-black2;
             padding: 0 17px 0 0;
 
             @include mq(xl, min) {
@@ -1484,7 +1484,7 @@ div.cart-template.mini-cart.span4 {
                 font-weight: 400;
                 font-size: 14px;
                 line-height: 19px;
-                color: #7d7d7d;
+                color: $color-gray2;
 
                 @include mq(xl, min) {
                     font-size: 28px;
@@ -1498,7 +1498,7 @@ div.cart-template.mini-cart.span4 {
                 font-weight: 400;
                 font-size: 14px;
                 line-height: 19px;
-                color: #7d7d7d;
+                color: $color-gray2;
 
                 @include mq(xl, min) {
                     font-size: 28px;
@@ -1509,7 +1509,7 @@ div.cart-template.mini-cart.span4 {
 
         tfoot {
             border: none;
-            border-top: 1px solid #e5e5e5;
+            border-top: 1px solid $color-gray5;
 
             td.info {
                 padding: 30px 0 22px 17px;
@@ -1769,7 +1769,3 @@ p.client-email.input.text.required {
 .card-flags {
     display: block;
 }
-
-p.PaymentCardHolderDocument.input.text.required.mask {
-    display: none;
-}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index dbbbaf6..f3bc97e 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -73,7 +73,7 @@
 
                 .shipping-date,
                 .price {
-                    color: #7d7d7d;
+                    color: $color-gray2;
                 }
             }
         }
@@ -243,7 +243,7 @@
             }
 
             a {
-                color: #000000;
+                color: $color-black2;
                 font-style: normal;
                 font-weight: 400;
                 font-size: 12px;
@@ -362,7 +362,7 @@
 
         td.quantity {
             align-items: center;
-            border: 1px solid #f0f0f0;
+            border: 1px solid $color-gray3;
             border-radius: 8px;
             box-sizing: border-box;
             display: flex;
@@ -721,12 +721,12 @@
                     }
 
                     .blue {
-                        color: #000000;
+                        color: $color-black2;
                     }
                 }
 
                 &__current {
-                    border: 1px solid #000000;
+                    border: 1px solid $color-black2;
                     border-radius: 100px;
                 }
 
@@ -734,7 +734,7 @@
                     width: 50%;
 
                     &:active {
-                        background-color: #f0f0f0;
+                        background-color: $color-gray3;
                     }
                 }
             }
@@ -837,7 +837,7 @@
                         font-weight: normal;
                         font-size: 10px;
                         line-height: 12px;
-                        color: #000000;
+                        color: $color-black2;
                         margin-top: 4px;
                         text-decoration: underline;
 
@@ -903,11 +903,11 @@
                         }
 
                         &__sla {
-                            color: #7d7d7d;
+                            color: $color-gray2;
                         }
 
                         &__price {
-                            color: #7d7d7d;
+                            color: $color-gray2;
                             font-weight: 500;
                         }
 
@@ -949,7 +949,7 @@
                     font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: #000000;
+                    color: $color-black2;
                     text-decoration: none;
 
                     @include mq(xl, min) {
@@ -1044,7 +1044,7 @@
                         border: none;
                         border-radius: 8px;
                         font-family: $font-family;
-                        color: #000000;
+                        color: $color-black2;
                         font-weight: 400;
                         font-size: 14px;
                         line-height: 19px;
@@ -1181,7 +1181,7 @@
                 font-weight: normal;
                 font-size: 12px;
                 line-height: 14px;
-                color: #000000;
+                color: $color-black2;
 
                 @include mq(xl, min) {
                     font-size: 24px;
@@ -1214,7 +1214,7 @@
                     font-weight: 700;
                     font-size: 14px;
                     letter-spacing: 0.05em;
-                    color: #000000;
+                    color: $color-black2;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;
@@ -1261,7 +1261,7 @@
 
         &__delivery,
         &__pickup {
-            color: #000000;
+            color: $color-black2;
 
             @include mq(xl, min) {
                 font-size: 28px;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 6b511c3..3e0f00c 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -35,7 +35,7 @@
         }
         .link-choose-products {
             background-color: #ffffff;
-            border: 1px solid #000000;
+            border: 1px solid $color-black2;
             border-radius: 0px;
             outline: none;
             font-family: $font-family-secundary;
@@ -44,7 +44,7 @@
             font-size: 0px;
             line-height: 16px;
             text-align: center;
-            color: #000000;
+            color: $color-black2;
             text-transform: uppercase;
             width: 28.1%;
             margin: 0;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 86b319e..dc486d5 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -92,7 +92,7 @@ body {
     font-weight: 700;
     font-size: 24px;
     line-height: 33px;
-    color: #000000;
+    color: $color-black2;
     font-family: $font-family;
     text-transform: uppercase;
     margin: 0 0 32px 0;
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 777ee22..0eab7be 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -12,7 +12,7 @@
         font-size: 24px;
         line-height: 38px;
         align-self: center;
-        color: #000000;
+        color: $color-black2;
 
         @include mq(sm, max) {
             font-size: 14px;
@@ -116,7 +116,7 @@
             font-size: 13px;
             line-height: 18px;
             text-align: center;
-            color: #000000;
+            color: $color-black2;
 
             @include mq(xl, min) {
                 font-size: 26px;
diff --git a/checkout/src/arquivos/sass/partials/_tablet.scss b/checkout/src/arquivos/sass/partials/_tablet.scss
index 7a3802f..ae71208 100644
--- a/checkout/src/arquivos/sass/partials/_tablet.scss
+++ b/checkout/src/arquivos/sass/partials/_tablet.scss
@@ -161,18 +161,13 @@
         width: 98%;
     }
 
-    .card-flags {
-        display: flex !important;
-        justify-content: center !important;
-    }
-
     #creditCardpayment-card-0Brand {
         width: 90%;
     }
 
     #go-to-cart-button {
         width: 99.8%;
-        border: 1px solid #e5e5e5;
+        border: 1px solid $color-gray5;
         border-top: none;
         border-bottom: none;
 
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 15b4ca2..ce1c4bd 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -6,6 +6,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
 
 /* Colors */
 $color-black: #292929;
+$color-black2: #000000;
 
 $color-white: #fff;