From f64723544db91857e1b954dd27dfe940a39a7549 Mon Sep 17 00:00:00 2001
From: Rhayllon <rhayllom@hotmail.com>
Date: Sun, 18 Dec 2022 20:22:34 -0300
Subject: [PATCH 1/2] Feat(Checkout): Cria responsividade mobile

---
 checkout/src/arquivos/js/components/Footer.js |  22 +-
 .../sass/checkout/_checkout-autenticacao.scss |  89 ++++++-
 .../sass/checkout/_checkout-carrinho.scss     | 148 +++++++++--
 .../sass/checkout/_checkout-pagamento.scss    |  12 +-
 .../sass/checkout/_checkout-vazio.scss        |  18 +-
 .../src/arquivos/sass/checkout/_checkout.scss | 230 ++++++++++++++++--
 .../src/arquivos/sass/partials/_footer.scss   |   9 +
 .../src/arquivos/sass/partials/_header.scss   |   3 +
 .../arquivos/sass/partials/_prateleira.scss   |   5 +
 .../src/arquivos/sass/utils/_variaveis.scss   |   1 +
 10 files changed, 481 insertions(+), 56 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 1247c4b..fea78ed 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -14,8 +14,13 @@ export default class Footer {
         this.createShelf();
         this.shelfList = await waitElement(".footerCheckout__shelfList");
         this.shelfItens();
-        // await this.shelfUpdate();
-        this.addCarrossel();
+        if (window.innerWidth > 1024){
+            this.addCarrossel();
+        }
+        if (window.innerWidth < 1024){
+            this.addCarrosselMobile();
+        }
+
     }
 
     async selectors() {
@@ -54,8 +59,17 @@ export default class Footer {
             infinite: false,
         });
     }
+    async addCarrosselMobile() {
+        const elemento = await waitElement(".footerCheckout__shelfList");
+        $(elemento).slick({
+            slidesToShow: 3,
+            slidesToScroll: 1,
+            arrows: true,
+            infinite: false,
+        });
+    }
     addIconVtexAndM3() {
-        if (this.iconsVtexAndM3 && window.innerWidth > 1024) {
+        if (this.iconsVtexAndM3) {
             this.iconsVtexAndM3.innerHTML = `
         <li>
             <a class="Link1" href="https://vtex.com/br-pt/">
@@ -75,7 +89,7 @@ export default class Footer {
     }
 
     addIconsCardAndVtxpci() {
-        if (this.iconesCartoesAndVtexpci && window.innerWidth > 1024) {
+        if (this.iconesCartoesAndVtexpci) {
             this.iconesCartoesAndVtexpci.innerHTML = `
             <li>
             <span class="footerCheckout__payments"><img class="footer-imgs-cards" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Img bandeira Mastercard" />
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 779b8e5..620fb9c 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -4,6 +4,10 @@
 		font-family: $font-family;
 		padding-top: 8px;
 
+        @media screen and (max-width: 1024px) {
+            padding-top: 11px;
+        }
+
 		.link-cart {
 			a {
 				color: $color-black2;
@@ -13,9 +17,9 @@
                 line-height: 16px;
                 text-transform: uppercase;
 
-				// &:hover {
-				// 	color: lighen($color-black, 10);
-				// }
+                @media screen and (max-width: 1024px) {
+                    margin-right: 16px;
+                }
 			}
 		}
 
@@ -29,6 +33,11 @@
 				margin-bottom: 20px;
                 margin-top: 7px;
 
+                @media screen and (max-width: 1024px) {
+                    margin-bottom: 38px;
+                    margin-top: 49px;
+                }
+
 				span {
 					color: $color-black2;
                     font-family: $font-family-secundary;
@@ -36,6 +45,11 @@
                     line-height: 23px;
                     text-transform: uppercase;
                     font-weight: 400;
+
+                    @media screen and (max-width: 1024px) {
+                        font-size: 14px;
+                        line-height: 16px;
+                    }
 				}
 
 				small {
@@ -46,6 +60,11 @@
                     text-transform: uppercase;
                     font-weight: 400;
                     padding: 0;
+
+                    @media screen and (max-width: 1024px) {
+                        font-size: 14px;
+                        line-height: 16px;
+                    }
 				}
 			}
 		}
@@ -56,6 +75,10 @@
             width: 57%;
             justify-content: flex-start;
 
+            @media screen and (max-width: 1024px) {
+                width: 97%;
+            }
+
 			input {
 				box-shadow: none;
 				color: $color-black;
@@ -67,6 +90,11 @@
 				border-radius: 5px 0px 0px 5px;
                 width: 77%;
                 height: 52px;
+
+                @media screen and (max-width: 1024px) {
+                    width: 88%;
+                }
+
                 &::placeholder{
                     color: $color-black2;
                     font-weight: 400;
@@ -109,6 +137,12 @@
                 line-height: 19px;
                 letter-spacing: 0.05em;
                 text-transform: uppercase;
+                color: $color-black2;
+
+                @media screen and (max-width: 1024px) {
+                    padding: 4px 18px;
+                    height: 50px;
+                }
             }
 
 			span.help.error {
@@ -119,6 +153,11 @@
                 font-weight: 700;
                 font-size: 12px;
                 line-height: 16px;
+
+                @media screen and (max-width: 1024px) {
+                    left: 435px;
+                    margin-top: 7px;
+                }
 			}
 		}
 
@@ -192,6 +231,15 @@
 			font-family: $font-family;
 			padding: 17px 17px 29px 17px;
 
+            @media screen and (max-width: 1024px) {
+                padding: 17px 17px 44px 17px;
+                margin-bottom: 17px;
+                .PaymentCardNumber input {
+                    width: 97%;
+                    height: 33px;
+                }
+            }
+
             span{
                 font-size: 12px;
                 line-height: 14px;
@@ -376,6 +424,10 @@
 							color: #303030;
 							padding: 8px 12px;
 
+                            @media screen and (max-width: 1024px) {
+                                padding: 13px 12px;
+                            }
+
 							svg path {
 								fill: #d8c8ac;
 							}
@@ -471,11 +523,26 @@
                 input#ship-complement.input-large,
                 input#ship-receiverName.input-xlarge {
                     width: 95%;
+
+                    @media screen and (max-width: 1024px) {
+                        width: 98.5%;
+                    }
+                }
+                .payment-group{
+                    width: 32.7%;
+
+                    @media screen and (max-width: 1024px) {
+                        width: 100%;
+                    }
                 }
                 .steps-view{
                     width: 57%;
                     margin-top: 35px;
 
+                    @media screen and (max-width: 1024px) {
+                        width: 96.85%;
+                    }
+
                 }
                 span.payment-group-item-text{
                     background-image: none !important;
@@ -496,13 +563,20 @@
                     line-height: 24px;
                     text-align: center;
                     letter-spacing: -0.01em;
+                    margin-left: 0;
+                    width: 76.8%;
+
+                    @media screen and (max-width: 1024px) {
+                        margin-left: 0;
+                        width: 94.6%;
+                    }
 
                     &-text{
                         padding: 5px 0 5px 0;
                     }
                 }
                 .payment-group-item.active{
-                    margin-left: 5px;
+                    margin-left: 0px;
                     border-radius: 6px;
                     border-right: 1px solid $color-orange ;
                     border: 1px solid $color-orange;
@@ -510,6 +584,13 @@
                     text-decoration: none;
                     opacity: 1;
                     background: rgba(220, 221, 227, 0.3);
+                    width: 76.8%;
+
+
+                    @media screen and (max-width: 1024px) {
+                        margin-left: 0;
+                        width: 94.6%;
+                    }
                 }
 			}
 		}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 54706cf..558e9f7 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -26,6 +26,24 @@ input#creditCardpayment-card-0Number.input.medium{
         border-radius: 5px;
         padding: 16px 16px 5px 16px;
 
+        @media screen and (max-width: 1024px) {
+            padding: 16px 0;
+            position: relative;
+        }
+        .table.cart-items{
+            @media screen and (max-width: 1024px) {
+                thead{
+                    display: none;
+                }
+                tbody{
+                    .shipping-date.empty,
+                    .quantity-price {
+                        display: none;
+                    }
+                }
+            }
+        }
+
         @include mq(md, max) {
             margin: 0px 0 25px 0;
             border-left: none;
@@ -41,7 +59,14 @@ input#creditCardpayment-card-0Number.input.medium{
         width: 99.5%;
         border: 1px solid $color-gray5;
         height: 397px !important;
+        max-height: 397px !important;
         border-radius: 8px;
+
+        @media screen and (max-width: 1024px) {
+            margin: 0;
+            padding-bottom: 50px;
+        }
+
         h2 {
             background: $color-white;
             border: none;
@@ -65,6 +90,10 @@ input#creditCardpayment-card-0Number.input.medium{
         .cart {
             border: none;
 
+            @media screen and (max-width: 1024px) {
+                padding: 34px 16px 16px 16px;
+            }
+
             ul li {
                 border-top: none;
                 margin-top: 0;
@@ -138,6 +167,11 @@ input#creditCardpayment-card-0Number.input.medium{
 
             .product-name{
                 padding-top: 10px;
+
+                @media screen and (max-width: 1024px) {
+                    position: absolute;
+                    padding-top: 5px;
+                }
             }
         }
 
@@ -185,6 +219,10 @@ input#creditCardpayment-card-0Number.input.medium{
             padding: 0;
             width: 60px;
 
+            @media screen and (max-width: 1024px) {
+                padding: 0 16px;
+            }
+
             @include mq(sm, max) {
                 width: 72px;
             }
@@ -253,6 +291,10 @@ input#creditCardpayment-card-0Number.input.medium{
             font-size: 12px;
             line-height: 14px;
 
+            @media screen and (max-width: 1024px) {
+                display: none;
+            }
+
             @include mq(md, max) {
                 display: none;
             }
@@ -274,6 +316,11 @@ input#creditCardpayment-card-0Number.input.medium{
                 font-size: 12px;
                 line-height: 14px;
                 text-decoration-line: line-through;
+
+                @media screen and (max-width: 1024px) {
+                    padding-left: 8px;
+                }
+
                 @include mq(sm, max) {
                     font-size: 12px;
                     line-height: 14px;
@@ -286,6 +333,18 @@ input#creditCardpayment-card-0Number.input.medium{
         }
         td.product-price{
             padding: 10px 5px 0 5px;
+            @media screen and (max-width: 1024px) {
+                float: right;
+                padding: 26px 16px 0 0;
+                height: 37px;
+            }
+        }
+        td.item-remove{
+            @media screen and (max-width: 1024px) {
+                position: absolute;
+                right: 10px;
+                top: 11px;
+            }
         }
 
         td.quantity {
@@ -301,6 +360,12 @@ input#creditCardpayment-card-0Number.input.medium{
             padding: 0;
             width: max-content !important;
 
+            @media screen and (max-width: 1024px) {
+                float: left;
+                height: 34px;
+                margin: 28px auto 0;
+            }
+
             @media (max-width: 490px) {
                 margin-left: 84px !important;
             }
@@ -318,6 +383,10 @@ input#creditCardpayment-card-0Number.input.medium{
                 color: $color-gray2;
                 box-shadow: none;
 
+                @media screen and (max-width: 1024px) {
+                    padding: 0 3px;
+                }
+
                 @include mq(lg, max) {
                     width: 24px !important;
                 }
@@ -408,13 +477,15 @@ input#creditCardpayment-card-0Number.input.medium{
         }
 
         .item-remove {
-            @media (max-width: 490px) {
-                top: 0;
-            }
             .icon::before {
                 color: $color-gray4;
                 font-size: 15px;
 
+                @media screen and (max-width: 1024px) {
+                    color: $color-gray8;
+                    font-size: 13px;
+                }
+
                 @include mq(md, max) {
                     font-size: 18px;
                 }
@@ -446,6 +517,9 @@ input#creditCardpayment-card-0Number.input.medium{
                 @include mq(md, max) {
                     padding: 0 16px;
                 }
+                @media screen and (max-width: 1024px) {
+                    padding: 0 0 0 16px;
+                }
 
                 .srp-main-title {
                     margin: 33px 0 12px;
@@ -465,6 +539,10 @@ input#creditCardpayment-card-0Number.input.medium{
                     font-size: 14px;
                     line-height: 18px;
                     margin: 0 0 10px;
+
+                    @media screen and (max-width: 1024px) {
+                        max-width: 17.32rem;
+                    }
                 }
 
                 button.shp-open-options {
@@ -496,6 +574,10 @@ input#creditCardpayment-card-0Number.input.medium{
                 width: 280px;
                 margin-top: 0;
 
+                @media screen and (max-width: 1024px) {
+                    width: 343px;
+                }
+
                 @include mq(cstm, max) {
                     width: calc(100vw - 32px);
                 }
@@ -522,14 +604,6 @@ input#creditCardpayment-card-0Number.input.medium{
                     font-size: 14px;
                     line-height: 19px;
                     letter-spacing: 0.05em;
-
-                    // &:hover {
-                    //     background-color: lighten($color-black, 5);
-                    // }
-
-                    // &:active {
-                    //     background-color: darken($color-black, 5);
-                    // }
                 }
             }
 
@@ -613,13 +687,11 @@ input#creditCardpayment-card-0Number.input.medium{
                         width: 100px;
                         text-transform: uppercase;
 
-                        // &:hover {
-                        //     background-color: lighten($color-black, 5);
-                        // }
+                        @media screen and (max-width: 1024px) {
+                            right: -36px;
+                            top: 28px;
+                        }
 
-                        // &:active {
-                        //     background-color: darken($color-black, 5);
-                        // }
                     }
 
                     small a {
@@ -748,8 +820,10 @@ input#creditCardpayment-card-0Number.input.medium{
                 }
 
                 .link-coupon-add {
-                    color: #303030;
+                    font-family: $font-family-secundary;
+                    color: $color-black2;
                     font-size: 12px;
+                    line-height: 14px;
                     text-decoration: underline;
                 }
                 .coupon-label{
@@ -765,6 +839,10 @@ input#creditCardpayment-card-0Number.input.medium{
                     color: $color-gray2;
                     cursor: none;
                     text-align: left;
+
+                    @media screen and (max-width: 1024px) {
+                        margin: 48px 0 4px 0;
+                    }
                 }
 
                 .coupon-fields {
@@ -795,6 +873,14 @@ input#creditCardpayment-card-0Number.input.medium{
                         width: 51%;
                         margin-right: 7.4px;
 
+                        @media screen and (max-width: 1024px) {
+                            padding: 0 0 0 12px;
+                            margin-right: 0;
+                            max-width: none;
+                            width: 84.5%;
+                            float: left;
+                        }
+
                         @include mq(sm, max) {
                             max-width: 100%;
                             width: 100%;
@@ -822,13 +908,6 @@ input#creditCardpayment-card-0Number.input.medium{
                             width: 138px;
                         }
 
-                        // &:hover {
-                        //     background-color: lighten($color-black, 5);
-                        // }
-
-                        // &:active {
-                        //     background-color: darken($color-black, 5);
-                        // }
                     }
                 }
             }
@@ -850,6 +929,10 @@ input#creditCardpayment-card-0Number.input.medium{
                             line-height: 16px;
                             color: $color-black;
                             padding: 12px 0;
+
+                            @media screen and (max-width: 1024px) {
+                                padding: 10px 0;
+                            }
                         }
 
                         &.info {
@@ -871,15 +954,17 @@ input#creditCardpayment-card-0Number.input.medium{
                         font-size: 14px;
                         line-height: 19px;
                         color: $color-black;
-                        // padding-top: 30px;
                         float: none;
                     }
                     td.info{
                         font-weight: 700;
                         font-size: 18px;
                         line-height: 25px;
-                        // padding-left: 17px;
                         font-family: $font-family;
+
+                        @media screen and (max-width: 1024px) {
+                            padding: 14px 0;
+                        }
                     }
                     td.monetary{
                         padding-right: 0px;
@@ -916,6 +1001,11 @@ input#creditCardpayment-card-0Number.input.medium{
     .coupon-data{
         display: block !important;
         margin-top: 33px;
+
+        @media screen and (max-width: 1024px) {
+            margin-top: 48.35px;
+            margin-bottom: 10px;
+        }
     }
 
     .cart-links-bottom {
@@ -952,6 +1042,10 @@ input#creditCardpayment-card-0Number.input.medium{
                 line-height: 14px;
                 color: $color-black2;
                 text-decoration: none;
+
+                &#cart-choose-more-products.more.link-choose-more-products{
+                    margin-right: 0;
+                }
             }
         }
 
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 64ababb..ae343e6 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -4,12 +4,22 @@ body .container-main.container-order-form .orderform-template.active {
         margin-left: unset;
         margin-right: 0;
         float: right;
+
+        @media screen and (max-width: 1024px) {
+            width: 100%;
+            padding: 0 16px;
+            margin-bottom: 70px;
+        }
+
         .payment-submit-wrap{
             margin-top: 15px;
         }
     }
     .orderform-template-holder {
         width: 66.1132%;
+        @media screen and (max-width: 1024px) {
+            width: 100%;
+        }
     }
-    
+
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 1a32b2b..5f46c87 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -17,6 +17,9 @@
         margin: 170px 0 32px 0;
         font-size: 0px;
         line-height: 0px;
+        @media screen and (max-width: 1024px) {
+            margin: 170px 0 22px 0;
+        }
 
         &::after{
             content: "SEU CARRINHO ESTÁ VAZIO";
@@ -25,6 +28,11 @@
             font-size: 24px;
             line-height: 33px;
             color: $color-black2;
+
+            @media screen and (max-width: 1024px) {
+                font-size: 18px;
+                line-height: 25px;
+            }
         }
 	}
 
@@ -47,9 +55,13 @@
             width: 31.74%;
             padding: 15px 0;
 
-			&:hover {
-				background: lighten($color-white, 5);
-			}
+            @media screen and (max-width: 1024px) {
+                width: 30.31%;
+            }
+
+			// &:hover {
+			// 	background: lighten($color-white, 5);
+			// }
             &::before{
                 content: "Continuar comprando";
                 font-family: $font-family-secundary;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 3b46e0d..b545b2a 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -16,6 +16,13 @@ footer .footerCheckout__wrapper {
         display: flex;
         align-items: center;
         width: 94.9734%;
+        @media screen and (max-width: 1024px) {
+            flex-direction: column;
+            align-items: baseline;
+            width: 97%;
+            gap: 16px;
+            background-color: rebeccapurple;
+        }
     }
 }
 footer .footerCheckout__prateleira,
@@ -26,6 +33,9 @@ header {
 header{
     border-bottom: 1px solid $color-black2;
     padding: 29px 0;
+    @media screen and (max-width: 1024px) {
+        padding: 16px 0;
+    }
 }
 .headerCheckout__safeBuy{
     display: flex;
@@ -39,9 +49,22 @@ body {
     min-height: 100% !important;
     padding-top: 0 !important;
 
-    .PaymentCardNumber input {
+    .SecurityEnvironmentIcon{
+        @media screen and (max-width: 1024px) {
+            display: none;
+        }
+    }
+    .vtex-omnishipping-1-x-leanShippingOptionActive{
+        background: $color-gray12 !important;
+    }
+
+    #creditCardpayment-card-0Number {
         width: 64%;
         height: 25px;
+        @media screen and (max-width: 1024px) {
+            width: 97%;
+            height: 33px;
+        }
     }
     p.PaymentCardHolderDocument.input.text.required.mask{
         display: none;
@@ -60,6 +83,10 @@ body {
     #ship-postalCode{
         border: 1px solid $color-gray8;
         border-radius: 8px;
+
+        @media screen and (max-width: 1024px) {
+            width: 100%;
+        }
     }
     #find-pickups-manualy-button-denied{
         color: $color-black2;
@@ -78,6 +105,12 @@ body {
             display: none;
         }
     }
+    p.input.ship-postalCode.required.text{
+        @media screen and (max-width: 1024px) {
+            width: 75%;
+        }
+    }
+
     tbody.totalizers-list{
         tr.srp-summary-result.hide{
             display: none;
@@ -125,9 +158,9 @@ body {
         div.span5.totalizers.summary-totalizers.cart-totalizers.pull-right{
             margin-bottom: 0;
         }
-        button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block{
-            margin-top: 47px;
-        }
+    }
+    button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block{
+        margin-top: 47px;
     }
     div.step.accordion-group.client-profile-data {
     .client-profile-email{
@@ -179,17 +212,6 @@ body {
             color: $color-gray9;
         }
     }
-    // form.form-page.client-pre-email.anim-death.anim-current{
-    //     span{
-    //         div#client-profile-data.span6.client-profile-data span{
-    //             font-size: 20px;
-    //             line-height: 23px;
-    //         }
-    //         &::after{
-    //             display: none;
-    //         }
-    //     }
-    // }
     a#payment-group-creditCardPaymentGroup.payment-group-item,
     a#payment-group-bankInvoicePaymentGroup.payment-group-item {
         display: block;
@@ -197,6 +219,9 @@ body {
     }
     .payment-group-list-btn{
         width: 105%;
+        @media screen and (max-width: 1024px) {
+            width: 100%;
+        }
     }
 
 
@@ -226,10 +251,177 @@ body {
     .container-order-form,
     .container-cart {
         width: 80%;
+        @media screen and (max-width: 1024px) {
+            width: 100%;
+        }
+    }
+    .row-fluid .full-cart.active, .row-fluid .orderform-template.active{
+        @media screen and (max-width: 1024px) {
+            display: flex;
+            flex-direction: column;
+        }
+        .row-fluid{
+            @media screen and (max-width: 1024px) {
+                display: flex;
+                flex-direction: column;
+            }
+            #client-profile-data{
+                @media screen and (max-width: 1024px) {
+                    width: 100%;
+                    padding: 0 16px;
+
+                    span.help.error{
+                        font-size: 12px;
+                        line-height: 14px;
+                        &::after{
+                            display: none;
+                        }
+                    }
+                }
+                p.client-email.input.text.required{
+                    @media screen and (max-width: 1024px) {
+                        width: 100%;
+                    }
+
+                    #client-email{
+                        @media screen and (max-width: 1024px) {
+                            width: 98.5%;
+                        }
+                    }
+                }
+                p.client-first-name.input.pull-left.text.required{
+                    @media screen and (max-width: 1024px) {
+                        width: 50%;
+                        margin-right: 0.5%;
+                    }
+                    #client-first-name{
+                        @media screen and (max-width: 1024px) {
+                            width: 95.7%;
+                        }
+                    }
+                }
+                p.client-last-name.input.pull-left.text.required{
+                    @media screen and (max-width: 1024px) {
+                        width: 49.5%;
+                    }
+                    #client-last-name{
+                        @media screen and (max-width: 1024px) {
+                            width: 96.9%;
+                        }
+                    }
+                }
+                p.client-document.input.pull-left.text.required.mask{
+                    @media screen and (max-width: 1024px) {
+                        width: 50%;
+                        margin-right: 0.5%;
+                        margin-bottom: 0;
+                    }
+                    #client-document{
+                        @media screen and (max-width: 1024px) {
+                            width: 95.7%;
+                        }
+                    }
+                }
+                p.client-phone.input.pull-left.text.required.mask{
+                    @media screen and (max-width: 1024px) {
+                        width: 49.5%;
+                        margin-bottom: 0;
+                    }
+                    #client-phone{
+                        @media screen and (max-width: 1024px) {
+                            width: 96.9%;
+                        }
+                    }
+                }
+                p.newsletter{
+                    @media screen and (max-width: 1024px) {
+                        margin-top: 0;
+                    }
+                }
+            }
+            #shipping-data{
+                @media screen and (max-width: 1024px) {
+                    width: 100%;
+                    padding: 0 16px;
+                    margin: 0;
+                }
+                div.accordion-inner.shipping-container{
+                    div.box-step{
+                        #postalCode-finished-loading{
+                            @media screen and (max-width: 1024px) {
+                                width: 33%;
+                            }
+                        }
+                        p.input.ship-postalCode.required.text{
+                            @media screen and (max-width: 1024px) {
+                                width: 100%;
+                            }
+                            #ship-postalCode{
+                                @media screen and (max-width: 1024px) {
+                                    max-width: 98.5%;
+                                }
+                            }
+                        }
+                        div.vtex-omnishipping-1-x-address{
+                            @media screen and (max-width: 1024px) {
+                                margin-bottom: 0;
+                            }
+                            p.input.ship-number.required.text{
+                                @media screen and (max-width: 1024px) {
+                                    margin-right: 0;
+                                }
+                            }
+                        }
+
+                    }
+                }
+            }
+            #payment-data{
+                @media screen and (max-width: 1024px) {
+                    width: 100%;
+                    padding: 0 16px;
+                    margin: 0;
+                }
+                div.step.accordion-group.store-country-BRA.active{
+                    @media screen and (max-width: 1024px) {
+                        width: 96.4%;
+                    }
+                }
+            }
+        }
+    }
+    .container-cart {
+
+        @media screen and (max-width: 1024px) {
+            width: 100%;
+        }
     }
 }
 .row-fluid .full-cart.active{
     margin-bottom: 0;
+
+    .row-fluid.summary{
+        @media screen and (max-width: 1024px) {
+            display: flex;
+            flex-direction: column;
+        }
+        .span5.totalizers.summary-totalizers.cart-totalizers.pull-right{
+            @media screen and (max-width: 1024px) {
+                width: 100%;
+                margin: 0;
+                padding: 0 16px;
+            }
+        }
+    }
+    .clearfix.pull-right.cart-links.cart-links-bottom.hide{
+        width: 97%;
+        padding: 0 16px;
+
+        @media screen and (max-width: 1024px) {
+            margin-bottom: 3px;
+        }
+    }
+
 }
 
 .btn-success {
@@ -256,7 +448,7 @@ body {
     }
 }
 #cart-title{
-    display: block !important;
+    // display: block !important;
     font-weight: 700;
     font-size: 24px;
     line-height: 33px;
@@ -264,7 +456,11 @@ body {
     color: $color-black;
     margin: 16px 0;
     letter-spacing: 0.05em;
-
+}
+#orderform-title{
+    @media screen and (max-width: 1024px) {
+        margin: 16px 0 16px 16px;
+    }
 }
 
 
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 3a13fe0..34b4e11 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -51,6 +51,10 @@
                 width: 10.8%;
                 margin-right: 0px
             }
+            @media screen and (max-width: 1024px) {
+                width: 11.8%;
+                margin-right: 1.6%;
+            }
         }
         .footer-imgs-vtexpci{
             width: 84.4%;
@@ -73,6 +77,11 @@
         width: 33.33%;
         justify-content: flex-end;
 
+        @media screen and (max-width: 1024px) {
+            justify-content: normal;
+
+        }
+
         .Link1{
             justify-content: end;
 
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 76bdaa9..1709158 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -3,6 +3,9 @@
     .container {
         width: 79.53125%;
         margin: 0 auto;
+        @media screen and (max-width: 1024px) {
+            width: 97%;
+        }
     }
     &__wrapper {
         align-items: center;
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 0e2c226..045ba3a 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -6,6 +6,11 @@
     .footerCheckout__prateleira{
         width: 79.38%;
         margin-bottom: 54px;
+
+        @media screen and (max-width: 1024px) {
+            width: 96.5%;
+            margin: 0 10px 54px auto;
+        }
     }
     .footerCheckout__shelfList{
         margin: 0;
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 78a25f6..784f5a1 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -26,6 +26,7 @@ $color-gray8: #C4C4C4;
 $color-gray9: #808080;
 $color-gray10: #E0E0E0;
 $color-gray11: #828282;
+$color-gray12: #F2F2F2;
 
 $color-blue: #4267b2;
 $color-blue2: #00C8FF;
-- 
2.34.1


From 6ec191d2120daad44eeed7da1a97479bb0aa83d1 Mon Sep 17 00:00:00 2001
From: Rhayllon <rhayllom@hotmail.com>
Date: Sun, 18 Dec 2022 23:48:34 -0300
Subject: [PATCH 2/2] =?UTF-8?q?Feat(Checkout):=20Cria=20a=20responsividade?=
 =?UTF-8?q?=20do=20que=20deu=20tempo=20da=20televis=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 checkout/src/arquivos/js/components/Footer.js |  62 +++++
 .../sass/checkout/_checkout-autenticacao.scss |  59 ++++-
 .../sass/checkout/_checkout-carrinho.scss     | 220 +++++++++++++-----
 .../sass/checkout/_checkout-vazio.scss        |  13 +-
 .../src/arquivos/sass/checkout/_checkout.scss | 178 +++++++-------
 .../src/arquivos/sass/partials/_footer.scss   |  10 +
 .../src/arquivos/sass/partials/_header.scss   |  37 ++-
 .../arquivos/sass/partials/_prateleira.scss   |  23 +-
 8 files changed, 464 insertions(+), 138 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index fea78ed..77e3b2d 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -20,6 +20,7 @@ export default class Footer {
         if (window.innerWidth < 1024){
             this.addCarrosselMobile();
         }
+        this.prateleiraView();
 
     }
 
@@ -34,6 +35,7 @@ export default class Footer {
             timeout: 5000,
             interval: 1000,
         });
+        this.pratWrapper = await waitElement(".footerCheckout")
     }
 
     onUpdate() {
@@ -154,4 +156,64 @@ export default class Footer {
                 return peçaBase;
             });
     }
+
+    async prateleiraView() {
+        if (this.prateleira) {
+            const FooterCheck = document.querySelectorAll(".footerCheckout");
+            FooterCheck.forEach((f) => {
+                const prat = f.children[0];
+
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    if (prat) {
+                        prat.classList.add("view");
+                    }
+
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
+                    window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
+                ) {
+                    if (prat) {
+                        if (prat.classList.contains("view")) {
+                            prat.classList.remove("view");
+                        }
+                    }
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    if (prat) {
+                        if (prat.classList.contains("view")) {
+                            prat.classList.remove("view");
+                        }
+                    }
+                }
+
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        if (prat) {
+                            prat.classList.add("view");
+                        }
+
+                    } else if (
+                        window.location.hash === "#/email" ||
+                        window.location.hash === "#/profile" ||
+                        window.location.hash === "#/shipping"
+                    ) {
+                        if (prat) {
+                            if (prat.classList.contains("view")) {
+                                prat.classList.remove("view");
+                            }
+                        }
+
+                    } else if (window.location.hash == "#/payment") {
+                        if (prat) {
+                            if (prat.classList.contains("view")) {
+                                prat.classList.remove("view");
+                            }
+                        }
+                    }
+                });
+            });
+        }
+    }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 620fb9c..ca21ab2 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -20,6 +20,11 @@
                 @media screen and (max-width: 1024px) {
                     margin-right: 16px;
                 }
+
+                @media screen and (min-width: 2500px) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
 			}
 		}
 
@@ -46,6 +51,11 @@
                     text-transform: uppercase;
                     font-weight: 400;
 
+                    @media screen and (min-width: 2500px) {
+                        font-size: 40px;
+                        line-height: 47px;
+                    }
+
                     @media screen and (max-width: 1024px) {
                         font-size: 14px;
                         line-height: 16px;
@@ -61,6 +71,11 @@
                     font-weight: 400;
                     padding: 0;
 
+                    @media screen and (min-width: 2500px) {
+                        font-size: 40px;
+                        line-height: 47px;
+                    }
+
                     @media screen and (max-width: 1024px) {
                         font-size: 14px;
                         line-height: 16px;
@@ -75,6 +90,10 @@
             width: 57%;
             justify-content: flex-start;
 
+            @media screen and (min-width: 2500px) {
+                padding: 1px 0;
+            }
+
             @media screen and (max-width: 1024px) {
                 width: 97%;
             }
@@ -102,6 +121,11 @@
                     line-height: 16px;
                     display: flex;
                     align-items: center;
+
+                    @media screen and (min-width: 2500px) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
                 }
 
 				@media (max-width: 490px) {
@@ -139,6 +163,11 @@
                 text-transform: uppercase;
                 color: $color-black2;
 
+                @media screen and (min-width: 2500px) {
+                    font-size: 28px;
+                    line-height: 38px;
+                }
+
                 @media screen and (max-width: 1024px) {
                     padding: 4px 18px;
                     height: 50px;
@@ -174,6 +203,11 @@
                 font-size: 12px;
                 line-height: 16px;
 				margin: 0 0 8px 0;
+
+                @media screen and (min-width: 2500px) {
+                    font-size: 24px;
+                    line-height: 33px;
+                }
 			}
 
 			ul {
@@ -187,12 +221,21 @@
                         font-size: 12px;
                         line-height: 16px;
                         color: $color-black2;
+
+                        @media screen and (min-width: 2500px) {
+                            font-size: 24px;
+                            line-height: 33px;
+                        }
 					}
 
 					i::before {
 						color: $color-blue2;
 						font-size: 1rem;
 						opacity: 1;
+
+                        @media screen and (min-width: 2500px) {
+                            font-size: 1.5rem;
+                        }
 					}
 				}
 			}
@@ -201,6 +244,10 @@
 				color: $color-black;
 				font-size: 6rem;
 				opacity: 0.5;
+
+                @media screen and (min-width: 2500px) {
+                    font-size: 9.8rem;
+                }
 			}
 		}
 	}
@@ -456,7 +503,14 @@
 					border-radius: 8px;
 					color: #303030;
 					padding: 12px;
-                    padding-top: 2px;
+                    padding-top: 15px;
+                    position: relative;
+
+                    span.street,
+                    span.neighborhood{
+                        padding-left: 31px;
+                    }
+
                     &::before{
                         content: "";
                         width: 24px;
@@ -464,6 +518,9 @@
                         background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
                         background-repeat: no-repeat;
                         background-size: 24px;
+                        position: absolute;
+                        left: 11px;
+                        top: 23px;
                     }
 
 					@include mq(md, max) {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 558e9f7..e7dd5bf 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -7,7 +7,7 @@
     width: 64%;
     height: 25px;
 }
-input#creditCardpayment-card-0Number.input.medium{
+input#creditCardpayment-card-0Number.input.medium {
     width: 64%;
     height: 25px;
 }
@@ -30,12 +30,12 @@ input#creditCardpayment-card-0Number.input.medium{
             padding: 16px 0;
             position: relative;
         }
-        .table.cart-items{
+        .table.cart-items {
             @media screen and (max-width: 1024px) {
-                thead{
+                thead {
                     display: none;
                 }
-                tbody{
+                tbody {
                     .shipping-date.empty,
                     .quantity-price {
                         display: none;
@@ -98,6 +98,11 @@ input#creditCardpayment-card-0Number.input.medium{
                 border-top: none;
                 margin-top: 0;
                 padding-top: 0;
+                .hproduct.item.muted {
+                    span.shipping-date.pull-left {
+                        display: none;
+                    }
+                }
 
                 &:not(:first-child) {
                     margin-top: 8px;
@@ -146,14 +151,6 @@ input#creditCardpayment-card-0Number.input.medium{
             line-height: 19px;
             letter-spacing: 0.05em;
             text-transform: uppercase;
-
-            // &:hover {
-            //     background: lighten($color-black, 5);
-            // }
-
-            // &:active {
-            //     background: darken($color-black, 5);
-            // }
         }
     }
 
@@ -165,7 +162,7 @@ input#creditCardpayment-card-0Number.input.medium{
         .product-item {
             padding: 16px 0;
 
-            .product-name{
+            .product-name {
                 padding-top: 10px;
 
                 @media screen and (max-width: 1024px) {
@@ -184,32 +181,47 @@ input#creditCardpayment-card-0Number.input.medium{
             font-size: 14px;
             line-height: 16px;
 
+            @media screen and (min-width: 2500px) {
+                font-size: 28px;
+                line-height: 33px;
+            }
+
             @include mq(md, max) {
                 &.quantity-price,
                 &.shipping-date {
                     display: none;
                 }
             }
-            &.shipping-date{
+            &.shipping-date {
                 font-size: 0;
                 line-height: 0;
-                &::after{
+                &::after {
                     content: "Frete";
                     font-weight: 400;
                     font-size: 14px;
                     line-height: 16px;
                     color: $color-black;
+
+                    @media screen and (min-width: 2500px) {
+                        font-size: 28px;
+                        line-height: 33px;
+                    }
                 }
             }
-            &.product-price{
+            &.product-price {
                 font-size: 0;
                 line-height: 0;
-                &::after{
+                &::after {
                     content: "Unidade";
                     font-weight: 400;
                     font-size: 14px;
                     line-height: 16px;
                     color: $color-black;
+
+                    @media screen and (min-width: 2500px) {
+                        font-size: 28px;
+                        line-height: 33px;
+                    }
                 }
             }
         }
@@ -219,6 +231,11 @@ input#creditCardpayment-card-0Number.input.medium{
             padding: 0;
             width: 60px;
 
+            @media screen and (min-width: 2500px) {
+                width: 146px;
+                height: 156px;
+            }
+
             @media screen and (max-width: 1024px) {
                 padding: 0 16px;
             }
@@ -232,19 +249,28 @@ input#creditCardpayment-card-0Number.input.medium{
                 max-width: 100%;
                 width: 100%;
 
+                @media screen and (min-width: 2500px) {
+                    height: 156px;
+                }
+
+                @media screen and (min-width: 2500px) {
+                    width: 146px;
+                    // height: 156px;
+                }
+
                 @include mq(sm, max) {
                     height: 72px;
                     width: auto;
                 }
             }
         }
-        .badge{
+        .badge {
             display: none;
         }
-        #hproduct-item-2616{
+        #hproduct-item-2616 {
             width: 60px;
         }
-        .price{
+        .price {
             padding-top: 15px;
         }
         .product-name {
@@ -270,11 +296,16 @@ input#creditCardpayment-card-0Number.input.medium{
                 line-height: 14px;
                 transition: ease-in 0.22s all;
 
-                &:hover {
-                    color: darken($color-blue, 10);
-                    text-decoration: none;
+                @media screen and (min-width: 2500px) {
+                    font-size: 24px;
+                    line-height: 28px;
                 }
 
+                // &:hover {
+                //     color: darken($color-blue, 10);
+                //     text-decoration: none;
+                // }
+
                 @media (max-width: 490px) {
                     margin-left: 23px;
                 }
@@ -286,11 +317,21 @@ input#creditCardpayment-card-0Number.input.medium{
             }
         }
 
+        td.quantity-price{
+            @media screen and (min-width: 2500px) {
+                width: 188px;
+            }
+        }
         td.shipping-date {
             color: $color-gray2;
             font-size: 12px;
             line-height: 14px;
 
+            @media screen and (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+
             @media screen and (max-width: 1024px) {
                 display: none;
             }
@@ -317,6 +358,11 @@ input#creditCardpayment-card-0Number.input.medium{
                 line-height: 14px;
                 text-decoration-line: line-through;
 
+                @media screen and (min-width: 2500px) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+
                 @media screen and (max-width: 1024px) {
                     padding-left: 8px;
                 }
@@ -331,7 +377,7 @@ input#creditCardpayment-card-0Number.input.medium{
                 }
             }
         }
-        td.product-price{
+        td.product-price {
             padding: 10px 5px 0 5px;
             @media screen and (max-width: 1024px) {
                 float: right;
@@ -339,7 +385,7 @@ input#creditCardpayment-card-0Number.input.medium{
                 height: 37px;
             }
         }
-        td.item-remove{
+        td.item-remove {
             @media screen and (max-width: 1024px) {
                 position: absolute;
                 right: 10px;
@@ -401,7 +447,7 @@ input#creditCardpayment-card-0Number.input.medium{
                     // padding: 1px 12px;
                 }
             }
-            .item-quantity-change-decrement{
+            .item-quantity-change-decrement {
                 width: 16px;
                 height: 16px;
                 margin-left: 11px;
@@ -416,7 +462,7 @@ input#creditCardpayment-card-0Number.input.medium{
                 &:before {
                     content: "-";
                     font-size: 14px;
-                    background-color: #00C8FF;
+                    background-color: #00c8ff;
                     border-radius: 50%;
                     height: 100%;
                     width: 100%;
@@ -462,10 +508,19 @@ input#creditCardpayment-card-0Number.input.medium{
                 font-size: 14px;
                 line-height: 16px;
                 color: $color-black;
+                @media screen and (min-width: 2500px) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
 
-                &.total-selling-price{
+                &.total-selling-price {
                     font-weight: 700;
                     line-height: 19px;
+
+                    @media screen and (min-width: 2500px) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
             }
         }
@@ -517,6 +572,12 @@ input#creditCardpayment-card-0Number.input.medium{
                 @include mq(md, max) {
                     padding: 0 16px;
                 }
+                @media screen and (min-width: 2500px) {
+                    font-size: 48px;
+                    line-height: 65px;
+                    max-width: none;
+                }
+
                 @media screen and (max-width: 1024px) {
                     padding: 0 0 0 16px;
                 }
@@ -529,6 +590,11 @@ input#creditCardpayment-card-0Number.input.medium{
                     line-height: 33px;
                     color: $color-black2;
 
+                    @media screen and (min-width: 2500px) {
+                        font-size: 48px;
+                        line-height: 65px;
+                    }
+
                     @include mq(md, max) {
                         margin-top: 0;
                     }
@@ -540,6 +606,12 @@ input#creditCardpayment-card-0Number.input.medium{
                     line-height: 18px;
                     margin: 0 0 10px;
 
+                    @media screen and (min-width: 2500px) {
+                        max-width: 34.5rem;
+                        font-size: 28px;
+                        line-height: 36px;
+                    }
+
                     @media screen and (max-width: 1024px) {
                         max-width: 17.32rem;
                     }
@@ -560,6 +632,11 @@ input#creditCardpayment-card-0Number.input.medium{
                     margin-top: 0;
                     text-transform: uppercase;
 
+                    @media screen and (min-width: 2500px) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
+
                     &:hover {
                         background-color: lighten($color-gray5, 5);
                     }
@@ -632,7 +709,7 @@ input#creditCardpayment-card-0Number.input.medium{
                 .blue {
                     color: $color-black2 !important;
                 }
-                .gray{
+                .gray {
                     color: $color-gray8;
                 }
 
@@ -691,7 +768,6 @@ input#creditCardpayment-card-0Number.input.medium{
                             right: -36px;
                             top: 28px;
                         }
-
                     }
 
                     small a {
@@ -703,13 +779,13 @@ input#creditCardpayment-card-0Number.input.medium{
                         color: $color-black2;
                         margin-top: 7px;
 
-                        &::after{
+                        &::after {
                             content: "Não sei meu código postal";
                             font-size: 10px;
                             line-height: 12px;
                             font-weight: 400;
 
-                            :hover{
+                            :hover {
                                 text-decoration: underline;
                             }
                         }
@@ -790,6 +866,10 @@ input#creditCardpayment-card-0Number.input.medium{
             padding: 0;
             width: 346px;
 
+            @media screen and (min-width: 2500px) {
+                width: 688px;
+            }
+
             .coupon-data {
                 #cart-link-coupon-add {
                     text-decoration: none;
@@ -805,6 +885,11 @@ input#creditCardpayment-card-0Number.input.medium{
                     line-height: 14px;
                     color: $color-black2;
                     text-decoration: none;
+
+                    @media screen and (min-width: 2500px) {
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
                 }
             }
 
@@ -816,7 +901,6 @@ input#creditCardpayment-card-0Number.input.medium{
             .coupon-column {
                 .coupon {
                     margin: 0;
-
                 }
 
                 .link-coupon-add {
@@ -826,7 +910,7 @@ input#creditCardpayment-card-0Number.input.medium{
                     line-height: 14px;
                     text-decoration: underline;
                 }
-                .coupon-label{
+                .coupon-label {
                     margin-bottom: 4px;
                 }
                 .coupon-label label {
@@ -907,7 +991,6 @@ input#creditCardpayment-card-0Number.input.medium{
                         @include mq(md, max) {
                             width: 138px;
                         }
-
                     }
                 }
             }
@@ -930,6 +1013,11 @@ input#creditCardpayment-card-0Number.input.medium{
                             color: $color-black;
                             padding: 12px 0;
 
+                            @media screen and (min-width: 2500px) {
+                                font-size: 28px;
+                                line-height: 33px;
+                            }
+
                             @media screen and (max-width: 1024px) {
                                 padding: 10px 0;
                             }
@@ -942,6 +1030,10 @@ input#creditCardpayment-card-0Number.input.medium{
 
                         &.monetary {
                             text-align: right;
+
+                            @media screen and (min-width: 2500px) {
+                                width: 188px;
+                            }
                         }
                     }
                 }
@@ -955,50 +1047,60 @@ input#creditCardpayment-card-0Number.input.medium{
                         line-height: 19px;
                         color: $color-black;
                         float: none;
+
+                        @media screen and (min-width: 2500px) {
+                            font-size: 36px;
+                            line-height: 49px;
+                        }
                     }
-                    td.info{
+                    td.info {
                         font-weight: 700;
                         font-size: 18px;
                         line-height: 25px;
                         font-family: $font-family;
 
+                        @media screen and (min-width: 2500px) {
+                            font-size: 36px;
+                            line-height: 49px;
+                        }
+
                         @media screen and (max-width: 1024px) {
                             padding: 14px 0;
                         }
                     }
-                    td.monetary{
+                    td.monetary {
                         padding-right: 0px;
                     }
                 }
             }
         }
     }
-    .Items{
+    .Items {
         // border-top: 1px solid;
         border-bottom: 1px solid;
-        .info{
-            padding: 20px 0 10px 0 ;
+        .info {
+            padding: 20px 0 10px 0;
             padding-left: 0;
             float: none;
         }
-        .monetary{
-            padding-right: 0px ;
+        .monetary {
+            padding-right: 0px;
             float: none;
         }
     }
-    .Discounts{
+    .Discounts {
         border-bottom: 1px solid;
-        .info{
-            padding: 20px 0 10px 0 ;
+        .info {
+            padding: 20px 0 10px 0;
             padding-left: 0;
             float: none;
         }
-        .monetary{
-            padding-right: 0px ;
+        .monetary {
+            padding-right: 0px;
             float: none;
         }
     }
-    .coupon-data{
+    .coupon-data {
         display: block !important;
         margin-top: 33px;
 
@@ -1030,6 +1132,11 @@ input#creditCardpayment-card-0Number.input.medium{
             text-align: center;
             margin-bottom: 14px;
 
+            @media screen and (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+
             @include mq(md, max) {
                 margin-bottom: 0px;
             }
@@ -1043,8 +1150,14 @@ input#creditCardpayment-card-0Number.input.medium{
                 color: $color-black2;
                 text-decoration: none;
 
-                &#cart-choose-more-products.more.link-choose-more-products{
+                &#cart-choose-more-products.more.link-choose-more-products {
                     margin-right: 0;
+
+                    @media screen and (min-width: 2500px) {
+                        height: 156px;
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
                 }
             }
         }
@@ -1059,10 +1172,6 @@ input#creditCardpayment-card-0Number.input.medium{
                 transition: ease-in 0.22s all;
                 padding: 12px 19px;
 
-                // &:hover {
-                //     background-color: darken($color-green, 5);
-                // }
-
                 &:after {
                     content: "finalizar compra";
                     font-family: $font-family;
@@ -1074,6 +1183,11 @@ input#creditCardpayment-card-0Number.input.medium{
                     vertical-align: middle;
                     line-height: 19px;
                     text-shadow: none;
+
+                    @media screen and (min-width: 2500px) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
             }
         }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 5f46c87..80eb4a8 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -29,6 +29,11 @@
             line-height: 33px;
             color: $color-black2;
 
+            @media screen and (min-width: 2500px) {
+                font-size: 48px;
+                line-height: 65px;
+            }
+
             @media screen and (max-width: 1024px) {
                 font-size: 18px;
                 line-height: 25px;
@@ -59,9 +64,6 @@
                 width: 30.31%;
             }
 
-			// &:hover {
-			// 	background: lighten($color-white, 5);
-			// }
             &::before{
                 content: "Continuar comprando";
                 font-family: $font-family-secundary;
@@ -72,6 +74,11 @@
                 text-align: center;
                 color: $color-black2;
                 text-transform: uppercase;
+
+                @media screen and (min-width: 2500px) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
             }
 		}
 	}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index b545b2a..6e4d7b1 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -12,7 +12,8 @@ footer .footerCheckout__wrapper {
     width: 100%;
     margin: auto auto 0 auto;
     border-top: 1px solid $color-black2;
-    .container{
+
+    .container {
         display: flex;
         align-items: center;
         width: 94.9734%;
@@ -21,7 +22,6 @@ footer .footerCheckout__wrapper {
             align-items: baseline;
             width: 97%;
             gap: 16px;
-            background-color: rebeccapurple;
         }
     }
 }
@@ -30,17 +30,20 @@ header {
     width: 100%;
     margin: 0 auto;
 }
-header{
+header {
     border-bottom: 1px solid $color-black2;
     padding: 29px 0;
     @media screen and (max-width: 1024px) {
         padding: 16px 0;
     }
 }
-.headerCheckout__safeBuy{
+.headerCheckout__safeBuy {
     display: flex;
     gap: 8px;
     height: 15px;
+    @media screen and (min-width: 2500px) {
+        height: 33px;
+    }
 }
 
 body {
@@ -48,13 +51,17 @@ body {
     flex-direction: column;
     min-height: 100% !important;
     padding-top: 0 !important;
+    position: relative;
 
-    .SecurityEnvironmentIcon{
+    .SecurityEnvironmentIcon {
         @media screen and (max-width: 1024px) {
             display: none;
         }
     }
-    .vtex-omnishipping-1-x-leanShippingOptionActive{
+    .view {
+        display: block !important;
+    }
+    .vtex-omnishipping-1-x-leanShippingOptionActive {
         background: $color-gray12 !important;
     }
 
@@ -66,21 +73,24 @@ body {
             height: 33px;
         }
     }
-    p.PaymentCardHolderDocument.input.text.required.mask{
+    div.row-fluid.orderform-template.span12.active{
+        min-height: 580px;
+    }
+    p.PaymentCardHolderDocument.input.text.required.mask {
         display: none;
     }
-    .PaymentInstallments select{
+    .PaymentInstallments select {
         width: 68%;
     }
-    input#creditCardpayment-card-0Name.input-medium{
+    input#creditCardpayment-card-0Name.input-medium {
         width: 34%;
         height: 25px;
     }
-    .input#creditCardpayment-card-0Code.input-mini{
+    .input#creditCardpayment-card-0Code.input-mini {
         width: 16%;
         height: 25px;
     }
-    #ship-postalCode{
+    #ship-postalCode {
         border: 1px solid $color-gray8;
         border-radius: 8px;
 
@@ -88,56 +98,56 @@ body {
             width: 100%;
         }
     }
-    #find-pickups-manualy-button-denied{
+    #find-pickups-manualy-button-denied {
         color: $color-black2;
         outline: none;
-        &:hover{
+        &:hover {
             background: $color-white;
             color: $color-black2;
         }
-        &:active{
+        &:active {
             background: $color-white;
             color: $color-black2;
         }
     }
-    #payment-data-submit{
-        i.icon-lock{
+    #payment-data-submit {
+        i.icon-lock {
             display: none;
         }
     }
-    p.input.ship-postalCode.required.text{
+    p.input.ship-postalCode.required.text {
         @media screen and (max-width: 1024px) {
             width: 75%;
         }
     }
 
-    tbody.totalizers-list{
-        tr.srp-summary-result.hide{
+    tbody.totalizers-list {
+        tr.srp-summary-result.hide {
             display: none;
         }
     }
-    div.cart-fixed.cart-fixed-transition.affix-top{
-        .Items{
+    div.cart-fixed.cart-fixed-transition.affix-top {
+        .Items {
             border-top: 1px solid $color-gray10;
             border-bottom: 1px solid $color-gray10;
-            .info{
+            .info {
                 padding: 26px 0 !important;
                 padding-left: 17px !important;
                 float: none;
             }
-            .monetary{
+            .monetary {
                 padding-right: 17px !important;
                 float: none;
             }
         }
-        .Discounts{
+        .Discounts {
             border-bottom: 1px solid $color-gray10;
-            .info{
+            .info {
                 padding: 26px 0 !important;
                 padding-left: 17px !important;
                 float: none;
             }
-            .monetary{
+            .monetary {
                 padding-right: 17px !important;
                 float: none;
             }
@@ -148,33 +158,33 @@ body {
                 padding-top: 30px;
                 padding-bottom: 0px;
             }
-            td.info{
+            td.info {
                 padding-left: 17px;
             }
-            td.monetary{
+            td.monetary {
                 padding-right: 17px;
             }
         }
-        div.span5.totalizers.summary-totalizers.cart-totalizers.pull-right{
+        div.span5.totalizers.summary-totalizers.cart-totalizers.pull-right {
             margin-bottom: 0;
         }
     }
-    button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block{
+    button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block {
         margin-top: 47px;
     }
     div.step.accordion-group.client-profile-data {
-    .client-profile-email{
+        .client-profile-email {
             margin-bottom: 6px;
         }
-        .client-profile-summary{
-            span{
+        .client-profile-summary {
+            span {
                 margin-bottom: 6px;
             }
         }
-        span{
+        span {
             font-size: 0;
             line-height: 0;
-            &::after{
+            &::after {
                 content: "Identificação";
                 font-family: $font-family-secundary;
                 font-style: normal;
@@ -188,14 +198,14 @@ body {
         span.email,
         span.name,
         span.tel,
-        span.newsletter-text{
-            &::after{
+        span.newsletter-text {
+            &::after {
                 display: none;
             }
         }
         span.email,
         span.name,
-        span.tel{
+        span.tel {
             font-family: $font-family;
             font-style: normal;
             font-weight: 400;
@@ -203,7 +213,7 @@ body {
             line-height: 16px;
             color: $color-gray2;
         }
-        span.newsletter-text{
+        span.newsletter-text {
             font-family: $font-family;
             font-style: normal;
             font-weight: 400;
@@ -215,16 +225,14 @@ body {
     a#payment-group-creditCardPaymentGroup.payment-group-item,
     a#payment-group-bankInvoicePaymentGroup.payment-group-item {
         display: block;
-
     }
-    .payment-group-list-btn{
+    .payment-group-list-btn {
         width: 105%;
         @media screen and (max-width: 1024px) {
             width: 100%;
         }
     }
 
-
     @include mq(md, max) {
         padding-left: 0;
     }
@@ -255,134 +263,134 @@ body {
             width: 100%;
         }
     }
-    .row-fluid .full-cart.active, .row-fluid .orderform-template.active{
+    .row-fluid .full-cart.active,
+    .row-fluid .orderform-template.active {
         @media screen and (max-width: 1024px) {
             display: flex;
             flex-direction: column;
         }
-        .row-fluid{
+        .row-fluid {
             @media screen and (max-width: 1024px) {
                 display: flex;
                 flex-direction: column;
             }
-            #client-profile-data{
+            #client-profile-data {
                 @media screen and (max-width: 1024px) {
                     width: 100%;
                     padding: 0 16px;
 
-                    span.help.error{
+                    span.help.error {
                         font-size: 12px;
                         line-height: 14px;
-                        &::after{
+                        &::after {
                             display: none;
                         }
                     }
                 }
-                p.client-email.input.text.required{
+                p.client-email.input.text.required {
                     @media screen and (max-width: 1024px) {
                         width: 100%;
                     }
 
-                    #client-email{
+                    #client-email {
                         @media screen and (max-width: 1024px) {
                             width: 98.5%;
                         }
                     }
                 }
-                p.client-first-name.input.pull-left.text.required{
+                p.client-first-name.input.pull-left.text.required {
                     @media screen and (max-width: 1024px) {
                         width: 50%;
                         margin-right: 0.5%;
                     }
-                    #client-first-name{
+                    #client-first-name {
                         @media screen and (max-width: 1024px) {
                             width: 95.7%;
                         }
                     }
                 }
-                p.client-last-name.input.pull-left.text.required{
+                p.client-last-name.input.pull-left.text.required {
                     @media screen and (max-width: 1024px) {
                         width: 49.5%;
                     }
-                    #client-last-name{
+                    #client-last-name {
                         @media screen and (max-width: 1024px) {
                             width: 96.9%;
                         }
                     }
                 }
-                p.client-document.input.pull-left.text.required.mask{
+                p.client-document.input.pull-left.text.required.mask {
                     @media screen and (max-width: 1024px) {
                         width: 50%;
                         margin-right: 0.5%;
                         margin-bottom: 0;
                     }
-                    #client-document{
+                    #client-document {
                         @media screen and (max-width: 1024px) {
                             width: 95.7%;
                         }
                     }
                 }
-                p.client-phone.input.pull-left.text.required.mask{
+                p.client-phone.input.pull-left.text.required.mask {
                     @media screen and (max-width: 1024px) {
                         width: 49.5%;
                         margin-bottom: 0;
                     }
-                    #client-phone{
+                    #client-phone {
                         @media screen and (max-width: 1024px) {
                             width: 96.9%;
                         }
                     }
                 }
-                p.newsletter{
+                p.newsletter {
                     @media screen and (max-width: 1024px) {
                         margin-top: 0;
                     }
                 }
             }
-            #shipping-data{
+            #shipping-data {
                 @media screen and (max-width: 1024px) {
                     width: 100%;
                     padding: 0 16px;
                     margin: 0;
                 }
-                div.accordion-inner.shipping-container{
-                    div.box-step{
-                        #postalCode-finished-loading{
+                div.accordion-inner.shipping-container {
+                    div.box-step {
+                        #postalCode-finished-loading {
                             @media screen and (max-width: 1024px) {
                                 width: 33%;
                             }
                         }
-                        p.input.ship-postalCode.required.text{
+                        p.input.ship-postalCode.required.text {
                             @media screen and (max-width: 1024px) {
                                 width: 100%;
                             }
-                            #ship-postalCode{
+                            #ship-postalCode {
                                 @media screen and (max-width: 1024px) {
                                     max-width: 98.5%;
                                 }
                             }
                         }
-                        div.vtex-omnishipping-1-x-address{
+                        div.vtex-omnishipping-1-x-address {
                             @media screen and (max-width: 1024px) {
                                 margin-bottom: 0;
                             }
-                            p.input.ship-number.required.text{
+                            p.input.ship-number.required.text {
                                 @media screen and (max-width: 1024px) {
                                     margin-right: 0;
                                 }
                             }
                         }
-
                     }
                 }
             }
-            #payment-data{
+            #payment-data {
                 @media screen and (max-width: 1024px) {
                     width: 100%;
                     padding: 0 16px;
                     margin: 0;
                 }
-                div.step.accordion-group.store-country-BRA.active{
+                div.step.accordion-group.store-country-BRA.active {
                     @media screen and (max-width: 1024px) {
                         width: 96.4%;
                     }
@@ -391,21 +399,20 @@ body {
         }
     }
     .container-cart {
-
         @media screen and (max-width: 1024px) {
             width: 100%;
         }
     }
 }
-.row-fluid .full-cart.active{
+.row-fluid .full-cart.active {
     margin-bottom: 0;
 
-    .row-fluid.summary{
+    .row-fluid.summary {
         @media screen and (max-width: 1024px) {
             display: flex;
             flex-direction: column;
         }
-        .span5.totalizers.summary-totalizers.cart-totalizers.pull-right{
+        .span5.totalizers.summary-totalizers.cart-totalizers.pull-right {
             @media screen and (max-width: 1024px) {
                 width: 100%;
                 margin: 0;
@@ -413,15 +420,19 @@ body {
             }
         }
     }
-    .clearfix.pull-right.cart-links.cart-links-bottom.hide{
+    .clearfix.pull-right.cart-links.cart-links-bottom.hide {
         width: 97%;
         padding: 0 16px;
 
+        @media screen and (min-width: 2500px) {
+            width: 34.4%;
+            padding: 0;
+        }
+
         @media screen and (max-width: 1024px) {
-            margin-bottom: 3px;
+            margin-bottom: 25px;
         }
     }
-
 }
 
 .btn-success {
@@ -443,11 +454,16 @@ body {
     margin: 17px 0;
     text-transform: uppercase;
 
+    @media screen and (min-width: 2500px) {
+        font-size: 48px;
+        line-height: 65px;
+    }
+
     @include mq(md, max) {
         margin-left: 30px;
     }
 }
-#cart-title{
+#cart-title {
     // display: block !important;
     font-weight: 700;
     font-size: 24px;
@@ -456,14 +472,18 @@ body {
     color: $color-black;
     margin: 16px 0;
     letter-spacing: 0.05em;
+
+    @media screen and (min-width: 2500px) {
+        font-size: 48px;
+        line-height: 65px;
+    }
 }
-#orderform-title{
+#orderform-title {
     @media screen and (max-width: 1024px) {
         margin: 16px 0 16px 16px;
     }
 }
 
-
 .dropdown {
     &__content {
         &--closed {
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 34b4e11..5b06b97 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -20,6 +20,11 @@
         text-transform: capitalize;
         width: 33.33%;
 
+        @media screen and (min-width: 2500px) {
+            font-size: 20px;
+            line-height: 27px;
+        }
+
         &::after{
             content: ".";
         }
@@ -112,6 +117,11 @@
             line-height: 12px;
             text-decoration: none;
 
+            @media screen and (min-width: 2500px) {
+                font-size: 18px;
+                line-height: 25px;
+            }
+
             span {
                 margin-right: 8px;
             }
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 1709158..f58c6ba 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -19,9 +19,12 @@
                 padding: 0;
                 grid-template-columns: 2fr 1fr 2fr;
                 width: 439px;
-                /* border: 1px solid rgb(59, 51, 51); */
                 margin: 0;
 
+                @media screen and (min-width: 2500px) {
+                    width: 1078px;
+                }
+
                 .li-volta-borda-1,
                 .li-volta-borda-2,
                 .li-volta-centro {
@@ -37,6 +40,11 @@
                     margin-bottom: 9px;
                     font-family: $font-family-secundary;
                     color: $color-black2;
+
+                    @media screen and (min-width: 2500px) {
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
                 }
                 .p-bola1,
                 .p-bola2,
@@ -46,6 +54,11 @@
                     width: 10px;
                     height: 10px;
                     background-color: $color-white;
+
+                    @media screen and (min-width: 2500px) {
+                        width: 22px;
+                        height: 22px;
+                    }
                 }
                 .div-itens{
                     display: flex;
@@ -78,6 +91,12 @@
                     margin: 0;
                     width: 97%;
                     transform: translateY(-7px);
+
+                    @media screen and (min-width: 2500px) {
+                        transform: translateY(-12px);
+                        left: 21.6%;
+                        width: 100.5%;
+                    }
                 }
                 .p-borda-2{
                     border-top: 1.5px solid black;
@@ -87,6 +106,12 @@
                     margin: 0;
                     width: 100.8%;
                     transform: translateY(-7px);
+
+                    @media screen and (min-width: 2500px) {
+                        transform: translateY(-12px);
+                        right: 17.8%;
+                        width: 104.2%;
+                    }
                 }
                 .active{
                     background: $color-black2;
@@ -99,6 +124,11 @@
         img {
             height: 37.14px;
             width: auto;
+
+            @media screen and (min-width: 2500px) {
+                min-width: 382px;
+                height: 91.2px;
+            }
         }
     }
 
@@ -113,6 +143,11 @@
             font-size: 12px;
             line-height: 14px;
             color: $color-black;
+
+            @media screen and (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
         i {
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 045ba3a..bee6bfe 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -6,10 +6,12 @@
     .footerCheckout__prateleira{
         width: 79.38%;
         margin-bottom: 54px;
+        display: none;
+        margin: 0 9.7% 54px auto;
 
         @media screen and (max-width: 1024px) {
             width: 96.5%;
-            margin: 0 10px 54px auto;
+            margin: 0 1% 54px auto;
         }
     }
     .footerCheckout__shelfList{
@@ -34,6 +36,11 @@
         line-height: 38px;
         text-align: center;
         color: $color-black2;
+
+        @media screen and (min-width: 2500px) {
+            font-size: 48px;
+            line-height: 76px;
+        }
     }
     .footerCheckout__shelfList-name{
         font-family: $font-family;
@@ -45,6 +52,10 @@
         color: $color-black2;
         margin: 20px 0;
         width: 95%;
+        @media screen and (min-width: 2500px) {
+            font-size: 26px;
+            line-height: 35px;
+        }
     }
     .footerCheckout__shelfList-skus-wrapper{
         .footerCheckout__shelfList-skus{
@@ -63,6 +74,11 @@
             font-weight: 700;
             font-size: 13px;
             line-height: 18px;
+
+            @media screen and (min-width: 2500px) {
+                font-size: 26px;
+                line-height: 35px;
+            }
         }
         display: flex;
         text-align: center;
@@ -94,6 +110,11 @@
             font-weight: 700;
             font-size: 13px;
             line-height: 18px;
+
+            @media screen and (min-width: 2500px) {
+                font-size: 26px;
+                line-height: 35px;
+            }
         }
     }
 }
-- 
2.34.1