From 8bcb85876b5fa28631cc30aeaf92f087aa404408 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 13 Dec 2022 14:48:43 -0300
Subject: [PATCH 01/27] feat(workspace): created variables for more
 organization

---
 .../sass/checkout/_checkout-autenticacao.scss | 474 +++++++++---------
 .../sass/checkout/_checkout-carrinho.scss     | 140 +++---
 .../sass/checkout/_checkout-vazio.scss        |  64 +--
 .../src/arquivos/sass/checkout/_checkout.scss |  14 +-
 .../src/arquivos/sass/partials/_footer.scss   |  12 +-
 .../src/arquivos/sass/partials/_header.scss   |   4 +-
 .../src/arquivos/sass/utils/_variaveis.scss   |  47 +-
 7 files changed, 379 insertions(+), 376 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 92f0375..08dde7d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -1,289 +1,289 @@
 .checkout-container {
-	.client-pre-email {
-		border-color: $color-gray4;
-		font-family: $font-family;
-		padding-top: 8px;
+    .client-pre-email {
+        border-color: $clr-gray-300;
+        font-family: $font-family-100;
+        padding-top: 8px;
 
-		.link-cart {
-			a {
-				color: $color-black;
-				font-size: 14px;
+        .link-cart {
+            a {
+                color: $clr-gray-600;
+                font-size: 14px;
 
-				&:hover {
-					color: lighen($color-black, 10);
-				}
-			}
-		}
+                &:hover {
+                    color: lighen($clr-gray-600, 10);
+                }
+            }
+        }
 
-		.pre-email {
-			flex-direction: column;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+        .pre-email {
+            flex-direction: column;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-			h3 {
-				margin-bottom: 16px;
+            h3 {
+                margin-bottom: 16px;
 
-				span {
-					color: #303030;
-					font-size: 24px;
-				}
+                span {
+                    color: #303030;
+                    font-size: 24px;
+                }
 
-				small {
-					color: $color-gray4;
-				}
-			}
-		}
+                small {
+                    color: $clr-gray-300;
+                }
+            }
+        }
 
-		.client-email {
-			margin: 0 0 16px;
+        .client-email {
+            margin: 0 0 16px;
 
-			input {
-				box-shadow: none;
-				color: $color-black;
-				font-family: $font-family;
-				padding: 0 16px;
-				border: 2px solid $color-gray3;
-				box-sizing: border-box;
-				border-radius: 5px;
+            input {
+                box-shadow: none;
+                color: $clr-gray-600;
+                font-family: $font-family-100;
+                padding: 0 16px;
+                border: 2px solid $clr-gray-100;
+                box-sizing: border-box;
+                border-radius: 5px;
 
-				@media (max-width: 490px) {
-					width: auto;
-				}
-			}
+                @media (max-width: 490px) {
+                    width: auto;
+                }
+            }
 
-			button {
-				background-color: $color-black;
-				border-radius: 5px;
-				border: none;
-				font-family: $font-family;
-				height: 54px;
-				right: 0;
-				top: 0;
+            button {
+                background-color: $clr-gray-600;
+                border-radius: 5px;
+                border: none;
+                font-family: $font-family-100;
+                height: 54px;
+                right: 0;
+                top: 0;
 
-				@media (max-width: 490px) {
-					height: 48px;
-					margin: 0;
-					position: absolute;
-				}
-			}
+                @media (max-width: 490px) {
+                    height: 48px;
+                    margin: 0;
+                    position: absolute;
+                }
+            }
 
-			span.help.error {
-				color: red;
-			}
-		}
+            span.help.error {
+                color: red;
+            }
+        }
 
-		.emailInfo {
-			padding: 16px;
-			background-color: $color-white;
-			border: 1px solid $color-gray4;
-			border-radius: 0;
+        .emailInfo {
+            padding: 16px;
+            background-color: $clr-common-white;
+            border: 1px solid $clr-gray-300;
+            border-radius: 0;
 
-			h3 {
-				color: #303030;
-				margin: 0 0 8px 0;
-			}
+            h3 {
+                color: #303030;
+                margin: 0 0 8px 0;
+            }
 
-			ul {
-				margin: 0;
+            ul {
+                margin: 0;
 
-				li {
-					span {
-						color: $color-black;
-					}
+                li {
+                    span {
+                        color: $clr-gray-600;
+                    }
 
-					i::before {
-						color: $color-black;
-						font-size: 1rem;
-						opacity: 1;
-					}
-				}
-			}
+                    i::before {
+                        color: $clr-gray-600;
+                        font-size: 1rem;
+                        opacity: 1;
+                    }
+                }
+            }
 
-			i::before {
-				color: $color-black;
-				font-size: 6rem;
-				opacity: 0.5;
-			}
-		}
-	}
+            i::before {
+                color: $clr-gray-600;
+                font-size: 6rem;
+                opacity: 0.5;
+            }
+        }
+    }
 
-	.shipping-data,
-	.payment-data,
-	.client-profile-data {
-		.accordion-group {
-			border-radius: 0;
-			border: 1px solid $color-gray4;
-			font-family: $font-family;
-			padding: 16px;
+    .shipping-data,
+    .payment-data,
+    .client-profile-data {
+        .accordion-group {
+            border-radius: 0;
+            border: 1px solid $clr-gray-300;
+            font-family: $font-family-100;
+            padding: 16px;
 
-			.accordion-heading {
-				span {
-					color: #303030;
-					margin-bottom: 8px;
-					padding: 0;
+            .accordion-heading {
+                span {
+                    color: #303030;
+                    margin-bottom: 8px;
+                    padding: 0;
 
-					i::before {
-						fill: #303030;
-					}
-				}
+                    i::before {
+                        fill: #303030;
+                    }
+                }
 
-				a {
-					align-items: center;
-					background-color: #303030;
-					border-radius: 8px;
-					border: none;
-					color: $color-white;
-					display: flex;
-					justify-content: center;
-					padding: 6px 5px 6px 8px;
-				}
-			}
+                a {
+                    align-items: center;
+                    background-color: #303030;
+                    border-radius: 8px;
+                    border: none;
+                    color: $clr-common-white;
+                    display: flex;
+                    justify-content: center;
+                    padding: 6px 5px 6px 8px;
+                }
+            }
 
-			.accordion-inner {
-				padding: 0;
+            .accordion-inner {
+                padding: 0;
 
-				/* General configurations */
+                /* General configurations */
 
-				.client-notice {
-					color: $color-black;
-				}
+                .client-notice {
+                    color: $clr-gray-600;
+                }
 
-				p {
-					label {
-						color: $color-black;
-						font-weight: 500;
-					}
+                p {
+                    label {
+                        color: $clr-gray-600;
+                        font-weight: 500;
+                    }
 
-					select,
-					input {
-						border-radius: 0;
-						border: 1px solid $color-gray4;
-						box-shadow: none;
-					}
+                    select,
+                    input {
+                        border-radius: 0;
+                        border: 1px solid $clr-gray-300;
+                        box-shadow: none;
+                    }
 
-					.help.error {
-						color: red;
-					}
-				}
+                    .help.error {
+                        color: red;
+                    }
+                }
 
-				.box-client-info-pj {
-					.link a#is-corporate-client,
-					.link a#not-corporate-client {
-						color: $color-black;
-						font-weight: 500;
-						text-decoration: underline;
-					}
-				}
+                .box-client-info-pj {
+                    .link a#is-corporate-client,
+                    .link a#not-corporate-client {
+                        color: $clr-gray-600;
+                        font-weight: 500;
+                        text-decoration: underline;
+                    }
+                }
 
-				.state-inscription-box span {
-					font-weight: 500;
-				}
+                .state-inscription-box span {
+                    font-weight: 500;
+                }
 
-				button.submit {
-					border: none;
-					border-radius: 5px;
-					background: $color-black;
-					margin-top: 8px;
-					outline: none;
-					transition: all 0.2s linear;
+                button.submit {
+                    border: none;
+                    border-radius: 5px;
+                    background: $clr-gray-600;
+                    margin-top: 8px;
+                    outline: none;
+                    transition: all 0.2s linear;
 
-					&:hover {
-						background: lighten($color-black, 5);
-					}
+                    &:hover {
+                        background: lighten($clr-gray-600, 5);
+                    }
 
-					&:active {
-						background: darken($color-black, 5);
-					}
-				}
+                    &:active {
+                        background: darken($clr-gray-600, 5);
+                    }
+                }
 
-				/* Shipping configurations */
+                /* Shipping configurations */
 
-				.ship-postalCode small a {
-					color: #303030;
-					font-weight: 500;
-					text-decoration: underline;
-				}
+                .ship-postalCode small a {
+                    color: #303030;
+                    font-weight: 500;
+                    text-decoration: underline;
+                }
 
-				.vtex-omnishipping-1-x-deliveryGroup {
-					p {
-						color: #303030;
-						font-size: 14px;
-						font-weight: 500;
-					}
+                .vtex-omnishipping-1-x-deliveryGroup {
+                    p {
+                        color: #303030;
+                        font-size: 14px;
+                        font-weight: 500;
+                    }
 
-					.shp-lean {
-						border: 1px solid $color-gray4;
-						border-radius: 0;
+                    .shp-lean {
+                        border: 1px solid $clr-gray-300;
+                        border-radius: 0;
 
-						label {
-							background-color: $color-white;
-							box-shadow: none;
-							color: #303030;
-							padding: 8px 12px;
+                        label {
+                            background-color: $clr-common-white;
+                            box-shadow: none;
+                            color: #303030;
+                            padding: 8px 12px;
 
-							svg path {
-								fill: #d8c8ac;
-							}
-						}
-					}
-				}
+                            svg path {
+                                fill: #d8c8ac;
+                            }
+                        }
+                    }
+                }
 
-				.delivery-address-title {
-					color: #303030;
-					font-size: 14px;
-					font-weight: 500;
-				}
+                .delivery-address-title {
+                    color: #303030;
+                    font-size: 14px;
+                    font-weight: 500;
+                }
 
-				.shp-summary-group-info {
-					border-color: $color-gray4;
-				}
+                .shp-summary-group-info {
+                    border-color: $clr-gray-300;
+                }
 
-				.address-summary {
-					background: none;
-					border-color: $color-gray4;
-					border-radius: 0;
-					color: #303030;
-					padding: 12px;
+                .address-summary {
+                    background: none;
+                    border-color: $clr-gray-300;
+                    border-radius: 0;
+                    color: #303030;
+                    padding: 12px;
 
-					@include mq(md, max) {
-						background-position: 8px 9px;
-					}
+                    @include mq(md, max) {
+                        background-position: 8px 9px;
+                    }
 
-					a {
-						color: #303030;
-						font-weight: 500;
-						text-decoration: underline;
-					}
-				}
+                    a {
+                        color: #303030;
+                        font-weight: 500;
+                        text-decoration: underline;
+                    }
+                }
 
-				.shp-summary-group-price,
-				.shp-summary-package {
-					color: $color-gray4;
-				}
+                .shp-summary-group-price,
+                .shp-summary-package {
+                    color: $clr-gray-300;
+                }
 
-				.shp-summary-group-price {
-					padding-right: 16px;
-				}
+                .shp-summary-group-price {
+                    padding-right: 16px;
+                }
 
-				.shp-summary-package {
-					padding-left: 16px;
-				}
+                .shp-summary-package {
+                    padding-left: 16px;
+                }
 
-				.vtex-omnishipping-1-x-summaryChange {
-					border-color: #303030;
-					color: #303030;
-				}
+                .vtex-omnishipping-1-x-summaryChange {
+                    border-color: #303030;
+                    color: #303030;
+                }
 
-				.vtex-omnishipping-1-x-deliveryChannelsToggle {
-					background-color: #d8c8ac;
-					border: 1px solid #d8c8ac;
-				}
+                .vtex-omnishipping-1-x-deliveryChannelsToggle {
+                    background-color: #d8c8ac;
+                    border: 1px solid #d8c8ac;
+                }
 
-				.vtex-omnishipping-1-x-deliveryOptionActive {
-					text-shadow: 1.3px 1px lighten($color-black, 50);
-				}
-			}
-		}
-	}
+                .vtex-omnishipping-1-x-deliveryOptionActive {
+                    text-shadow: 1.3px 1px lighten($clr-gray-600, 50);
+                }
+            }
+        }
+    }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 195f487..90d323c 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -5,7 +5,7 @@
 }
 
 .cart-template {
-    font-family: $font-family;
+    font-family: $font-family-100;
     @include mq(md, max) {
         padding: 0 0;
     }
@@ -13,7 +13,7 @@
         display: none;
     }
     .cart {
-        border: 3px solid $color-gray3;
+        border: 3px solid $clr-gray-100;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
@@ -29,10 +29,10 @@
         position: relative !important;
     }
     .cart-fixed {
-        font-family: $font-family;
+        font-family: $font-family-100;
         width: 100%;
         h2 {
-            background: $color-white;
+            background: $clr-common-white;
             border: none;
             color: #303030;
             font-size: 14px;
@@ -48,7 +48,7 @@
         }
 
         .cart {
-            border: 1px solid $color-gray4;
+            border: 1px solid $clr-gray-300;
 
             ul li {
                 border-top: none;
@@ -70,7 +70,7 @@
 
         .summary-template-holder {
             border-top: none;
-            background: $color-white;
+            background: $clr-common-white;
         }
 
         #go-to-cart-button a {
@@ -85,24 +85,24 @@
         }
 
         #payment-data-submit {
-            background: $color-black;
+            background: $clr-gray-600;
             border: none;
             border-radius: 0;
-            color: $color-white;
+            color: $clr-common-white;
             outline: none;
             transition: all 0.2s linear;
             &:hover {
-                background: lighten($color-black, 5);
+                background: lighten($clr-gray-600, 5);
             }
 
             &:active {
-                background: darken($color-black, 5);
+                background: darken($clr-gray-600, 5);
             }
         }
     }
 
     .lookatme {
-        background-color: $color-white;
+        background-color: $clr-common-white;
     }
 
     .cart-items {
@@ -111,7 +111,7 @@
         }
 
         th {
-            color: $color-black;
+            color: $clr-gray-600;
             padding: 0 0 16px;
             font-style: normal;
             font-weight: bold;
@@ -155,7 +155,7 @@
             }
 
             a {
-                color: $color-blue;
+                color: $clr-blue-500;
                 font-style: normal;
                 font-weight: normal;
                 font-size: 12px;
@@ -163,7 +163,7 @@
                 transition: ease-in 0.22s all;
 
                 &:hover {
-                    color: darken($color-blue, 10);
+                    color: darken($clr-blue-500, 10);
                     text-decoration: none;
                 }
 
@@ -179,7 +179,7 @@
         }
 
         td.shipping-date {
-            color: $color-gray2;
+            color: $clr-gray-400;
             font-size: 12px;
             line-height: 14px;
 
@@ -200,7 +200,7 @@
             }
 
             span.list-price {
-                color: $color-gray2;
+                color: $clr-gray-400;
                 font-size: 12px;
                 line-height: 14px;
                 text-decoration-line: line-through;
@@ -217,7 +217,7 @@
 
         td.quantity {
             align-items: center;
-            border: 1px solid $color-gray3;
+            border: 1px solid $clr-gray-100;
             border-radius: 0;
             box-sizing: border-box;
             display: flex;
@@ -233,8 +233,8 @@
             }
 
             input {
-                background-color: $color-white;
-                border: 1px solid $color-gray3;
+                background-color: $clr-common-white;
+                border: 1px solid $clr-gray-100;
                 border-radius: 0;
                 border-width: 0 1px;
                 display: block;
@@ -242,7 +242,7 @@
                 margin: 0 !important;
                 padding: 8px 0;
                 width: 38px;
-                color: $color-gray2;
+                color: $clr-gray-400;
                 box-shadow: none;
 
                 @include mq(lg, max) {
@@ -253,7 +253,7 @@
             .icon-plus-sign,
             .icon-minus-sign {
                 &::before {
-                    color: $color-black;
+                    color: $clr-gray-600;
                     display: block;
                     font-weight: 500;
                     padding: 1px 12px;
@@ -300,7 +300,7 @@
                 font-weight: normal;
                 font-size: 14px;
                 line-height: 16px;
-                color: $color-black;
+                color: $clr-gray-600;
             }
         }
 
@@ -315,7 +315,7 @@
                 top: 0;
             }
             .icon::before {
-                color: $color-gray4;
+                color: $clr-gray-300;
                 font-size: 15px;
 
                 @include mq(md, max) {
@@ -326,7 +326,7 @@
 
         .item-unavailable-message {
             background-color: #d8c8ac;
-            color: $color-white;
+            color: $clr-common-white;
 
             .icon-warning-sign {
                 color: #bb4f4f;
@@ -356,7 +356,7 @@
                     font-weight: normal;
                     font-size: 24px;
                     line-height: 28px;
-                    color: $color-gray2;
+                    color: $clr-gray-400;
 
                     @include mq(md, max) {
                         margin-top: 0;
@@ -364,17 +364,17 @@
                 }
 
                 .srp-description {
-                    color: $color-gray2;
+                    color: $clr-gray-400;
                     font-size: 12px;
                     line-height: 18px;
                     margin: 0 0 12px;
                 }
 
                 button.shp-open-options {
-                    background-color: $color-gray5;
+                    background-color: $clr-gray-200;
                     border: none;
                     border-radius: 5px;
-                    color: $color-gray2;
+                    color: $clr-gray-400;
                     font-size: 16px;
                     letter-spacing: 0.05em;
                     line-height: 19px;
@@ -384,11 +384,11 @@
                     transition: all 0.2s linear;
 
                     &:hover {
-                        background-color: lighten($color-gray5, 5);
+                        background-color: lighten($clr-gray-200, 5);
                     }
 
                     &:active {
-                        background-color: darken($color-gray5, 5);
+                        background-color: darken($clr-gray-200, 5);
                     }
                 }
             }
@@ -405,10 +405,10 @@
                 }
 
                 .srp-pickup-my-location__button {
-                    background-color: $color-black;
+                    background-color: $clr-gray-600;
                     border: none;
                     border-radius: 5px;
-                    color: $color-white;
+                    color: $clr-common-white;
                     outline: none;
                     width: 100%;
 
@@ -419,11 +419,11 @@
                     letter-spacing: 0.05em;
 
                     &:hover {
-                        background-color: lighten($color-black, 5);
+                        background-color: lighten($clr-gray-600, 5);
                     }
 
                     &:active {
-                        background-color: darken($color-black, 5);
+                        background-color: darken($clr-gray-600, 5);
                     }
                 }
             }
@@ -432,10 +432,10 @@
                 margin: 0 0 34px;
 
                 &__wrapper {
-                    background-color: $color-white;
+                    background-color: $clr-common-white;
                     border-radius: 100px;
                     width: 100%;
-                    font-family: $font-family;
+                    font-family: $font-family-100;
                     font-style: normal;
                     font-weight: normal;
                     font-size: 14px;
@@ -444,12 +444,12 @@
                 }
 
                 &__current {
-                    border: 1px solid $color-blue;
+                    border: 1px solid $clr-blue-500;
                     border-radius: 100px;
                 }
 
                 .blue {
-                    color: $color-blue;
+                    color: $clr-blue-500;
                 }
 
                 label {
@@ -464,20 +464,20 @@
             .srp-postal-code {
                 .ship-postalCode {
                     label {
-                        font-family: $font-family;
+                        font-family: $font-family-100;
                         font-style: normal;
                         font-weight: normal;
                         font-size: 12px;
                         line-height: 14px;
-                        color: $color-black;
+                        color: $clr-gray-600;
                         margin-bottom: 12px;
                     }
 
                     input {
-                        border: 1px solid $color-gray3;
+                        border: 1px solid $clr-gray-100;
                         border-radius: 5px;
                         box-shadow: none;
-                        color: $color-gray3;
+                        color: $clr-gray-100;
                         font-size: 12px;
                         height: 36px;
                         padding: 12px 8px;
@@ -485,10 +485,10 @@
                     }
 
                     & ~ button {
-                        background-color: $color-black;
+                        background-color: $clr-gray-600;
                         border: none;
                         border-radius: 5px;
-                        color: $color-white;
+                        color: $clr-common-white;
                         font-size: 12px;
                         height: 36px;
                         letter-spacing: 1px;
@@ -501,21 +501,21 @@
                         text-transform: uppercase;
 
                         &:hover {
-                            background-color: lighten($color-black, 5);
+                            background-color: lighten($clr-gray-600, 5);
                         }
 
                         &:active {
-                            background-color: darken($color-black, 5);
+                            background-color: darken($clr-gray-600, 5);
                         }
                     }
 
                     small a {
-                        font-family: $font-family;
+                        font-family: $font-family-100;
                         font-style: normal;
                         font-weight: normal;
                         font-size: 10px;
                         line-height: 12px;
-                        color: $color-blue;
+                        color: $clr-blue-500;
                         margin-top: 7px;
                     }
 
@@ -549,7 +549,7 @@
                 }
 
                 .srp-shipping-current-single {
-                    border: 1px solid $color-gray4;
+                    border: 1px solid $clr-gray-300;
                     border-radius: 0;
                     color: #303030;
                     margin: 16px 0 0;
@@ -561,11 +561,11 @@
                 }
 
                 .srp-delivery-select {
-                    border: 1px solid $color-gray4;
+                    border: 1px solid $clr-gray-300;
                 }
 
                 .srp-delivery-select-container {
-                    border: 1px solid $color-gray4;
+                    border: 1px solid $clr-gray-300;
                     border-radius: 0;
 
                     .srp-shipping-current-many {
@@ -583,7 +583,7 @@
                         }
 
                         &__arrow svg {
-                            fill: $color-gray4;
+                            fill: $clr-gray-300;
                         }
                     }
                 }
@@ -603,12 +603,12 @@
                     }
                 }
                 span {
-                    font-family: $font-family;
+                    font-family: $font-family-100;
                     font-style: normal;
                     font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: $color-blue;
+                    color: $clr-blue-500;
                     text-decoration: none;
                 }
             }
@@ -631,12 +631,12 @@
 
                 .coupon-label label {
                     margin-bottom: 12px;
-                    font-family: $font-family;
+                    font-family: $font-family-100;
                     font-style: normal;
                     font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: $color-gray2;
+                    color: $clr-gray-400;
                     cursor: none;
                 }
 
@@ -657,10 +657,10 @@
                     }
 
                     input {
-                        border: 2px solid $color-gray3;
+                        border: 2px solid $clr-gray-100;
                         border-radius: 5px;
                         box-shadow: none;
-                        color: $color-gray4;
+                        color: $clr-gray-300;
                         font-size: 12px;
                         height: 34px;
                         padding: 0 12px;
@@ -673,10 +673,10 @@
                     }
 
                     button {
-                        background: $color-black;
+                        background: $clr-gray-600;
                         border: none;
                         border-radius: 5px;
-                        color: $color-white;
+                        color: $clr-common-white;
                         font-size: 12px;
                         height: 36px;
                         letter-spacing: 1px;
@@ -691,11 +691,11 @@
                         }
 
                         &:hover {
-                            background-color: lighten($color-black, 5);
+                            background-color: lighten($clr-gray-600, 5);
                         }
 
                         &:active {
-                            background-color: darken($color-black, 5);
+                            background-color: darken($clr-gray-600, 5);
                         }
                     }
                 }
@@ -716,7 +716,7 @@
                             font-weight: normal;
                             font-size: 14px;
                             line-height: 16px;
-                            color: $color-black;
+                            color: $clr-gray-600;
                             padding: 12px 0;
                         }
 
@@ -737,7 +737,7 @@
                         font-weight: normal;
                         font-size: 18px;
                         line-height: 21px;
-                        color: $color-black;
+                        color: $clr-gray-600;
                     }
                 }
             }
@@ -771,18 +771,18 @@
             }
 
             a {
-                font-family: $font-family;
+                font-family: $font-family-100;
                 font-style: normal;
                 font-weight: normal;
                 font-size: 12px;
                 line-height: 14px;
-                color: $color-blue;
+                color: $clr-blue-500;
             }
         }
 
         .btn-place-order-wrapper {
             a {
-                background: $color-green;
+                background: $clr-green-500;
                 border: none;
                 border-radius: 5px;
                 display: block;
@@ -791,16 +791,16 @@
                 padding: 12px 19px;
 
                 &:hover {
-                    background-color: darken($color-green, 5);
+                    background-color: darken($clr-green-500, 5);
                 }
 
                 &:after {
                     content: "finalizar compra";
-                    font-family: $font-family;
+                    font-family: $font-family-100;
                     font-weight: 500;
                     font-size: 13px;
                     letter-spacing: 0.05em;
-                    color: $color-white;
+                    color: $clr-common-white;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 08f74e9..9b0258b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -1,38 +1,38 @@
 .empty-cart {
-	font-family: $font-family;
-	&-content {
-		color: $color-black;
-		text-align: center;
+    font-family: $font-family-100;
+    &-content {
+        color: $clr-gray-600;
+        text-align: center;
 
-		@include mq(md, max) {
-			padding: 0 16px;
-		}
-	}
+        @include mq(md, max) {
+            padding: 0 16px;
+        }
+    }
 
-	&-title {
-		font-size: 20px;
-	}
+    &-title {
+        font-size: 20px;
+    }
 
-	&-links {
-		.link-choose-products {
-			background: $color-black;
-			border: none;
-			border-radius: 5px;
-			transition: ease-in 0.22s all;
-			outline: none;
-			font-family: $font-family;
-			font-style: normal;
-			font-weight: 500;
-			font-size: 14px;
-			line-height: 16px;
-			text-align: center;
-			letter-spacing: 0.05em;
-			color: $color-white;
-			text-transform: uppercase;
+    &-links {
+        .link-choose-products {
+            background: $clr-gray-600;
+            border: none;
+            border-radius: 5px;
+            transition: ease-in 0.22s all;
+            outline: none;
+            font-family: $font-family-100;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 16px;
+            text-align: center;
+            letter-spacing: 0.05em;
+            color: $clr-common-white;
+            text-transform: uppercase;
 
-			&:hover {
-				background: lighten($color-black, 5);
-			}
-		}
-	}
+            &:hover {
+                background: lighten($clr-gray-600, 5);
+            }
+        }
+    }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 5fb011f..1e35643 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -29,7 +29,7 @@ body {
     }
 
     &.body-cart {
-        font-family: $font-family;
+        font-family: $font-family-100;
     }
 
     &.body-cart,
@@ -54,22 +54,22 @@ body {
 }
 
 .btn-success {
-    background: $color-black;
+    background: $clr-gray-600;
     text-shadow: none;
 
     &:hover {
-        background: lighten($color-black, 15%);
+        background: lighten($clr-gray-600, 15%);
     }
 }
 
 .emailInfo h3 {
-    color: $color-black !important;
+    color: $clr-gray-600 !important;
 }
 
 #cart-title,
 #orderform-title {
-    color: $color-gray2;
-    font-family: $font-family;
+    color: $clr-gray-400;
+    font-family: $font-family-100;
     font-weight: 500;
     font-size: 36px;
     line-height: 42px;
@@ -96,7 +96,7 @@ body {
         &::before,
         &::after {
             content: "";
-            background: $color-gray2;
+            background: $clr-gray-400;
             display: block;
             float: right;
             height: 2px;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..224342d 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,7 +1,7 @@
 /* _footer.scss */
 .footerCheckout {
     border-top: none;
-    color: $color-gray2;
+    color: $clr-gray-400;
 
     &__wrapper {
         align-items: center;
@@ -10,8 +10,8 @@
     }
 
     &__address {
-        color: $color-gray2;
-        font-family: $font-family;
+        color: $clr-gray-400;
+        font-family: $font-family-100;
         font-style: normal;
         font-weight: normal;
         font-size: 10px;
@@ -37,7 +37,7 @@
         }
 
         &__divider {
-            background-color: $color-gray4;
+            background-color: $clr-gray-300;
             display: inline-block;
             height: 24px;
             margin: 0 8px;
@@ -57,9 +57,9 @@
 
         a {
             align-items: center;
-            color: $color-gray2;
+            color: $clr-gray-400;
             display: flex;
-            font-family: $font-family;
+            font-family: $font-family-100;
             font-style: normal;
             font-weight: normal;
             font-size: 10px;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 8b44777..b103a42 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -21,12 +21,12 @@
             align-items: center;
             display: flex;
             text-transform: uppercase;
-            font-family: $font-family;
+            font-family: $font-family-100;
             font-style: normal;
             font-weight: normal;
             font-size: 12px;
             line-height: 14px;
-            color: $color-gray;
+            color: $clr-gray-500;
         }
 
         i {
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index f000abe..fc78867 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -1,38 +1,41 @@
 /* fonts */
 @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
-$font-family: "Open Sans", sans-serif;
-$font-family-secundary:"Tenor Sans", sans-serif;
+$font-family-100: "Open Sans", sans-serif;
+$font-family-200: "Tenor Sans", sans-serif;
 
 /* Colors */
-$color-black: #292929;
 
-$color-white: #fff;
+$clr-common-white: #fff;
 
-$color-gray: #6c6c6c;
-$color-gray2: #7d7d7d;
-$color-gray3: #f0f0f0;
-$color-gray4: #8d8d8d;
-$color-gray5: #e5e5e5;
+$clr-gray-600: #292929;
+$clr-gray-500: #6c6c6c;
+$clr-gray-400: #7d7d7d;
+$clr-gray-300: #8d8d8d;
+$clr-gray-200: #e5e5e5;
+$clr-gray-100: #f0f0f0;
 
-$color-blue: #4267b2;
+$clr-gray-500: #6c6c6c;
 
-$color-green: #4caf50;
+$clr-blue-500: #4267b2;
+
+$clr-green-500: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
-	cstm: 400,
-	sm: 576px,
-	md: 768px,
-	lg: 992px,
-	xl: 1200px
+    xxs: 0,
+    xs: 280,
+    sm: 375px,
+    md: 600px,
+    lg: 1024px,
+    xl: 1280px,
+    xxl: 2500px,
 ) !default;
 
 $z-index: (
-	level1: 5,
-	level2: 10,
-	level3: 15,
-	level4: 20,
-	level5: 25
+    level-100: 5,
+    level-200: 10,
+    level-300: 15,
+    level-400: 20,
+    level-500: 25,
 ) !default;

From 17dd48ebb2d8a3cf9143e9b88e5785b051579f89 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 13 Dec 2022 20:24:12 -0300
Subject: [PATCH 02/27] feat(header): created initial styles for
 large,medium,small devices

---
 checkout/gulpfile.js                          |  3 +-
 .../src/arquivos/sass/checkout/_checkout.scss | 15 ---
 .../src/arquivos/sass/partials/_header.scss   | 97 ++++++++++++++++---
 .../template-checkout/checkout-header.html    | 60 +++++++++---
 package-lock.json                             |  2 +
 5 files changed, 131 insertions(+), 46 deletions(-)

diff --git a/checkout/gulpfile.js b/checkout/gulpfile.js
index ccb4ca1..25df93e 100644
--- a/checkout/gulpfile.js
+++ b/checkout/gulpfile.js
@@ -62,7 +62,8 @@ function styles() {
         )
         .pipe(
             autoprefixer({
-                cascade: false,
+                cascade: true,
+                add: true,
             })
         )
         .pipe(
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 1e35643..4539b76 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -3,21 +3,6 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
-html {
-    height: 100%;
-    min-height: 100%;
-}
-
-footer .footerCheckout__wrapper {
-    width: 94.9734%;
-    margin: auto auto 0 auto;
-}
-footer .footerCheckout__prateleira,
-header {
-    width: 79.53125%;
-    margin: 0 auto;
-}
-
 body {
     display: flex;
     flex-direction: column;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index b103a42..5bfb7b0 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,36 +1,103 @@
 /* _header.scss */
+@function fluid($width, $design-width) {
+    $width: calc($width / $design-width * 100);
+
+    $width: quote($width + "%");
+
+    @return unquote($width);
+}
+
 .headerCheckout {
+    padding: 16px;
+
     .container {
-        width: auto !important;
+        width: 100%;
+        height: auto;
     }
-    &__wrapper {
-        align-items: center;
+
+    &__wrapper,
+    &__safeBuy {
         display: flex;
+        align-items: center;
+    }
+
+    &__wrapper {
+        width: 100%;
         justify-content: space-between;
     }
 
-    &__logo {
+    &__safeBuy {
+        width: fluid(119px, 343px);
+        max-width: 119px;
+        gap: 8px;
+
         img {
-            height: 52px;
-            width: auto;
+            width: 12px;
+            height: 13px;
         }
     }
 
-    &__safeBuy {
+    &__logo {
+        width: fluid(155.58px, 343px);
+        max-width: 155.58px;
+        height: auto;
+
         span {
-            align-items: center;
             display: flex;
+            align-items: center;
+            font: normal normal 12px / 14px $font-family-100;
             text-transform: uppercase;
-            font-family: $font-family-100;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 14px;
             color: $clr-gray-500;
         }
 
-        i {
-            margin-right: 8px;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .progress-bar {
+        display: none;
+    }
+}
+
+.headerCheckout {
+    @media screen and (min-width: 1025px) {
+        padding: 29px 0;
+
+        &__wrapper {
+            width: fluid(992px, 1024px);
+            margin: 0 auto;
+        }
+
+        .progress-bar {
+            display: flex;
+        }
+    }
+
+    @media screen and (min-width: 1280px) {
+        &__wrapper {
+            width: fluid(1018px, 1280px);
+        }
+    }
+
+    @media screen and (min-width: 2500px) {
+        &__wrapper {
+            width: fluid(1988.28px, 2500px);
+        }
+
+        &__logo {
+            width: fluid(382.07px, 1988.28px);
+            max-width: none;
+            height: auto;
+
+            span {
+                display: flex;
+                align-items: center;
+                font: normal normal 24px / auto $font-family-100;
+                text-transform: uppercase;
+                color: $clr-gray-500;
+            }
         }
     }
 }
diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html
index 258a0d6..581e55a 100644
--- a/checkout/src/template-checkout/checkout-header.html
+++ b/checkout/src/template-checkout/checkout-header.html
@@ -1,20 +1,50 @@
 <!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
     MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
 
-    <header class="headerCheckout">
-        <div class="container">
-            <div class="headerCheckout__wrapper">
-                <div class="headerCheckout__logo">
-                    <a href="/">
-                        <img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
-                    </a>
-                </div>
-                <div id="progressBar" class="progress-bar">	Aqui entra a barra de progresso
-                </div>
-                <div class="headerCheckout__safeBuy">
-                      <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
-                    <span>Compra segura</span>
-                </div>
+<header class="headerCheckout w-100 h-auto">
+    <div class="container w-100 h-auto">
+        <div class="headerCheckout__wrapper d-flex align-items-center jus-between">
+            <div class="headerCheckout__logo w-PERCENT">
+                <a class="w-100 h-100" href="/">
+                    <img
+                        class="w-100 h-100"
+                        src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
+                        alt="M3 Academy"
+                    />
+                </a>
+            </div>
+
+            <div id="progressBar  w-DEFINE-FIXED" class="progress-bar">
+                <ul class="progress-list w-100 pos-relative d-flex jus-between">
+                    <div class="bar pos-absolute">
+                        <div class="bar-fill"></div>
+                    </div>
+
+                    <li class="progress-item">
+                        <p class="progress-title"></p>
+                        <span class="progress-bullet pos-relative"></span>
+                    </li>
+
+                    <li class="progress-item">
+                        <p class="progress-title"></p>
+                        <span class="progress-bullet pos-relative"></span>
+                    </li>
+
+                    <li class="progress-item">
+                        <p class="progress-title"></p>
+                        <span class="progress-bullet pos-relative"></span>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="headerCheckout__safeBuy w-PERCENT">
+                <img
+                    class="w-100 h-100"
+                    src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
+                    alt="Cadeado"
+                />
+                <span class="fz-12">Compra segura</span>
             </div>
         </div>
-    </header>
+    </div>
+</header>
diff --git a/package-lock.json b/package-lock.json
index 3be68c7..4024f93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,6 +45,7 @@
                 "jquery": "^3.6.0",
                 "m3-utils": "^0.1.0",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4"
             },
             "devDependencies": {
@@ -19345,6 +19346,7 @@
                 "m3-utils": "^0.1.0",
                 "prettier": "^2.3.2",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4",
                 "webpack": "^5.51.1",
                 "webpack-merge": "^5.8.0"

From 92274d7cb39d7c6581d586b97c05819d8d0dcb69 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 13 Dec 2022 20:40:32 -0300
Subject: [PATCH 03/27] chore(header): created details styles in
 large,medium,small devices

---
 .../src/arquivos/sass/partials/_header.scss   | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 5bfb7b0..a0d5443 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -9,6 +9,7 @@
 
 .headerCheckout {
     padding: 16px;
+    border-bottom: 1px solid $clr-common-black;
 
     .container {
         width: 100%;
@@ -31,6 +32,12 @@
         max-width: 119px;
         gap: 8px;
 
+        span {
+            font: normal normal 12px / 14px $font-family-100;
+            text-transform: uppercase;
+            color: $clr-gray-500;
+        }
+
         img {
             width: 12px;
             height: 13px;
@@ -42,14 +49,6 @@
         max-width: 155.58px;
         height: auto;
 
-        span {
-            display: flex;
-            align-items: center;
-            font: normal normal 12px / 14px $font-family-100;
-            text-transform: uppercase;
-            color: $clr-gray-500;
-        }
-
         img {
             width: 100%;
             height: 100%;
@@ -82,21 +81,29 @@
     }
 
     @media screen and (min-width: 2500px) {
+        $width-container: 1988.28px;
+
         &__wrapper {
-            width: fluid(1988.28px, 2500px);
+            width: fluid($width-container, 2500px);
         }
 
         &__logo {
-            width: fluid(382.07px, 1988.28px);
+            width: fluid(382.07px, $width-container);
             max-width: none;
             height: auto;
+        }
+
+        &__safeBuy {
+            width: fluid(235.28px, $width-container);
+            max-width: none;
 
             span {
-                display: flex;
-                align-items: center;
-                font: normal normal 24px / auto $font-family-100;
-                text-transform: uppercase;
-                color: $clr-gray-500;
+                font: normal normal 24px / 32.68px $font-family-100;
+            }
+
+            img {
+                width: 29.47px;
+                height: 41.46px;
             }
         }
     }

From 2e95b8c363bd9334b1e7efa05e6c16e19819a7c3 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 13 Dec 2022 20:48:14 -0300
Subject: [PATCH 04/27] fix(header): not found common black variable

---
 checkout/src/arquivos/sass/utils/_variaveis.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index fc78867..9577752 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -5,7 +5,7 @@ $font-family-100: "Open Sans", sans-serif;
 $font-family-200: "Tenor Sans", sans-serif;
 
 /* Colors */
-
+$clr-common-black: #000;
 $clr-common-white: #fff;
 
 $clr-gray-600: #292929;

From 6963eca4eedb6997672f81edc624d47d6e95be87 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Wed, 14 Dec 2022 11:05:50 -0300
Subject: [PATCH 05/27] feat(progressbar): created progress bar for checkout
 routes and added initial styles for large devices 1280px > 2500px

---
 checkout/src/arquivos/js/components/Header.js | 79 ++++++++++++++++--
 .../src/arquivos/sass/partials/_header.scss   | 82 +++++++++++++++++++
 2 files changed, 156 insertions(+), 5 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 6744524..43c56ae 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -1,6 +1,70 @@
 // import waitForEl from "../helpers/waitForEl";
 import { waitElement } from "m3-utils";
 
+/**
+ * @param {Object} options
+ * @param {HTMLAllElement} target
+ * @return {Object}
+ */
+
+function OnProgress(target) {
+    if (!target) {
+        return;
+    }
+
+    const innerElement = () => {
+        target.innerHTML = `<ul class="progress-list">
+    <li class="progress-item progress-item--left">
+
+        <div class="progress-container">
+            <div class="progress-content">
+                <p>Meu Carrinho</p>
+                <span class="progress-bullet"></span>
+                <span class="progress-line"></span>
+            </div>
+        </div>
+    </li>
+    <li class="progress-item progress-item--center">
+        <div class="progress-container">
+            <div class="progress-content">
+                <p>Dados Pessoais</p>
+                <span class="progress-bullet"></span>
+                <span class="progress-line"></span>
+            </div>
+        </div>
+    </li>
+    <li class="progress-item progress-item--right">
+        <div class="progress-container">
+            <div class="progress-content">
+                <p>Pagamento</p>
+                <span class="progress-bullet"></span>
+                <span class="progress-line"></span>
+            </div>
+        </div>
+    </li>
+</ul>`;
+    };
+
+    const verifyCurrentRoute = () => {
+        console.log(options);
+    };
+
+    const init = () => {
+        innerElement();
+        verifyCurrentRoute(options);
+    };
+
+    const remove = () => {
+        target.innerHTML = "";
+    };
+
+    return {
+        ref: target,
+        init,
+        remove,
+    };
+}
+
 export default class Header {
     constructor() {
         this.init();
@@ -8,14 +72,19 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.innerToProgressBar();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
-            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
-            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+        this.progressBar = await waitElement("#progressBar", {
+            timeout: 5000,
+            interval: 1000,
         });
     }
+
+    innerToProgressBar() {
+        let progress = OnProgress(this.progressBar);
+
+        progress.init();
+    }
 }
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index a0d5443..0a906b2 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -108,3 +108,85 @@
         }
     }
 }
+
+.headerCheckout {
+    .progress-bar {
+        width: 439px;
+
+        .progress-list {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 0;
+        }
+
+        .progress-item {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 12px;
+        }
+
+        .progress-content,
+        .progress-container {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .progress-container {
+            position: relative;
+            justify-content: center;
+            width: 100%;
+        }
+
+        .progress-item {
+            &--left,
+            &--right {
+                width: 39.9183%;
+
+                .progress-line {
+                    position: absolute;
+                    bottom: 6px;
+                    width: 100%;
+                    height: 1px;
+                    border-bottom: 1px solid #000;
+                }
+            }
+
+            &--left {
+                .progress-container {
+                    align-items: flex-start;
+                }
+
+                .progress-line {
+                    left: 75%;
+                    transform: translateX(-50%);
+                }
+            }
+
+            &--right {
+                .progress-container {
+                    align-items: flex-end;
+                }
+
+                .progress-line {
+                    left: 29%;
+                    transform: translateX(-50%);
+                }
+            }
+        }
+
+        .progress-bullet {
+            width: 12px;
+            height: 12px;
+            background-color: $clr-common-white;
+            position: relative;
+            border: 1px solid $clr-common-black;
+            z-index: 10;
+            border-radius: 100%;
+        }
+    }
+}

From 0d60233fdd92b5b9d33aa9db878e99a7cc1011d1 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Wed, 14 Dec 2022 13:32:12 -0300
Subject: [PATCH 06/27] feat(progressbar): created the show current url route

---
 checkout/src/arquivos/js/components/Header.js | 50 ++++++++++++++++++-
 .../src/arquivos/sass/partials/_header.scss   |  4 ++
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 43c56ae..fe7e30f 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -46,12 +46,58 @@ function OnProgress(target) {
     };
 
     const verifyCurrentRoute = () => {
-        console.log(options);
+        let bullets = target.querySelectorAll(".progress-bullet");
+
+        bullets.forEach((bullet) => {
+            if (window.location.href.endsWith("#/cart")) {
+                bullets[0].classList.add("active");
+            }
+
+            if (
+                window.location.href.endsWith("#/email") ||
+                window.location.href.endsWith("#/shipping") ||
+                window.location.href.endsWith("#/profile")
+            ) {
+                bullets[1].classList.add("active");
+            }
+
+            if (window.location.href.endsWith("#/payment")) {
+                bullets[2].classList.add("active");
+            }
+
+            window.addEventListener("hashchange", () => {
+                if (window.location.href.endsWith("#/cart")) {
+                    bullets[0].classList.add("active");
+
+                    if (bullet != bullets[0]) {
+                        bullet.classList.remove("active");
+                    }
+                }
+
+                if (
+                    window.location.href.endsWith("#/email") ||
+                    window.location.href.endsWith("#/shipping") ||
+                    window.location.href.endsWith("#/profile")
+                ) {
+                    bullets[1].classList.add("active");
+                    if (bullet != bullets[1]) {
+                        bullet.classList.remove("active");
+                    }
+                }
+
+                if (window.location.href.endsWith("#/payment")) {
+                    bullets[2].classList.add("active");
+                    if (bullet != bullets[2]) {
+                        bullet.classList.remove("active");
+                    }
+                }
+            });
+        });
     };
 
     const init = () => {
         innerElement();
-        verifyCurrentRoute(options);
+        verifyCurrentRoute();
     };
 
     const remove = () => {
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 0a906b2..5ed41d9 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -187,6 +187,10 @@
             border: 1px solid $clr-common-black;
             z-index: 10;
             border-radius: 100%;
+
+            &.active {
+                background-color: $clr-common-black;
+            }
         }
     }
 }

From 71b1d8e4f359b7ba0ec5ef88b3212e94b2cf31f0 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Wed, 14 Dec 2022 14:39:04 -0300
Subject: [PATCH 07/27] feat(footer): created footer and added styles for
 medium,small devices

---
 checkout/src/arquivos/js/components/Footer.js |  63 +++++++
 .../src/arquivos/sass/checkout/_checkout.scss |   2 +
 .../src/arquivos/sass/partials/_footer.scss   | 172 ++++++++++++++----
 .../src/arquivos/sass/partials/_header.scss   |   5 +
 .../template-checkout/checkout-header.html    |  21 +--
 5 files changed, 212 insertions(+), 51 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..71e1d38 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -1,5 +1,11 @@
 import { waitElement } from "m3-utils";
 
+const insertImage = (name, options) => {
+    const domain = "https://agenciamagma.vteximg.com.br";
+
+    return `<img ${options} src="${domain}/arquivos/${name}M3Academy.png"/>`;
+};
+
 export default class Footer {
     constructor() {
         this.init();
@@ -7,6 +13,8 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+        this.innerToPayments();
+        this.innerDevelopedBy();
         // this.onUpdate();
     }
 
@@ -14,6 +22,61 @@ export default class Footer {
         //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.paymentContainer = await waitElement(".footerCheckout__stamps");
+        this.developedByContainer = await waitElement(".footerCheckout__developedBy");
+    }
+
+    innerToPayments() {
+        if (this.paymentContainer) {
+            const payments = this.paymentContainer.children[0].children[0];
+            const vericatedVtex = this.paymentContainer.children[2].children[0];
+
+            if (payments && vericatedVtex) {
+                let structure = "";
+                const paymentsTypes = [
+                    "masterCard",
+                    "visa",
+                    "amex",
+                    "elo",
+                    "hiperCard",
+                    "payPal",
+                    "boleto",
+                ];
+
+                paymentsTypes.forEach(
+                    (payment) =>
+                        (structure += `<li class="footerCheckout__creditItem" >${insertImage(
+                            payment,
+                            'class="footerCheckout__creditImage"'
+                        )}</li>`)
+                );
+
+                payments.innerHTML = `<ul class="footerCheckout__creditList">${structure}</ul>`;
+
+                vericatedVtex.innerHTML = insertImage(
+                    "vtexPCI",
+                    'class="footerCheckout__verificatedVtex"'
+                );
+            }
+        }
+    }
+
+    innerDevelopedBy() {
+        if (this.developedByContainer) {
+            const poweredBy = this.developedByContainer.children[0].children[0];
+            const developedBy = this.developedByContainer.children[1].children[0];
+
+            if (poweredBy && developedBy) {
+                poweredBy.innerHTML = `<span>Powered By</span>${insertImage(
+                    "logoVTEX",
+                    'class="footerCheckout__logo footerCheckout__logo--vtex"'
+                )}`;
+                developedBy.innerHTML = `<span>Developed By</span>${insertImage(
+                    "logoM3",
+                    'class="footerCheckout__logo footerCheckout__logo--m3"'
+                )}`;
+            }
+        }
     }
 
     onUpdate() {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 4539b76..e54b94b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -3,6 +3,8 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
+
+
 body {
     display: flex;
     flex-direction: column;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 224342d..70608e8 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,41 +1,149 @@
-/* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    padding: 16px 25px 18.88px 8px;
+
+    @include mq("md", min) {
+        padding: 16px 0;
+    }
+}
+
+.footerCheckout {
+    border-top: 1px solid $clr-common-black;
     color: $clr-gray-400;
 
-    &__wrapper {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
+    &__stamps {
+        order: 0;
+        margin: 0 0 16px;
     }
 
     &__address {
-        color: $clr-gray-400;
-        font-family: $font-family-100;
+        order: 1;
+        margin: 0 0 16px;
+    }
+
+    &__developedBy {
+        order: 2;
+    }
+}
+
+.footerCheckout {
+    .container {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+        &::before,
+        &::after {
+            content: none;
+        }
+    }
+}
+
+.footerCheckout {
+    @include mq("md", min) {
+        &__stamps {
+            width: 34.510595358%;
+        }
+
+        &__wrapper {
+            .container {
+                width: 94.9734%;
+                margin: 0 auto;
+            }
+        }
+    }
+
+    @include mq("lg", min) {
+        .container {
+            align-items: center;
+            justify-content: space-between;
+            flex-direction: row;
+        }
+
+        &__address {
+            order: 0;
+            margin: 0;
+        }
+
+        &__stamps {
+            width: 33.223684211%;
+            order: 1;
+            margin: 0;
+        }
+
+        &__developedBy {
+            order: 2;
+        }
+    }
+
+    @include mq("xxl", min) {
+        &__address {
+            span {
+                font-size: 200%;
+            }
+        }
+
+        &__stamps {
+            width: 29.074771156%;
+        }
+
+        &__developedBy {
+            span {
+                font-size: 180%;
+            }
+        }
+    }
+}
+
+.footerCheckout {
+    &__developedBy a,
+    &__developedBy,
+    &__wrapper,
+    &__stamps {
+        display: flex;
+        align-items: center;
+    }
+    &__wrapper {
+        justify-content: space-between;
+
+        @include mq("lg", min) {
+            width: 100%;
+        }
+    }
+}
+
+.footerCheckout {
+    &__creditList {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    &__creditItem,
+    &__verificatedVtex {
+        max-width: 100%;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
+}
+
+.footerCheckout {
+    &__address {
         font-style: normal;
         font-weight: normal;
         font-size: 10px;
         line-height: 12px;
+        font-family: $font-family-100;
         text-transform: capitalize;
-        max-width: 40%;
-
-        @include mq(md, max) {
-            margin-bottom: 24px;
-            max-width: 100%;
-        }
+        color: $clr-gray-400;
     }
+}
 
+.footerCheckout {
     &__stamps {
-        align-items: center;
-        display: flex;
-        justify-self: center;
-        list-style: none;
-
-        @include mq(md, max) {
-            align-self: center;
-            margin-bottom: 12px;
-        }
-
         &__divider {
             background-color: $clr-gray-300;
             display: inline-block;
@@ -44,11 +152,10 @@
             width: 1px;
         }
     }
+}
 
+.footerCheckout {
     &__developedBy {
-        align-items: center;
-        display: flex;
-        list-style-type: none;
         margin: 0;
 
         li:last-child {
@@ -56,19 +163,22 @@
         }
 
         a {
-            align-items: center;
-            color: $clr-gray-400;
-            display: flex;
-            font-family: $font-family-100;
             font-style: normal;
             font-weight: normal;
             font-size: 10px;
+            font-family: $font-family-100;
             line-height: 12px;
             text-decoration: none;
+            color: $clr-gray-400;
 
             span {
                 margin-right: 8px;
             }
+
+            img {
+                width: 32px;
+                height: auto;
+            }
         }
     }
 }
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 5ed41d9..8a7f5f4 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,4 +1,9 @@
 /* _header.scss */
+body :where(ul, li, ol) {
+    list-style: none;
+    margin: 0;
+}
+
 @function fluid($width, $design-width) {
     $width: calc($width / $design-width * 100);
 
diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html
index 581e55a..d69c3da 100644
--- a/checkout/src/template-checkout/checkout-header.html
+++ b/checkout/src/template-checkout/checkout-header.html
@@ -15,26 +15,7 @@
             </div>
 
             <div id="progressBar  w-DEFINE-FIXED" class="progress-bar">
-                <ul class="progress-list w-100 pos-relative d-flex jus-between">
-                    <div class="bar pos-absolute">
-                        <div class="bar-fill"></div>
-                    </div>
-
-                    <li class="progress-item">
-                        <p class="progress-title"></p>
-                        <span class="progress-bullet pos-relative"></span>
-                    </li>
-
-                    <li class="progress-item">
-                        <p class="progress-title"></p>
-                        <span class="progress-bullet pos-relative"></span>
-                    </li>
-
-                    <li class="progress-item">
-                        <p class="progress-title"></p>
-                        <span class="progress-bullet pos-relative"></span>
-                    </li>
-                </ul>
+                <ul class="progress-list w-100 pos-relative d-flex jus-between"></ul>
             </div>
 
             <div class="headerCheckout__safeBuy w-PERCENT">

From 94114ce2ba8e85d101306aad3d4cfa8908d46199 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Thu, 15 Dec 2022 00:42:10 -0300
Subject: [PATCH 08/27] feat(checkout-empty): created initial styles for
 medium,small devices

---
 checkout/src/arquivos/js/components/Footer.js |  38 ++++--
 .../sass/checkout/_checkout-vazio.scss        | 120 +++++++++++++++---
 .../src/arquivos/sass/checkout/_checkout.scss |   6 -
 .../src/arquivos/sass/partials/_header.scss   |  11 ++
 .../src/arquivos/sass/utils/_variaveis.scss   |   2 +-
 5 files changed, 141 insertions(+), 36 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 71e1d38..398d48f 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -15,15 +15,16 @@ export default class Footer {
         await this.selectors();
         this.innerToPayments();
         this.innerDevelopedBy();
-        // this.onUpdate();
+        this.onUpdate();
     }
 
     async selectors() {
         //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
-        this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.checkoutEmpty = await waitElement(".empty-cart-content");
         this.paymentContainer = await waitElement(".footerCheckout__stamps");
         this.developedByContainer = await waitElement(".footerCheckout__developedBy");
+        this.checkoutContainer = await waitElement(".container-main");
     }
 
     innerToPayments() {
@@ -83,15 +84,32 @@ export default class Footer {
         //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
-        let target = this.checkoutVazio;
-        let config = { childList: true, attributes: true };
-        let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
-                console.log(mutation.type);
-            });
-        });
 
-        observer.observe(target, config);
+        if (this.checkoutEmpty && this.checkoutContainer) {
+            if (this.checkoutContainer.classList.contains("container-cart-fill")) {
+                this.checkoutContainer.classList.remove("container-cart-fill");
+            } else {
+                this.checkoutContainer.classList.add("container-cart-fill");
+            }
+
+            let target = this.checkoutEmpty;
+            let config = { childList: true, attributes: true };
+            let observer = new MutationObserver((mutations) => {
+                for (let i = 0; i < mutations.length; i++) {
+                    if (mutations[i].attributeName === "style") {
+                        if (this.checkoutContainer.classList.contains("container-cart-fill")) {
+                            this.checkoutContainer.classList.remove("container-cart-fill");
+                        } else {
+                            this.checkoutContainer.classList.add("container-cart-fill");
+                        }
+
+                        break;
+                    }
+                }
+            });
+
+            observer.observe(target, config);
+        }
     }
     async addCarrossel() {
         const elemento = await waitElement("#my-element");
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 9b0258b..eae28f7 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -1,34 +1,116 @@
+@mixin btn-secondary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid $clr-common-black;
+    border-radius: 0;
+    font-weight: 400;
+    font-family: $font-family-200;
+    color: $clr-common-black;
+    background-color: $clr-common-white;
+}
+
+.container-cart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    #cart-title {
+        display: none !important;
+    }
+    .cart-template,
+    .checkout-container {
+        min-height: auto;
+    }
+
+    .checkout-container {
+        padding: 0 16px;
+    }
+
+    .cart-template {
+        margin: 0;
+    }
+
+    @media screen and (min-width: 375px) {
+        .checkout-container {
+            width: fluid(300px, 375px);
+            margin: 0 auto;
+        }
+
+        .link-choose-products {
+            width: fluid(250px, 300px);
+            max-width: 250px;
+            margin: 0 auto;
+        }
+    }
+
+    @media screen and (min-width: 1025px) {
+        .checkout-container {
+            width: fluid(400px, 1280px);
+            padding: 0;
+        }
+
+        .link-choose-products {
+            width: fluid(327px, 400px);
+            max-width: none;
+        }
+    }
+}
+
+.empty-cart {
+    &-message {
+        display: none;
+    }
+}
+
 .empty-cart {
     font-family: $font-family-100;
     &-content {
         color: $clr-gray-600;
         text-align: center;
 
-        @include mq(md, max) {
-            padding: 0 16px;
-        }
-    }
+        .empty-cart-title {
+            font-size: 0px;
 
-    &-title {
-        font-size: 20px;
+            &::before {
+                content: "Seu carrinho está vazio.";
+                text-align: center;
+                font-size: 18px;
+                text-transform: uppercase;
+            }
+        }
+
+        @media screen and (min-width: 1024px) {
+            padding: 0;
+        }
+
+        @media screen and (min-width: 1280px) {
+            .empty-cart-title {
+                &::before {
+                    font-size: 24px;
+                }
+            }
+        }
     }
 
     &-links {
         .link-choose-products {
-            background: $clr-gray-600;
-            border: none;
-            border-radius: 5px;
+            @include btn-secondary();
             transition: ease-in 0.22s all;
-            outline: none;
-            font-family: $font-family-100;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 14px;
-            line-height: 16px;
-            text-align: center;
-            letter-spacing: 0.05em;
-            color: $clr-common-white;
-            text-transform: uppercase;
+            font-size: 0px;
+            padding: 16px 0;
+
+            &::before {
+                content: "Continuar Comprando";
+                font-size: 14px;
+                font-style: normal;
+                line-height: 16px;
+                letter-spacing: 0.05em;
+                text-transform: uppercase;
+            }
 
             &:hover {
                 background: lighten($clr-gray-600, 5);
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index e54b94b..50d09aa 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -3,8 +3,6 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
-
-
 body {
     display: flex;
     flex-direction: column;
@@ -34,10 +32,6 @@ body {
             padding-left: 0;
         }
     }
-    .container-order-form,
-    .container-cart {
-        width: 80%;
-    }
 }
 
 .btn-success {
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 8a7f5f4..741b5b4 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,4 +1,15 @@
 /* _header.scss */
+body {
+    margin: 0;
+    padding: 0;
+}
+
+body * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body :where(ul, li, ol) {
     list-style: none;
     margin: 0;
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 9577752..7f541c2 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -27,7 +27,7 @@ $grid-breakpoints: (
     xs: 280,
     sm: 375px,
     md: 600px,
-    lg: 1024px,
+    lg: 1025px,
     xl: 1280px,
     xxl: 2500px,
 ) !default;

From cf15ad2f14275e3c379440efc5821a59b8af7639 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Thu, 15 Dec 2022 12:56:30 -0300
Subject: [PATCH 09/27] feat(checkout-cart-fill): created carousel slider using
 slick and get datas from api

---
 checkout/src/arquivos/js/components/Footer.js | 83 ++++++++++++++++++-
 1 file changed, 80 insertions(+), 3 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 398d48f..252f9bb 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -25,6 +25,7 @@ export default class Footer {
         this.paymentContainer = await waitElement(".footerCheckout__stamps");
         this.developedByContainer = await waitElement(".footerCheckout__developedBy");
         this.checkoutContainer = await waitElement(".container-main");
+        this.self = await waitElement(".footerCheckout__prateleira");
     }
 
     innerToPayments() {
@@ -92,6 +93,15 @@ export default class Footer {
                 this.checkoutContainer.classList.add("container-cart-fill");
             }
 
+            if (
+                window.location.href.endsWith("#/cart") &&
+                this.checkoutContainer.classList.contains("container-cart-fill")
+            ) {
+                console.log("API");
+                this.innerToSelf();
+                this.addCarrossel();
+            }
+
             let target = this.checkoutEmpty;
             let config = { childList: true, attributes: true };
             let observer = new MutationObserver((mutations) => {
@@ -103,6 +113,14 @@ export default class Footer {
                             this.checkoutContainer.classList.add("container-cart-fill");
                         }
 
+                        if (
+                            window.location.href.endsWith("#/cart") &&
+                            this.checkoutContainer.classList.contains("container-cart-fill")
+                        ) {
+                            this.innerToSelf();
+                            this.addCarrossel();
+                        }
+
                         break;
                     }
                 }
@@ -111,11 +129,70 @@ export default class Footer {
             observer.observe(target, config);
         }
     }
-    async addCarrossel() {
-        const elemento = await waitElement("#my-element");
-        $(elemento).slick({
+
+    addCarrossel() {
+        $(this.self).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
         });
     }
+
+    async getProducts() {
+        let url = (name) => {
+            let domain = "https://m3academy.myvtex.com/";
+            return domain + name;
+        };
+
+        let API = fetch(url("api/catalog_system/pub/products/search/?fq=productClusterIds:319"));
+
+        let response = await API.then((res) => res.json());
+
+        return response;
+    }
+
+    async innerToSelf() {
+        let datas = await this.getProducts();
+
+        datas.forEach(() => {
+            $(this.self).slick("unslick");
+
+            this.createdCardsProducts(datas);
+
+            this.addCarrossel();
+        });
+    }
+
+    createdCardsProducts(data) {
+        let structure = "";
+
+        data.forEach((data) => {
+            structure += `<div>
+                <div>
+                    <figure>
+                        <img src="${data.items[0].images[0].imageUrl}" alt="">
+                    </figure>
+
+                    <h3>
+                        ${data.productName}
+                    </h3>
+                </div>
+
+                <div>
+                    ${data.items.reduce((acc, item) => {
+                        return (acc += `<div>
+                            <span>${item.name}</span>
+                        </div>`);
+                    }, "")}
+                </div>
+
+                <a href="${data.link}">
+                    <span>
+                        Ver Produto
+                    </span>
+                </a>
+            </div>`;
+        });
+
+        this.self.innerHTML = structure.trim();
+    }
 }

From 27a64b361b4ebc79974ee24e2482d36a33ab2570 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Thu, 15 Dec 2022 19:45:22 -0300
Subject: [PATCH 10/27] feat(cart-fill): created intial styles and product self
 not styled and fix header,footer,checkout-empty

---
 checkout/src/arquivos/js/components/Footer.js | 80 +++++++++++++++----
 checkout/src/arquivos/js/components/Header.js |  1 -
 .../sass/checkout/_checkout-carrinho.scss     |  9 ++-
 .../sass/checkout/_checkout-vazio.scss        | 43 +++++-----
 .../src/arquivos/sass/partials/_footer.scss   | 18 ++---
 .../src/arquivos/sass/partials/_header.scss   | 10 ++-
 6 files changed, 104 insertions(+), 57 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 252f9bb..ba51747 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -87,19 +87,22 @@ export default class Footer {
         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
 
         if (this.checkoutEmpty && this.checkoutContainer) {
-            if (this.checkoutContainer.classList.contains("container-cart-fill")) {
-                this.checkoutContainer.classList.remove("container-cart-fill");
-            } else {
+            if (this.checkoutEmpty.style.display === "none") {
                 this.checkoutContainer.classList.add("container-cart-fill");
+            } else {
+                this.checkoutContainer.classList.remove("container-fill");
             }
 
             if (
-                window.location.href.endsWith("#/cart") &&
-                this.checkoutContainer.classList.contains("container-cart-fill")
+                this.checkoutContainer.classList.contains("container-cart-fill") &&
+                this.checkoutContainer.classList.contains("container-cart") &&
+                window.location.href.endsWith("#/cart")
             ) {
-                console.log("API");
+                this.innerSelfList();
                 this.innerToSelf();
                 this.addCarrossel();
+            } else {
+                this.self.innerHTML = "";
             }
 
             let target = this.checkoutEmpty;
@@ -107,18 +110,22 @@ export default class Footer {
             let observer = new MutationObserver((mutations) => {
                 for (let i = 0; i < mutations.length; i++) {
                     if (mutations[i].attributeName === "style") {
-                        if (this.checkoutContainer.classList.contains("container-cart-fill")) {
-                            this.checkoutContainer.classList.remove("container-cart-fill");
-                        } else {
+                        if (this.checkoutEmpty.style.display === "none") {
                             this.checkoutContainer.classList.add("container-cart-fill");
+                        } else {
+                            this.checkoutContainer.classList.remove("container-cart-fill");
                         }
 
                         if (
-                            window.location.href.endsWith("#/cart") &&
-                            this.checkoutContainer.classList.contains("container-cart-fill")
+                            this.checkoutContainer.classList.contains("container-cart-fill") &&
+                            this.checkoutContainer.classList.contains("container-cart") &&
+                            window.location.href.endsWith("#/cart")
                         ) {
+                            this.innerSelfList();
                             this.innerToSelf();
                             this.addCarrossel();
+                        } else {
+                            this.self.innerHTML = "";
                         }
 
                         break;
@@ -127,13 +134,43 @@ export default class Footer {
             });
 
             observer.observe(target, config);
+
+            window.addEventListener("hashchange", () => {
+                if (
+                    this.checkoutContainer.classList.contains("container-cart-fill") &&
+                    this.checkoutContainer.classList.contains("container-cart") &&
+                    window.location.href.endsWith("#/cart")
+                ) {
+                    this.innerSelfList();
+                    this.innerToSelf();
+                    this.addCarrossel();
+                } else {
+                    this.self.innerHTML = "";
+                }
+            });
         }
     }
 
     addCarrossel() {
-        $(this.self).slick({
+        $(this.self.children[1]).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            arrows: true,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                    },
+                },
+
+                {
+                    breakpoint: 600,
+                    settings: {
+                        slidesToShow: 2,
+                    },
+                },
+            ],
         });
     }
 
@@ -154,7 +191,7 @@ export default class Footer {
         let datas = await this.getProducts();
 
         datas.forEach(() => {
-            $(this.self).slick("unslick");
+            $(this.self.children[1]).slick("unslick");
 
             this.createdCardsProducts(datas);
 
@@ -166,7 +203,8 @@ export default class Footer {
         let structure = "";
 
         data.forEach((data) => {
-            structure += `<div>
+            structure += `<li>
+            <div>
                 <div>
                     <figure>
                         <img src="${data.items[0].images[0].imageUrl}" alt="">
@@ -190,9 +228,19 @@ export default class Footer {
                         Ver Produto
                     </span>
                 </a>
-            </div>`;
+            </div></li>`;
         });
 
-        this.self.innerHTML = structure.trim();
+        this.self.children[1].innerHTML = `
+            ${structure.trim()}
+        `;
+    }
+
+    innerSelfList() {
+        this.self.innerHTML = `
+        <div>
+            <h2>Você também pode gostar:</h2>
+        </div>
+        <ul class="self-list"></ul>`;
     }
 }
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index fe7e30f..844fd82 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -29,7 +29,6 @@ function OnProgress(target) {
             <div class="progress-content">
                 <p>Dados Pessoais</p>
                 <span class="progress-bullet"></span>
-                <span class="progress-line"></span>
             </div>
         </div>
     </li>
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 90d323c..30c7422 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -1,9 +1,10 @@
-.container {
-    @include mq(md, max) {
-        width: 100%;
+.container-cart.container-cart-fill {
+    width: 100%;
+
+    #cart-title {
+        display: flex !important;
     }
 }
-
 .cart-template {
     font-family: $font-family-100;
     @include mq(md, max) {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index eae28f7..9046b23 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -10,9 +10,10 @@
     background-color: $clr-common-white;
 }
 
-.container-cart {
+.container-main.container-cart {
     width: 100%;
     height: 100%;
+    padding: 0 16px !important;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -21,43 +22,37 @@
     #cart-title {
         display: none !important;
     }
-    .cart-template,
-    .checkout-container {
-        min-height: auto;
-    }
-
-    .checkout-container {
-        padding: 0 16px;
-    }
 
+    .checkout-container,
     .cart-template {
+        min-height: auto;
         margin: 0;
     }
 
-    @media screen and (min-width: 375px) {
-        .checkout-container {
-            width: fluid(300px, 375px);
-            margin: 0 auto;
-        }
+    .link-choose-products {
+        width: fluid(250px, 343px);
+        max-width: 250px;
+        margin: 0 auto;
+    }
 
-        .link-choose-products {
-            width: fluid(250px, 300px);
-            max-width: 250px;
-            margin: 0 auto;
-        }
+    .transactions-container {
+        display: none;
     }
 
     @media screen and (min-width: 1025px) {
-        .checkout-container {
-            width: fluid(400px, 1280px);
-            padding: 0;
-        }
+        width: fluid(400px, 1280px);
+        padding: 0 !important;
+        max-width: none;
 
         .link-choose-products {
             width: fluid(327px, 400px);
-            max-width: none;
+            max-width: 327px;
         }
     }
+
+    @media screen and (min-width: 2500px) {
+        width: fluid(659px, 2500px);
+    }
 }
 
 .empty-cart {
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 70608e8..9ad8a36 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,15 +1,15 @@
 .footerCheckout {
-    padding: 16px 25px 18.88px 8px;
-
-    @include mq("md", min) {
-        padding: 16px 0;
-    }
-}
-
-.footerCheckout {
-    border-top: 1px solid $clr-common-black;
     color: $clr-gray-400;
 
+    &__wrapper {
+        border-top: 1px solid $clr-common-black;
+        padding: 16px 25px 18.88px 8px;
+
+        @include mq("md", min) {
+            padding: 16px 0;
+        }
+    }
+
     &__stamps {
         order: 0;
         margin: 0 0 16px;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 741b5b4..e63d11c 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -161,7 +161,7 @@ body :where(ul, li, ol) {
         .progress-item {
             &--left,
             &--right {
-                width: 39.9183%;
+                width: 40%;
 
                 .progress-line {
                     position: absolute;
@@ -183,14 +183,18 @@ body :where(ul, li, ol) {
                 }
             }
 
+            &--center {
+                width: 90px;
+            }
+
             &--right {
                 .progress-container {
                     align-items: flex-end;
                 }
 
                 .progress-line {
-                    left: 29%;
-                    transform: translateX(-50%);
+                    right: 72%;
+                    transform: translateX(50%);
                 }
             }
         }

From 5ac8c77b79c49d75c4bf5b669bd27ee566ba6500 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Fri, 16 Dec 2022 01:15:10 -0300
Subject: [PATCH 11/27] feat(cart-fill): Initial styles were created for
 calculating delivery for small devices

---
 .../sass/checkout/_checkout-carrinho.scss     | 158 +++++++++++++-----
 .../src/arquivos/sass/checkout/_checkout.scss |   4 -
 .../src/arquivos/sass/utils/_variaveis.scss   |   2 +
 3 files changed, 120 insertions(+), 44 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 30c7422..3461e68 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -1,10 +1,15 @@
-.container-cart.container-cart-fill {
-    width: 100%;
-
-    #cart-title {
-        display: flex !important;
-    }
+@mixin btn-primary-blue-black() {
+    border: none;
+    color: $clr-common-black;
+    background: $clr-primary-blue-500;
 }
+
+@mixin btn-primary-blue-white() {
+    border: none;
+    color: $clr-common-white;
+    background: $clr-primary-blue-500;
+}
+
 .cart-template {
     font-family: $font-family-100;
     @include mq(md, max) {
@@ -342,6 +347,7 @@
     .summary {
         .cart-more-options {
             margin: 0;
+            float: none;
             width: max-content;
 
             .srp-container {
@@ -401,15 +407,10 @@
                     width: calc(100vw - 32px);
                 }
 
-                @include mq(md, max) {
-                    margin-bottom: 40px;
-                }
-
                 .srp-pickup-my-location__button {
-                    background-color: $clr-gray-600;
-                    border: none;
+                    @include btn-primary-blue-white();
+
                     border-radius: 5px;
-                    color: $clr-common-white;
                     outline: none;
                     width: 100%;
 
@@ -445,12 +446,12 @@
                 }
 
                 &__current {
-                    border: 1px solid $clr-blue-500;
+                    border: 1px solid $clr-common-black;
                     border-radius: 100px;
                 }
 
                 .blue {
-                    color: $clr-blue-500;
+                    color: $clr-common-black;
                 }
 
                 label {
@@ -482,23 +483,17 @@
                         font-size: 12px;
                         height: 36px;
                         padding: 12px 8px;
-                        width: 172px;
                     }
 
                     & ~ button {
-                        background-color: $clr-gray-600;
-                        border: none;
+                        @include btn-primary-blue-white();
+
                         border-radius: 5px;
-                        color: $clr-common-white;
                         font-size: 12px;
                         height: 36px;
                         letter-spacing: 1px;
                         outline: none;
-                        position: absolute;
-                        right: -150px;
-                        top: 36px;
                         transition: all 0.2s linear;
-                        width: 96px;
                         text-transform: uppercase;
 
                         &:hover {
@@ -591,9 +586,10 @@
             }
         }
 
-        &-totalizers {
+        &-totalizers.totalizers {
             padding: 0;
             width: 346px;
+            float: none;
 
             .coupon-data {
                 #cart-link-coupon-add {
@@ -609,7 +605,6 @@
                     font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: $clr-blue-500;
                     text-decoration: none;
                 }
             }
@@ -674,10 +669,9 @@
                     }
 
                     button {
-                        background: $clr-gray-600;
-                        border: none;
+                        @include btn-primary-blue-white();
+
                         border-radius: 5px;
-                        color: $clr-common-white;
                         font-size: 12px;
                         height: 36px;
                         letter-spacing: 1px;
@@ -716,6 +710,7 @@
                             font-style: normal;
                             font-weight: normal;
                             font-size: 14px;
+                            font-family: $font-family-200;
                             line-height: 16px;
                             color: $clr-gray-600;
                             padding: 12px 0;
@@ -732,21 +727,25 @@
                 }
 
                 tfoot {
-                    td.info,
-                    td.monetary {
-                        font-style: normal;
-                        font-weight: normal;
-                        font-size: 18px;
-                        line-height: 21px;
-                        color: $clr-gray-600;
+                    tr {
+                        td.info,
+                        td.monetary {
+                            font-style: normal;
+                            font-weight: 700;
+                            font-size: 18px;
+                            line-height: 21px;
+                            font-family: $font-family-100;
+                            color: $clr-gray-600;
+                        }
                     }
                 }
             }
         }
     }
 
-    .cart-links-bottom {
+    .cart-links-bottom.cart-links {
         display: flex;
+        float: none;
         flex-direction: column;
         width: 343px;
 
@@ -777,14 +776,13 @@
                 font-weight: normal;
                 font-size: 12px;
                 line-height: 14px;
-                color: $clr-blue-500;
             }
         }
 
         .btn-place-order-wrapper {
             a {
-                background: $clr-green-500;
-                border: none;
+                @include btn-primary-blue-black();
+
                 border-radius: 5px;
                 display: block;
                 font-size: 0;
@@ -800,8 +798,8 @@
                     font-family: $font-family-100;
                     font-weight: 500;
                     font-size: 13px;
+                    color: inherit;
                     letter-spacing: 0.05em;
-                    color: $clr-common-white;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;
@@ -811,3 +809,83 @@
         }
     }
 }
+
+.container-cart.container-cart-fill {
+    width: 100%;
+    padding: 0 !important;
+
+    #cart-title {
+        display: flex !important;
+        width: 100%;
+        padding: 0 16px;
+        text-align: left;
+    }
+
+    .ship-country {
+        display: none;
+    }
+
+    .link-coupon-add,
+    .link-choose-more-products {
+        color: $clr-common-black;
+
+        span {
+            color: $clr-common-black;
+        }
+    }
+
+    .srp-container,
+    .cart-more-options,
+    .cart-more-options .srp-data {
+        width: 100%;
+    }
+
+    .srp-postal-code__form {
+        width: 100%;
+    }
+
+    .vtex-shipping-preview-0-x-postalCodeForgotten {
+        display: flex;
+        gap: 8px;
+        width: 100%;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    .ship-postalCode {
+        width: 58%;
+        width: 62.682215743%;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+
+        .input-small {
+            width: 100%;
+        }
+    }
+
+    .srp-pc-input {
+        width: 42%;
+        width: 34.985422741%;
+        margin-top: 5px;
+    }
+
+    .srp-data {
+        margin-bottom: 48.35px;
+    }
+
+    .totalizers {
+        padding: 0 16px;
+        width: 100%;
+    }
+
+    .srp-container {
+        max-width: none;
+    }
+
+    .cart-links-bottom {
+        width: 100%;
+        padding: 0 16px;
+        margin-bottom: 43.42px;
+    }
+}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 50d09aa..8d374f4 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -57,10 +57,6 @@ body {
     margin: 40px 0 30px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
-
-    @include mq(md, max) {
-        margin-left: 30px;
-    }
 }
 
 .dropdown {
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 7f541c2..dfa332c 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -21,6 +21,8 @@ $clr-blue-500: #4267b2;
 
 $clr-green-500: #4caf50;
 
+$clr-primary-blue-500: #00c8ff;
+
 /* Grid breakpoints */
 $grid-breakpoints: (
     xxs: 0,

From 015ddc2fcbde6a6d3f42693eab2971437ce35ba3 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Fri, 16 Dec 2022 17:59:46 -0300
Subject: [PATCH 12/27] feat(cart-fill): created initial styles for table and
 small, large devices

---
 .../sass/checkout/_checkout-carrinho.scss     | 233 +++++++++++++++++-
 .../src/arquivos/sass/partials/_footer.scss   |  13 +
 2 files changed, 241 insertions(+), 5 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 3461e68..1b9807d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -588,7 +588,6 @@
 
         &-totalizers.totalizers {
             padding: 0;
-            width: 346px;
             float: none;
 
             .coupon-data {
@@ -825,6 +824,62 @@
         display: none;
     }
 
+    .cart-template {
+        .item-quantity-change {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 16px;
+            height: 16px;
+            background: #00c8ff;
+            border-radius: 100%;
+
+            .icon-plus-sign,
+            .icon-minus-sign {
+                position: relative;
+                width: 100%;
+                height: 100%;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    padding: 0;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    background-color: $clr-common-white;
+                }
+            }
+
+            .icon-plus-sign {
+                &::after {
+                    content: "";
+                    position: absolute;
+                    padding: 0;
+                    top: 50%;
+                    left: 50%;
+                    width: 2px;
+                    height: 10px;
+                    transform: translate(-50%, -50%);
+                    background-color: $clr-common-white;
+                }
+
+                &::before {
+                    width: 10px;
+                    height: 2px;
+                }
+            }
+
+            .icon-minus-sign {
+                &::before {
+                    width: 10px;
+                    height: 2px;
+                }
+            }
+        }
+    }
+
     .link-coupon-add,
     .link-choose-more-products {
         color: $clr-common-black;
@@ -834,12 +889,35 @@
         }
     }
 
+    .cart-more-options {
+        padding: 0 16px;
+    }
+
     .srp-container,
     .cart-more-options,
     .cart-more-options .srp-data {
         width: 100%;
     }
 
+    .cart-template {
+        th.shipping-date {
+            font-size: 0px;
+
+            &::before {
+                content: "Frete";
+                font-size: 14px;
+            }
+        }
+
+        th.product-price {
+            font-size: 0px;
+            &::before {
+                content: "Unidade";
+                font-size: 14px;
+            }
+        }
+    }
+
     .srp-postal-code__form {
         width: 100%;
     }
@@ -853,7 +931,6 @@
     }
 
     .ship-postalCode {
-        width: 58%;
         width: 62.682215743%;
         display: flex;
         align-items: flex-start;
@@ -865,7 +942,6 @@
     }
 
     .srp-pc-input {
-        width: 42%;
         width: 34.985422741%;
         margin-top: 5px;
     }
@@ -879,13 +955,160 @@
         width: 100%;
     }
 
-    .srp-container {
-        max-width: none;
+    .cart-more-options {
+        .srp-container {
+            padding: 0;
+            max-width: none;
+        }
     }
 
     .cart-links-bottom {
         width: 100%;
         padding: 0 16px;
         margin-bottom: 43.42px;
+
+        .link-choose-more-products-wrapper {
+            margin: 0 0 14.91px;
+        }
+    }
+
+    .coupon-column .coupon-fields {
+        span {
+            width: 100%;
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .cart-template .cart-items td.quantity {
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 10px;
+
+        input {
+            border: none;
+            padding: 0 10px;
+            box-sizing: content-box;
+        }
+    }
+
+    @media screen and (min-width: 600px) {
+        .totalizers {
+            padding: 0 16px;
+            margin: 0;
+        }
+
+        .cart-more-options {
+            .srp-container {
+                padding: 0 16px;
+            }
+
+            .srp-data {
+                width: 343px;
+            }
+        }
+
+        .cart-template .cart-items th {
+            vertical-align: top;
+        }
+
+        .cart-template-holder {
+            padding: 0 16px;
+        }
+    }
+
+    @media screen and (min-width: 1280px) {
+        width: fluid(1018px, 1280px);
+
+        .cart-template .cart-items td.quantity {
+            margin: 6px auto 0 0;
+        }
+
+        .cart-template {
+            .shipping-date,
+            .product-price,
+            .quantity-price {
+                text-align: left;
+                padding: 5px 0;
+            }
+        }
+
+        .cart-template-holder {
+            padding: 0;
+        }
+
+        .product-name {
+            width: auto;
+        }
+
+        .cart-template .cart-items th {
+            text-align: left;
+            padding-bottom: 16px;
+        }
+
+        #cart-title {
+            padding: 0;
+        }
+
+        .cart {
+            margin-bottom: 48px;
+        }
+
+        .cart-more-options {
+            padding: 0;
+
+            .srp-container {
+                padding: 0;
+            }
+
+            .srp-data {
+                margin-bottom: 0;
+            }
+        }
+
+        .row-fluid.summary {
+            width: 100%;
+            margin: 0 auto;
+        }
+
+        .cart-more-options {
+            width: fluid(280px, 1018px);
+            float: left;
+
+            .srp-container {
+                .srp-content {
+                    .srp-main-title {
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+
+        .cart-links-bottom.cart-links {
+            width: fluid(354px, 1018px);
+            display: flex;
+            align-items: flex-end;
+            float: right;
+            padding: 0;
+            margin: 0 auto;
+        }
+
+        .btn-place-order-wrapper {
+            width: 100%;
+        }
+
+        .link-choose-more-products-wrapper {
+            width: 100%;
+            text-align: center;
+        }
+
+        .cart-totalizers.totalizers {
+            width: fluid(354px, 1018px);
+            float: right;
+            padding: 0;
+            margin-left: 0;
+            margin-right: 0;
+            margin-bottom: 0;
+        }
     }
 }
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 9ad8a36..7daec6d 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -182,3 +182,16 @@
         }
     }
 }
+
+.footerCheckout__prateleira {
+    div {
+        h2 {
+            width: 100%;
+            font-size: 14px;
+            text-align: center;
+            font-weight: 400;
+            font-family: $font-family-200;
+            color: $clr-common-black;
+        }
+    }
+}

From 6c8ad5a1f0dc44819694cd97dc7baabf45e0a7ca Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Fri, 16 Dec 2022 20:52:17 -0300
Subject: [PATCH 13/27] refactor(footer): created more functions for using and
 more clean code

---
 checkout/src/arquivos/js/components/Footer.js | 206 ++++++++++--------
 1 file changed, 115 insertions(+), 91 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ba51747..ec5c645 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -13,8 +13,12 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        this.innerToPayments();
-        this.innerDevelopedBy();
+
+        this.createdToPaymentsInFooter();
+        this.createdToDevelopedBy();
+
+        this.onloadWindowVerificatedShelf();
+
         this.onUpdate();
     }
 
@@ -25,55 +29,55 @@ export default class Footer {
         this.paymentContainer = await waitElement(".footerCheckout__stamps");
         this.developedByContainer = await waitElement(".footerCheckout__developedBy");
         this.checkoutContainer = await waitElement(".container-main");
-        this.self = await waitElement(".footerCheckout__prateleira");
+        this.shelf = await waitElement(".footerCheckout__prateleira");
     }
 
-    innerToPayments() {
-        if (this.paymentContainer) {
-            const payments = this.paymentContainer.children[0].children[0];
-            const vericatedVtex = this.paymentContainer.children[2].children[0];
+    createdToPaymentsInFooter() {
+        if (this.isExistElement(this.paymentContainer)) {
+            const paymentCreditContent = this.paymentContainer.children[0].children[0];
+            const verificatedVtexPCI = this.paymentContainer.children[2].children[0];
 
-            if (payments && vericatedVtex) {
-                let structure = "";
-                const paymentsTypes = [
-                    "masterCard",
-                    "visa",
-                    "amex",
-                    "elo",
-                    "hiperCard",
-                    "payPal",
-                    "boleto",
-                ];
+            let verifacatedContents =
+                this.isExistElement(paymentCreditContent) &&
+                this.isExistElement(verificatedVtexPCI);
 
-                paymentsTypes.forEach(
-                    (payment) =>
-                        (structure += `<li class="footerCheckout__creditItem" >${insertImage(
-                            payment,
-                            'class="footerCheckout__creditImage"'
-                        )}</li>`)
-                );
-
-                payments.innerHTML = `<ul class="footerCheckout__creditList">${structure}</ul>`;
-
-                vericatedVtex.innerHTML = insertImage(
+            if (verifacatedContents) {
+                let creditStructure = "";
+                let verificatedVtexStructure = insertImage(
                     "vtexPCI",
                     'class="footerCheckout__verificatedVtex"'
                 );
+
+                let creditTypes = this.creditPaymentsName();
+
+                creditTypes.forEach((creditType) => {
+                    creditStructure += `<li class="footerCheckout__creditItem" >${insertImage(
+                        creditType,
+                        'class="footerCheckout__creditImage"'
+                    )}</li>`;
+                });
+
+                paymentCreditContent.innerHTML = `<ul class="footerCheckout__creditList">${creditStructure}</ul>`;
+                verificatedVtexPCI.innerHTML = verificatedVtexStructure;
             }
         }
     }
 
-    innerDevelopedBy() {
-        if (this.developedByContainer) {
-            const poweredBy = this.developedByContainer.children[0].children[0];
-            const developedBy = this.developedByContainer.children[1].children[0];
+    createdToDevelopedBy() {
+        if (this.isExistElement(this.developedByContainer)) {
+            const poweredByContent = this.developedByContainer.children[0].children[0];
+            const developedByContent = this.developedByContainer.children[1].children[0];
 
-            if (poweredBy && developedBy) {
-                poweredBy.innerHTML = `<span>Powered By</span>${insertImage(
+            let verificatedContents =
+                this.isExistElement(poweredByContent) && this.isExistElement(developedByContent);
+
+            if (verificatedContents) {
+                poweredByContent.innerHTML = `<span>Powered By</span>${insertImage(
                     "logoVTEX",
                     'class="footerCheckout__logo footerCheckout__logo--vtex"'
                 )}`;
-                developedBy.innerHTML = `<span>Developed By</span>${insertImage(
+
+                developedByContent.innerHTML = `<span>Developed By</span>${insertImage(
                     "logoM3",
                     'class="footerCheckout__logo footerCheckout__logo--m3"'
                 )}`;
@@ -81,52 +85,51 @@ export default class Footer {
         }
     }
 
+    onloadWindowVerificatedShelf() {
+        let checkoutEmpty = this.checkoutEmpty;
+        let checkoutContainer = this.checkoutContainer;
+
+        if (checkoutEmpty.style.display === "none") {
+            this.addClassToElement(checkoutContainer, "container-cart-fill");
+        } else {
+            this.removeClassToElement(checkoutContainer, "container-fill");
+        }
+
+        if (
+            this.getElementClass(checkoutContainer, "container-cart-fill") &&
+            this.getElementClass(checkoutContainer, "container-cart") &&
+            window.location.href.endsWith("#/cart")
+        ) {
+            this.createdInitialShelfList();
+            this.createdProductsToShelf();
+            this.addCarrossel();
+        } else {
+            this.shelf.innerHTML = "";
+        }
+    }
+
     onUpdate() {
         //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
 
-        if (this.checkoutEmpty && this.checkoutContainer) {
-            if (this.checkoutEmpty.style.display === "none") {
-                this.checkoutContainer.classList.add("container-cart-fill");
-            } else {
-                this.checkoutContainer.classList.remove("container-fill");
-            }
-
-            if (
-                this.checkoutContainer.classList.contains("container-cart-fill") &&
-                this.checkoutContainer.classList.contains("container-cart") &&
-                window.location.href.endsWith("#/cart")
-            ) {
-                this.innerSelfList();
-                this.innerToSelf();
-                this.addCarrossel();
-            } else {
-                this.self.innerHTML = "";
-            }
+        let verificatedContents =
+            this.isExistElement(this.checkoutEmpty) && this.isExistElement(this.checkoutContainer);
 
+        if (verificatedContents) {
             let target = this.checkoutEmpty;
             let config = { childList: true, attributes: true };
             let observer = new MutationObserver((mutations) => {
+                /* prettier-ignore */
                 for (let i = 0; i < mutations.length; i++) {
                     if (mutations[i].attributeName === "style") {
                         if (this.checkoutEmpty.style.display === "none") {
-                            this.checkoutContainer.classList.add("container-cart-fill");
+                            this.addClassToElement(this.checkoutContainer, "container-cart-fill");
                         } else {
-                            this.checkoutContainer.classList.remove("container-cart-fill");
+                            this.removeClassToElement(this.checkoutContainer,"container-cart-fill");
                         }
 
-                        if (
-                            this.checkoutContainer.classList.contains("container-cart-fill") &&
-                            this.checkoutContainer.classList.contains("container-cart") &&
-                            window.location.href.endsWith("#/cart")
-                        ) {
-                            this.innerSelfList();
-                            this.innerToSelf();
-                            this.addCarrossel();
-                        } else {
-                            this.self.innerHTML = "";
-                        }
+                        this.onloadWindowVerificatedShelf();
 
                         break;
                     }
@@ -135,24 +138,12 @@ export default class Footer {
 
             observer.observe(target, config);
 
-            window.addEventListener("hashchange", () => {
-                if (
-                    this.checkoutContainer.classList.contains("container-cart-fill") &&
-                    this.checkoutContainer.classList.contains("container-cart") &&
-                    window.location.href.endsWith("#/cart")
-                ) {
-                    this.innerSelfList();
-                    this.innerToSelf();
-                    this.addCarrossel();
-                } else {
-                    this.self.innerHTML = "";
-                }
-            });
+            window.addEventListener("hashchange", this.onloadWindowVerificatedShelf.bind(this));
         }
     }
 
     addCarrossel() {
-        $(this.self.children[1]).slick({
+        $(this.shelf.children[1]).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
             arrows: true,
@@ -174,24 +165,26 @@ export default class Footer {
         });
     }
 
-    async getProducts() {
+    async requestAPIProducts() {
         let url = (name) => {
             let domain = "https://m3academy.myvtex.com/";
             return domain + name;
         };
 
-        let API = fetch(url("api/catalog_system/pub/products/search/?fq=productClusterIds:319"));
+        let featchProducts = fetch(
+            url("api/catalog_system/pub/products/search/?fq=productClusterIds:319")
+        );
 
-        let response = await API.then((res) => res.json());
+        let response = await featchProducts.then((res) => res.json());
 
         return response;
     }
 
-    async innerToSelf() {
-        let datas = await this.getProducts();
+    async createdProductsToShelf() {
+        let datas = await this.requestAPIProducts();
 
         datas.forEach(() => {
-            $(this.self.children[1]).slick("unslick");
+            $(this.shelf.children[1]).slick("unslick");
 
             this.createdCardsProducts(datas);
 
@@ -231,16 +224,47 @@ export default class Footer {
             </div></li>`;
         });
 
-        this.self.children[1].innerHTML = `
+        this.shelf.children[1].innerHTML = `
             ${structure.trim()}
         `;
     }
 
-    innerSelfList() {
-        this.self.innerHTML = `
+    createdInitialShelfList() {
+        this.shelf.innerHTML = `
         <div>
             <h2>Você também pode gostar:</h2>
         </div>
-        <ul class="self-list"></ul>`;
+        <ul class="self-list"></ul>
+        `;
+    }
+
+    addClassToElement(element, name) {
+        element.classList.add(name);
+    }
+
+    removeClassToElement(element, name) {
+        element.classList.remove(name);
+    }
+
+    getElementClass(element, name) {
+        return element.classList.contains(name);
+    }
+
+    isExistElement(element) {
+        return !!element;
+    }
+
+    creditPaymentsName() {
+        const creditPaymentsTypes = [
+            "masterCard",
+            "visa",
+            "amex",
+            "elo",
+            "hiperCard",
+            "payPal",
+            "boleto",
+        ];
+
+        return creditPaymentsTypes;
     }
 }

From 9758e921c1264db6471e10688a113d2fd479f626 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Fri, 16 Dec 2022 21:26:17 -0300
Subject: [PATCH 14/27] feat(autentication): created initial styles for title

---
 checkout/src/arquivos/sass/checkout/_checkout.scss | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 8d374f4..b5b160d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -49,13 +49,12 @@ body {
 
 #cart-title,
 #orderform-title {
-    color: $clr-gray-400;
+    color: $clr-common-black;
     font-family: $font-family-100;
-    font-weight: 500;
-    font-size: 36px;
+    font-weight: 700;
+    font-size: 24px;
     line-height: 42px;
-    margin: 40px 0 30px;
-    letter-spacing: 0.1em;
+    margin: 16px 0;
     text-transform: uppercase;
 }
 

From 7594f28c5ea5ee2bdf0f0640bd8be103b1546525 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Sat, 17 Dec 2022 01:03:29 -0300
Subject: [PATCH 15/27] feat(autentication): created initial styles for small,
 medium devices

---
 .../sass/checkout/_checkout-autenticacao.scss | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 08dde7d..da3bb99 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -287,3 +287,90 @@
         }
     }
 }
+
+.container-order-form {
+    #orderform-title {
+        padding: 0 16px;
+    }
+
+    .checkout-container .client-pre-email {
+        padding: 8px 16px 0;
+    }
+
+    .checkout-container .client-pre-email .emailInfo {
+        width: 100%;
+        font-size: 12px;
+    }
+
+    .checkout-container .client-pre-email .emailInfo h3 {
+        line-height: 16.34px;
+    }
+
+    .orderform-template {
+        .client-pre-email {
+            .link-cart a {
+                font-size: 10px;
+                line-height: 12px;
+                font-family: $font-family-200;
+                text-transform: uppercase;
+            }
+        }
+
+        .client-pre-email .emailInfo ul li i::before {
+            color: $clr-primary-blue-500;
+        }
+
+        .client-pre-email .client-email button {
+            @include btn-primary-blue-black();
+        }
+        .client-pre-email-h {
+            label {
+                span,
+                small {
+                    font-size: 12px;
+                    line-height: 14px;
+                    font-weight: 400;
+                    color: $clr-common-black;
+                    font-family: $font-family-200;
+                    text-transform: uppercase;
+                }
+            }
+        }
+    }
+
+    .client-pre-email .emailInfo .icon-lock {
+        display: none;
+    }
+}
+
+.container-order-form {
+    @media screen and (min-width: 1200px) {
+        width: inherit;
+    }
+}
+
+.container-order-form {
+    width: 100%;
+
+    @media screen and (min-width: 600px) {
+        .checkout-container .client-pre-email .emailInfo {
+            width: fluid(343px, 992px);
+        }
+    }
+
+    @media screen and (min-width: 1280px) {
+        width: fluid(1018px, 1280px);
+
+        .checkout-container .client-pre-email {
+            padding: 8px 0 0;
+        }
+
+        #orderform-title {
+            padding: 0;
+        }
+
+        .client-pre-email .emailInfo .icon-lock {
+            display: block;
+        }
+    }
+}

From 304870cc531f47691722a4b523f958a3f8a120ec Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Sun, 18 Dec 2022 07:07:35 -0300
Subject: [PATCH 16/27] feat(personal-data): created styles to client data
 route and shipping route for small, medium devices

---
 .../sass/checkout/_checkout-autenticacao.scss | 466 +++++++++++++++++-
 .../sass/checkout/_checkout-carrinho.scss     |   6 +-
 .../sass/checkout/_checkout-pagamento.scss    |  10 +-
 3 files changed, 468 insertions(+), 14 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index da3bb99..0837ca5 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -289,10 +289,195 @@
 }
 
 .container-order-form {
+    .checkout-container {
+        overflow: initial;
+    }
+
     #orderform-title {
         padding: 0 16px;
     }
 
+    #shipping-data,
+    #payment-data,
+    .cart-template.mini-cart {
+        padding: 0 16px;
+    }
+
+    #shipping-data {
+        margin: 0;
+    }
+
+    #client-profile-data .client-profile-data.active {
+        margin: 0 16px 16px;
+    }
+
+    #shipping-data,
+    #payment-data,
+    #client-profile-data .client-profile-data.active {
+        float: none;
+    }
+
+    #find-pickups-manualy-button-denied {
+        @include btn-primary-blue-white();
+    }
+
+    #postalCode-finished-loading {
+        .vtex-omnishipping-1-x-deliveryChannelsToggle {
+            background-color: $clr-common-white;
+            border: 1px solid $clr-common-black;
+        }
+
+        .vtex-omnishipping-1-x-deliveryOptionActive {
+            color: $clr-common-black;
+            text-shadow: none;
+        }
+
+        .vtex-omnishipping-1-x-isLoading {
+            background: $clr-primary-blue-500;
+        }
+    }
+
+    .checkout-container
+        .shipping-data
+        .accordion-group
+        .accordion-inner
+        .vtex-omnishipping-1-x-deliveryChannelsToggle {
+        background-color: $clr-primary-blue-500;
+        border: 1px solid $clr-primary-blue-500;
+    }
+
+    .checkout-container .shipping-data .accordion-group,
+    .checkout-container .payment-data .accordion-group,
+    .checkout-container .client-profile-data .accordion-group,
+    .checkout-container
+        .shipping-data
+        .accordion-group
+        .accordion-inner
+        .vtex-omnishipping-1-x-deliveryGroup
+        .shp-lean,
+    .checkout-container .shipping-data .accordion-group .accordion-inner .address-summary,
+    .cart-template.mini-cart .cart-fixed {
+        border: 1px solid $clr-gray-100;
+        border-radius: 8px;
+    }
+
+    .checkout-container .form-page.client-pre-email {
+        padding: 5px;
+        box-sizing: content-box;
+    }
+
+    .checkout-container .client-profile-data .accordion-group {
+        padding: 16px 16px 44px;
+    }
+
+    .client-profile-data .accordion-group .accordion-heading span i.icon-user {
+        display: none;
+    }
+
+    .client-profile-data .accordion-group .accordion-heading span span[data-i18n] {
+        font-size: 0px;
+
+        &::before {
+            content: "Identificação";
+            font-size: 16px;
+            line-height: 18.72px;
+            font-family: $font-family-200;
+        }
+    }
+
+    .checkout-container .shipping-data .accordion-group .accordion-inner p label,
+    .checkout-container .payment-data .accordion-group .accordion-inner p label,
+    .checkout-container .client-profile-data .accordion-group .accordion-inner p label {
+        color: #7d7d7d;
+        font-size: 12px;
+        line-height: 19.07px;
+    }
+
+    .checkout-container .shipping-data .accordion-group .accordion-inner p select,
+    .checkout-container .shipping-data .accordion-group .accordion-inner p input,
+    .checkout-container .payment-data .accordion-group .accordion-inner p select,
+    .checkout-container .payment-data .accordion-group .accordion-inner p input,
+    .checkout-container .client-profile-data .accordion-group .accordion-inner p select,
+    .checkout-container .client-profile-data .accordion-group .accordion-inner p input {
+        border: 1px solid #f0f0f0;
+        padding: 0 11px;
+        border-radius: 5px;
+        height: 42px;
+        width: 100%;
+        max-width: none;
+        background-position: right 50%;
+    }
+
+    .checkout-container .payment-data .accordion-group .accordion-heading a,
+    .checkout-container .shipping-data .accordion-group .accordion-heading a,
+    .checkout-container .client-profile-data .accordion-group .accordion-heading a {
+        background-color: $clr-common-white;
+        font-size: 24px;
+        color: $clr-primary-blue-500;
+    }
+
+    .box-client-info-pf {
+        width: 100%;
+
+        display: grid;
+        grid-template-columns: 50% 50%;
+    }
+
+    p.client-phone,
+    p.client-document,
+    p.client-first-name,
+    p.client-last-name {
+        float: none !important;
+        width: 100%;
+        margin: 0;
+    }
+
+    p.client-first-name,
+    p.client-document {
+        padding-right: 8px;
+    }
+
+    p.client-phone,
+    p.client-last-name {
+        padding-left: 8px;
+    }
+
+    p.client-email {
+        grid-column: 1/3;
+        margin-bottom: 16px;
+    }
+
+    p.client-first-name,
+    p.client-last-name {
+        margin-bottom: 16px;
+    }
+
+    p.client-document,
+    p.client-phone {
+        margin-bottom: 16px;
+    }
+
+    p.newsletter {
+        margin: 0 0 45px;
+    }
+
+    .checkbox.newsletter-label {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 8px;
+
+        #opt-in-newsletter {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    .links.unstyled,
+    .client-notice.notice {
+        display: none;
+    }
+
     .checkout-container .client-pre-email {
         padding: 8px 16px 0;
     }
@@ -306,7 +491,160 @@
         line-height: 16.34px;
     }
 
-    .orderform-template {
+    .cart-template.mini-cart {
+        padding: 0 16px;
+        width: 100% !important;
+        margin: 0;
+
+        h2 {
+            padding: 0 16px;
+        }
+
+        #go-to-cart-button {
+            padding: 0 16px;
+
+            a {
+                font-size: 12px;
+                line-height: 16.34px;
+                text-decoration: none;
+                color: $clr-common-black;
+            }
+        }
+
+        .cart {
+            border: none;
+            margin: 0;
+        }
+
+        .cart-fixed {
+            padding-top: 16px;
+            height: auto !important;
+        }
+
+        .cart-totalizers.totalizers {
+            padding: 0;
+            margin-bottom: 0;
+
+            tr {
+                border-top: 1px solid $clr-gray-200;
+                border-bottom: 1px solid $clr-gray-200;
+            }
+
+            tbody {
+                td.info,
+                td.monetary {
+                    color: $clr-gray-400;
+                }
+
+                td.info {
+                    padding: 25px 0 25px 16px;
+                }
+                td.monetary {
+                    padding: 25px 16px 25px 0;
+                }
+            }
+
+            tfoot {
+                tr {
+                    border: none;
+                }
+
+                td.info,
+                td.monetary {
+                    color: $clr-gray-600;
+                }
+
+                td.info {
+                    padding: 30px 0 22px 16px;
+                    font-size: 18px;
+                    line-height: 19.07px;
+                }
+                td.monetary {
+                    padding: 30px 16px 22px 0;
+                    font-size: 14px;
+                    line-height: 24.51px;
+                }
+            }
+        }
+    }
+
+    .ship-country {
+        display: none;
+    }
+
+    .orderform-template.active {
+        display: grid;
+        grid-template-columns: 1fr;
+
+        .orderform-template-holder {
+            width: 100%;
+        }
+
+        @media screen and (min-width: 1025px) {
+            grid-template-columns: fluid(677px, 1018px) fluid(331px, 1018px);
+            gap: 0 16px;
+
+            .orderform-template-holder {
+                grid-column: 1/2;
+            }
+        }
+
+        div.row-fluid {
+            width: 100%;
+            display: grid;
+            grid-template-columns: 1fr;
+
+            #shipping-data {
+                .shipping-data {
+                    width: 100%;
+                }
+            }
+
+            #client-profile-data,
+            #shipping-data,
+            #payment-data {
+                width: 100%;
+            }
+
+            .client-profile-data.filled {
+                margin: 0 16px 16px;
+            }
+
+            &::before,
+            &::after {
+                content: none;
+            }
+
+            @media screen and (min-width: 1025px) {
+                grid-template-columns: fluid(331px, 677px) fluid(330px, 677px);
+                grid-template-rows: auto auto auto;
+                gap: 0 16px;
+
+                #shipping-data,
+                #payment-data {
+                    margin: 0;
+                    padding: 0;
+                }
+
+                #client-profile-data {
+                    grid-column: 1/2;
+                    grid-row: 1/4;
+                }
+
+                #payment-data {
+                    grid-column: 2/3;
+                }
+
+                .client-profile-data.filled {
+                    margin: 0;
+                }
+            }
+        }
+
+        .form-step.box-edit .row-fluid {
+            display: initial;
+        }
+
         .client-pre-email {
             .link-cart a {
                 font-size: 10px;
@@ -323,6 +661,18 @@
         .client-pre-email .client-email button {
             @include btn-primary-blue-black();
         }
+
+        .checkout-container .shipping-data .accordion-group .accordion-inner button.submit,
+        .checkout-container .payment-data .accordion-group .accordion-inner button.submit,
+        .checkout-container .client-profile-data .accordion-group .accordion-inner button.submit,
+        #btn-go-to-payment {
+            @include btn-primary-blue-white();
+        }
+
+        #btn-go-to-payment {
+            width: 100%;
+        }
+
         .client-pre-email-h {
             label {
                 span,
@@ -338,9 +688,73 @@
         }
     }
 
+    .checkout-container .accordion-group .accordion-heading span > i,
     .client-pre-email .emailInfo .icon-lock {
         display: none;
     }
+
+    .submit.btn-submit-wrapper {
+        button#go-to-shipping,
+        button#go-to-payment {
+            @include btn-primary-blue-white();
+
+            width: 100%;
+        }
+    }
+
+    .vtex-omnishipping-1-x-address {
+        display: grid;
+        grid-template-columns: 1fr;
+
+        .input {
+            float: none;
+            margin: 0;
+        }
+    }
+
+    .checkout-container
+        .shipping-data
+        .accordion-group
+        .accordion-inner
+        .vtex-omnishipping-1-x-deliveryGroup
+        .shp-lean
+        .vtex-omnishipping-1-x-leanShippingOptionActive {
+        background-color: #f2f2f2;
+    }
+
+    .shp-lean-option.shp-lean-option-active.vtex-omnishipping-1-x-leanShippingOptionActive {
+        .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon {
+            svg {
+                display: none !important;
+            }
+
+            &::before {
+                content: "";
+                width: 16px;
+                height: 16px;
+                background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png")
+                    center;
+                background-size: cover;
+            }
+        }
+    }
+
+    .shp-lean-option.vtex-omnishipping-1-x-leanShippingOption {
+        .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon {
+            svg {
+                display: none !important;
+            }
+
+            &::before {
+                content: "";
+                width: 16px;
+                height: 16px;
+                background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png")
+                    center;
+                background-size: cover;
+            }
+        }
+    }
 }
 
 .container-order-form {
@@ -352,14 +766,64 @@
 .container-order-form {
     width: 100%;
 
+    #shipping-data,
+    #payment-data {
+        float: none;
+    }
+
+    @media screen and (max-width: 490px) {
+        .orderform-template-holder .client-profile-data input[type="text"] {
+            width: 100%;
+        }
+
+        .orderform-template-holder .client-profile-data {
+            p.client-phone,
+            p.client-document,
+            p.client-first-name,
+            p.client-last-name {
+                float: none !important;
+                width: 100%;
+                margin: 0;
+
+                input {
+                    width: 100% !important;
+                }
+            }
+        }
+    }
+
+    @media screen and (min-width: 375px) {
+        .checkout-container .shipping-data .accordion-group .accordion-inner p label,
+        .checkout-container .payment-data .accordion-group .accordion-inner p label,
+        .checkout-container .client-profile-data .accordion-group .accordion-inner p label {
+            font-size: 14px;
+        }
+    }
+
     @media screen and (min-width: 600px) {
         .checkout-container .client-pre-email .emailInfo {
             width: fluid(343px, 992px);
         }
     }
 
+    @media screen and (min-width: 1025px) {
+        #shipping-data,
+        #payment-data {
+            float: none;
+        }
+
+        #client-profile-data .client-profile-data.active {
+            margin: 0;
+        }
+
+        .cart-template.mini-cart {
+            padding: 0;
+        }
+    }
+
     @media screen and (min-width: 1280px) {
         width: fluid(1018px, 1280px);
+        min-height: calc(100vh - 175px);
 
         .checkout-container .client-pre-email {
             padding: 8px 0 0;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 1b9807d..45edb57 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -2,12 +2,14 @@
     border: none;
     color: $clr-common-black;
     background: $clr-primary-blue-500;
+    text-transform: uppercase;
 }
 
 @mixin btn-primary-blue-white() {
     border: none;
     color: $clr-common-white;
     background: $clr-primary-blue-500;
+    text-transform: uppercase;
 }
 
 .cart-template {
@@ -999,10 +1001,6 @@
         }
 
         .cart-more-options {
-            .srp-container {
-                padding: 0 16px;
-            }
-
             .srp-data {
                 width: 343px;
             }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 9a52731..dd0ea41 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -1,11 +1,3 @@
 body .container-main.container-order-form .orderform-template.active {
-    .mini-cart {
-        width: 32.3242%;
-        margin-left: unset;
-        margin-right: 0;
-        float: right;
-    }
-    .orderform-template-holder {
-        width: 66.1132%;
-    }
+    --none-rules: #000;
 }

From 0638ef93b513250d40c2981663587110bee4181a Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Sun, 18 Dec 2022 14:53:33 -0300
Subject: [PATCH 17/27] feat(slider-shelf): created styles for small,medium
 devices and small touches

---
 checkout/src/arquivos/js/components/Footer.js |  25 +-
 checkout/src/arquivos/sass/checkout.scss      |   1 +
 .../sass/checkout/_checkout-autenticacao.scss |   2 +-
 .../sass/checkout/_checkout-carrinho.scss     |  16 +-
 checkout/src/arquivos/sass/lib/_slick.scss    |   2 +
 .../src/arquivos/sass/partials/_footer.scss   |  13 +-
 .../src/arquivos/sass/partials/_header.scss   |   2 +-
 .../arquivos/sass/partials/_prateleira.scss   | 119 +++++++
 checkout/src/arquivos/sass/utils/_mixin.scss  | 296 ++++++++++--------
 9 files changed, 298 insertions(+), 178 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ec5c645..8bec4fe 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -145,7 +145,6 @@ export default class Footer {
     addCarrossel() {
         $(this.shelf.children[1]).slick({
             slidesToShow: 4,
-            slidesToScroll: 1,
             arrows: true,
             responsive: [
                 {
@@ -196,27 +195,27 @@ export default class Footer {
         let structure = "";
 
         data.forEach((data) => {
-            structure += `<li>
-            <div>
-                <div>
-                    <figure>
+            structure += `<li class="shelf-item product-item">
+            <div class="product-item-container">
+                <div class="product-item-header">
+                    <figure class="product-item-figure">
                         <img src="${data.items[0].images[0].imageUrl}" alt="">
                     </figure>
 
-                    <h3>
+                    <h3 class="product-item-name">
                         ${data.productName}
                     </h3>
                 </div>
 
-                <div>
+                <div class="product-item-types product-type">
                     ${data.items.reduce((acc, item) => {
-                        return (acc += `<div>
-                            <span>${item.name}</span>
+                        return (acc += `<div class="product-type-container">
+                            <span class="type-name">${item.name}</span>
                         </div>`);
                     }, "")}
                 </div>
 
-                <a href="${data.link}">
+                <a class="product-item-link" href="${data.link}">
                     <span>
                         Ver Produto
                     </span>
@@ -231,10 +230,10 @@ export default class Footer {
 
     createdInitialShelfList() {
         this.shelf.innerHTML = `
-        <div>
-            <h2>Você também pode gostar:</h2>
+        <div class="footerCheckout__prateleira-header">
+            <h2 class="footerCheckout__prateleira-title">Você também pode gostar:</h2>
         </div>
-        <ul class="self-list"></ul>
+        <ul class="shelf-list"></ul>
         `;
     }
 
diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss
index 771070c..14b62ba 100644
--- a/checkout/src/arquivos/sass/checkout.scss
+++ b/checkout/src/arquivos/sass/checkout.scss
@@ -2,4 +2,5 @@
 @import "./lib/slick";
 @import "./partials/header";
 @import "./partials/footer";
+@import "./partials/prateleira";
 @import "./checkout/checkout.scss";
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 0837ca5..0bc765a 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -821,7 +821,7 @@
         }
     }
 
-    @media screen and (min-width: 1280px) {
+    @media screen and (min-width: 1025px) {
         width: fluid(1018px, 1280px);
         min-height: calc(100vh - 175px);
 
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 45edb57..93c150b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -1,17 +1,3 @@
-@mixin btn-primary-blue-black() {
-    border: none;
-    color: $clr-common-black;
-    background: $clr-primary-blue-500;
-    text-transform: uppercase;
-}
-
-@mixin btn-primary-blue-white() {
-    border: none;
-    color: $clr-common-white;
-    background: $clr-primary-blue-500;
-    text-transform: uppercase;
-}
-
 .cart-template {
     font-family: $font-family-100;
     @include mq(md, max) {
@@ -1015,7 +1001,7 @@
         }
     }
 
-    @media screen and (min-width: 1280px) {
+    @media screen and (min-width: 1025px) {
         width: fluid(1018px, 1280px);
 
         .cart-template .cart-items td.quantity {
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 74460fb..8a04c82 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -109,6 +109,8 @@
 .slick-next {
     z-index: 4;
     right: 10px;
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+        no-repeat center center;
 }
 .slick-arrow.slick-hidden {
     display: none;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 7daec6d..4aa2eec 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -183,15 +183,4 @@
     }
 }
 
-.footerCheckout__prateleira {
-    div {
-        h2 {
-            width: 100%;
-            font-size: 14px;
-            text-align: center;
-            font-weight: 400;
-            font-family: $font-family-200;
-            color: $clr-common-black;
-        }
-    }
-}
+
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index e63d11c..a211e21 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -90,7 +90,7 @@ body :where(ul, li, ol) {
         }
     }
 
-    @media screen and (min-width: 1280px) {
+    @media screen and (min-width: 1025px) {
         &__wrapper {
             width: fluid(1018px, 1280px);
         }
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 13f8def..b544915 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1 +1,120 @@
 /* _prateleira.scss */
+.footerCheckout__prateleira {
+    width: 100%;
+    margin-top: 43.42px;
+    min-height: 363px;
+    padding: 0 8px;
+    margin-bottom: 54px;
+
+    /* slick-prev */
+    .slick-arrow {
+        position: absolute;
+        top: 50%;
+        width: 13.64px;
+        height: 29.47px;
+        transform: translateY(-50%);
+        border: none;
+        background-color: transparent;
+        transition: 300ms;
+    }
+
+    &-title {
+        width: 100%;
+        margin-bottom: 20px;
+        padding: 0 8px;
+        font-size: 14px;
+        text-align: center;
+        font-weight: 400;
+        font-family: $font-family-200;
+        color: $clr-common-black;
+    }
+
+    .shelf-item {
+        .product-item-container {
+            margin: 0 8px;
+        }
+
+        .product-item {
+            &-figure {
+                width: 100%;
+                margin-bottom: 20px;
+                img {
+                    max-width: 100%;
+                    height: auto;
+                }
+            }
+
+            &-name {
+                min-height: 36px;
+                text-align: center;
+                font-weight: 400;
+                font-family: $font-family-100;
+                font-size: 13px;
+                text-overflow: ellipsis;
+                line-height: 17.7px;
+            }
+
+            &-types {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-wrap: wrap;
+                gap: 5px;
+                min-height: 68px;
+            }
+
+            &-link {
+                @include btn-primary-blue-white();
+
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                padding: 12px 0;
+                letter-spacing: 5%;
+                border-radius: 8px;
+                font-weight: 700;
+                font-size: 13px;
+                line-height: 17.7px;
+                font-family: $font-family-100;
+                color: $clr-common-white;
+            }
+        }
+
+        .product-type-container {
+            background-color: $clr-primary-blue-500;
+            border-radius: 8px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .type-name {
+                font-weight: 700;
+                font-size: 13px;
+                padding: 5px;
+                line-height: 17.7px;
+                letter-spacing: 5%;
+                font-family: $font-family-100;
+                color: $clr-common-white;
+            }
+        }
+    }
+
+    @media screen and (min-width: 600px) {
+        &-title {
+            font-size: 24px;
+            line-height: 38px;
+        }
+    }
+
+    @media screen and (min-width: 1025px) {
+        width: fluid(1034px, 1280px);
+        margin: 43.42px auto 56px;
+        padding: 0;
+
+        &-title {
+            padding: 0;
+        }
+    }
+}
diff --git a/checkout/src/arquivos/sass/utils/_mixin.scss b/checkout/src/arquivos/sass/utils/_mixin.scss
index 8d969d6..9185fe8 100644
--- a/checkout/src/arquivos/sass/utils/_mixin.scss
+++ b/checkout/src/arquivos/sass/utils/_mixin.scss
@@ -1,183 +1,207 @@
+@mixin btn-primary-blue-black() {
+    border: none;
+    color: $clr-common-black;
+    background: $clr-primary-blue-500;
+    text-transform: uppercase;
+}
+
+@mixin btn-primary-blue-white() {
+    border: none;
+    color: $clr-common-white;
+    background: $clr-primary-blue-500;
+    text-transform: uppercase;
+}
+
 /**
  * @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss)
  */
 @mixin push--auto {
-	margin: {
-		left: auto;
-		right: auto;
-	}
+    margin: {
+        left: auto;
+        right: auto;
+    }
 }
-@mixin pseudo($display: block, $pos: absolute, $content: ''){
-	content: $content;
-	display: $display;
-	position: $pos;
+@mixin pseudo($display: block, $pos: absolute, $content: "") {
+    content: $content;
+    display: $display;
+    position: $pos;
 }
 
-
-@mixin position($top: false,$right: false, $bottom:false, $left: false){
-	@if( $top ){
-		top:$top;
-	}
-	@if( $right ){
-		right:$right;
-	}
-	@if( $left ){
-		left:$left;
-	}
-	@if( $bottom ){
-		bottom:$bottom;
-	}
+@mixin position($top: false, $right: false, $bottom: false, $left: false) {
+    @if ($top) {
+        top: $top;
+    }
+    @if ($right) {
+        right: $right;
+    }
+    @if ($left) {
+        left: $left;
+    }
+    @if ($bottom) {
+        bottom: $bottom;
+    }
 }
 
-@mixin responsive-ratio($x,$y, $pseudo: false) {
-	$padding: unquote( ( $y / $x ) * 100 + '%' );
-	@if $pseudo {
-		&:before {
-			@include pseudo($pos: relative);
-			width: 100%;
-			padding-top: $padding;
-		}
-	} @else {
-		padding-top: $padding;
-	}
+@mixin responsive-ratio($x, $y, $pseudo: false) {
+    $padding: unquote(($y / $x) * 100 + "%");
+    @if $pseudo {
+        &:before {
+            @include pseudo($pos: relative);
+            width: 100%;
+            padding-top: $padding;
+        }
+    } @else {
+        padding-top: $padding;
+    }
 }
 
-@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
-	@include pseudo($pos: $position);
-	width: 0;
-	height: 0;
-	@if $round {
-		border-radius: 3px;
-	}
-	@if $direction == down {
-		border-left: $size solid transparent;
-		border-right: $size solid transparent;
-		border-top: $size solid $color;
-		margin-top: 0 - round( $size / 2.5 );
-	} @else if $direction == up {
-		border-left: $size solid transparent;
-		border-right: $size solid transparent;
-		border-bottom: $size solid $color;
-		margin-bottom: 0 - round( $size / 2.5 );
-	} @else if $direction == right {
-		border-top: $size solid transparent;
-		border-bottom: $size solid transparent;
-		border-left: $size solid $color;
-		margin-right: -$size;
-	} @else if  $direction == left {
-		border-top: $size solid transparent;
-		border-bottom: $size solid transparent;
-		border-right: $size solid $color;
-		margin-left: -$size;
-	}
+@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false) {
+    @include pseudo($pos: $position);
+    width: 0;
+    height: 0;
+    @if $round {
+        border-radius: 3px;
+    }
+    @if $direction == down {
+        border-left: $size solid transparent;
+        border-right: $size solid transparent;
+        border-top: $size solid $color;
+        margin-top: 0 - round($size / 2.5);
+    } @else if $direction == up {
+        border-left: $size solid transparent;
+        border-right: $size solid transparent;
+        border-bottom: $size solid $color;
+        margin-bottom: 0 - round($size / 2.5);
+    } @else if $direction == right {
+        border-top: $size solid transparent;
+        border-bottom: $size solid transparent;
+        border-left: $size solid $color;
+        margin-right: -$size;
+    } @else if $direction == left {
+        border-top: $size solid transparent;
+        border-bottom: $size solid transparent;
+        border-right: $size solid $color;
+        margin-left: -$size;
+    }
 }
 
 @mixin input-placeholder {
-	&.placeholder { @content; }
-	&:-moz-placeholder { @content; }
-	&::-moz-placeholder { @content; }
-	&:-ms-input-placeholder { @content; }
-	&::-webkit-input-placeholder { @content; }
+    &.placeholder {
+        @content;
+    }
+    &:-moz-placeholder {
+        @content;
+    }
+    &::-moz-placeholder {
+        @content;
+    }
+    &:-ms-input-placeholder {
+        @content;
+    }
+    &::-webkit-input-placeholder {
+        @content;
+    }
 }
 
 @mixin hardware($backface: true, $perspective: 1000) {
-	@if $backface {
-		backface-visibility: hidden;
-	}
-	perspective: $perspective;
+    @if $backface {
+        backface-visibility: hidden;
+    }
+    perspective: $perspective;
 }
 
 @mixin truncate($truncation-boundary) {
-	max-width: $truncation-boundary;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+    max-width: $truncation-boundary;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 @mixin appearance($val: none) {
-	-webkit-appearance: $val;
-	-moz-appearance: $val;
-	appearance: $val;
+    -webkit-appearance: $val;
+    -moz-appearance: $val;
+    appearance: $val;
 }
 
-
-@mixin separador($cor,$p-right: 5px) {
-	position: relative;
-	padding-right: $p-right;
-	display: inline-block;
-	&:after{
-		content:' ';
-		display: block;
-		width: 1px;
-		height: 100%;
-		position: absolute;
-		top: 50%;
-		right: 0;
-		transform: translateY(-50%);
-		background-color: $cor;
-	}
-	&:last-child:after{
-		display: none;
-	}
+@mixin separador($cor, $p-right: 5px) {
+    position: relative;
+    padding-right: $p-right;
+    display: inline-block;
+    &:after {
+        content: " ";
+        display: block;
+        width: 1px;
+        height: 100%;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        background-color: $cor;
+    }
+    &:last-child:after {
+        display: none;
+    }
 }
 
 @mixin mq($width, $type: min) {
-	@if map_has_key($grid-breakpoints, $width) {
-		$width: map_get($grid-breakpoints, $width);
-		@if $type == max {
-			$width: $width - 1px;
-		}
-		@media only screen and (#{$type}-width: $width) {
-			@content;
-		}
-	}
+    @if map_has_key($grid-breakpoints, $width) {
+        $width: map_get($grid-breakpoints, $width);
+        @if $type == max {
+            $width: $width - 1px;
+        }
+        @media only screen and (#{$type}-width: $width) {
+            @content;
+        }
+    }
 }
 
 @mixin mq_range($min, $max) {
-	@if (map_has_key($grid-breakpoints, $min) and map_has_key($grid-breakpoints, $max)) {
-
-		$width_max: map_get($grid-breakpoints, $max);
-		$width_min: map_get($grid-breakpoints, $min);
-		$width_max: $width_max - 1px;
-		@media only screen and (min-width: $width_min) and (max-width:$width_max) {
-			@content;
-		}
-	}
+    @if (map_has_key($grid-breakpoints, $min) and map_has_key($grid-breakpoints, $max)) {
+        $width_max: map_get($grid-breakpoints, $max);
+        $width_min: map_get($grid-breakpoints, $min);
+        $width_max: $width_max - 1px;
+        @media only screen and (min-width: $width_min) and (max-width: $width_max) {
+            @content;
+        }
+    }
 }
 
-@mixin z-index($nome:'',$soma:0){
-	@if map_has_key($z-index, $nome) {
-		z-index: (map_get($z-index,$nome )+$soma) ;
-	}
+@mixin z-index($nome: "", $soma: 0) {
+    @if map_has_key($z-index, $nome) {
+        z-index: (map_get($z-index, $nome) + $soma);
+    }
 }
 
-@mixin scrollbar($width:8px,$bg-color:#eee, $trak-color:#aaa,$trak-color-hover:#999,$border-radius:0 ){
-	&::-webkit-scrollbar {
-		width: $width;
-	}
+@mixin scrollbar(
+    $width: 8px,
+    $bg-color: #eee,
+    $trak-color: #aaa,
+    $trak-color-hover: #999,
+    $border-radius: 0
+) {
+    &::-webkit-scrollbar {
+        width: $width;
+    }
 
-	&::-webkit-scrollbar-track {
-		background-color: $bg-color;
-		border-radius: $border-radius;
-	}
+    &::-webkit-scrollbar-track {
+        background-color: $bg-color;
+        border-radius: $border-radius;
+    }
 
-	&::-webkit-scrollbar-thumb {
-		background-color: $trak-color;
-		border-radius: $border-radius;
-		&:hover {
-			background: $trak-color-hover;
-		}
-	}
+    &::-webkit-scrollbar-thumb {
+        background-color: $trak-color;
+        border-radius: $border-radius;
+        &:hover {
+            background: $trak-color-hover;
+        }
+    }
 }
 
 @function map-get-next($map, $key, $fallback: false, $return: value) {
-
     // Check if map is valid
     @if type-of($map) == map {
-
         // Check if key exists in map
         @if map-has-key($map, $key) {
-
             // Init index counter variable
             $i: 0;
 

From abb11283f5d5fe81f226f181e4a6d6ee9600b8ce Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Mon, 19 Dec 2022 16:18:23 -0300
Subject: [PATCH 18/27] feat(footer/header): created styles for large devices
 and refactor code, lint-code

---
 .../src/arquivos/sass/partials/_footer.scss   |  87 +++---
 .../src/arquivos/sass/partials/_header.scss   | 259 ++++++++++++------
 2 files changed, 217 insertions(+), 129 deletions(-)

diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 4aa2eec..9a5717d 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,23 +1,20 @@
+/* prettier-ignore*/
 .footerCheckout {
     color: $clr-gray-400;
 
     &__wrapper {
         border-top: 1px solid $clr-common-black;
         padding: 16px 25px 18.88px 8px;
-
-        @include mq("md", min) {
-            padding: 16px 0;
-        }
     }
 
     &__stamps {
         order: 0;
-        margin: 0 0 16px;
+            margin: 0 0 16px;
     }
 
     &__address {
         order: 1;
-        margin: 0 0 16px;
+            margin: 0 0 16px;
     }
 
     &__developedBy {
@@ -25,11 +22,12 @@
     }
 }
 
+/* prettier-ignore*/
 .footerCheckout {
     .container {
-        width: 100%;
         display: flex;
         flex-direction: column;
+            width: 100%;
 
         &::before,
         &::after {
@@ -39,12 +37,29 @@
 }
 
 .footerCheckout {
-    @include mq("md", min) {
+    &__developedBy a,
+    &__developedBy,
+    &__wrapper,
+    &__stamps {
+        display: flex;
+        align-items: center;
+    }
+
+    &__wrapper {
+        justify-content: space-between;
+    }
+}
+
+/* prettier-ignore*/
+.footerCheckout {
+    @include mq("md") {
         &__stamps {
             width: 34.510595358%;
         }
 
         &__wrapper {
+            padding: 16px 0;
+
             .container {
                 width: 94.9734%;
                 margin: 0 auto;
@@ -52,22 +67,26 @@
         }
     }
 
-    @include mq("lg", min) {
+    @include mq("lg") {
         .container {
             align-items: center;
             justify-content: space-between;
             flex-direction: row;
         }
 
+        &__wrapper {
+            width: 100%;
+        }
+
         &__address {
             order: 0;
-            margin: 0;
+                margin: 0;
         }
 
         &__stamps {
-            width: 33.223684211%;
             order: 1;
-            margin: 0;
+                width: 33.223684211%;
+                margin: 0;
         }
 
         &__developedBy {
@@ -75,10 +94,10 @@
         }
     }
 
-    @include mq("xxl", min) {
+    @include mq("xxl") {
         &__address {
             span {
-                font-size: 200%;
+                font-size: 20px;
             }
         }
 
@@ -94,29 +113,13 @@
     }
 }
 
-.footerCheckout {
-    &__developedBy a,
-    &__developedBy,
-    &__wrapper,
-    &__stamps {
-        display: flex;
-        align-items: center;
-    }
-    &__wrapper {
-        justify-content: space-between;
-
-        @include mq("lg", min) {
-            width: 100%;
-        }
-    }
-}
-
+/* prettier-ignore*/
 .footerCheckout {
     &__creditList {
-        width: 100%;
         display: flex;
         align-items: center;
         gap: 4px;
+            width: 100%;
     }
 
     &__creditItem,
@@ -130,30 +133,32 @@
     }
 }
 
+/* prettier-ignore*/
 .footerCheckout {
     &__address {
         font-style: normal;
         font-weight: normal;
         font-size: 10px;
         line-height: 12px;
-        font-family: $font-family-100;
         text-transform: capitalize;
-        color: $clr-gray-400;
+            color: $clr-gray-400;
     }
 }
 
+/* prettier-ignore*/
 .footerCheckout {
     &__stamps {
         &__divider {
-            background-color: $clr-gray-300;
             display: inline-block;
-            height: 24px;
-            margin: 0 8px;
-            width: 1px;
+                width: 1px;
+                height: 24px;
+                margin: 0 8px;
+                    background-color: $clr-gray-300;
         }
     }
 }
 
+/* prettier-ignore*/
 .footerCheckout {
     &__developedBy {
         margin: 0;
@@ -166,10 +171,10 @@
             font-style: normal;
             font-weight: normal;
             font-size: 10px;
-            font-family: $font-family-100;
             line-height: 12px;
+            font-family: $font-family-100;
             text-decoration: none;
-            color: $clr-gray-400;
+                color: $clr-gray-400;
 
             span {
                 margin-right: 8px;
@@ -182,5 +187,3 @@
         }
     }
 }
-
-
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index a211e21..a8523d5 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -23,6 +23,37 @@ body :where(ul, li, ol) {
     @return unquote($width);
 }
 
+@mixin text-size($size: 100, $fontFamily: 100, $lineHeight: 14px) {
+    font-size: var(--text-size-#{$size});
+    font-family: var(--font-family-#{$fontFamily});
+    line-height: $lineHeight;
+}
+
+@mixin text-uppercase($size: 100, $fontFamily: 100, $lineHeight: 14px) {
+    @include text-size($size, $fontFamily, $lineHeight);
+    text-transform: uppercase;
+}
+
+:root {
+    --text-size-100: 12px;
+    --text-size-200: 14px;
+    --text-size-300: 18px;
+    --text-size-400: 24px;
+
+    --font-family-100: #{$font-family-100};
+    --font-family-200: #{$font-family-200};
+}
+
+@media screen and (min-width: 2500px) {
+    :root {
+        --text-size-100: 24px;
+        --text-size-200: 28px;
+        --text-size-300: 36px;
+        --text-size-400: 48px;
+    }
+}
+
+/* prettier-ignore*/
 .headerCheckout {
     padding: 16px;
     border-bottom: 1px solid $clr-common-black;
@@ -30,6 +61,7 @@ body :where(ul, li, ol) {
     .container {
         width: 100%;
         height: auto;
+        margin: 0;
     }
 
     &__wrapper,
@@ -39,49 +71,53 @@ body :where(ul, li, ol) {
     }
 
     &__wrapper {
-        width: 100%;
         justify-content: space-between;
+            width: 100%;
     }
 
     &__safeBuy {
-        width: fluid(119px, 343px);
-        max-width: 119px;
         gap: 8px;
-
-        span {
-            font: normal normal 12px / 14px $font-family-100;
-            text-transform: uppercase;
-            color: $clr-gray-500;
-        }
-
-        img {
-            width: 12px;
-            height: 13px;
-        }
-    }
-
-    &__logo {
-        width: fluid(155.58px, 343px);
-        max-width: 155.58px;
-        height: auto;
-
-        img {
             width: 100%;
-            height: 100%;
-        }
+            max-width: 119px;
+    }
+}
+
+.headerCheckout__safeBuy {
+    span {
+        @include text-uppercase("100", "100", 14px);
+        font-style: normal;
+        font-weight: normal;
     }
 
+    img {
+        width: 12px;
+        height: 13px;
+    }
+}
+
+.headerCheckout__logo {
+    width: fluid(155.58px, 343px);
+    height: auto;
+    max-width: 155.58px;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.headerCheckout {
     .progress-bar {
         display: none;
     }
 }
 
 .headerCheckout {
-    @media screen and (min-width: 1025px) {
+    @include mq("lg") {
         padding: 29px 0;
 
         &__wrapper {
-            width: fluid(992px, 1024px);
+            width: fluid(1018px, 1280px);
             margin: 0 auto;
         }
 
@@ -90,13 +126,7 @@ body :where(ul, li, ol) {
         }
     }
 
-    @media screen and (min-width: 1025px) {
-        &__wrapper {
-            width: fluid(1018px, 1280px);
-        }
-    }
-
-    @media screen and (min-width: 2500px) {
+    @include mq("xxl") {
         $width-container: 1988.28px;
 
         &__wrapper {
@@ -114,7 +144,7 @@ body :where(ul, li, ol) {
             max-width: none;
 
             span {
-                font: normal normal 24px / 32.68px $font-family-100;
+                @include text-size("100", "100", 32.68px);
             }
 
             img {
@@ -125,92 +155,147 @@ body :where(ul, li, ol) {
     }
 }
 
+/* prettier-ignore*/
 .headerCheckout {
     .progress-bar {
         width: 439px;
+    }
 
-        .progress-list {
+    .progress-list,
+    .progress-item,
+    .progress-container,
+    .progress-content {
+        display: flex;
+        align-items: center;
+    }
+
+    .progress-list {
+        justify-content: space-between;
             width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
             margin: 0;
-        }
+    }
 
-        .progress-item {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            font-size: 12px;
-        }
+    .progress-item,
+    .progress-container,
+    .progress-content {
+        flex-direction: column;
+        justify-content: center;
+    }
 
-        .progress-content,
-        .progress-container {
-            display: flex;
-            align-items: center;
-            flex-direction: column;
-        }
-
-        .progress-container {
-            position: relative;
-            justify-content: center;
+    .progress-container {
+        position: relative;
             width: 100%;
-        }
+    }
 
-        .progress-item {
-            &--left,
-            &--right {
-                width: 40%;
+    .progress-content {
+        gap: 16px;
+    }
 
-                .progress-line {
-                    position: absolute;
-                    bottom: 6px;
+    .progress-item {
+        @include text-size("100", "200", 14.04px);
+
+        &--left,
+        &--right {
+            width: 40%;
+
+            .progress-line {
+                position: absolute;
+                bottom: 6px;
                     width: 100%;
                     height: 1px;
                     border-bottom: 1px solid #000;
+            }
+        }
+
+        &--left {
+            .progress-container {
+                align-items: flex-start;
+            }
+
+            .progress-line {
+                left: 75%;
+                transform: translateX(-50%);
+            }
+        }
+
+        &--center {
+            width: 90px;
+        }
+
+        &--right {
+            .progress-container {
+                align-items: flex-end;
+            }
+
+            .progress-line {
+                right: 72%;
+                transform: translateX(50%);
+            }
+        }
+    }
+
+    .progress-bullet {
+        $square-size: 12px;
+
+        position: relative;
+        z-index: 10;
+            width: $square-size;
+            height: $square-size;
+            border: 1px solid $clr-common-black;
+            border-radius: 100%;
+                background-color: $clr-common-white;
+
+        &.active {
+            background-color: $clr-common-black;
+        }
+    }
+}
+
+.headerCheckout {
+    @include mq("xxl") {
+        .progress-bar {
+            width: 1078.86px;
+        }
+
+        .progress-list {
+            justify-content: initial;
+        }
+
+        .progress-item {
+            @include text-size("100", "200", 14.04px);
+
+            &--left,
+            &--right {
+                width: fluid(444px, 1078.86px);
+
+                .progress-line {
+                    bottom: 12px;
                 }
             }
 
             &--left {
-                .progress-container {
-                    align-items: flex-start;
-                }
-
                 .progress-line {
-                    left: 75%;
-                    transform: translateX(-50%);
+                    left: 67%;
                 }
             }
 
             &--center {
-                width: 90px;
+                width: auto;
+                max-width: none;
             }
 
             &--right {
-                .progress-container {
-                    align-items: flex-end;
-                }
-
                 .progress-line {
-                    right: 72%;
-                    transform: translateX(50%);
+                    right: 67%;
                 }
             }
         }
 
         .progress-bullet {
-            width: 12px;
-            height: 12px;
-            background-color: $clr-common-white;
-            position: relative;
-            border: 1px solid $clr-common-black;
-            z-index: 10;
-            border-radius: 100%;
+            $square-size: 24px;
 
-            &.active {
-                background-color: $clr-common-black;
-            }
+            width: $square-size;
+            height: $square-size;
         }
     }
 }

From 8a9508b06b0d00ca70e8c00cfe7f66bb67f5a2ed Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 20 Dec 2022 01:41:29 -0300
Subject: [PATCH 19/27] feat(header): created styles for large devices

---
 .../src/arquivos/sass/partials/_header.scss   |  81 ++++-----
 .../arquivos/sass/partials/_prateleira.scss   | 167 ++++++++++--------
 checkout/src/arquivos/sass/utils/_mixin.scss  |  16 ++
 .../src/arquivos/sass/utils/_variaveis.scss   |  38 +++-
 4 files changed, 181 insertions(+), 121 deletions(-)

diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index a8523d5..d6c98f3 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -23,37 +23,6 @@ body :where(ul, li, ol) {
     @return unquote($width);
 }
 
-@mixin text-size($size: 100, $fontFamily: 100, $lineHeight: 14px) {
-    font-size: var(--text-size-#{$size});
-    font-family: var(--font-family-#{$fontFamily});
-    line-height: $lineHeight;
-}
-
-@mixin text-uppercase($size: 100, $fontFamily: 100, $lineHeight: 14px) {
-    @include text-size($size, $fontFamily, $lineHeight);
-    text-transform: uppercase;
-}
-
-:root {
-    --text-size-100: 12px;
-    --text-size-200: 14px;
-    --text-size-300: 18px;
-    --text-size-400: 24px;
-
-    --font-family-100: #{$font-family-100};
-    --font-family-200: #{$font-family-200};
-}
-
-@media screen and (min-width: 2500px) {
-    :root {
-        --text-size-100: 24px;
-        --text-size-200: 28px;
-        --text-size-300: 36px;
-        --text-size-400: 48px;
-    }
-}
-
-/* prettier-ignore*/
 .headerCheckout {
     padding: 16px;
     border-bottom: 1px solid $clr-common-black;
@@ -72,21 +41,25 @@ body :where(ul, li, ol) {
 
     &__wrapper {
         justify-content: space-between;
-            width: 100%;
+        width: 100%;
     }
 
     &__safeBuy {
         gap: 8px;
-            width: 100%;
-            max-width: 119px;
+
+        width: 100%;
+        max-width: 119px;
     }
 }
 
 .headerCheckout__safeBuy {
     span {
-        @include text-uppercase("100", "100", 14px);
+        @include text-size("smaller-200");
+        @include text-height("smaller", 200);
+
         font-style: normal;
         font-weight: normal;
+        text-transform: uppercase;
     }
 
     img {
@@ -144,7 +117,8 @@ body :where(ul, li, ol) {
             max-width: none;
 
             span {
-                @include text-size("100", "100", 32.68px);
+                @include text-size("md-200");
+                @include text-height("md", 300);
             }
 
             img {
@@ -155,7 +129,6 @@ body :where(ul, li, ol) {
     }
 }
 
-/* prettier-ignore*/
 .headerCheckout {
     .progress-bar {
         width: 439px;
@@ -171,8 +144,8 @@ body :where(ul, li, ol) {
 
     .progress-list {
         justify-content: space-between;
-            width: 100%;
-            margin: 0;
+        width: 100%;
+        margin: 0;
     }
 
     .progress-item,
@@ -184,7 +157,8 @@ body :where(ul, li, ol) {
 
     .progress-container {
         position: relative;
-            width: 100%;
+
+        width: 100%;
     }
 
     .progress-content {
@@ -192,7 +166,10 @@ body :where(ul, li, ol) {
     }
 
     .progress-item {
-        @include text-size("100", "200", 14.04px);
+        @include text-size("smaller-200");
+        @include text-height("smaller", 100);
+
+        font-family: $font-family-200;
 
         &--left,
         &--right {
@@ -201,9 +178,10 @@ body :where(ul, li, ol) {
             .progress-line {
                 position: absolute;
                 bottom: 6px;
-                    width: 100%;
-                    height: 1px;
-                    border-bottom: 1px solid #000;
+
+                width: 100%;
+                height: 1px;
+                border-bottom: 1px solid #000;
             }
         }
 
@@ -239,11 +217,13 @@ body :where(ul, li, ol) {
 
         position: relative;
         z-index: 10;
-            width: $square-size;
-            height: $square-size;
-            border: 1px solid $clr-common-black;
-            border-radius: 100%;
-                background-color: $clr-common-white;
+
+        width: $square-size;
+        height: $square-size;
+        border: 1px solid $clr-common-black;
+        border-radius: 100%;
+
+        background-color: $clr-common-white;
 
         &.active {
             background-color: $clr-common-black;
@@ -262,7 +242,8 @@ body :where(ul, li, ol) {
         }
 
         .progress-item {
-            @include text-size("100", "200", 14.04px);
+            @include text-size("md-200");
+            @include text-height("md", 200);
 
             &--left,
             &--right {
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index b544915..731e979 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1,110 +1,128 @@
 /* _prateleira.scss */
+
+/* prettier-ignore */
 .footerCheckout__prateleira {
     width: 100%;
-    margin-top: 43.42px;
-    min-height: 363px;
     padding: 0 8px;
-    margin-bottom: 54px;
+    margin: 43.42px 0 54px;
 
-    /* slick-prev */
     .slick-arrow {
         position: absolute;
         top: 50%;
+        transform: translateY(-50%);
+
         width: 13.64px;
         height: 29.47px;
-        transform: translateY(-50%);
+
         border: none;
         background-color: transparent;
-        transition: 300ms;
     }
+}
 
+.footerCheckout__prateleira {
     &-title {
         width: 100%;
-        margin-bottom: 20px;
         padding: 0 8px;
+        margin-bottom: 20px;
+
         font-size: 14px;
-        text-align: center;
         font-weight: 400;
         font-family: $font-family-200;
+        text-align: center;
+
         color: $clr-common-black;
     }
+}
 
-    .shelf-item {
-        .product-item-container {
-            margin: 0 8px;
-        }
+.footerCheckout__prateleira {
+    .product-item-container {
+        margin: 0 8px;
+    }
 
-        .product-item {
-            &-figure {
-                width: 100%;
-                margin-bottom: 20px;
-                img {
-                    max-width: 100%;
-                    height: auto;
-                }
-            }
+    .product-item {
+        &-figure {
+            width: 100%;
+            margin-bottom: 20px;
 
-            &-name {
-                min-height: 36px;
-                text-align: center;
-                font-weight: 400;
-                font-family: $font-family-100;
-                font-size: 13px;
-                text-overflow: ellipsis;
-                line-height: 17.7px;
-            }
-
-            &-types {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex-wrap: wrap;
-                gap: 5px;
-                min-height: 68px;
-            }
-
-            &-link {
-                @include btn-primary-blue-white();
-
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                padding: 12px 0;
-                letter-spacing: 5%;
-                border-radius: 8px;
-                font-weight: 700;
-                font-size: 13px;
-                line-height: 17.7px;
-                font-family: $font-family-100;
-                color: $clr-common-white;
+            img {
+                max-width: 100%;
+                height: auto;
             }
         }
 
-        .product-type-container {
-            background-color: $clr-primary-blue-500;
-            border-radius: 8px;
-            height: 28px;
+        &-name {
+            min-height: 36px;
+
+            font-weight: 400;
+            font-size: 13px;
+            line-height: 17.7px;
+            font-family: $font-family-100;
+            text-overflow: ellipsis;
+            text-align: center;
+        }
+
+        &-types {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 5px;
+
+            min-height: 68px;
+        }
+
+        &-link,
+        .type-name {
+            @include text-size("xxs");
+
+            font-family: $font-family-100;
+            line-height: 17.7px;
+        }
+
+        &-link {
+            @include btn-primary-blue-white();
+
             display: flex;
             align-items: center;
             justify-content: center;
 
-            .type-name {
-                font-weight: 700;
-                font-size: 13px;
-                padding: 5px;
-                line-height: 17.7px;
-                letter-spacing: 5%;
-                font-family: $font-family-100;
-                color: $clr-common-white;
-            }
+            width: 100%;
+            padding: 12px 0;
+            border-radius: 8px;
+
+            font-weight: 700;
+            letter-spacing: 5;
+
+            color: $clr-common-white;
         }
     }
 
+    .product-type-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        height: 28px;
+        border-radius: 8px;
+
+        background-color: $clr-primary-blue-500;
+    }
+
+    .type-name {
+        padding: 5px;
+
+        font-weight: 700;
+        letter-spacing: 5;
+        font-family: $font-family-100;
+
+        color: $clr-common-white;
+    }
+
     @media screen and (min-width: 600px) {
         &-title {
-            font-size: 24px;
-            line-height: 38px;
+            @include text-size("md");
+
+            line-height: 36px;
         }
     }
 
@@ -112,9 +130,18 @@
         width: fluid(1034px, 1280px);
         margin: 43.42px auto 56px;
         padding: 0;
+    }
 
+    @media screen and (min-width: 2500px) {
         &-title {
+            @include text-size("xxl");
+
+            line-height: 76px;
             padding: 0;
         }
+
+        .product-item-container {
+            margin: 0 9.965px;
+        }
     }
 }
diff --git a/checkout/src/arquivos/sass/utils/_mixin.scss b/checkout/src/arquivos/sass/utils/_mixin.scss
index 9185fe8..265a2bd 100644
--- a/checkout/src/arquivos/sass/utils/_mixin.scss
+++ b/checkout/src/arquivos/sass/utils/_mixin.scss
@@ -12,6 +12,22 @@
     text-transform: uppercase;
 }
 
+@mixin text-size($size) {
+    @if map_has_key($text-sizes-100, $size) {
+        $size: map_get($text-sizes-100, $size);
+
+        font-size: $size;
+    }
+}
+
+@mixin text-height($type, $height) {
+    @if map_has_key($text-height, $type + "-" + $height) {
+        $height: map-get($text-height, $type + "-" + $height);
+
+        line-height: $height;
+    }
+}
+
 /**
  * @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss)
  */
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index dfa332c..07f3aa3 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -23,10 +23,46 @@ $clr-green-500: #4caf50;
 
 $clr-primary-blue-500: #00c8ff;
 
+$text-sizes-100: (
+    "smaller-100": 10px,
+    "smaller-200": 12px,
+    "xxs": 13px,
+    "xs": 14px,
+    "sm": 18px,
+    "md-100": 20px,
+    "md-200": 24px,
+    "lg": 28px,
+    "xl": 36px,
+    "xxl": 48px,
+) !default;
+
+$text-height: (
+    "smaller-100": 14.04px,
+    "smaller-200": 16.34px,
+    "smaller-300": 16.38px,
+    "xxs-100": 17.7px,
+    "xxs-200": 18.72px,
+    "xxs-300": 19.07px,
+    "xs-100": 24px,
+    "xs-200": 24.51px,
+    "xs-300": 27.24px,
+    "md-100": 28px,
+    "md-200": 28.08px,
+    "md-300": 32.68px,
+    "lg-100": 32.76px,
+    "lg-200": 35.41px,
+    "lg-300": 37.44px,
+    "xl-100": 38px,
+    "xl-200": 38.13px,
+    "xl-300": 46.8px,
+    "xxl-100": 49.03px,
+    "xxl-200": 65.37px,
+);
+
 /* Grid breakpoints */
 $grid-breakpoints: (
     xxs: 0,
-    xs: 280,
+    xs: 280px,
     sm: 375px,
     md: 600px,
     lg: 1025px,

From 10a464b37ac2db85e355811edaff39227a51c719 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 20 Dec 2022 02:27:42 -0300
Subject: [PATCH 20/27] feat(checkout-empty): created styles for large devices

---
 .../sass/checkout/_checkout-vazio.scss        | 127 +++++++++++-------
 .../src/arquivos/sass/partials/_footer.scss   |  22 +--
 .../arquivos/sass/partials/_prateleira.scss   |  26 ++--
 .../src/arquivos/sass/utils/_variaveis.scss   |   8 +-
 4 files changed, 111 insertions(+), 72 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 9046b23..bbcb89f 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -2,23 +2,27 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
     border: 1px solid $clr-common-black;
     border-radius: 0;
+
     font-weight: 400;
     font-family: $font-family-200;
+
     color: $clr-common-black;
     background-color: $clr-common-white;
 }
 
 .container-main.container-cart {
-    width: 100%;
-    height: 100%;
-    padding: 0 16px !important;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 
+    width: 100%;
+    height: 100%;
+    padding: 0 16px !important;
+
     #cart-title {
         display: none !important;
     }
@@ -39,7 +43,7 @@
         display: none;
     }
 
-    @media screen and (min-width: 1025px) {
+    @include mq("lg") {
         width: fluid(400px, 1280px);
         padding: 0 !important;
         max-width: none;
@@ -50,7 +54,7 @@
         }
     }
 
-    @media screen and (min-width: 2500px) {
+    @include mq("xxl") {
         width: fluid(659px, 2500px);
     }
 }
@@ -61,55 +65,88 @@
     }
 }
 
-.empty-cart {
-    font-family: $font-family-100;
-    &-content {
-        color: $clr-gray-600;
-        text-align: center;
+.container-main.container-cart {
+    .empty-cart {
+        font-family: $font-family-100;
+        &-content {
+            color: $clr-gray-600;
+            text-align: center;
 
-        .empty-cart-title {
-            font-size: 0px;
+            .empty-cart-title {
+                font-size: 0px;
 
-            &::before {
-                content: "Seu carrinho está vazio.";
-                text-align: center;
-                font-size: 18px;
-                text-transform: uppercase;
+                &::before {
+                    @include text-size("xxs");
+                    @include text-height("xxs", 100);
+
+                    content: "Seu carrinho está vazio.";
+                    text-align: center;
+                    text-transform: uppercase;
+                }
             }
         }
 
-        @media screen and (min-width: 1024px) {
-            padding: 0;
+        &-links {
+            .link-choose-products {
+                @include btn-secondary();
+
+                transition: ease-in 0.22s all;
+                font-size: 0px;
+                padding: 16px 0;
+
+                &::before {
+                    @include text-size("xs");
+                    @include text-height("smaller", 200);
+
+                    content: "Continuar Comprando";
+
+                    font-style: normal;
+                    letter-spacing: 0.05em;
+                    text-transform: uppercase;
+                }
+
+                &:hover {
+                    background: lighten($clr-gray-600, 5);
+                }
+            }
         }
 
-        @media screen and (min-width: 1280px) {
-            .empty-cart-title {
-                &::before {
-                    font-size: 24px;
+        &-content {
+            @include mq("lg") {
+                padding: 0;
+            }
+
+            @include mq("xl") {
+                .empty-cart-title {
+                    &::before {
+                        @include text-size("md-200");
+                        @include text-height("md", 300);
+                    }
+                }
+            }
+        }
+
+        @include mq("xxl") {
+            &-content {
+                .empty-cart-title {
+                    &::before {
+                        @include text-size("xxl");
+                        @include text-height("xxl", 200);
+                    }
+                }
+            }
+
+            &-links {
+                .link-choose-products {
+                    width: fluid(638.67px, 659px);
+                    max-width: none;
+
+                    &::before {
+                        @include text-size("lg");
+                        @include text-height("lg", 100);
+                    }
                 }
             }
         }
     }
-
-    &-links {
-        .link-choose-products {
-            @include btn-secondary();
-            transition: ease-in 0.22s all;
-            font-size: 0px;
-            padding: 16px 0;
-
-            &::before {
-                content: "Continuar Comprando";
-                font-size: 14px;
-                font-style: normal;
-                line-height: 16px;
-                letter-spacing: 0.05em;
-                text-transform: uppercase;
-            }
-
-            &:hover {
-                background: lighten($clr-gray-600, 5);
-            }
-        }
-    }
 }
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 9a5717d..2ad1852 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -107,7 +107,8 @@
 
         &__developedBy {
             span {
-                font-size: 180%;
+                @include text-size("sm");
+                @include text-height("xs",200)
             }
         }
     }
@@ -133,7 +134,6 @@
     }
 }
 
-/* prettier-ignore*/
 .footerCheckout {
     &__address {
         font-style: normal;
@@ -141,24 +141,25 @@
         font-size: 10px;
         line-height: 12px;
         text-transform: capitalize;
-            color: $clr-gray-400;
+
+        color: $clr-gray-400;
     }
 }
 
-/* prettier-ignore*/
 .footerCheckout {
     &__stamps {
         &__divider {
             display: inline-block;
-                width: 1px;
-                height: 24px;
-                margin: 0 8px;
-                    background-color: $clr-gray-300;
+
+            width: 1px;
+            height: 24px;
+            margin: 0 8px;
+
+            background-color: $clr-gray-300;
         }
     }
 }
 
-/* prettier-ignore*/
 .footerCheckout {
     &__developedBy {
         margin: 0;
@@ -174,7 +175,8 @@
             line-height: 12px;
             font-family: $font-family-100;
             text-decoration: none;
-                color: $clr-gray-400;
+
+            color: $clr-gray-400;
 
             span {
                 margin-right: 8px;
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 731e979..b7942b2 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -50,12 +50,19 @@
             }
         }
 
+        &-name,
+        &-link,
+        .type-name {
+            @include text-size("xxs");
+            @include text-height("xxs", 100);
+
+            font-family: $font-family-100;
+        }
+
         &-name {
             min-height: 36px;
 
             font-weight: 400;
-            font-size: 13px;
-            line-height: 17.7px;
             font-family: $font-family-100;
             text-overflow: ellipsis;
             text-align: center;
@@ -71,14 +78,6 @@
             min-height: 68px;
         }
 
-        &-link,
-        .type-name {
-            @include text-size("xxs");
-
-            font-family: $font-family-100;
-            line-height: 17.7px;
-        }
-
         &-link {
             @include btn-primary-blue-white();
 
@@ -120,9 +119,8 @@
 
     @media screen and (min-width: 600px) {
         &-title {
-            @include text-size("md");
-
-            line-height: 36px;
+            @include text-size("md-200");
+            @include text-height("xl", 100);
         }
     }
 
@@ -135,8 +133,8 @@
     @media screen and (min-width: 2500px) {
         &-title {
             @include text-size("xxl");
+            @include text-height("xxl", 300);
 
-            line-height: 76px;
             padding: 0;
         }
 
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 07f3aa3..06a3395 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -38,8 +38,9 @@ $text-sizes-100: (
 
 $text-height: (
     "smaller-100": 14.04px,
-    "smaller-200": 16.34px,
-    "smaller-300": 16.38px,
+    "smaller-200": 16px,
+    "smaller-300": 16.34px,
+    "smaller-400": 16.38px,
     "xxs-100": 17.7px,
     "xxs-200": 18.72px,
     "xxs-300": 19.07px,
@@ -57,7 +58,8 @@ $text-height: (
     "xl-300": 46.8px,
     "xxl-100": 49.03px,
     "xxl-200": 65.37px,
-);
+    "xxl-300": 76px,
+) !default;
 
 /* Grid breakpoints */
 $grid-breakpoints: (

From 6d65e5df9d9c7c5da9a653ed88eb95e55a3d918a Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 20 Dec 2022 02:31:33 -0300
Subject: [PATCH 21/27] fix(checkout-empty): resolved problem title in small
 devices

---
 checkout/src/arquivos/sass/checkout/_checkout-vazio.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index bbcb89f..a8674c9 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -76,8 +76,8 @@
                 font-size: 0px;
 
                 &::before {
-                    @include text-size("xxs");
-                    @include text-height("xxs", 100);
+                    @include text-size("sm");
+                    @include text-height("xs", 200);
 
                     content: "Seu carrinho está vazio.";
                     text-align: center;

From efb77b62b36d1727e278ef30c579fbc05ac025ce Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 20 Dec 2022 02:44:30 -0300
Subject: [PATCH 22/27] feat(slider-shelf): created styles for large devices
 and using mixin mq

---
 .../arquivos/sass/partials/_prateleira.scss   | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index b7942b2..89c4a11 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -38,7 +38,9 @@
     .product-item-container {
         margin: 0 8px;
     }
+}
 
+.footerCheckout__prateleira {
     .product-item {
         &-figure {
             width: 100%;
@@ -49,7 +51,11 @@
                 height: auto;
             }
         }
+    }
+}
 
+.footerCheckout__prateleira {
+    .product-item {
         &-name,
         &-link,
         .type-name {
@@ -58,7 +64,11 @@
 
             font-family: $font-family-100;
         }
+    }
+}
 
+.footerCheckout__prateleira {
+    .product-item {
         &-name {
             min-height: 36px;
 
@@ -77,7 +87,11 @@
 
             min-height: 68px;
         }
+    }
+}
 
+.footerCheckout__prateleira {
+    .product-item {
         &-link {
             @include btn-primary-blue-white();
 
@@ -116,21 +130,23 @@
 
         color: $clr-common-white;
     }
+}
 
-    @media screen and (min-width: 600px) {
+.footerCheckout__prateleira {
+    @include mq("md") {
         &-title {
             @include text-size("md-200");
             @include text-height("xl", 100);
         }
     }
 
-    @media screen and (min-width: 1025px) {
+    @include mq("lg") {
         width: fluid(1034px, 1280px);
         margin: 43.42px auto 56px;
         padding: 0;
     }
 
-    @media screen and (min-width: 2500px) {
+    @include mq("xxl") {
         &-title {
             @include text-size("xxl");
             @include text-height("xxl", 300);

From 5e5a9475c7f95b85d99c9f7b0adc1f2abc020e29 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 20 Dec 2022 02:51:27 -0300
Subject: [PATCH 23/27] fix(slider-shelf): resolved  styles for large devices
 is not working

---
 .../arquivos/sass/partials/_prateleira.scss   | 23 ++++++++++++++-----
 .../src/arquivos/sass/utils/_variaveis.scss   |  1 +
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 89c4a11..687fcf1 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -133,6 +133,12 @@
 }
 
 .footerCheckout__prateleira {
+    @include mq("lg") {
+        width: fluid(1034px, 1280px);
+        margin: 43.42px auto 56px;
+        padding: 0;
+    }
+
     @include mq("md") {
         &-title {
             @include text-size("md-200");
@@ -140,12 +146,6 @@
         }
     }
 
-    @include mq("lg") {
-        width: fluid(1034px, 1280px);
-        margin: 43.42px auto 56px;
-        padding: 0;
-    }
-
     @include mq("xxl") {
         &-title {
             @include text-size("xxl");
@@ -154,6 +154,17 @@
             padding: 0;
         }
 
+        .product-item {
+            &-name,
+            &-link,
+            .type-name {
+                @include text-size("md-300");
+                @include text-height("lg", 200);
+
+                font-family: $font-family-100;
+            }
+        }
+
         .product-item-container {
             margin: 0 9.965px;
         }
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 06a3395..806db6b 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -31,6 +31,7 @@ $text-sizes-100: (
     "sm": 18px,
     "md-100": 20px,
     "md-200": 24px,
+    "md-300": 26px,
     "lg": 28px,
     "xl": 36px,
     "xxl": 48px,

From b856181537b00315c5a1b5b1f0917cb92ee9cea5 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 20 Dec 2022 08:16:15 -0300
Subject: [PATCH 24/27] lint(footer): clear prettier ignore comments and
 separeted styles types

---
 checkout/src/arquivos/sass/partials/_footer.scss  | 15 ++++++++-------
 .../src/arquivos/sass/partials/_prateleira.scss   |  1 -
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 2ad1852..3eb12bf 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -50,7 +50,6 @@
     }
 }
 
-/* prettier-ignore*/
 .footerCheckout {
     @include mq("md") {
         &__stamps {
@@ -80,13 +79,15 @@
 
         &__address {
             order: 0;
-                margin: 0;
+
+            margin: 0;
         }
 
         &__stamps {
             order: 1;
-                width: 33.223684211%;
-                margin: 0;
+
+            width: 33.223684211%;
+            margin: 0;
         }
 
         &__developedBy {
@@ -108,19 +109,19 @@
         &__developedBy {
             span {
                 @include text-size("sm");
-                @include text-height("xs",200)
+                @include text-height("xs", 200);
             }
         }
     }
 }
 
-/* prettier-ignore*/
 .footerCheckout {
     &__creditList {
         display: flex;
         align-items: center;
         gap: 4px;
-            width: 100%;
+
+        width: 100%;
     }
 
     &__creditItem,
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 687fcf1..1725f99 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1,6 +1,5 @@
 /* _prateleira.scss */
 
-/* prettier-ignore */
 .footerCheckout__prateleira {
     width: 100%;
     padding: 0 8px;

From b5c9339e6cee44d9b957d8f03996556dd65cbfad Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Wed, 21 Dec 2022 11:08:17 -0300
Subject: [PATCH 25/27] feat(checkout-fill): created initial styles in cart
 more options for small devices

---
 .../sass/checkout/_checkout-autenticacao.scss |   4 +
 .../sass/checkout/_checkout-carrinho.scss     | 694 ++++++++++++++----
 .../sass/checkout/_checkout-vazio.scss        |  20 +-
 .../src/arquivos/sass/partials/_footer.scss   |   4 +-
 .../src/arquivos/sass/partials/_header.scss   |  26 +-
 .../arquivos/sass/partials/_prateleira.scss   |  17 +-
 checkout/src/arquivos/sass/utils/_mixin.scss  |  14 +-
 .../src/arquivos/sass/utils/_variaveis.scss   |  56 +-
 8 files changed, 598 insertions(+), 237 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 0bc765a..99ae976 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -771,6 +771,10 @@
         float: none;
     }
 
+    #payment-data {
+        margin: 0;
+    }
+
     @media screen and (max-width: 490px) {
         .orderform-template-holder .client-profile-data input[type="text"] {
             width: 100%;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 93c150b..dce6216 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -1,67 +1,34 @@
 .cart-template {
     font-family: $font-family-100;
-    @include mq(md, max) {
-        padding: 0 0;
-    }
+    padding: 0;
+
     .item-unit-label {
         display: none;
     }
+
     .cart {
-        border: 3px solid $clr-gray-100;
-        box-sizing: border-box;
-        border-radius: 5px;
         padding: 16px;
+        margin: 0 0 25px 0;
+        border: 1px solid $clr-gray-100;
+        border-left: none;
+        border-right: none;
 
-        @include mq(md, max) {
-            margin: 0px 0 25px 0;
-            border-left: none;
-            border-right: none;
-            border-radius: 0;
-        }
+        box-sizing: border-box;
     }
-    .cart-fixed.affix {
-        position: relative !important;
-    }
-    .cart-fixed {
-        font-family: $font-family-100;
-        width: 100%;
-        h2 {
-            background: $clr-common-white;
-            border: none;
-            color: #303030;
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        .item-unavailable {
-            padding: 0;
-
-            &-message {
-                padding: 8px;
-            }
-        }
+}
 
+.cart-template {
+    @media screen and (min-width: 1025px) {
         .cart {
-            border: 1px solid $clr-gray-300;
-
-            ul li {
-                border-top: none;
-                margin-top: 0;
-                padding-top: 0;
-
-                &:not(:first-child) {
-                    margin-top: 8px;
-                    padding-top: 8px;
-                    border-top: 1px solid #e5e5e5;
-                }
-
-                .shipping-date,
-                .price {
-                    color: #7d7d7d;
-                }
-            }
+            margin: 0;
+            border-radius: 5px;
+            border: 1px solid $clr-gray-100;
         }
+    }
+}
 
+.cart-template {
+    .cart-fixed {
         .summary-template-holder {
             border-top: none;
             background: $clr-common-white;
@@ -217,8 +184,6 @@
             display: flex;
             justify-content: center;
             margin: 6px auto 0;
-            max-height: 38px;
-            max-width: 118px;
             padding: 0;
             width: max-content !important;
 
@@ -243,45 +208,6 @@
                     width: 24px !important;
                 }
             }
-
-            .icon-plus-sign,
-            .icon-minus-sign {
-                &::before {
-                    color: $clr-gray-600;
-                    display: block;
-                    font-weight: 500;
-                    padding: 1px 12px;
-                }
-            }
-
-            .icon-minus-sign {
-                &:before {
-                    content: "-";
-                    font-size: 16px;
-                }
-            }
-
-            .icon-plus-sign {
-                &:before {
-                    content: "+";
-                    font-size: 14px;
-                }
-            }
-
-            .item-quantity-change {
-                @media (max-width: 979px) and (min-width: 768px) {
-                    position: inherit;
-                    bottom: inherit;
-                    left: inherit;
-                    height: inherit;
-                    width: inherit;
-                    top: inherit;
-                }
-
-                @media (max-width: 490px) {
-                    padding: 0;
-                }
-            }
         }
 
         .quantity-price,
@@ -345,7 +271,7 @@
                     padding: 0 16px;
                 }
 
-                .srp-main-title {
+                /* .srp-main-title {
                     margin: 32px 0 12px;
                     font-style: normal;
                     font-weight: normal;
@@ -356,14 +282,14 @@
                     @include mq(md, max) {
                         margin-top: 0;
                     }
-                }
+                } */
 
-                .srp-description {
+                /* .srp-description {
                     color: $clr-gray-400;
                     font-size: 12px;
                     line-height: 18px;
                     margin: 0 0 12px;
-                }
+                } */
 
                 button.shp-open-options {
                     background-color: $clr-gray-200;
@@ -389,12 +315,6 @@
             }
 
             .srp-data {
-                width: 280px;
-
-                @include mq(cstm, max) {
-                    width: calc(100vw - 32px);
-                }
-
                 .srp-pickup-my-location__button {
                     @include btn-primary-blue-white();
 
@@ -419,8 +339,6 @@
             }
 
             .srp-toggle {
-                margin: 0 0 34px;
-
                 &__wrapper {
                     background-color: $clr-common-white;
                     border-radius: 100px;
@@ -453,26 +371,6 @@
 
             .srp-postal-code {
                 .ship-postalCode {
-                    label {
-                        font-family: $font-family-100;
-                        font-style: normal;
-                        font-weight: normal;
-                        font-size: 12px;
-                        line-height: 14px;
-                        color: $clr-gray-600;
-                        margin-bottom: 12px;
-                    }
-
-                    input {
-                        border: 1px solid $clr-gray-100;
-                        border-radius: 5px;
-                        box-shadow: none;
-                        color: $clr-gray-100;
-                        font-size: 12px;
-                        height: 36px;
-                        padding: 12px 8px;
-                    }
-
                     & ~ button {
                         @include btn-primary-blue-white();
 
@@ -734,18 +632,14 @@
         display: flex;
         float: none;
         flex-direction: column;
-        width: 343px;
 
         @include mq(md, max) {
             padding: 0 16px;
             width: calc(100% - 32px);
-            float: none;
-            margin-bottom: 50px;
         }
 
         @include mq(md, min) {
             margin: 0;
-            padding-bottom: 50px;
         }
 
         .link-choose-more-products-wrapper {
@@ -756,42 +650,24 @@
             @include mq(md, max) {
                 margin-bottom: 0px;
             }
-
-            a {
-                font-family: $font-family-100;
-                font-style: normal;
-                font-weight: normal;
-                font-size: 12px;
-                line-height: 14px;
-            }
         }
 
         .btn-place-order-wrapper {
             a {
                 @include btn-primary-blue-black();
 
-                border-radius: 5px;
                 display: block;
-                font-size: 0;
-                transition: ease-in 0.22s all;
+
                 padding: 12px 19px;
+                border-radius: 5px;
+
+                font-size: 0;
+
+                transition: ease-in 0.22s all;
 
                 &:hover {
                     background-color: darken($clr-green-500, 5);
                 }
-
-                &:after {
-                    content: "finalizar compra";
-                    font-family: $font-family-100;
-                    font-weight: 500;
-                    font-size: 13px;
-                    color: inherit;
-                    letter-spacing: 0.05em;
-                    text-transform: uppercase;
-                    vertical-align: middle;
-                    line-height: 19px;
-                    text-shadow: none;
-                }
             }
         }
     }
@@ -803,39 +679,50 @@
 
     #cart-title {
         display: flex !important;
+
         width: 100%;
         padding: 0 16px;
+
         text-align: left;
     }
+}
 
+.container-cart {
     .ship-country {
         display: none;
     }
+}
 
+.container-cart {
     .cart-template {
         .item-quantity-change {
             position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
+
             width: 16px;
             height: 16px;
-            background: #00c8ff;
             border-radius: 100%;
 
+            background: #00c8ff;
+
             .icon-plus-sign,
             .icon-minus-sign {
                 position: relative;
+
                 width: 100%;
                 height: 100%;
 
                 &::before {
                     content: "";
                     position: absolute;
-                    padding: 0;
                     top: 50%;
                     left: 50%;
                     transform: translate(-50%, -50%);
+
+                    padding: 0;
+
                     background-color: $clr-common-white;
                 }
             }
@@ -847,9 +734,11 @@
                     padding: 0;
                     top: 50%;
                     left: 50%;
+                    transform: translate(-50%, -50%);
+
                     width: 2px;
                     height: 10px;
-                    transform: translate(-50%, -50%);
+
                     background-color: $clr-common-white;
                 }
 
@@ -867,7 +756,65 @@
             }
         }
     }
+}
 
+.container-cart {
+    .cart-template {
+        @media (max-width: 490px) {
+            .item-quantity-change {
+                padding: 0;
+            }
+        }
+
+        @media screen and (max-width: 979px) and (min-width: 768px) {
+            .item-quantity-change {
+                position: inherit;
+                bottom: inherit;
+                left: inherit;
+                height: inherit;
+                width: inherit;
+                top: inherit;
+            }
+        }
+
+        @media screen and (min-width: 2500px) {
+            .item-quantity-change {
+                width: 32px;
+                height: 32px;
+
+                .icon-plus-sign {
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        padding: 0;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+
+                        width: 4px;
+                        height: 20px;
+
+                        background-color: $clr-common-white;
+                    }
+
+                    &::before {
+                        width: 20px;
+                        height: 4px;
+                    }
+                }
+
+                .icon-minus-sign {
+                    &::before {
+                        width: 20px;
+                        height: 4px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.container-cart {
     .link-coupon-add,
     .link-choose-more-products {
         color: $clr-common-black;
@@ -876,7 +823,9 @@
             color: $clr-common-black;
         }
     }
+}
 
+.container-cart {
     .cart-more-options {
         padding: 0 16px;
     }
@@ -887,6 +836,311 @@
         width: 100%;
     }
 
+    .srp-container {
+        max-width: 343px;
+        margin-bottom: 48.35px;
+    }
+
+    .srp-data {
+        margin: 0;
+    }
+}
+
+.container-cart {
+    .cart {
+        margin-bottom: 48px;
+    }
+
+    .vtex-shipping-preview-0-x-postalCodeForgotten {
+        gap: 8px;
+        width: 100%;
+        margin: 0;
+
+        .ship-postalCode {
+            width: fluid(215px, 343px);
+
+            input {
+                @include font-size("s-200");
+
+                width: 100%;
+                height: 36px;
+                padding: 12px 8px;
+                border: 1px solid $clr-gray-450;
+                border-radius: 5px;
+
+                box-shadow: none;
+
+                color: $clr-gray-600;
+            }
+        }
+
+        .srp-pc-input.btn {
+            width: fluid(120px, 343px);
+            margin: 6px 0 0;
+        }
+    }
+}
+.container-cart {
+    .ship-postalCode {
+        label {
+            @include font-size("s-200");
+            line-height: 14.04px;
+            font-style: normal;
+            font-weight: normal;
+
+            margin-bottom: 2px;
+
+            color: $clr-gray-600;
+        }
+    }
+}
+
+.container-cart {
+    .cart-template {
+        .cart-more-options {
+            float: none;
+            width: 100%;
+            padding: 0 16px;
+
+            .srp-container {
+                padding: 0;
+            }
+        }
+
+        .totalizers {
+            float: none;
+            width: 100%;
+            padding: 0 16px;
+            margin: 0;
+        }
+
+        .cart-links-bottom {
+            width: 100%;
+            padding: 0 16px;
+            margin: 0;
+        }
+    }
+}
+
+.container-cart {
+    .cart-items {
+        .product-item {
+            padding: 0;
+            margin: 0;
+
+            .product-price {
+                margin: 0;
+                height: 36px;
+            }
+
+            .item-remove {
+                position: absolute;
+                top: 0;
+                right: 0;
+                transform: translate(20%, -35%);
+
+                .icon-remove {
+                    color: #c4c4c4;
+                }
+            }
+        }
+    }
+}
+
+.container-cart {
+    .cart-template {
+        .cart-more-options {
+            #shipping-preview-container {
+                width: 100%;
+                max-width: none;
+            }
+        }
+    }
+}
+
+.container-cart {
+    .cart-more-options {
+        .srp-data,
+        .srp-toggle {
+            width: 100%;
+        }
+
+        .srp-toggle {
+            margin-bottom: 20px;
+
+            label {
+                @include font-size("s-300");
+                line-height: 19.07px;
+            }
+        }
+
+        .srp-main-title {
+            @include font-size("splus-100");
+            line-height: 32.68px;
+            font-family: $font-family-100;
+
+            margin-bottom: 11px;
+
+            color: $clr-common-black;
+        }
+
+        .srp-description {
+            @include font-size("s-300");
+            font-weight: 400;
+            line-height: 18px;
+            font-family: $font-family-100;
+
+            max-width: none;
+            margin-bottom: 10.65px;
+
+            color: $clr-gray-400;
+        }
+    }
+}
+
+.container-cart {
+    @media screen and (min-width: 2500px) {
+        .cart-more-options {
+            .srp-toggle label {
+                @include font-size("splus-300");
+                line-height: 38.13px;
+            }
+
+            .srp-main-title {
+                @include font-size("sxplus");
+                line-height: 65px;
+            }
+
+            .srp-description {
+                @include font-size("splus-300");
+                line-height: 36px;
+            }
+        }
+    }
+}
+
+.container-cart {
+    .cart-links-bottom {
+        .link-choose-more-products-wrapper a {
+            @include font-size("s-200");
+            line-height: 14.04px;
+            font-weight: 400;
+            font-family: $font-family-200;
+
+            text-align: center;
+        }
+
+        .btn-place-order-wrapper a {
+            font-size: 0px;
+
+            &::before {
+                @include font-size("s-300");
+
+                content: "Finalizar Compra";
+
+                font-weight: 700;
+                line-height: 19.07px;
+                font-family: $font-family-100;
+                letter-spacing: 0.05em;
+
+                text-shadow: none;
+                color: $clr-common-black;
+            }
+        }
+    }
+}
+
+.container-cart {
+    @media screen and (min-width: 2500px) {
+        .cart-links-bottom {
+            .link-choose-more-products-wrapper a {
+                @include font-size("splus-100");
+                line-height: 28px;
+            }
+
+            .btn-place-order-wrapper a {
+                &::before {
+                    @include font-size("splus-300");
+                    line-height: 38px;
+                }
+            }
+        }
+    }
+}
+
+.container-cart.container-cart-fill {
+    @media screen and (min-width: 1025px) {
+        $width-container: 1018px;
+
+        width: fluid($width-container, 1280px);
+
+        .cart-template {
+            display: grid;
+            grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid(
+                    354px,
+                    $width-container
+                );
+
+            .cart-template-holder {
+                grid-area: item;
+            }
+
+            .summary-template-holder {
+                grid-area: actions;
+
+                .row-fluid.summary {
+                    display: grid !important;
+                    grid-template: "options space total" auto / fluid(280px, $width-container) auto fluid(
+                            354px,
+                            $width-container
+                        );
+
+                    .cart-more-options {
+                        grid-area: options;
+                        padding: 0;
+                    }
+
+                    .totalizers {
+                        padding: 0;
+                        grid-area: total;
+                    }
+                }
+            }
+
+            .cart-links-bottom {
+                grid-area: button;
+                padding: 0;
+            }
+        }
+    }
+}
+
+.container-cart.container-cart-fill {
+    @media screen and (min-width: 2500px) {
+        $width-container: 1988.28px;
+
+        width: fluid($width-container, 2500px);
+
+        .cart-template {
+            grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid(
+                    688.35px,
+                    $width-container
+                );
+
+            .summary-template-holder {
+                .row-fluid.summary {
+                    grid-template: "options space total" auto / fluid(552px, $width-container) auto fluid(
+                            688.35px,
+                            $width-container
+                        );
+                }
+            }
+        }
+    }
+}
+
+//Comecei
+/* .container-cart.container-cart-fill {
     .cart-template {
         th.shipping-date {
             font-size: 0px;
@@ -995,10 +1249,6 @@
         .cart-template .cart-items th {
             vertical-align: top;
         }
-
-        .cart-template-holder {
-            padding: 0 16px;
-        }
     }
 
     @media screen and (min-width: 1025px) {
@@ -1095,4 +1345,130 @@
             margin-bottom: 0;
         }
     }
+} */
+
+.cart-fixed.affix {
+    position: relative !important;
+}
+
+.cart-fixed {
+    width: 100% !important;
+
+    h2 {
+        @include font-size("s-400");
+        line-height: 18.72px;
+
+        border: none;
+
+        font-weight: 500;
+        font-family: $font-family-200;
+
+        color: #303030;
+    }
+
+    .item-unavailable {
+        padding: 0;
+
+        &-message {
+            padding: 8px;
+        }
+    }
+}
+
+.cart-fixed {
+    @media screen and (min-width: 2500px) {
+        h2 {
+            @include font-size("splus-500");
+            line-height: 37.44px;
+        }
+    }
+}
+
+.cart-fixed {
+    .cart {
+        border: 1px solid $clr-gray-300;
+    }
+}
+
+.cart-fixed {
+    .cart .cart-items .item {
+        $width-container: 309px;
+
+        display: grid;
+        grid-template: "product-image product-name space product-price" auto / fluid(
+                60px,
+                $width-container
+            );
+
+        align-items: center;
+
+        .fn {
+            overflow: initial;
+            text-overflow: initial;
+            white-space: initial;
+            float: none;
+        }
+
+        .url,
+        .product-name,
+        .description {
+            width: 100%;
+        }
+        .url {
+            grid-area: product-image;
+        }
+
+        .product-name {
+            grid-area: product-name;
+        }
+    }
+}
+
+.cart-fixed {
+    .cart .cart-items {
+        .item {
+            .description {
+                grid-area: product-price;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                margin: 0;
+                height: 100%;
+            }
+
+            margin-top: 0;
+            padding-top: 0;
+            border-top: none;
+
+            &:not(:first-child) {
+                padding-top: 8px;
+                margin-top: 8px;
+                border-top: 1px solid #e5e5e5;
+            }
+
+            .quantity.badge {
+                display: none;
+            }
+
+            .shipping-date,
+            .price {
+                color: #7d7d7d;
+            }
+        }
+    }
+}
+
+.cart-fixed {
+    @media screen and (min-width: 600px) {
+        .cart .cart-items .item {
+            $width-container: 976px;
+
+            grid-template:
+                "product-image product-name space product-price" auto / fluid(
+                    60px,
+                    $width-container
+                )
+                fluid(115px, $width-container) auto fluid(62px, $width-container);
+        }
+    }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index a8674c9..b93cc13 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -76,8 +76,8 @@
                 font-size: 0px;
 
                 &::before {
-                    @include text-size("sm");
-                    @include text-height("xs", 200);
+                    @include font-size("s-200");
+                    line-height: 24.51px;
 
                     content: "Seu carrinho está vazio.";
                     text-align: center;
@@ -95,8 +95,8 @@
                 padding: 16px 0;
 
                 &::before {
-                    @include text-size("xs");
-                    @include text-height("smaller", 200);
+                    @include font-size("s-300");
+                    line-height: 16px;
 
                     content: "Continuar Comprando";
 
@@ -119,8 +119,8 @@
             @include mq("xl") {
                 .empty-cart-title {
                     &::before {
-                        @include text-size("md-200");
-                        @include text-height("md", 300);
+                        @include font-size("splus-100");
+                        line-height: 32.68px;
                     }
                 }
             }
@@ -130,8 +130,8 @@
             &-content {
                 .empty-cart-title {
                     &::before {
-                        @include text-size("xxl");
-                        @include text-height("xxl", 200);
+                        @include font-size("sxplus");
+                        line-height: 65.37px;
                     }
                 }
             }
@@ -142,8 +142,8 @@
                     max-width: none;
 
                     &::before {
-                        @include text-size("lg");
-                        @include text-height("lg", 100);
+                        @include font-size("splus-200");
+                        line-height: 32.76px;
                     }
                 }
             }
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 3eb12bf..e28f695 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -108,8 +108,8 @@
 
         &__developedBy {
             span {
-                @include text-size("sm");
-                @include text-height("xs", 200);
+                font-size: map-get($text-sizes, "s-500");
+                line-height: 24.51px;
             }
         }
     }
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index d6c98f3..5f695a7 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,4 +1,5 @@
 /* _header.scss */
+
 body {
     margin: 0;
     padding: 0;
@@ -23,6 +24,14 @@ body :where(ul, li, ol) {
     @return unquote($width);
 }
 
+@mixin font-size($size) {
+    $content: $text-sizes;
+
+    @if map-has-key($content, $size) {
+        font-size: map-get($content, $size);
+    }
+}
+
 .headerCheckout {
     padding: 16px;
     border-bottom: 1px solid $clr-common-black;
@@ -54,8 +63,8 @@ body :where(ul, li, ol) {
 
 .headerCheckout__safeBuy {
     span {
-        @include text-size("smaller-200");
-        @include text-height("smaller", 200);
+        @include font-size("s-200");
+        line-height: 16.34px;
 
         font-style: normal;
         font-weight: normal;
@@ -117,8 +126,9 @@ body :where(ul, li, ol) {
             max-width: none;
 
             span {
-                @include text-size("md-200");
-                @include text-height("md", 300);
+                @include font-size("splus-100");
+                line-height: 32.68px;
+                font-family: $font-family-100;
             }
 
             img {
@@ -166,8 +176,8 @@ body :where(ul, li, ol) {
     }
 
     .progress-item {
-        @include text-size("smaller-200");
-        @include text-height("smaller", 100);
+        @include font-size("s-200");
+        line-height: 14.04px;
 
         font-family: $font-family-200;
 
@@ -242,8 +252,8 @@ body :where(ul, li, ol) {
         }
 
         .progress-item {
-            @include text-size("md-200");
-            @include text-height("md", 200);
+            @include font-size("splus-100");
+            line-height: 28.08px;
 
             &--left,
             &--right {
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 1725f99..7dcb2a2 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -58,9 +58,8 @@
         &-name,
         &-link,
         .type-name {
-            @include text-size("xxs");
-            @include text-height("xxs", 100);
-
+            @include font-size("s-250");
+            line-height: 24px;
             font-family: $font-family-100;
         }
     }
@@ -140,15 +139,15 @@
 
     @include mq("md") {
         &-title {
-            @include text-size("md-200");
-            @include text-height("xl", 100);
+            @include font-size("splus-100");
+            line-height: 38px;
         }
     }
 
     @include mq("xxl") {
         &-title {
-            @include text-size("xxl");
-            @include text-height("xxl", 300);
+            @include font-size("sxplus");
+            line-height: 76px;
 
             padding: 0;
         }
@@ -157,8 +156,8 @@
             &-name,
             &-link,
             .type-name {
-                @include text-size("md-300");
-                @include text-height("lg", 200);
+                @include font-size("splus-200");
+                line-height: 35.41px;
 
                 font-family: $font-family-100;
             }
diff --git a/checkout/src/arquivos/sass/utils/_mixin.scss b/checkout/src/arquivos/sass/utils/_mixin.scss
index 265a2bd..14ffda3 100644
--- a/checkout/src/arquivos/sass/utils/_mixin.scss
+++ b/checkout/src/arquivos/sass/utils/_mixin.scss
@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 @mixin btn-primary-blue-black() {
     border: none;
     color: $clr-common-black;
@@ -13,21 +15,13 @@
 }
 
 @mixin text-size($size) {
-    @if map_has_key($text-sizes-100, $size) {
-        $size: map_get($text-sizes-100, $size);
+    @if map_has_key($text-sizes, $size) {
+        $size: map_get($text-sizes, $size);
 
         font-size: $size;
     }
 }
 
-@mixin text-height($type, $height) {
-    @if map_has_key($text-height, $type + "-" + $height) {
-        $height: map-get($text-height, $type + "-" + $height);
-
-        line-height: $height;
-    }
-}
-
 /**
  * @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss)
  */
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 806db6b..a65c52e 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -10,56 +10,34 @@ $clr-common-white: #fff;
 
 $clr-gray-600: #292929;
 $clr-gray-500: #6c6c6c;
+$clr-gray-450: #c4c4c4;
 $clr-gray-400: #7d7d7d;
 $clr-gray-300: #8d8d8d;
 $clr-gray-200: #e5e5e5;
 $clr-gray-100: #f0f0f0;
 
-$clr-gray-500: #6c6c6c;
-
 $clr-blue-500: #4267b2;
 
 $clr-green-500: #4caf50;
 
 $clr-primary-blue-500: #00c8ff;
 
-$text-sizes-100: (
-    "smaller-100": 10px,
-    "smaller-200": 12px,
-    "xxs": 13px,
-    "xs": 14px,
-    "sm": 18px,
-    "md-100": 20px,
-    "md-200": 24px,
-    "md-300": 26px,
-    "lg": 28px,
-    "xl": 36px,
-    "xxl": 48px,
-) !default;
-
-$text-height: (
-    "smaller-100": 14.04px,
-    "smaller-200": 16px,
-    "smaller-300": 16.34px,
-    "smaller-400": 16.38px,
-    "xxs-100": 17.7px,
-    "xxs-200": 18.72px,
-    "xxs-300": 19.07px,
-    "xs-100": 24px,
-    "xs-200": 24.51px,
-    "xs-300": 27.24px,
-    "md-100": 28px,
-    "md-200": 28.08px,
-    "md-300": 32.68px,
-    "lg-100": 32.76px,
-    "lg-200": 35.41px,
-    "lg-300": 37.44px,
-    "xl-100": 38px,
-    "xl-200": 38.13px,
-    "xl-300": 46.8px,
-    "xxl-100": 49.03px,
-    "xxl-200": 65.37px,
-    "xxl-300": 76px,
+/*prettier-ignore*/
+$text-sizes: (
+    "s-050": 9px,
+    "s-100": 10px,
+    "s-200": 12px,
+    "s-250": 13px,
+    "s-300": 14px,
+    "s-400": 16px,
+    "s-500": 18px, // MAIN
+    "splus-100": 24px,
+    "splus-200": 26px,
+    "splus-300": 28px,
+    "splus-500": 32px,
+    "splus-700": 36px,
+    "splus-900": 40px,
+    "sxplus": 48px,
 ) !default;
 
 /* Grid breakpoints */

From e9003733b7c3b82227ef4bc7c83f38960f679356 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Sat, 24 Dec 2022 07:57:18 -0300
Subject: [PATCH 26/27] feat(checkout): added styles for large devices in
 email,profile,shipping routes

---
 .../sass/checkout/_checkout-autenticacao.scss | 1804 ++++++++++++-----
 .../sass/checkout/_checkout-carrinho.scss     | 1012 ++++-----
 .../sass/checkout/_checkout-vazio.scss        |    2 +-
 .../src/arquivos/sass/checkout/_checkout.scss |    5 +
 checkout/src/arquivos/sass/lib/_slick.scss    |   14 +-
 .../src/arquivos/sass/partials/_header.scss   |    1 +
 .../src/arquivos/sass/utils/_variaveis.scss   |    3 +-
 7 files changed, 1741 insertions(+), 1100 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 99ae976..b0a046c 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -1,148 +1,9 @@
 .checkout-container {
-    .client-pre-email {
-        border-color: $clr-gray-300;
-        font-family: $font-family-100;
-        padding-top: 8px;
-
-        .link-cart {
-            a {
-                color: $clr-gray-600;
-                font-size: 14px;
-
-                &:hover {
-                    color: lighen($clr-gray-600, 10);
-                }
-            }
-        }
-
-        .pre-email {
-            flex-direction: column;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            h3 {
-                margin-bottom: 16px;
-
-                span {
-                    color: #303030;
-                    font-size: 24px;
-                }
-
-                small {
-                    color: $clr-gray-300;
-                }
-            }
-        }
-
-        .client-email {
-            margin: 0 0 16px;
-
-            input {
-                box-shadow: none;
-                color: $clr-gray-600;
-                font-family: $font-family-100;
-                padding: 0 16px;
-                border: 2px solid $clr-gray-100;
-                box-sizing: border-box;
-                border-radius: 5px;
-
-                @media (max-width: 490px) {
-                    width: auto;
-                }
-            }
-
-            button {
-                background-color: $clr-gray-600;
-                border-radius: 5px;
-                border: none;
-                font-family: $font-family-100;
-                height: 54px;
-                right: 0;
-                top: 0;
-
-                @media (max-width: 490px) {
-                    height: 48px;
-                    margin: 0;
-                    position: absolute;
-                }
-            }
-
-            span.help.error {
-                color: red;
-            }
-        }
-
-        .emailInfo {
-            padding: 16px;
-            background-color: $clr-common-white;
-            border: 1px solid $clr-gray-300;
-            border-radius: 0;
-
-            h3 {
-                color: #303030;
-                margin: 0 0 8px 0;
-            }
-
-            ul {
-                margin: 0;
-
-                li {
-                    span {
-                        color: $clr-gray-600;
-                    }
-
-                    i::before {
-                        color: $clr-gray-600;
-                        font-size: 1rem;
-                        opacity: 1;
-                    }
-                }
-            }
-
-            i::before {
-                color: $clr-gray-600;
-                font-size: 6rem;
-                opacity: 0.5;
-            }
-        }
-    }
-
     .shipping-data,
     .payment-data,
     .client-profile-data {
         .accordion-group {
-            border-radius: 0;
-            border: 1px solid $clr-gray-300;
-            font-family: $font-family-100;
-            padding: 16px;
-
-            .accordion-heading {
-                span {
-                    color: #303030;
-                    margin-bottom: 8px;
-                    padding: 0;
-
-                    i::before {
-                        fill: #303030;
-                    }
-                }
-
-                a {
-                    align-items: center;
-                    background-color: #303030;
-                    border-radius: 8px;
-                    border: none;
-                    color: $clr-common-white;
-                    display: flex;
-                    justify-content: center;
-                    padding: 6px 5px 6px 8px;
-                }
-            }
-
             .accordion-inner {
-                padding: 0;
-
                 /* General configurations */
 
                 .client-notice {
@@ -150,18 +11,6 @@
                 }
 
                 p {
-                    label {
-                        color: $clr-gray-600;
-                        font-weight: 500;
-                    }
-
-                    select,
-                    input {
-                        border-radius: 0;
-                        border: 1px solid $clr-gray-300;
-                        box-shadow: none;
-                    }
-
                     .help.error {
                         color: red;
                     }
@@ -180,23 +29,6 @@
                     font-weight: 500;
                 }
 
-                button.submit {
-                    border: none;
-                    border-radius: 5px;
-                    background: $clr-gray-600;
-                    margin-top: 8px;
-                    outline: none;
-                    transition: all 0.2s linear;
-
-                    &:hover {
-                        background: lighten($clr-gray-600, 5);
-                    }
-
-                    &:active {
-                        background: darken($clr-gray-600, 5);
-                    }
-                }
-
                 /* Shipping configurations */
 
                 .ship-postalCode small a {
@@ -206,12 +38,6 @@
                 }
 
                 .vtex-omnishipping-1-x-deliveryGroup {
-                    p {
-                        color: #303030;
-                        font-size: 14px;
-                        font-weight: 500;
-                    }
-
                     .shp-lean {
                         border: 1px solid $clr-gray-300;
                         border-radius: 0;
@@ -229,34 +55,10 @@
                     }
                 }
 
-                .delivery-address-title {
-                    color: #303030;
-                    font-size: 14px;
-                    font-weight: 500;
-                }
-
                 .shp-summary-group-info {
                     border-color: $clr-gray-300;
                 }
 
-                .address-summary {
-                    background: none;
-                    border-color: $clr-gray-300;
-                    border-radius: 0;
-                    color: #303030;
-                    padding: 12px;
-
-                    @include mq(md, max) {
-                        background-position: 8px 9px;
-                    }
-
-                    a {
-                        color: #303030;
-                        font-weight: 500;
-                        text-decoration: underline;
-                    }
-                }
-
                 .shp-summary-group-price,
                 .shp-summary-package {
                     color: $clr-gray-300;
@@ -317,10 +119,6 @@
         float: none;
     }
 
-    #find-pickups-manualy-button-denied {
-        @include btn-primary-blue-white();
-    }
-
     #postalCode-finished-loading {
         .vtex-omnishipping-1-x-deliveryChannelsToggle {
             background-color: $clr-common-white;
@@ -346,26 +144,16 @@
         border: 1px solid $clr-primary-blue-500;
     }
 
-    .checkout-container .shipping-data .accordion-group,
-    .checkout-container .payment-data .accordion-group,
-    .checkout-container .client-profile-data .accordion-group,
     .checkout-container
         .shipping-data
         .accordion-group
         .accordion-inner
         .vtex-omnishipping-1-x-deliveryGroup
-        .shp-lean,
-    .checkout-container .shipping-data .accordion-group .accordion-inner .address-summary,
-    .cart-template.mini-cart .cart-fixed {
+        .shp-lean {
         border: 1px solid $clr-gray-100;
         border-radius: 8px;
     }
 
-    .checkout-container .form-page.client-pre-email {
-        padding: 5px;
-        box-sizing: content-box;
-    }
-
     .checkout-container .client-profile-data .accordion-group {
         padding: 16px 16px 44px;
     }
@@ -374,105 +162,6 @@
         display: none;
     }
 
-    .client-profile-data .accordion-group .accordion-heading span span[data-i18n] {
-        font-size: 0px;
-
-        &::before {
-            content: "Identificação";
-            font-size: 16px;
-            line-height: 18.72px;
-            font-family: $font-family-200;
-        }
-    }
-
-    .checkout-container .shipping-data .accordion-group .accordion-inner p label,
-    .checkout-container .payment-data .accordion-group .accordion-inner p label,
-    .checkout-container .client-profile-data .accordion-group .accordion-inner p label {
-        color: #7d7d7d;
-        font-size: 12px;
-        line-height: 19.07px;
-    }
-
-    .checkout-container .shipping-data .accordion-group .accordion-inner p select,
-    .checkout-container .shipping-data .accordion-group .accordion-inner p input,
-    .checkout-container .payment-data .accordion-group .accordion-inner p select,
-    .checkout-container .payment-data .accordion-group .accordion-inner p input,
-    .checkout-container .client-profile-data .accordion-group .accordion-inner p select,
-    .checkout-container .client-profile-data .accordion-group .accordion-inner p input {
-        border: 1px solid #f0f0f0;
-        padding: 0 11px;
-        border-radius: 5px;
-        height: 42px;
-        width: 100%;
-        max-width: none;
-        background-position: right 50%;
-    }
-
-    .checkout-container .payment-data .accordion-group .accordion-heading a,
-    .checkout-container .shipping-data .accordion-group .accordion-heading a,
-    .checkout-container .client-profile-data .accordion-group .accordion-heading a {
-        background-color: $clr-common-white;
-        font-size: 24px;
-        color: $clr-primary-blue-500;
-    }
-
-    .box-client-info-pf {
-        width: 100%;
-
-        display: grid;
-        grid-template-columns: 50% 50%;
-    }
-
-    p.client-phone,
-    p.client-document,
-    p.client-first-name,
-    p.client-last-name {
-        float: none !important;
-        width: 100%;
-        margin: 0;
-    }
-
-    p.client-first-name,
-    p.client-document {
-        padding-right: 8px;
-    }
-
-    p.client-phone,
-    p.client-last-name {
-        padding-left: 8px;
-    }
-
-    p.client-email {
-        grid-column: 1/3;
-        margin-bottom: 16px;
-    }
-
-    p.client-first-name,
-    p.client-last-name {
-        margin-bottom: 16px;
-    }
-
-    p.client-document,
-    p.client-phone {
-        margin-bottom: 16px;
-    }
-
-    p.newsletter {
-        margin: 0 0 45px;
-    }
-
-    .checkbox.newsletter-label {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 8px;
-
-        #opt-in-newsletter {
-            width: 16px;
-            height: 16px;
-        }
-    }
-
     .links.unstyled,
     .client-notice.notice {
         display: none;
@@ -482,11 +171,6 @@
         padding: 8px 16px 0;
     }
 
-    .checkout-container .client-pre-email .emailInfo {
-        width: 100%;
-        font-size: 12px;
-    }
-
     .checkout-container .client-pre-email .emailInfo h3 {
         line-height: 16.34px;
     }
@@ -520,52 +204,6 @@
             padding-top: 16px;
             height: auto !important;
         }
-
-        .cart-totalizers.totalizers {
-            padding: 0;
-            margin-bottom: 0;
-
-            tr {
-                border-top: 1px solid $clr-gray-200;
-                border-bottom: 1px solid $clr-gray-200;
-            }
-
-            tbody {
-                td.info,
-                td.monetary {
-                    color: $clr-gray-400;
-                }
-
-                td.info {
-                    padding: 25px 0 25px 16px;
-                }
-                td.monetary {
-                    padding: 25px 16px 25px 0;
-                }
-            }
-
-            tfoot {
-                tr {
-                    border: none;
-                }
-
-                td.info,
-                td.monetary {
-                    color: $clr-gray-600;
-                }
-
-                td.info {
-                    padding: 30px 0 22px 16px;
-                    font-size: 18px;
-                    line-height: 19.07px;
-                }
-                td.monetary {
-                    padding: 30px 16px 22px 0;
-                    font-size: 14px;
-                    line-height: 24.51px;
-                }
-            }
-        }
     }
 
     .ship-country {
@@ -594,12 +232,6 @@
             display: grid;
             grid-template-columns: 1fr;
 
-            #shipping-data {
-                .shipping-data {
-                    width: 100%;
-                }
-            }
-
             #client-profile-data,
             #shipping-data,
             #payment-data {
@@ -644,48 +276,6 @@
         .form-step.box-edit .row-fluid {
             display: initial;
         }
-
-        .client-pre-email {
-            .link-cart a {
-                font-size: 10px;
-                line-height: 12px;
-                font-family: $font-family-200;
-                text-transform: uppercase;
-            }
-        }
-
-        .client-pre-email .emailInfo ul li i::before {
-            color: $clr-primary-blue-500;
-        }
-
-        .client-pre-email .client-email button {
-            @include btn-primary-blue-black();
-        }
-
-        .checkout-container .shipping-data .accordion-group .accordion-inner button.submit,
-        .checkout-container .payment-data .accordion-group .accordion-inner button.submit,
-        .checkout-container .client-profile-data .accordion-group .accordion-inner button.submit,
-        #btn-go-to-payment {
-            @include btn-primary-blue-white();
-        }
-
-        #btn-go-to-payment {
-            width: 100%;
-        }
-
-        .client-pre-email-h {
-            label {
-                span,
-                small {
-                    font-size: 12px;
-                    line-height: 14px;
-                    font-weight: 400;
-                    color: $clr-common-black;
-                    font-family: $font-family-200;
-                    text-transform: uppercase;
-                }
-            }
-        }
     }
 
     .checkout-container .accordion-group .accordion-heading span > i,
@@ -693,25 +283,6 @@
         display: none;
     }
 
-    .submit.btn-submit-wrapper {
-        button#go-to-shipping,
-        button#go-to-payment {
-            @include btn-primary-blue-white();
-
-            width: 100%;
-        }
-    }
-
-    .vtex-omnishipping-1-x-address {
-        display: grid;
-        grid-template-columns: 1fr;
-
-        .input {
-            float: none;
-            margin: 0;
-        }
-    }
-
     .checkout-container
         .shipping-data
         .accordion-group
@@ -721,7 +292,827 @@
         .vtex-omnishipping-1-x-leanShippingOptionActive {
         background-color: #f2f2f2;
     }
+}
 
+.container-order-form {
+    @media screen and (min-width: 1200px) {
+        width: inherit;
+    }
+}
+
+.container-order-form {
+    width: 100%;
+
+    #shipping-data,
+    #payment-data {
+        float: none;
+    }
+
+    #payment-data {
+        margin: 0;
+    }
+
+    @media screen and (min-width: 1025px) {
+        #shipping-data,
+        #payment-data {
+            float: none;
+        }
+
+        #client-profile-data .client-profile-data.active {
+            margin: 0;
+        }
+
+        .cart-template.mini-cart {
+            padding: 0;
+        }
+    }
+
+    @media screen and (min-width: 1025px) {
+        width: fluid(1018px, 1280px);
+        min-height: calc(100vh - 175px);
+
+        .checkout-container .client-pre-email {
+            padding: 8px 0 0;
+        }
+
+        #orderform-title {
+            padding: 0;
+        }
+
+        .client-pre-email .emailInfo .icon-lock {
+            display: block;
+        }
+    }
+}
+
+// Default styles
+.orderform-template-holder .client-profile-data #client-pre-email {
+    @media screen and (max-width: 490px) {
+        width: auto;
+    }
+}
+
+/*===---------------------===*\
+|H|   STYLES ROUTE EMAIL    |H|
+\*---=====================---*/
+.checkout-container {
+    .client-profile-data {
+        .link-cart a {
+            @include font-size("s-100");
+            line-height: 11.7px;
+            font-weight: 400;
+            font-family: $font-family-200;
+            text-transform: uppercase;
+
+            &:hover {
+                color: lighen($clr-gray-600, 10);
+            }
+
+            @media screen and (min-width: 1025px) {
+                @include font-size("s-300");
+                line-height: 16.38px;
+            }
+
+            @media screen and (min-width: 2500px) {
+                @include font-size("splus-300");
+                line-height: 32.76px;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .client-pre-email-h {
+        margin-bottom: 22px;
+
+        label * {
+            @include font-size("s-200");
+            line-height: 16.38px;
+            font-family: $font-family-200;
+            font-weight: 400;
+            padding: 0;
+            display: inline;
+            color: $clr-common-black;
+            text-transform: uppercase;
+            text-align: center;
+        }
+    }
+}
+
+.checkout-container {
+    .client-pre-email-h {
+        @media screen and (min-width: 600px) {
+            margin-bottom: 38px;
+
+            label * {
+                @include font-size("s-300");
+                line-height: 16.38px;
+            }
+        }
+
+        @media screen and (min-width: 1025px) {
+            margin-bottom: 21px;
+
+            label * {
+                @include font-size("s-600");
+                line-height: 23.4px;
+            }
+        }
+
+        @media screen and (min-width: 2500px) {
+            margin-bottom: 23px;
+
+            label * {
+                @include font-size("splus-900");
+                line-height: 46.8px;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .client-pre-email {
+        border-color: $clr-gray-300;
+        font-family: $font-family-100;
+        padding-top: 8px;
+        padding: 0 16px;
+
+        .pre-email {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+        }
+
+        .client-email {
+            margin: 0 0 16px;
+        }
+    }
+}
+
+.checkout-container {
+    .pre-email .client-email {
+        position: relative;
+        width: 100%;
+
+        input {
+            @include font-size("s-200");
+            line-height: 16.34px;
+            font-family: $font-family-100;
+
+            width: 100%;
+            padding: 0 16px;
+            border: 2px solid $clr-gray-100;
+            border-right: none;
+            height: 52px;
+            border-radius: 5px 0px 0px 5px;
+
+            box-shadow: none;
+            color: #292929;
+
+            box-sizing: border-box;
+        }
+
+        .btn.btn-success {
+            @include btn-primary-blue-black();
+            @include font-size("s-300");
+            line-height: 19.07px;
+            font-weight: 700;
+            height: 52px;
+            letter-spacing: 0.05em;
+
+            max-width: 126.76px;
+            border-radius: 0px 8px 8px 0px;
+
+            text-transform: uppercase;
+        }
+
+        .help.error {
+            @include font-size("s-200");
+            line-height: 16.34px;
+            text-align: center;
+            font-weight: 700;
+            color: red;
+        }
+    }
+}
+
+.checkout-container {
+    .pre-email .client-email {
+        @media screen and (min-width: 1025px) {
+            width: fluid(562px, 1018px);
+        }
+
+        @media screen and (min-width: 2500px) {
+            width: fluid(970.98px, 1988.28px);
+
+            input {
+                @include font-size("splus-100");
+                line-height: 32.68px;
+            }
+
+            .btn.btn-success {
+                @include font-size("splus-300");
+                line-height: 38.13px;
+
+                width: fluid(219px, 970.98px);
+                max-width: none;
+            }
+
+            .help.error {
+                @include font-size("splus-100");
+                line-height: 32.68px;
+                text-align: center;
+                font-weight: 700;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .emailInfo {
+        width: 100%;
+    }
+}
+
+.checkout-container {
+    .emailInfo {
+        ul {
+            margin: 0;
+
+            li {
+                i::before {
+                    color: $clr-primary-blue-500;
+                    font-size: 1rem;
+                    opacity: 1;
+                }
+            }
+        }
+
+        i::before {
+            color: $clr-gray-600;
+            font-size: 6rem;
+            opacity: 0.5;
+        }
+    }
+}
+
+.checkout-container {
+    .emailInfo {
+        padding: 16px;
+        border: 1px solid $clr-common-black;
+        border-radius: 5px;
+
+        background-color: $clr-common-white;
+
+        h3,
+        span {
+            @include font-size("s-200");
+            line-height: 16.34px;
+            color: $clr-common-black;
+        }
+
+        h3 {
+            margin: 0 0 9.56px 0;
+        }
+
+        span {
+            font-weight: 700;
+            margin-bottom: 0.56px;
+        }
+    }
+}
+
+.checkout-container {
+    .emailInfo {
+        min-height: 150px;
+        @media screen and (min-width: 600px) {
+            width: fluid(343px, 992px);
+        }
+
+        @media screen and (min-width: 1025px) {
+            width: fluid(400px, 1018px);
+        }
+
+        @media screen and (min-width: 2500px) {
+            min-height: 238.56px;
+
+            ul li i::before {
+                font-size: 2rem;
+            }
+
+            h3,
+            span {
+                @include font-size("splus-100");
+                line-height: 32.68px;
+            }
+
+            h3 {
+                margin-bottom: 14px;
+            }
+
+            span {
+                margin-bottom: 1px;
+            }
+
+            i::before {
+                font-size: 9.5rem;
+            }
+        }
+    }
+}
+
+// Default Styles
+
+@media screen and (max-width: 490px) {
+    .orderform-template-holder .client-profile-data input[type="text"] {
+        width: 100%;
+    }
+
+    .orderform-template-holder .client-profile-data {
+        p.client-phone,
+        p.client-document,
+        p.client-first-name,
+        p.client-last-name {
+            float: none !important;
+            width: 100%;
+            margin: 0;
+
+            input {
+                width: 100% !important;
+            }
+        }
+    }
+}
+
+/*===----------------------===*\
+|H|   STYLES ROUTE PROFILE   |H|
+\*---======================---*/
+.checkout-container {
+    .client-pre-email {
+        border-color: $clr-gray-300;
+        font-family: $font-family-100;
+        padding-top: 8px;
+
+        .link-cart {
+            a {
+                position: relative;
+                z-index: 1000;
+                color: $clr-gray-600;
+                font-size: 14px;
+
+                &:hover {
+                    color: lighen($clr-gray-600, 10);
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .client-profile-data,
+    .shipping-data,
+    .payment-data {
+        .accordion-group {
+            padding: 16px;
+            border: 1px solid #f0f0f0;
+            border-radius: 8px;
+            font-family: $font-family-100;
+        }
+    }
+
+    .cart-template.mini-cart .cart-fixed {
+        border: 1px solid #f0f0f0;
+        border-radius: 8px;
+    }
+}
+
+.checkout-container {
+    .accordion-heading span {
+        @include font-size("s-400");
+        line-height: 18.72px;
+
+        margin-bottom: 16px;
+
+        font-family: $font-family-200;
+        color: $clr-common-black;
+
+        &[data-i18n="clientProfileData.identification"] {
+            font-size: 0px;
+
+            margin-bottom: 36px;
+
+            &::before {
+                @include font-size("s-400");
+                line-height: 18.72px;
+
+                content: "Identificação";
+            }
+        }
+
+        @media screen and (min-width: 2500px) {
+            @include font-size("splus-500");
+            line-height: 37.44px;
+
+            &[data-i18n="clientProfileData.identification"] {
+                &::before {
+                    @include font-size("splus-500");
+                    line-height: 37.44px;
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .accordion-inner {
+        .shipping-summary-placeholder,
+        .notification {
+            @include font-size("s-300");
+            line-height: 19.07px;
+
+            font-weight: 400;
+            font-family: $font-family-100;
+
+            color: $clr-gray-400;
+
+            @media screen and (min-width: 2500px) {
+                @include font-size("splus-300");
+                line-height: 38.13px;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .client-profile-data,
+    .shipping-data,
+    .payment-data {
+        p input,
+        p select {
+            @include font-size("s-300");
+            line-height: 19.07px;
+            font-family: $font-family-100;
+
+            width: 100%;
+            height: 42px;
+            padding: 0 11px;
+            max-width: none;
+            border: 1px solid $clr-gray-100;
+            border-radius: 5px;
+
+            background-color: $clr-common-white;
+            background-position: right 50%;
+
+            &:focus {
+                box-shadow: none;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .client-profile-data {
+        p label {
+            @include font-size("s-300");
+            color: $clr-gray-400;
+            font-weight: 400;
+            font-family: $font-family-100;
+            line-height: 19.07px;
+        }
+    }
+}
+
+.checkout-container {
+    .client-profile-data {
+        @media screen and (min-width: 2500px) {
+            p label {
+                @include font-size("splus-300");
+                line-height: 38.13px;
+            }
+
+            p input {
+                @include font-size("splus-300");
+                line-height: 38.13px;
+                height: 61px;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .client-profile-data {
+        .newsletter-label {
+            @include font-size("s-200");
+            line-height: 16.34px;
+
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 8px;
+
+            input[type="checkbox"] {
+                width: 18px;
+                height: 18px;
+            }
+
+            @media screen and (min-width: 2500px) {
+                @include font-size("splus-200");
+                line-height: 32.68px;
+
+                input[type="checkbox"] {
+                    width: 34.95px;
+                    height: 34.95px;
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .btn-submit-wrapper #go-to-shipping,
+    #find-pickups-manualy-button-denied,
+    .btn-go-to-payment {
+        @include btn-primary-blue-white();
+        @include font-size("s-300");
+        line-height: 19.07px;
+        font-weight: 700;
+        font-family: $font-family-100;
+        letter-spacing: 0.05em;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+
+        transition: all 0.2s linear;
+
+        &:hover {
+            background: lighten($clr-gray-600, 5);
+        }
+
+        &:active {
+            background: darken($clr-gray-600, 5);
+        }
+    }
+}
+
+.checkout-container {
+    .btn-submit-wrapper #go-to-shipping,
+    #find-pickups-manualy-button-denied,
+    .btn-go-to-payment {
+        @media screen and (min-width: 2500px) {
+            @include font-size("splus-300");
+            line-height: 38.13px;
+        }
+    }
+}
+
+.checkout-container {
+    .client-profile-data.filled {
+        .form-step.box-info {
+            @include font-size("s-200");
+            line-height: 16.34px;
+            font-weight: 400;
+            font-family: $font-family-100;
+
+            @media screen and (min-width: 2500px) {
+                @include font-size("splus-100");
+                line-height: 32.68px;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .shipping-data {
+        .accordion-group {
+            width: 100%;
+            padding: 16px;
+
+            font-family: $font-family-100;
+
+            @media screen and (min-width: 2500px) {
+                padding: 34px 34px 44px;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .payment-data .accordion-heading a,
+    .shipping-data .accordion-heading a,
+    .client-profile-data .accordion-heading a {
+        top: 0px;
+        right: 0px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0px;
+        border: none;
+
+        .icon-edit {
+            width: 20.26px;
+            height: 20.89px;
+            background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png")
+                center center / cover;
+        }
+
+        outline: none;
+        background-color: $clr-common-white;
+
+        @media screen and (min-width: 2500px) {
+            .icon-edit {
+                width: 39.24px;
+                height: 40.58px;
+            }
+        }
+    }
+}
+
+.container-order-form {
+    .box-client-info-pf {
+        width: 100%;
+
+        display: grid;
+        grid-template-columns: 50% 50%;
+    }
+
+    p {
+        &.client-phone,
+        &.client-document,
+        &.client-first-name,
+        &.client-last-name {
+            float: none !important;
+            width: 100%;
+            margin: 0;
+        }
+
+        &.client-first-name,
+        &.client-document {
+            padding-right: 8px;
+        }
+
+        &.client-phone,
+        &.client-last-name {
+            padding-left: 8px;
+        }
+
+        &.client-email {
+            grid-column: 1/3;
+            margin-bottom: 16px;
+        }
+
+        &.client-first-name,
+        &.client-last-name {
+            margin-bottom: 16px;
+        }
+
+        &.client-document,
+        &.client-phone {
+            margin-bottom: 16px;
+        }
+
+        &.newsletter {
+            margin: 0 0 45px;
+        }
+    }
+}
+
+.checkout-container {
+    .shp-method-option {
+        @include font-size("s-300");
+        line-height: 19.07px;
+
+        &.shp-method-option-active {
+            color: $clr-common-black;
+        }
+
+        @media screen and (min-width: 2500px) {
+            @include font-size("splus-300");
+            line-height: 38.13px;
+        }
+    }
+}
+
+.checkout-container {
+    .shipping-data {
+        .ship-postalCode {
+            label {
+                font-size: 0px;
+
+                &::before {
+                    content: "Cep:";
+                    @include font-size("s-200");
+                    line-height: 16.34px;
+                    font-weight: 700;
+                    font-family: $font-family-100;
+
+                    text-transform: uppercase;
+
+                    color: $clr-gray-400;
+                }
+            }
+
+            input {
+                @include font-size("s-300");
+                line-height: 19.07px;
+
+                height: 45px;
+                border-color: $clr-gray-250;
+            }
+
+            small {
+                @include font-size("s-200");
+                line-height: 16.34px;
+                font-family: $font-family-100;
+                color: $clr-gray-400;
+                margin: 0;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .shipping-data {
+        .ship-postalCode {
+            @media screen and (min-width: 2500px) {
+                label {
+                    &::before {
+                        @include font-size("splus-100");
+                        line-height: 32.68px;
+                    }
+                }
+                input {
+                    @include font-size("splus-300");
+                    line-height: 38.13px;
+
+                    height: 61px;
+                }
+
+                small {
+                    @include font-size("splus-100");
+                    line-height: 32.68px;
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .shipping-data {
+        .vtex-omnishipping-1-x-deliveryGroup {
+            p {
+                @include font-size("s-300");
+                line-height: 19.07px;
+                font-weight: 700;
+                font-family: $font-family-100;
+
+                @media screen and (min-width: 2500px) {
+                    @include font-size("splus-300");
+                    line-height: 38.13px;
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .shipping-data {
+        .vtex-omnishipping-1-x-deliveryGroup {
+            .vtex-omnishipping-1-x-leanShippingTextLabel,
+            .vtex-omnishipping-1-x-optionPrice,
+            .shp-option-text-time {
+                @include font-size("s-200");
+                line-height: 16.34px;
+                font-weight: 400;
+                font-family: $font-family-100;
+            }
+
+            .vtex-omnishipping-1-x-leanShippingTextLabel {
+                letter-spacing: 0.05em;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .shipping-data {
+        @media screen and (min-width: 2500px) {
+            .vtex-omnishipping-1-x-deliveryGroup {
+                .vtex-omnishipping-1-x-leanShippingTextLabel,
+                .vtex-omnishipping-1-x-optionPrice,
+                .shp-option-text-time {
+                    @include font-size("splus-100");
+                    line-height: 32.68px;
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
     .shp-lean-option.shp-lean-option-active.vtex-omnishipping-1-x-leanShippingOptionActive {
         .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon {
             svg {
@@ -757,88 +1148,525 @@
     }
 }
 
-.container-order-form {
-    @media screen and (min-width: 1200px) {
-        width: inherit;
+.checkout-container {
+    @media screen and (min-width: 2500px) {
+        .shp-lean-option.shp-lean-option-active.vtex-omnishipping-1-x-leanShippingOptionActive {
+            .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon {
+                &::before {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+        }
+
+        .shp-lean-option.vtex-omnishipping-1-x-leanShippingOption {
+            .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon {
+                &::before {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+        }
     }
 }
 
-.container-order-form {
-    width: 100%;
+.checkout-container {
+    .vtex-omnishipping-1-x-geolocationTitle.ask-for-geolocation-title {
+        @include font-size("s-300");
+        line-height: 19.07px;
+        font-family: $font-family-100;
 
-    #shipping-data,
-    #payment-data {
-        float: none;
+        @media screen and (min-width: 2500px) {
+            @include font-size("splus-300");
+            line-height: 38.13px;
+        }
     }
 
-    #payment-data {
-        margin: 0;
+    .vtex-omnishipping-1-x-subtitle.ask-for-geolocation-subtitle {
+        @include font-size("s-200");
+        line-height: 16.34px;
+        font-family: $font-family-100;
+
+        @media screen and (min-width: 2500px) {
+            @include font-size("splus-100");
+            line-height: 32.68px;
+        }
     }
 
-    @media screen and (max-width: 490px) {
-        .orderform-template-holder .client-profile-data input[type="text"] {
-            width: 100%;
+    .vtex-omnishipping-1-x-imageAsk.ask-for-geolocation-image-ask {
+        background-color: $clr-primary-blue-500;
+
+        @media screen and (min-width: 2500px) {
+            width: 220px;
+            height: 220px;
+        }
+    }
+}
+
+.checkout-container {
+    .vtex-omnishipping-1-x-addressForm {
+        .vtex-omnishipping-1-x-shippingSectionTitle {
+            @include font-size("s-200");
+            line-height: 16.34px;
+
+            font-weight: 700;
+            font-family: $font-family-100;
+            letter-spacing: 0.05em;
+
+            @media screen and (min-width: 2500px) {
+                @include font-size("splus-100");
+                line-height: 32.68px;
+            }
         }
 
-        .orderform-template-holder .client-profile-data {
-            p.client-phone,
-            p.client-document,
-            p.client-first-name,
-            p.client-last-name {
-                float: none !important;
-                width: 100%;
-                margin: 0;
+        .address-summary-BRA {
+            span {
+                @include font-size("s-200");
+                line-height: 16.34px;
+                font-weight: 400;
+                font-family: $font-family-100;
 
-                input {
-                    width: 100% !important;
+                @media screen and (min-width: 2500px) {
+                    @include font-size("splus-100");
+                    line-height: 32.68px;
                 }
             }
         }
     }
 
-    @media screen and (min-width: 375px) {
-        .checkout-container .shipping-data .accordion-group .accordion-inner p label,
-        .checkout-container .payment-data .accordion-group .accordion-inner p label,
-        .checkout-container .client-profile-data .accordion-group .accordion-inner p label {
-            font-size: 14px;
-        }
-    }
+    .vtex-omnishipping-1-x-addressSummary {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 9.98px;
+        border: 1px solid #f0f0f0;
+        border-radius: 8px;
+        padding: 20.96px 17px 15px 16.38px;
 
-    @media screen and (min-width: 600px) {
-        .checkout-container .client-pre-email .emailInfo {
-            width: fluid(343px, 992px);
-        }
-    }
-
-    @media screen and (min-width: 1025px) {
-        #shipping-data,
-        #payment-data {
-            float: none;
-        }
-
-        #client-profile-data .client-profile-data.active {
+        .address-summary {
+            padding: 0;
             margin: 0;
+            border: none;
+            font-weight: 400;
+            color: $clr-gray-400;
+            background: none;
         }
 
-        .cart-template.mini-cart {
-            padding: 0;
-        }
-    }
+        &::before {
+            content: "";
 
-    @media screen and (min-width: 1025px) {
-        width: fluid(1018px, 1280px);
-        min-height: calc(100vh - 175px);
-
-        .checkout-container .client-pre-email {
-            padding: 8px 0 0;
+            width: 21px;
+            height: 21px;
+            background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") center
+                center/ cover;
         }
 
-        #orderform-title {
-            padding: 0;
-        }
+        @media screen and (min-width: 2500px) {
+            padding: 15px 28px 15px 28.66px;
 
-        .client-pre-email .emailInfo .icon-lock {
-            display: block;
+            &::before {
+                width: 46.45px;
+                height: 46.45px;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .shipping-data {
+        .vtex-omnishipping-1-x-linkEdit.link-edit {
+            @include font-size("s-200");
+            line-height: 16.34px;
+
+            color: $clr-primary-blue-500;
+
+            @media screen and (min-width: 2500px) {
+                @include font-size("splus-100");
+                line-height: 32.68px;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .shipping-data {
+        .vtex-omnishipping-1-x-addressForm {
+            .vtex-omnishipping-1-x-address {
+                display: grid;
+                grid-template-columns: 1fr;
+
+                * .input + .input {
+                    margin: 15px 0 0;
+                }
+
+                .input {
+                    float: none;
+
+                    label {
+                        @include font-size("s-200");
+                        line-height: 16.34px;
+                        font-weight: 700;
+                        font-family: $font-family-100;
+                        letter-spacing: 0.05em;
+
+                        color: $clr-gray-400;
+                    }
+
+                    input {
+                        @include font-size("s-300");
+                        line-height: 19.07px;
+                        height: 35px;
+                        border-color: #e0e0e0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .shipping-data {
+        .vtex-omnishipping-1-x-addressForm {
+            @media screen and (min-width: 2500px) {
+                .vtex-omnishipping-1-x-address {
+                    .input {
+                        label {
+                            @include font-size("splus-100");
+                            line-height: 32.68px;
+                        }
+
+                        input {
+                            @include font-size("splus-300");
+                            line-height: 38.13px;
+                            height: 61px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .cart-template.mini-cart {
+        border-color: $clr-gray-300;
+        font-family: $font-family-100;
+
+        .link-cart {
+            position: relative;
+            z-index: 1000;
+            a {
+                color: $clr-gray-600;
+                font-size: 14px;
+
+                &:hover {
+                    color: lighen($clr-gray-600, 10);
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .summary-cart-template-holder.cart-fixed-transition {
+        @media screen and (max-width: 1024px) {
+            overflow: initial;
+        }
+    }
+}
+
+.container-cart.container-cart-fill {
+    @media screen and (min-width: 1025px) {
+        $width-container: 1018px;
+
+        width: fluid($width-container, 1280px);
+
+        .cart-template {
+            display: grid;
+            grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid(
+                    354px,
+                    $width-container
+                );
+
+            .cart-template-holder {
+                grid-area: item;
+            }
+
+            .summary-template-holder {
+                grid-area: actions;
+
+                .row-fluid.summary {
+                    display: grid !important;
+                    grid-template: "options space total" auto / fluid(280px, $width-container) auto fluid(
+                            354px,
+                            $width-container
+                        );
+
+                    .cart-more-options {
+                        grid-area: options;
+                        padding: 0;
+                    }
+
+                    .totalizers {
+                        padding: 0;
+                        grid-area: total;
+                    }
+                }
+            }
+
+            .cart-links-bottom {
+                grid-area: button;
+                padding: 0;
+            }
+        }
+    }
+}
+
+.container-cart.container-cart-fill {
+    @media screen and (min-width: 2500px) {
+        $width-container: 1988.28px;
+
+        width: fluid($width-container, 2500px);
+
+        .cart-template {
+            grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid(
+                    688.35px,
+                    $width-container
+                );
+
+            .summary-template-holder {
+                .row-fluid.summary {
+                    grid-template: "options space total" auto / fluid(552px, $width-container) auto fluid(
+                            688.35px,
+                            $width-container
+                        );
+                }
+            }
+        }
+    }
+}
+
+//autentication
+
+.cart-fixed.affix {
+    position: relative !important;
+}
+
+.cart-fixed {
+    width: 100% !important;
+
+    h2 {
+        @include font-size("s-400");
+        line-height: 18.72px;
+
+        border: none;
+
+        font-weight: 500;
+        font-family: $font-family-200;
+
+        color: #303030;
+        @media screen and (min-width: 2500px) {
+            @include font-size("splus-500");
+            line-height: 37.44px;
+        }
+    }
+
+    .item-unavailable {
+        padding: 0;
+
+        &-message {
+            padding: 8px;
+        }
+    }
+}
+
+.cart-fixed {
+    .cart {
+        border: 1px solid $clr-gray-300;
+    }
+}
+
+.cart-fixed {
+    .cart .cart-items .item {
+        $width-container: 309px;
+
+        display: grid;
+        grid-template: "product-image product-name space product-price" auto / fluid(
+                60px,
+                $width-container
+            );
+
+        align-items: center;
+
+        .fn {
+            overflow: initial;
+            text-overflow: initial;
+            white-space: initial;
+            float: none;
+        }
+
+        .url,
+        .product-name,
+        .description {
+            width: 100%;
+        }
+        .url {
+            grid-area: product-image;
+        }
+
+        .product-name {
+            grid-area: product-name;
+        }
+    }
+}
+
+.cart-fixed {
+    .cart .cart-items {
+        .item {
+            .description {
+                grid-area: product-price;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                margin: 0;
+                height: 100%;
+            }
+
+            margin-top: 0;
+            padding-top: 0;
+            border-top: none;
+
+            &:not(:first-child) {
+                padding-top: 8px;
+                margin-top: 8px;
+                border-top: 1px solid #e5e5e5;
+            }
+
+            .quantity.badge {
+                display: none;
+            }
+
+            .shipping-date,
+            .price {
+                color: #7d7d7d;
+            }
+        }
+    }
+}
+
+.cart-fixed {
+    @media screen and (min-width: 600px) {
+        .cart .cart-items .item {
+            $width-container: 976px;
+
+            grid-template:
+                "product-image product-name space product-price" auto / fluid(
+                    60px,
+                    $width-container
+                )
+                fluid(115px, $width-container) auto fluid(62px, $width-container);
+        }
+    }
+}
+
+.checkout-container {
+    .cart-template.mini-cart {
+        .cart-totalizers.totalizers {
+            padding: 0;
+            margin-bottom: 0;
+
+            tr {
+                border-top: 1px solid $clr-gray-200;
+                border-bottom: 1px solid $clr-gray-200;
+            }
+
+            tbody {
+                td.info,
+                td.monetary {
+                    @include font-size("s-300");
+                    line-height: 19.07px;
+
+                    color: $clr-gray-400;
+                }
+
+                td.info {
+                    padding: 25px 0 25px 16px;
+                    text-align: left;
+                }
+                td.monetary {
+                    text-align: right;
+                    padding: 25px 16px 25px 0;
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .cart-template.mini-cart {
+        .cart-totalizers.totalizers {
+            @media screen and (min-width: 2500px) {
+                tbody {
+                    td.info,
+                    td.monetary {
+                        @include font-size("splus-300");
+                        line-height: 38.13px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .cart-template.mini-cart {
+        .cart-totalizers.totalizers {
+            tfoot {
+                tr {
+                    border: none;
+                }
+
+                td.info,
+                td.monetary {
+                    color: $clr-gray-600;
+                }
+
+                td.info {
+                    @include font-size("s-500");
+                    line-height: 19.07px;
+                    text-align: left;
+
+                    width: 100%;
+                    padding: 30px 0 22px 16px;
+                }
+                td.monetary {
+                    @include font-size("s-300");
+                    line-height: 19.07px;
+                    text-align: right;
+
+                    width: 50%;
+                    padding: 30px 16px 22px 0;
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .cart-template.mini-cart {
+        .cart-totalizers.totalizers {
+            @media screen and (min-width: 2500px) {
+                tfoot {
+                    td.info {
+                        @include font-size("splus-700");
+                        line-height: 49.03px;
+                    }
+                    td.monetary {
+                        @include font-size("splus-300");
+                        line-height: 38.13px;
+                    }
+                }
+            }
         }
     }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index dce6216..a86aced 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -7,19 +7,15 @@
     }
 
     .cart {
-        padding: 16px;
+        padding: 0 16px;
         margin: 0 0 25px 0;
         border: 1px solid $clr-gray-100;
         border-left: none;
         border-right: none;
 
         box-sizing: border-box;
-    }
-}
 
-.cart-template {
-    @media screen and (min-width: 1025px) {
-        .cart {
+        @media screen and (min-width: 1025px) {
             margin: 0;
             border-radius: 5px;
             border: 1px solid $clr-gray-100;
@@ -290,52 +286,6 @@
                     line-height: 18px;
                     margin: 0 0 12px;
                 } */
-
-                button.shp-open-options {
-                    background-color: $clr-gray-200;
-                    border: none;
-                    border-radius: 5px;
-                    color: $clr-gray-400;
-                    font-size: 16px;
-                    letter-spacing: 0.05em;
-                    line-height: 19px;
-                    font-weight: 500;
-                    outline: none;
-                    padding: 12px 40px;
-                    transition: all 0.2s linear;
-
-                    &:hover {
-                        background-color: lighten($clr-gray-200, 5);
-                    }
-
-                    &:active {
-                        background-color: darken($clr-gray-200, 5);
-                    }
-                }
-            }
-
-            .srp-data {
-                .srp-pickup-my-location__button {
-                    @include btn-primary-blue-white();
-
-                    border-radius: 5px;
-                    outline: none;
-                    width: 100%;
-
-                    font-style: normal;
-                    font-weight: 500;
-                    font-size: 14px;
-                    line-height: 16px;
-                    letter-spacing: 0.05em;
-
-                    &:hover {
-                        background-color: lighten($clr-gray-600, 5);
-                    }
-
-                    &:active {
-                        background-color: darken($clr-gray-600, 5);
-                    }
-                }
             }
 
             .srp-toggle {
@@ -371,36 +321,6 @@
 
             .srp-postal-code {
                 .ship-postalCode {
-                    & ~ button {
-                        @include btn-primary-blue-white();
-
-                        border-radius: 5px;
-                        font-size: 12px;
-                        height: 36px;
-                        letter-spacing: 1px;
-                        outline: none;
-                        transition: all 0.2s linear;
-                        text-transform: uppercase;
-
-                        &:hover {
-                            background-color: lighten($clr-gray-600, 5);
-                        }
-
-                        &:active {
-                            background-color: darken($clr-gray-600, 5);
-                        }
-                    }
-
-                    small a {
-                        font-family: $font-family-100;
-                        font-style: normal;
-                        font-weight: normal;
-                        font-size: 10px;
-                        line-height: 12px;
-                        color: $clr-blue-500;
-                        margin-top: 7px;
-                    }
-
                     span.help.error {
                         color: red;
                         font-size: 12px;
@@ -447,9 +367,6 @@
                 }
 
                 .srp-delivery-select-container {
-                    border: 1px solid $clr-gray-300;
-                    border-radius: 0;
-
                     .srp-shipping-current-many {
                         &__name {
                             color: #303030;
@@ -484,14 +401,6 @@
                         cursor: pointer;
                     }
                 }
-                span {
-                    font-family: $font-family-100;
-                    font-style: normal;
-                    font-weight: normal;
-                    font-size: 12px;
-                    line-height: 14px;
-                    text-decoration: none;
-                }
             }
 
             @include mq(md, max) {
@@ -504,26 +413,7 @@
                     margin: 0;
                 }
 
-                .link-coupon-add {
-                    color: #303030;
-                    font-size: 12px;
-                    text-decoration: underline;
-                }
-
-                .coupon-label label {
-                    margin-bottom: 12px;
-                    font-family: $font-family-100;
-                    font-style: normal;
-                    font-weight: normal;
-                    font-size: 12px;
-                    line-height: 14px;
-                    color: $clr-gray-400;
-                    cursor: none;
-                }
-
                 .coupon-fields {
-                    margin-bottom: 32px;
-
                     @include mq(sm, max) {
                         span {
                             display: flex;
@@ -536,93 +426,6 @@
                             }
                         }
                     }
-
-                    input {
-                        border: 2px solid $clr-gray-100;
-                        border-radius: 5px;
-                        box-shadow: none;
-                        color: $clr-gray-300;
-                        font-size: 12px;
-                        height: 34px;
-                        padding: 0 12px;
-                        max-width: 160px;
-
-                        @include mq(sm, max) {
-                            max-width: 100%;
-                            width: 100%;
-                        }
-                    }
-
-                    button {
-                        @include btn-primary-blue-white();
-
-                        border-radius: 5px;
-                        font-size: 12px;
-                        height: 36px;
-                        letter-spacing: 1px;
-                        margin-left: 6px;
-                        outline: none;
-                        transition: all 0.2s linear;
-                        width: 94px;
-                        text-transform: uppercase;
-
-                        @include mq(md, max) {
-                            width: 138px;
-                        }
-
-                        &:hover {
-                            background-color: lighten($clr-gray-600, 5);
-                        }
-
-                        &:active {
-                            background-color: darken($clr-gray-600, 5);
-                        }
-                    }
-                }
-            }
-
-            .accordion-group {
-                tr {
-                    border-color: #e5e5e5;
-
-                    td {
-                        &.empty {
-                            display: none;
-                        }
-
-                        &.info,
-                        &.monetary {
-                            font-style: normal;
-                            font-weight: normal;
-                            font-size: 14px;
-                            font-family: $font-family-200;
-                            line-height: 16px;
-                            color: $clr-gray-600;
-                            padding: 12px 0;
-                        }
-
-                        &.info {
-                            text-align: left;
-                        }
-
-                        &.monetary {
-                            text-align: right;
-                        }
-                    }
-                }
-
-                tfoot {
-                    tr {
-                        td.info,
-                        td.monetary {
-                            font-style: normal;
-                            font-weight: 700;
-                            font-size: 18px;
-                            line-height: 21px;
-                            font-family: $font-family-100;
-                            color: $clr-gray-600;
-                        }
-                    }
                 }
             }
         }
@@ -656,7 +459,9 @@
             a {
                 @include btn-primary-blue-black();
 
-                display: block;
+                display: flex;
+                align-items: center;
+                justify-content: center;
 
                 padding: 12px 19px;
                 border-radius: 5px;
@@ -673,6 +478,12 @@
     }
 }
 
+.container-cart {
+    .ship-country {
+        display: none;
+    }
+}
+
 .container-cart.container-cart-fill {
     width: 100%;
     padding: 0 !important;
@@ -687,12 +498,6 @@
     }
 }
 
-.container-cart {
-    .ship-country {
-        display: none;
-    }
-}
-
 .container-cart {
     .cart-template {
         .item-quantity-change {
@@ -817,8 +622,7 @@
 .container-cart {
     .link-coupon-add,
     .link-choose-more-products {
-        color: $clr-common-black;
-
+        &,
         span {
             color: $clr-common-black;
         }
@@ -830,9 +634,9 @@
         padding: 0 16px;
     }
 
-    .srp-container,
+    .cart-more-options .srp-data,
     .cart-more-options,
-    .cart-more-options .srp-data {
+    .srp-container {
         width: 100%;
     }
 
@@ -846,13 +650,56 @@
     }
 }
 
+.container-cart {
+    .srp-data {
+        .srp-delivery-select-container {
+            border: 1px solid $clr-gray-300;
+            border-radius: 8px;
+        }
+
+        .srp-pickup-my-location__button {
+            @include btn-primary-blue-white();
+            @include font-size("s-400");
+            font-weight: 500;
+            line-height: 19.07px;
+            font-family: $font-family-100;
+            letter-spacing: 0.05em;
+
+            width: 100%;
+            border-radius: 5px;
+
+            outline: none;
+
+            &:hover {
+                background-color: lighten($clr-gray-600, 5);
+                color: $clr-common-white;
+            }
+
+            &:active {
+                background-color: darken($clr-gray-600, 5);
+                color: $clr-common-white;
+            }
+
+            @media screen and (min-width: 2500px) {
+                @include font-size("splus-300");
+                line-height: 38.13px;
+            }
+        }
+    }
+}
+
 .container-cart {
     .cart {
         margin-bottom: 48px;
     }
 
+    .srp-postal-code__form {
+        width: 100%;
+    }
+
     .vtex-shipping-preview-0-x-postalCodeForgotten {
         gap: 8px;
+
         width: 100%;
         margin: 0;
 
@@ -865,7 +712,7 @@
                 width: 100%;
                 height: 36px;
                 padding: 12px 8px;
-                border: 1px solid $clr-gray-450;
+                border: 1px solid $clr-gray-250;
                 border-radius: 5px;
 
                 box-shadow: none;
@@ -874,12 +721,29 @@
             }
         }
 
+        small {
+            margin-top: 4px;
+
+            a {
+                font-size: 0px;
+
+                &::before {
+                    content: "Não sei meu código postal";
+                    font: normal normal 10px / 11.7px $font-family-200;
+
+                    text-decoration: underline;
+                    color: $clr-common-black;
+                }
+            }
+        }
+
         .srp-pc-input.btn {
             width: fluid(120px, 343px);
-            margin: 6px 0 0;
+            margin: -8px 0 0;
         }
     }
 }
+
 .container-cart {
     .ship-postalCode {
         label {
@@ -895,6 +759,67 @@
     }
 }
 
+.container-cart {
+    .ship-postalCode {
+        & ~ button {
+            @include btn-primary-blue-white();
+            @include font-size("s-200");
+            line-height: 19.07px;
+            letter-spacing: 1px;
+
+            height: 36px;
+            border-radius: 5px;
+
+            outline: none;
+            transition: all 0.2s linear;
+            text-transform: uppercase;
+
+            &:hover {
+                background-color: lighten($clr-gray-600, 5);
+            }
+
+            &:active {
+                background-color: darken($clr-gray-600, 5);
+            }
+        }
+    }
+}
+
+.container-cart {
+    .vtex-shipping-preview-0-x-postalCodeForgotten {
+        .ship-postalCode {
+            @media screen and (min-width: 2500px) {
+                input,
+                & ~ button {
+                    height: 55px;
+                }
+
+                label {
+                    @include font-size("splus-100");
+                    line-height: 32.68px;
+                }
+
+                input {
+                    @include font-size("splus-100");
+                }
+
+                small a {
+                    &::before {
+                        font: normal normal 20px / 23.4px $font-family-200;
+                    }
+                }
+
+                & ~ .srp-pc-input.btn {
+                    @include font-size("splus-300");
+                    line-height: 38.13px;
+
+                    margin-top: 12px;
+                }
+            }
+        }
+    }
+}
+
 .container-cart {
     .cart-template {
         .cart-more-options {
@@ -925,7 +850,7 @@
 .container-cart {
     .cart-items {
         .product-item {
-            padding: 0;
+            padding: 16px 0;
             margin: 0;
 
             .product-price {
@@ -935,9 +860,9 @@
 
             .item-remove {
                 position: absolute;
-                top: 0;
-                right: 0;
-                transform: translate(20%, -35%);
+                top: 22px;
+                right: 6px;
+                transform: translate(50%, -50%);
 
                 .icon-remove {
                     color: #c4c4c4;
@@ -947,6 +872,25 @@
     }
 }
 
+.container-cart {
+    .cart-items {
+        @media screen and (min-width: 1025px) {
+            .product-item {
+                .item-remove {
+                    position: static;
+                    top: initial;
+                    right: initial;
+                    transform: none;
+
+                    .icon-remove {
+                        color: #c4c4c4;
+                    }
+                }
+            }
+        }
+    }
+}
+
 .container-cart {
     .cart-template {
         .cart-more-options {
@@ -998,6 +942,24 @@
     }
 }
 
+.container-cart {
+    .cart-more-options {
+        .shp-open-options {
+            @include font-size("s-300");
+            line-height: 19.07px;
+            letter-spacing: 0.05em;
+
+            background-color: $clr-gray-200;
+            color: $clr-common-black;
+
+            @media screen and (min-width: 2500px) {
+                @include font-size("splus-300");
+                line-height: 38.13px;
+            }
+        }
+    }
+}
+
 .container-cart {
     @media screen and (min-width: 2500px) {
         .cart-more-options {
@@ -1050,6 +1012,175 @@
     }
 }
 
+.container-cart {
+    .coupon-label label {
+        @include font-size("s-200");
+        font-style: normal;
+        font-weight: normal;
+        line-height: 14.04px;
+        font-family: $font-family-100;
+
+        margin-bottom: 12px;
+
+        text-align: left;
+
+        color: $clr-gray-400;
+        cursor: none;
+
+        @media screen and (min-width: 2500px) {
+            @include font-size("splus-100");
+            line-height: 28.08px;
+        }
+    }
+}
+
+.container-cart {
+    .coupon-fieldset {
+        span {
+            position: relative;
+            display: inline-flex;
+            gap: 8px;
+            width: 100%;
+            white-space: nowrap;
+            text-align: left;
+
+            i {
+                position: absolute;
+            }
+        }
+
+        .coupon-value {
+            @include font-size("s-200");
+            line-height: 14.04px;
+
+            width: fluid(204.32px, 343px);
+            height: 36px;
+            padding: 0 12px;
+            border: 2px solid #f0f0f0;
+            border-radius: 5px;
+
+            font-size: 12px;
+
+            box-shadow: none;
+            color: #8d8d8d;
+        }
+    }
+}
+
+.container-cart {
+    .coupon-fieldset {
+        @media screen and (min-width: 2500px) {
+            span {
+                gap: 30px;
+            }
+
+            .coupon-value {
+                @include font-size("splus-100");
+                line-height: 28.08px;
+
+                width: fluid(398.42px, 688.35px);
+                height: 55px;
+            }
+        }
+    }
+}
+
+.container-cart {
+    .coupon-form {
+        margin-bottom: 30px;
+    }
+}
+
+.container-cart {
+    @media screen and (min-width: 1025px) {
+        .coupon-form {
+            margin-bottom: 35px;
+        }
+    }
+}
+
+.container-cart {
+    .link-coupon-add {
+        display: inline;
+        text-align: center;
+
+        span {
+            @include font-size("s-200");
+            line-height: 14.04px;
+            text-decoration: none;
+
+            position: initial;
+            display: inline;
+            text-align: initial;
+        }
+    }
+}
+
+.container-cart {
+    .link-coupon-add {
+        @media screen and (min-width: 2500px) {
+            span {
+                @include font-size("splus-300");
+                line-height: 28.08px;
+            }
+        }
+    }
+}
+
+.container-cart {
+    .coupon-fieldset {
+        button {
+            @include btn-primary-blue-black();
+            @include font-size("s-200");
+            line-height: 19.07px;
+            letter-spacing: 1px;
+
+            width: fluid(133.51px, 343px);
+            height: 36px;
+            max-width: 133.51px;
+            border-radius: 5px;
+
+            transition: all 0.2s linear;
+
+            outline: none;
+            text-shadow: none;
+            text-transform: uppercase;
+            cursor: pointer;
+
+            &:hover {
+                background-color: lighten($clr-gray-600, 5);
+            }
+
+            &:active {
+                background-color: darken($clr-gray-600, 5);
+            }
+        }
+    }
+}
+
+.container-cart {
+    .coupon-fieldset {
+        @media screen and (min-width: 2500px) {
+            button {
+                @include font-size("splus-100");
+                line-height: 28.08px;
+
+                width: fluid(260.34px, 688.35px);
+                height: 55px;
+                max-width: none;
+            }
+        }
+
+        @media screen and (min-width: 600px) {
+            $width-container: 992px;
+
+            .coupon-value {
+                width: fluid(853px, $width-container);
+            }
+        }
+    }
+}
+
 .container-cart {
     @media screen and (min-width: 2500px) {
         .cart-links-bottom {
@@ -1068,407 +1199,72 @@
     }
 }
 
-.container-cart.container-cart-fill {
-    @media screen and (min-width: 1025px) {
-        $width-container: 1018px;
-
-        width: fluid($width-container, 1280px);
-
-        .cart-template {
-            display: grid;
-            grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid(
-                    354px,
-                    $width-container
-                );
-
-            .cart-template-holder {
-                grid-area: item;
-            }
-
-            .summary-template-holder {
-                grid-area: actions;
-
-                .row-fluid.summary {
-                    display: grid !important;
-                    grid-template: "options space total" auto / fluid(280px, $width-container) auto fluid(
-                            354px,
-                            $width-container
-                        );
-
-                    .cart-more-options {
-                        grid-area: options;
-                        padding: 0;
-                    }
-
-                    .totalizers {
-                        padding: 0;
-                        grid-area: total;
-                    }
-                }
-            }
-
-            .cart-links-bottom {
-                grid-area: button;
-                padding: 0;
-            }
-        }
-    }
-}
-
-.container-cart.container-cart-fill {
-    @media screen and (min-width: 2500px) {
-        $width-container: 1988.28px;
-
-        width: fluid($width-container, 2500px);
-
-        .cart-template {
-            grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid(
-                    688.35px,
-                    $width-container
-                );
-
-            .summary-template-holder {
-                .row-fluid.summary {
-                    grid-template: "options space total" auto / fluid(552px, $width-container) auto fluid(
-                            688.35px,
-                            $width-container
-                        );
-                }
-            }
-        }
-    }
-}
-
-//Comecei
-/* .container-cart.container-cart-fill {
-    .cart-template {
-        th.shipping-date {
-            font-size: 0px;
-
-            &::before {
-                content: "Frete";
-                font-size: 14px;
-            }
-        }
-
-        th.product-price {
-            font-size: 0px;
-            &::before {
-                content: "Unidade";
-                font-size: 14px;
-            }
-        }
-    }
-
-    .srp-postal-code__form {
-        width: 100%;
-    }
-
-    .vtex-shipping-preview-0-x-postalCodeForgotten {
-        display: flex;
-        gap: 8px;
-        width: 100%;
-        align-items: center;
-        justify-content: flex-start;
-    }
-
-    .ship-postalCode {
-        width: 62.682215743%;
-        display: flex;
-        align-items: flex-start;
-        flex-direction: column;
-
-        .input-small {
-            width: 100%;
-        }
-    }
-
-    .srp-pc-input {
-        width: 34.985422741%;
-        margin-top: 5px;
-    }
-
-    .srp-data {
-        margin-bottom: 48.35px;
-    }
-
-    .totalizers {
-        padding: 0 16px;
-        width: 100%;
-    }
-
-    .cart-more-options {
-        .srp-container {
-            padding: 0;
-            max-width: none;
-        }
-    }
-
-    .cart-links-bottom {
-        width: 100%;
-        padding: 0 16px;
-        margin-bottom: 43.42px;
-
-        .link-choose-more-products-wrapper {
-            margin: 0 0 14.91px;
-        }
-    }
-
-    .coupon-column .coupon-fields {
-        span {
-            width: 100%;
-            display: flex;
-            align-items: center;
-        }
-    }
-
-    .cart-template .cart-items td.quantity {
-        border: 1px solid #ddd;
-        border-radius: 8px;
-        padding: 10px;
-
-        input {
-            border: none;
-            padding: 0 10px;
-            box-sizing: content-box;
-        }
-    }
-
-    @media screen and (min-width: 600px) {
-        .totalizers {
-            padding: 0 16px;
-            margin: 0;
-        }
-
-        .cart-more-options {
-            .srp-data {
-                width: 343px;
-            }
-        }
-
-        .cart-template .cart-items th {
-            vertical-align: top;
-        }
-    }
-
-    @media screen and (min-width: 1025px) {
-        width: fluid(1018px, 1280px);
-
-        .cart-template .cart-items td.quantity {
-            margin: 6px auto 0 0;
-        }
-
-        .cart-template {
-            .shipping-date,
-            .product-price,
-            .quantity-price {
-                text-align: left;
-                padding: 5px 0;
-            }
-        }
-
-        .cart-template-holder {
-            padding: 0;
-        }
-
-        .product-name {
-            width: auto;
-        }
-
-        .cart-template .cart-items th {
-            text-align: left;
-            padding-bottom: 16px;
-        }
-
-        #cart-title {
-            padding: 0;
-        }
-
-        .cart {
-            margin-bottom: 48px;
-        }
-
-        .cart-more-options {
-            padding: 0;
-
-            .srp-container {
-                padding: 0;
-            }
-
-            .srp-data {
-                margin-bottom: 0;
-            }
-        }
-
-        .row-fluid.summary {
-            width: 100%;
-            margin: 0 auto;
-        }
-
-        .cart-more-options {
-            width: fluid(280px, 1018px);
-            float: left;
-
-            .srp-container {
-                .srp-content {
-                    .srp-main-title {
-                        margin-top: 0;
-                    }
-                }
-            }
-        }
-
-        .cart-links-bottom.cart-links {
-            width: fluid(354px, 1018px);
-            display: flex;
-            align-items: flex-end;
-            float: right;
-            padding: 0;
-            margin: 0 auto;
-        }
-
-        .btn-place-order-wrapper {
-            width: 100%;
-        }
-
-        .link-choose-more-products-wrapper {
-            width: 100%;
-            text-align: center;
-        }
-
-        .cart-totalizers.totalizers {
-            width: fluid(354px, 1018px);
-            float: right;
-            padding: 0;
-            margin-left: 0;
-            margin-right: 0;
-            margin-bottom: 0;
-        }
-    }
-} */
-
-.cart-fixed.affix {
-    position: relative !important;
-}
-
-.cart-fixed {
-    width: 100% !important;
-
-    h2 {
-        @include font-size("s-400");
-        line-height: 18.72px;
-
-        border: none;
-
-        font-weight: 500;
-        font-family: $font-family-200;
-
-        color: #303030;
-    }
-
-    .item-unavailable {
-        padding: 0;
-
-        &-message {
-            padding: 8px;
-        }
-    }
-}
-
-.cart-fixed {
-    @media screen and (min-width: 2500px) {
-        h2 {
-            @include font-size("splus-500");
-            line-height: 37.44px;
-        }
-    }
-}
-
-.cart-fixed {
-    .cart {
-        border: 1px solid $clr-gray-300;
-    }
-}
-
-.cart-fixed {
-    .cart .cart-items .item {
-        $width-container: 309px;
-
-        display: grid;
-        grid-template: "product-image product-name space product-price" auto / fluid(
-                60px,
-                $width-container
-            );
-
-        align-items: center;
-
-        .fn {
-            overflow: initial;
-            text-overflow: initial;
-            white-space: initial;
-            float: none;
-        }
-
-        .url,
-        .product-name,
-        .description {
-            width: 100%;
-        }
-        .url {
-            grid-area: product-image;
-        }
-
-        .product-name {
-            grid-area: product-name;
-        }
-    }
-}
-
-.cart-fixed {
-    .cart .cart-items {
-        .item {
-            .description {
-                grid-area: product-price;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                margin: 0;
-                height: 100%;
-            }
-
-            margin-top: 0;
-            padding-top: 0;
-            border-top: none;
-
-            &:not(:first-child) {
-                padding-top: 8px;
-                margin-top: 8px;
-                border-top: 1px solid #e5e5e5;
-            }
-
-            .quantity.badge {
+.container-cart {
+    .cart-template .summary-totalizers {
+        td {
+            &.empty {
                 display: none;
             }
 
-            .shipping-date,
-            .price {
-                color: #7d7d7d;
+            &.info {
+                text-align: left;
+                width: 50%;
+            }
+
+            &.monetary {
+                text-align: right;
+                width: 50%;
+            }
+        }
+
+        tbody td {
+            @include font-size("s-300");
+            font-style: normal;
+            font-weight: normal;
+
+            font-family: $font-family-200;
+            line-height: 16.38px;
+
+            color: #292929;
+            padding: 10px 0;
+        }
+
+        tfoot {
+            tr {
+                td.info,
+                td.monetary {
+                    @include font-size("splus-300");
+
+                    font-style: normal;
+                    font-weight: 700;
+
+                    line-height: 24.51px;
+                    font-family: $font-family-100;
+                    color: $clr-gray-600;
+                }
             }
         }
     }
 }
 
-.cart-fixed {
-    @media screen and (min-width: 600px) {
-        .cart .cart-items .item {
-            $width-container: 976px;
+.container-cart {
+    .cart-template .summary-totalizers {
+        @media screen and (min-width: 2500px) {
+            tbody td {
+                @include font-size("splus-300");
+                line-height: 32.76px;
+            }
 
-            grid-template:
-                "product-image product-name space product-price" auto / fluid(
-                    60px,
-                    $width-container
-                )
-                fluid(115px, $width-container) auto fluid(62px, $width-container);
+            tfoot {
+                tr {
+                    td.info,
+                    td.monetary {
+                        @include font-size("splus-700");
+
+                        line-height: 49.03px;
+                    }
+                }
+            }
         }
     }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index b93cc13..2cd2c42 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -76,7 +76,7 @@
                 font-size: 0px;
 
                 &::before {
-                    @include font-size("s-200");
+                    @include font-size("s-500");
                     line-height: 24.51px;
 
                     content: "Seu carrinho está vazio.";
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index b5b160d..9be1a39 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -56,6 +56,11 @@ body {
     line-height: 42px;
     margin: 16px 0;
     text-transform: uppercase;
+    @media screen and (min-width: 2500px) {
+        font-size: 48px;
+
+        line-height: 65px;
+    }
 }
 
 .dropdown {
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 8a04c82..eb5741a 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -101,16 +101,26 @@
     position: absolute;
 }
 .slick-prev {
-    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
-        no-repeat center center;
     z-index: 4;
     left: 10px;
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
+        no-repeat center center;
+
+    @media screen and (min-width: 2500px) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
+            no-repeat center center;
+    }
 }
 .slick-next {
     z-index: 4;
     right: 10px;
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
         no-repeat center center;
+
+    @media screen and (min-width: 2500px) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
+            no-repeat center center;
+    }
 }
 .slick-arrow.slick-hidden {
     display: none;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 5f695a7..3ad7abf 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -68,6 +68,7 @@ body :where(ul, li, ol) {
 
         font-style: normal;
         font-weight: normal;
+        font-family: $font-family-100;
         text-transform: uppercase;
     }
 
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index a65c52e..2603bd7 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -10,9 +10,9 @@ $clr-common-white: #fff;
 
 $clr-gray-600: #292929;
 $clr-gray-500: #6c6c6c;
-$clr-gray-450: #c4c4c4;
 $clr-gray-400: #7d7d7d;
 $clr-gray-300: #8d8d8d;
+$clr-gray-250: #c4c4c4;
 $clr-gray-200: #e5e5e5;
 $clr-gray-100: #f0f0f0;
 
@@ -31,6 +31,7 @@ $text-sizes: (
     "s-300": 14px,
     "s-400": 16px,
     "s-500": 18px, // MAIN
+    "s-600": 20px,
     "splus-100": 24px,
     "splus-200": 26px,
     "splus-300": 28px,

From 4af6ba2000b57711f3b3d8d8c4cdbd57436b3874 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Mon, 26 Dec 2022 14:02:42 -0300
Subject: [PATCH 27/27] feat(checkout): created styles for large devices to
 email,profile and payment route

---
 .../sass/checkout/_checkout-autenticacao.scss | 524 +++++++++++++++--
 .../sass/checkout/_checkout-carrinho.scss     | 530 ++++++++++++------
 .../src/arquivos/sass/checkout/_checkout.scss |   4 +
 checkout/src/arquivos/sass/lib/_slick.scss    |  12 +-
 .../src/arquivos/sass/partials/_header.scss   |   7 +
 .../arquivos/sass/partials/_prateleira.scss   |   9 +-
 6 files changed, 847 insertions(+), 239 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index b0a046c..94bb886 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -59,19 +59,6 @@
                     border-color: $clr-gray-300;
                 }
 
-                .shp-summary-group-price,
-                .shp-summary-package {
-                    color: $clr-gray-300;
-                }
-
-                .shp-summary-group-price {
-                    padding-right: 16px;
-                }
-
-                .shp-summary-package {
-                    padding-left: 16px;
-                }
-
                 .vtex-omnishipping-1-x-summaryChange {
                     border-color: #303030;
                     color: #303030;
@@ -154,10 +141,6 @@
         border-radius: 8px;
     }
 
-    .checkout-container .client-profile-data .accordion-group {
-        padding: 16px 16px 44px;
-    }
-
     .client-profile-data .accordion-group .accordion-heading span i.icon-user {
         display: none;
     }
@@ -184,25 +167,29 @@
             padding: 0 16px;
         }
 
-        #go-to-cart-button {
-            padding: 0 16px;
-
-            a {
-                font-size: 12px;
-                line-height: 16.34px;
-                text-decoration: none;
-                color: $clr-common-black;
-            }
-        }
-
         .cart {
             border: none;
             margin: 0;
         }
 
         .cart-fixed {
-            padding-top: 16px;
             height: auto !important;
+
+            &.affix {
+                position: sticky;
+                top: 0;
+            }
+        }
+
+        @media screen and (min-width: 1025px) {
+            position: relative;
+
+            .cart-fixed {
+                &.affix {
+                    top: 60px;
+                    transform: translateY(60px);
+                }
+            }
         }
     }
 
@@ -227,10 +214,17 @@
             }
         }
 
+        @media screen and (min-width: 2500px) {
+            grid-template-columns: fluid(1314.75px, 1988.28px) fluid(642.7px, 1988.28px);
+            gap: 0 30.3px;
+        }
+
         div.row-fluid {
             width: 100%;
             display: grid;
             grid-template-columns: 1fr;
+            gap: 17px;
+            margin-bottom: 17px;
 
             #client-profile-data,
             #shipping-data,
@@ -239,7 +233,7 @@
             }
 
             .client-profile-data.filled {
-                margin: 0 16px 16px;
+                margin: 0px 16px;
             }
 
             &::before,
@@ -250,7 +244,8 @@
             @media screen and (min-width: 1025px) {
                 grid-template-columns: fluid(331px, 677px) fluid(330px, 677px);
                 grid-template-rows: auto auto auto;
-                gap: 0 16px;
+                margin: 0;
+                gap: 16px;
 
                 #shipping-data,
                 #payment-data {
@@ -271,6 +266,10 @@
                     margin: 0;
                 }
             }
+            @media screen and (min-width: 2500px) {
+                grid-template-columns: fluid(642.7px, 1314.75px) fluid(640.75px, 1314.75px);
+                gap: 16px 31.3px;
+            }
         }
 
         .form-step.box-edit .row-fluid {
@@ -673,6 +672,10 @@
     .client-profile-data,
     .shipping-data,
     .payment-data {
+        .accordion-inner {
+            padding: 0;
+        }
+
         .accordion-group {
             padding: 16px;
             border: 1px solid #f0f0f0;
@@ -681,9 +684,43 @@
         }
     }
 
+    .client-profile-data {
+        .accordion-group {
+            @media screen and (min-width: 2500px) {
+                padding: 24px 35.51px 36px 34px;
+            }
+        }
+    }
+
+    .payment-data .accordion-group {
+        @media screen and (min-width: 2500px) {
+            padding: 24px 33.51px 28px 34px;
+        }
+    }
+
     .cart-template.mini-cart .cart-fixed {
-        border: 1px solid #f0f0f0;
+        border-top: 1px solid $clr-gray-100;
         border-radius: 8px;
+
+        .summary-cart-template-holder,
+        .row-fluid.summary,
+        h2 {
+            border-left: 1px solid $clr-gray-100;
+            border-right: 1px solid $clr-gray-100;
+        }
+
+        h2 {
+            padding-top: 16px;
+            padding-bottom: 34px;
+        }
+        .summary-template-holder {
+            padding: 0px;
+        }
+
+        .row-fluid.summary {
+            border-radius: 0 0 8px 8px;
+            border-bottom: 1px solid $clr-gray-100;
+        }
     }
 }
 
@@ -692,6 +729,7 @@
         @include font-size("s-400");
         line-height: 18.72px;
 
+        padding: 0;
         margin-bottom: 16px;
 
         font-family: $font-family-200;
@@ -830,7 +868,7 @@
 }
 
 .checkout-container {
-    .btn-submit-wrapper #go-to-shipping,
+    .btn-submit-wrapper button,
     #find-pickups-manualy-button-denied,
     .btn-go-to-payment {
         @include btn-primary-blue-white();
@@ -855,13 +893,7 @@
         &:active {
             background: darken($clr-gray-600, 5);
         }
-    }
-}
 
-.checkout-container {
-    .btn-submit-wrapper #go-to-shipping,
-    #find-pickups-manualy-button-denied,
-    .btn-go-to-payment {
         @media screen and (min-width: 2500px) {
             @include font-size("splus-300");
             line-height: 38.13px;
@@ -887,9 +919,16 @@
 
 .checkout-container {
     .shipping-data {
+        .shipping-container {
+            padding: 0;
+        }
+
         .accordion-group {
             width: 100%;
-            padding: 16px;
+
+            padding: 24px 17.8px 36px 17px;
+
+            margin: 0;
 
             font-family: $font-family-100;
 
@@ -982,16 +1021,23 @@
 
 .checkout-container {
     .shp-method-option {
-        @include font-size("s-300");
-        line-height: 19.07px;
+        .shp-method-option-text {
+            @include font-size("s-300");
+            text-transform: uppercase;
+            line-height: 19.07px;
+            display: block;
+            padding: 8px 0;
+        }
 
         &.shp-method-option-active {
             color: $clr-common-black;
         }
 
         @media screen and (min-width: 2500px) {
-            @include font-size("splus-300");
-            line-height: 38.13px;
+            .shp-method-option-text {
+                @include font-size("splus-300");
+                line-height: 38.13px;
+            }
         }
     }
 }
@@ -1090,6 +1136,10 @@
                 font-family: $font-family-100;
             }
 
+            .vtex-omnishipping-1-x-leanShippingIcon {
+                margin-left: 8px;
+            }
+
             .vtex-omnishipping-1-x-leanShippingTextLabel {
                 letter-spacing: 0.05em;
             }
@@ -1102,6 +1152,7 @@
         @media screen and (min-width: 2500px) {
             .vtex-omnishipping-1-x-deliveryGroup {
                 .vtex-omnishipping-1-x-leanShippingTextLabel,
+                .vtex-omnishipping-1-x-leanShippingTextLabelSingle,
                 .vtex-omnishipping-1-x-optionPrice,
                 .shp-option-text-time {
                     @include font-size("splus-100");
@@ -1255,7 +1306,7 @@
         &::before {
             content: "";
 
-            width: 21px;
+            min-width: 21px;
             height: 21px;
             background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") center
                 center/ cover;
@@ -1265,7 +1316,7 @@
             padding: 15px 28px 15px 28.66px;
 
             &::before {
-                width: 46.45px;
+                min-width: 46.45px;
                 height: 46.45px;
             }
         }
@@ -1367,6 +1418,74 @@
     }
 }
 
+.checkout-container {
+    .shipping-data {
+        height: 100%;
+
+        .box-info {
+            .shp-summary-group,
+            .shipping-container {
+                padding: 0;
+            }
+
+            .vtex-omnishipping-1-x-summaryChange {
+                display: none;
+            }
+            .vtex-omnishipping-1-x-SummaryItemInfo {
+                border: none;
+
+                span {
+                    font-family: $font-family-100;
+                    font-size: 12px;
+                    font-weight: 400;
+
+                    line-height: 16.34px;
+
+                    @media screen and (min-width: 2500px) {
+                        font-size: 24px;
+
+                        line-height: 32.68px;
+                        letter-spacing: 0.05em;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.checkout-container {
+    .vtex-omnishipping-1-x-summaryPackage .shp-summary-package-time span.shp-option-text {
+        font-family: $font-family-100;
+        font-size: 12px;
+        font-weight: 400;
+        text-transform: uppercase;
+        line-height: 16.34px;
+
+        @media screen and (min-width: 2500px) {
+            font-size: 24px;
+
+            line-height: 32.68px;
+            letter-spacing: 0.05em;
+        }
+    }
+}
+
+.checkout-container {
+    .vtex-omnishipping-1-x-SummaryItemPrice {
+        font-family: $font-family-100;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 16.34px;
+
+        @media screen and (min-width: 2500px) {
+            font-size: 24px;
+
+            line-height: 32.68px;
+            letter-spacing: 0.05em;
+        }
+    }
+}
+
 .checkout-container {
     .summary-cart-template-holder.cart-fixed-transition {
         @media screen and (max-width: 1024px) {
@@ -1448,10 +1567,6 @@
 
 //autentication
 
-.cart-fixed.affix {
-    position: relative !important;
-}
-
 .cart-fixed {
     width: 100% !important;
 
@@ -1459,10 +1574,12 @@
         @include font-size("s-400");
         line-height: 18.72px;
 
+        margin: 0;
         border: none;
 
         font-weight: 500;
         font-family: $font-family-200;
+        background-color: transparent;
 
         color: #303030;
         @media screen and (min-width: 2500px) {
@@ -1482,6 +1599,7 @@
 
 .cart-fixed {
     .cart {
+        overflow: initial;
         border: 1px solid $clr-gray-300;
     }
 }
@@ -1491,10 +1609,9 @@
         $width-container: 309px;
 
         display: grid;
-        grid-template: "product-image product-name space product-price" auto / fluid(
-                60px,
-                $width-container
-            );
+        grid-template:
+            "product-image product-name space product-price" auto / fluid(60px, $width-container)
+            minmax(auto, fluid(115px, $width-container)) auto auto;
 
         align-items: center;
 
@@ -1510,8 +1627,19 @@
         .description {
             width: 100%;
         }
+
+        .description {
+            grid-area: product-price;
+        }
+
         .url {
             grid-area: product-image;
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
         }
 
         .product-name {
@@ -1520,16 +1648,64 @@
     }
 }
 
+.cart-fixed {
+    .cart .cart-items .item {
+        .product-name {
+            @include font-size("s-200");
+            line-height: 14.04px;
+            font-weight: 400;
+            font-family: $font-family-200;
+
+            margin-left: 7px;
+
+            color: $clr-common-black;
+
+            @media screen and (min-width: 2500px) {
+                @include font-size("splus-100");
+                line-height: 28.08px;
+
+                margin-left: 13.5px;
+            }
+        }
+
+        .description {
+            @include font-size("s-200");
+            line-height: 16.34px;
+            font-family: $font-family-100;
+            font-weight: 400;
+
+            color: $clr-gray-600;
+
+            @media screen and (min-width: 2500px) {
+                @include font-size("splus-100");
+                line-height: 32.86px;
+            }
+        }
+    }
+}
+
 .cart-fixed {
     .cart .cart-items {
         .item {
             .description {
-                grid-area: product-price;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 margin: 0;
                 height: 100%;
+                span,
+                strong {
+                    @include font-size("s-200");
+                    line-height: 16.34px;
+                    font-weight: 400;
+                    font-family: $font-family-100;
+
+                    color: $clr-gray-600;
+                }
+
+                .shipping-date {
+                    display: none;
+                }
             }
 
             margin-top: 0;
@@ -1539,7 +1715,7 @@
             &:not(:first-child) {
                 padding-top: 8px;
                 margin-top: 8px;
-                border-top: 1px solid #e5e5e5;
+                border-top: 1px solid $clr-gray-200;
             }
 
             .quantity.badge {
@@ -1548,7 +1724,11 @@
 
             .shipping-date,
             .price {
-                color: #7d7d7d;
+                color: $clr-gray-400;
+            }
+            .price {
+                text-align: right;
+                margin: 0;
             }
         }
     }
@@ -1564,7 +1744,39 @@
                     60px,
                     $width-container
                 )
-                fluid(115px, $width-container) auto fluid(62px, $width-container);
+                minmax(fluid(115px, $width-container), auto) auto minmax(fluid(62px, $width-container), auto);
+        }
+    }
+
+    @media screen and (min-width: 1025px) {
+        .cart .cart-items .item {
+            $width-container: 298px;
+
+            grid-template:
+                "product-image product-name space product-price" auto / fluid(
+                    60px,
+                    $width-container
+                )
+                fluid(115px, $width-container) auto min(fluid(62px, $width-container));
+        }
+    }
+
+    @media screen and (min-width: 2500px) {
+        .cart .cart-items .item {
+            $width-container: 612.484px;
+
+            height: 116.5px;
+
+            .url {
+                height: 116.5px;
+            }
+
+            grid-template:
+                "product-image product-name space product-price" auto / fluid(
+                    116.5px,
+                    $width-container
+                )
+                fluid(227px, $width-container) auto min(fluid(124px, $width-container));
         }
     }
 }
@@ -1620,6 +1832,11 @@
 
 .checkout-container {
     .cart-template.mini-cart {
+        .payment-confirmation-wrap {
+            border: none !important;
+            padding: 0;
+        }
+
         .cart-totalizers.totalizers {
             tfoot {
                 tr {
@@ -1670,3 +1887,194 @@
         }
     }
 }
+
+.checkout-container {
+    #payment-data-submit {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        margin-top: 20px;
+        border-radius: 8px;
+
+        transition: 200ms linear;
+
+        background-color: #298541;
+
+        span {
+            @include font-size("s-300");
+            font-family: $font-family-100;
+            letter-spacing: 0.05em;
+            line-height: 19.07px;
+            font-weight: 700;
+            color: $clr-common-white;
+            text-transform: uppercase;
+        }
+
+        i {
+            display: none;
+        }
+
+        &:hover {
+            background: lighten(#298541, 5);
+        }
+
+        &:active {
+            background: darken(#298541, 5);
+        }
+
+        @media screen and (min-width: 2500px) {
+            span {
+                @include font-size("splus-300");
+                line-height: 38.13px;
+            }
+        }
+    }
+}
+
+.checkout-container {
+    #go-to-cart-button {
+        padding: 0 16px;
+        margin: 0 0 10px;
+        a {
+            @include font-size("s-200");
+            line-height: 16.34px;
+            font-weight: 400;
+            color: $clr-common-black;
+            font-family: $font-family-100;
+        }
+        @media screen and (min-width: 2500px) {
+            margin: 19.5 0 10px;
+            a {
+                @include font-size("splus-100");
+                line-height: 32.68px;
+            }
+        }
+    }
+}
+
+.container-order-form {
+    .store-country-BRA.active span.accordion-toggle.collapsed.accordion-toggle-active::after {
+        content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
+        display: block;
+        margin-top: 12px;
+        font-family: $font-family-100;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;
+        letter-spacing: -0.01em;
+        color: $clr-gray-400;
+
+        @media screen and (min-width: 2500px) {
+            font-size: 28px;
+            line-height: 48px;
+        }
+    }
+}
+
+.container-order-form .orderform-template.active div.row-fluid #payment-data.span12 {
+    @media screen and (min-width: 1025px) {
+        grid-column: 1/3;
+        grid-row: 2/3;
+    }
+}
+
+.checkout-container {
+    #payment-group-creditCardPaymentGroup .payment-group-item-text {
+        background: none;
+    }
+
+    #payment-data {
+        &.payment-data {
+            .form-step.box-new {
+                .steps-view {
+                    width: 100%;
+
+                    @media screen and (min-width: 1025px) {
+                        $width-container: 642px;
+
+                        width: fluid(393px, $width-container);
+                    }
+
+                    @media screen and (min-width: 2500px) {
+                        $width-container: 1247.25px;
+                        width: fluid(800.25px, $width-container);
+                    }
+                }
+            }
+
+            .link-gift-card {
+                margin: 0px;
+                left: 0px;
+                margin-bottom: 10px;
+
+                @media screen and (min-width: 1025px) {
+                    left: 9px;
+                }
+            }
+
+            .payment-group {
+                width: 100%;
+
+                @media screen and (min-width: 1025px) {
+                    $width-container: 642px;
+
+                    width: fluid(209px, $width-container);
+                }
+
+                @media screen and (min-width: 2500px) {
+                    $width-container: 1247.25px;
+                    width: fluid(406.48px, $width-container);
+                }
+            }
+
+            .payment-group-list-btn {
+                width: 100%;
+
+                .payment-group-item {
+                    width: 100%;
+
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    border: 1px solid $clr-common-black;
+                    padding: 13px;
+                    color: $clr-common-black;
+                    border-radius: 6px;
+                    margin: 0;
+                    opacity: 0.3;
+
+                    &.active {
+                        border-color: #f15a31;
+                        color: #f15a31;
+                        opacity: 1;
+                    }
+
+                    &-text {
+                        @include font-size("s-300");
+                        padding: 0;
+                        font-family: $font-family-100;
+                        font-size: 14px;
+                        font-weight: 400;
+                        line-height: 24px;
+                        letter-spacing: -0.01em;
+                        text-align: center;
+                        background-image: none;
+                    }
+
+                    @media screen and (min-width: 2500px) {
+                        &-text {
+                            @include font-size("splus-300");
+                            line-height: 24px;
+                        }
+                    }
+                }
+
+                .payment-group-item {
+                    margin-bottom: 12px;
+                }
+            }
+        }
+    }
+}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index a86aced..cfda45e 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -40,22 +40,6 @@
                 width: 100%;
             }
         }
-
-        #payment-data-submit {
-            background: $clr-gray-600;
-            border: none;
-            border-radius: 0;
-            color: $clr-common-white;
-            outline: none;
-            transition: all 0.2s linear;
-            &:hover {
-                background: lighten($clr-gray-600, 5);
-            }
-
-            &:active {
-                background: darken($clr-gray-600, 5);
-            }
-        }
     }
 
     .lookatme {
@@ -67,22 +51,6 @@
             padding: 16px 0;
         }
 
-        th {
-            color: $clr-gray-600;
-            padding: 0 0 16px;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 14px;
-            line-height: 16px;
-
-            @include mq(md, max) {
-                &.quantity-price,
-                &.shipping-date {
-                    display: none;
-                }
-            }
-        }
-
         .product-image {
             height: auto;
             padding: 0;
@@ -105,30 +73,10 @@
         }
 
         .product-name {
-            padding-right: 0;
-
             @include mq(lg, max) {
                 width: 250px;
             }
 
-            a {
-                color: $clr-blue-500;
-                font-style: normal;
-                font-weight: normal;
-                font-size: 12px;
-                line-height: 14px;
-                transition: ease-in 0.22s all;
-
-                &:hover {
-                    color: darken($clr-blue-500, 10);
-                    text-decoration: none;
-                }
-
-                @media (max-width: 490px) {
-                    margin-left: 23px;
-                }
-            }
-
             .brand,
             .seller {
                 display: none !important;
@@ -186,24 +134,6 @@
             @media (max-width: 490px) {
                 margin-left: 84px !important;
             }
-
-            input {
-                background-color: $clr-common-white;
-                border: 1px solid $clr-gray-100;
-                border-radius: 0;
-                border-width: 0 1px;
-                display: block;
-                max-height: 38px;
-                margin: 0 !important;
-                padding: 8px 0;
-                width: 38px;
-                color: $clr-gray-400;
-                box-shadow: none;
-
-                @include mq(lg, max) {
-                    width: 24px !important;
-                }
-            }
         }
 
         .quantity-price,
@@ -266,26 +196,6 @@
                 @include mq(md, max) {
                     padding: 0 16px;
                 }
-
-                /* .srp-main-title {
-                    margin: 32px 0 12px;
-                    font-style: normal;
-                    font-weight: normal;
-                    font-size: 24px;
-                    line-height: 28px;
-                    color: $clr-gray-400;
-
-                    @include mq(md, max) {
-                        margin-top: 0;
-                    }
-                } */
-
-                /* .srp-description {
-                    color: $clr-gray-400;
-                    font-size: 12px;
-                    line-height: 18px;
-                    margin: 0 0 12px;
-                } */
             }
 
             .srp-toggle {
@@ -493,8 +403,11 @@
 
         width: 100%;
         padding: 0 16px;
-
         text-align: left;
+
+        @media screen and (min-width: 1025px) {
+            padding: 0;
+        }
     }
 }
 
@@ -510,54 +423,13 @@
             height: 16px;
             border-radius: 100%;
 
-            background: #00c8ff;
-
             .icon-plus-sign,
             .icon-minus-sign {
                 position: relative;
 
+                color: $clr-primary-blue-500;
                 width: 100%;
                 height: 100%;
-
-                &::before {
-                    content: "";
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-
-                    padding: 0;
-
-                    background-color: $clr-common-white;
-                }
-            }
-
-            .icon-plus-sign {
-                &::after {
-                    content: "";
-                    position: absolute;
-                    padding: 0;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-
-                    width: 2px;
-                    height: 10px;
-
-                    background-color: $clr-common-white;
-                }
-
-                &::before {
-                    width: 10px;
-                    height: 2px;
-                }
-            }
-
-            .icon-minus-sign {
-                &::before {
-                    width: 10px;
-                    height: 2px;
-                }
             }
         }
     }
@@ -587,32 +459,11 @@
                 width: 32px;
                 height: 32px;
 
+                .icon-minus-sign,
                 .icon-plus-sign {
-                    &::after {
-                        content: "";
-                        position: absolute;
-                        padding: 0;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-
-                        width: 4px;
-                        height: 20px;
-
-                        background-color: $clr-common-white;
-                    }
-
-                    &::before {
-                        width: 20px;
-                        height: 4px;
-                    }
-                }
-
-                .icon-minus-sign {
-                    &::before {
-                        width: 20px;
-                        height: 4px;
-                    }
+                    width: 32px;
+                    height: 32px;
+                    font-size: 1.72em;
                 }
             }
         }
@@ -659,17 +510,20 @@
 
         .srp-pickup-my-location__button {
             @include btn-primary-blue-white();
-            @include font-size("s-400");
-            font-weight: 500;
-            line-height: 19.07px;
-            font-family: $font-family-100;
-            letter-spacing: 0.05em;
 
             width: 100%;
             border-radius: 5px;
 
             outline: none;
 
+            span {
+                @include font-size("s-400");
+                font-weight: 700;
+                line-height: 19.07px;
+                font-family: $font-family-100;
+                letter-spacing: 0.05em;
+            }
+
             &:hover {
                 background-color: lighten($clr-gray-600, 5);
                 color: $clr-common-white;
@@ -681,8 +535,10 @@
             }
 
             @media screen and (min-width: 2500px) {
-                @include font-size("splus-300");
-                line-height: 38.13px;
+                span {
+                    @include font-size("splus-300");
+                    line-height: 38.13px;
+                }
             }
         }
     }
@@ -691,6 +547,10 @@
 .container-cart {
     .cart {
         margin-bottom: 48px;
+
+        @media screen and (min-width: 1025px) {
+            padding-top: 16px;
+        }
     }
 
     .srp-postal-code__form {
@@ -764,6 +624,7 @@
         & ~ button {
             @include btn-primary-blue-white();
             @include font-size("s-200");
+            font-weight: 700;
             line-height: 19.07px;
             letter-spacing: 1px;
 
@@ -842,7 +703,7 @@
         .cart-links-bottom {
             width: 100%;
             padding: 0 16px;
-            margin: 0;
+            margin: 20px 0 0;
         }
     }
 }
@@ -853,9 +714,118 @@
             padding: 16px 0;
             margin: 0;
 
+            .product-name {
+                @media screen and (min-width: 1025px) {
+                    padding-left: 16px;
+                }
+
+                @media screen and (min-width: 2500px) {
+                    padding-left: 31px;
+                }
+
+                a {
+                    @include font-size("s-200");
+                    line-height: 14.04px;
+
+                    color: $clr-common-black;
+                    font-family: $font-family-200;
+                    transition: ease-in 0.22s all;
+
+                    &:hover {
+                        color: darken($clr-primary-blue-500, 10);
+                        text-decoration: none;
+                    }
+
+                    @media screen and (min-width: 1025px) {
+                    }
+
+                    @media screen and (min-width: 2500px) {
+                        @include font-size("splus-100");
+                        line-height: 28.08px;
+                    }
+                }
+            }
+
+            .quantity {
+                @media screen and (min-width: 1025px) {
+                    margin: 15px 0 0;
+                }
+
+                @media screen and (min-width: 2500px) {
+                    margin: 54px 0 0;
+                }
+            }
+
             .product-price {
                 margin: 0;
                 height: 36px;
+
+                @media screen and (min-width: 1025px) {
+                }
+
+                span.best-price {
+                    height: 14.04px;
+
+                    @media screen and (min-width: 2500px) {
+                        height: 28.08px;
+                    }
+                }
+
+                span {
+                    @include font-size("s-200");
+                    line-height: 14.04px;
+                    font-family: $font-family-200;
+
+                    @media screen and (min-width: 2500px) {
+                        @include font-size("splus-100");
+                        line-height: 28.08px;
+                    }
+                }
+            }
+
+            .shipping-estimate-date {
+                @include font-size("s-200");
+                line-height: 14.04px;
+                font-family: $font-family-200;
+
+                @media screen and (min-width: 2500px) {
+                    @include font-size("splus-100");
+                    line-height: 28.08px;
+                }
+            }
+
+            .quantity-price span {
+                @include font-size("s-300");
+                line-height: 19.07px;
+                font-weight: 700;
+                font-family: $font-family-100;
+
+                @media screen and (min-width: 2500px) {
+                    @include font-size("splus-300");
+                    line-height: 38.13px;
+                }
+            }
+
+            .product-image {
+                width: 60px;
+                height: 60px;
+
+                a {
+                    display: block;
+                    width: auto;
+                    height: auto;
+                }
+
+                img {
+                    width: 100%;
+                    height: 60px;
+                    object-fit: cover;
+
+                    @media screen and (min-width: 2500px) {
+                        width: 146px;
+                        height: 146px;
+                    }
+                }
             }
 
             .item-remove {
@@ -872,19 +842,225 @@
     }
 }
 
+.container-cart {
+    .full-cart .cart {
+        td.product-name {
+            width: auto;
+        }
+
+        td.quantity {
+            padding: 9px 9px 9px 11px;
+            border-radius: 8px;
+            height: 34px;
+
+            .item-quantity-change {
+                box-sizing: content-box;
+            }
+
+            input {
+                @include font-size("s-300");
+                line-height: 16.38px;
+
+                font-family: $font-family-200;
+                font-weight: 400;
+
+                display: block;
+
+                width: 38px;
+                height: auto;
+                margin: 0 !important;
+                border: none;
+                border-radius: 0;
+
+                color: $clr-common-black;
+                background-color: $clr-common-white;
+                box-shadow: none;
+                box-sizing: content-box;
+
+                @media screen and (min-width: 2500px) {
+                    @include font-size("splus-300");
+                    line-height: 32.76px;
+
+                    padding: 0 5px;
+                    width: 37px;
+                }
+            }
+        }
+    }
+}
+
+.container-cart {
+    @media screen and (max-width: 1024px) {
+        .full-cart .cart {
+            table {
+                display: block;
+
+                thead {
+                    display: none;
+                }
+
+                tbody {
+                    display: block;
+
+                    tr {
+                        width: 100%;
+                        display: block;
+                        position: relative;
+
+                        td.shipping-date,
+                        td.quantity-price {
+                            display: none;
+                        }
+
+                        td.product-image {
+                            left: 0;
+                            position: absolute;
+                        }
+
+                        td.quantity {
+                            margin-left: 76px !important;
+                        }
+
+                        .product-name {
+                            display: block;
+                            margin-left: 76px;
+                            text-align: left;
+                            line-height: 140%;
+                            width: auto;
+                        }
+
+                        .item-remove {
+                            position: absolute;
+                            top: 22px;
+                            right: 6px;
+                            transform: translate(50%, -50%);
+                        }
+
+                        .product-price {
+                            position: absolute;
+                            bottom: 16px;
+                            padding: 0;
+                            right: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 .container-cart {
     .cart-items {
         @media screen and (min-width: 1025px) {
-            .product-item {
-                .item-remove {
-                    position: static;
-                    top: initial;
-                    right: initial;
-                    transform: none;
+            padding: 16px 0 0;
 
-                    .icon-remove {
-                        color: #c4c4c4;
+            .product-item {
+                height: 76px;
+            }
+
+            thead {
+                th {
+                    @include font-size("s-300");
+                    line-height: 16.38px;
+                    color: $clr-gray-600;
+                    font-style: normal;
+                    font-weight: 400;
+                    padding: 0 0 16px;
+                    font-family: $font-family-200;
+                    text-align: left;
+
+                    &.product-price,
+                    &.shipping-date {
+                        font-size: 0px;
+
+                        &::before {
+                            @include font-size("s-300");
+                            line-height: 16.38px;
+                        }
                     }
+
+                    &.product-price {
+                        &::before {
+                            content: "Unidade";
+                        }
+                    }
+
+                    &.shipping-date {
+                        &::before {
+                            content: "Frete";
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.container-cart {
+    .cart-items {
+        @media screen and (min-width: 2500px) {
+            .product-item {
+                height: 162px;
+            }
+
+            thead {
+                th {
+                    &.product-price,
+                    &.shipping-date {
+                        &::before {
+                            @include font-size("splus-300");
+                            line-height: 32.76px;
+                        }
+                    }
+
+                    &.quantity-price {
+                        min-width: 170px;
+                    }
+
+                    @include font-size("splus-300");
+                    line-height: 32.76px;
+                }
+            }
+        }
+    }
+}
+
+.container-cart {
+    .cart-items {
+        @media screen and (min-width: 1025px) {
+            tbody {
+                td {
+                    text-align: left;
+                    vertical-align: middle;
+                }
+
+                td.product-price {
+                    vertical-align: middle;
+                }
+
+                td.quantity {
+                    margin: 0;
+                }
+
+                td.shipping-date {
+                    padding: 5px 0;
+                }
+            }
+        }
+    }
+}
+
+.container-cart {
+    .cart-items {
+        .product-item {
+            .item-remove {
+                position: static;
+                top: initial;
+                right: initial;
+                transform: none;
+
+                .icon-remove {
+                    color: #c4c4c4;
                 }
             }
         }
@@ -1053,7 +1229,7 @@
             @include font-size("s-200");
             line-height: 14.04px;
 
-            width: fluid(204.32px, 343px);
+            width: 100%;
             height: 36px;
             padding: 0 12px;
             border: 2px solid #f0f0f0;
@@ -1132,6 +1308,7 @@
         button {
             @include btn-primary-blue-black();
             @include font-size("s-200");
+            font-weight: 700;
             line-height: 19.07px;
             letter-spacing: 1px;
 
@@ -1233,10 +1410,11 @@
             tr {
                 td.info,
                 td.monetary {
-                    @include font-size("splus-300");
+                    @include font-size("s-500");
 
                     font-style: normal;
                     font-weight: 700;
+                    padding: 0;
 
                     line-height: 24.51px;
                     font-family: $font-family-100;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 9be1a39..0cbe5d3 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -34,6 +34,10 @@ body {
     }
 }
 
+.container-cart {
+    min-height: 70vh;
+}
+
 .btn-success {
     background: $clr-gray-600;
     text-shadow: none;
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index eb5741a..33a427d 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -107,8 +107,11 @@
         no-repeat center center;
 
     @media screen and (min-width: 2500px) {
-        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
-            no-repeat center center;
+        height: 57.99px;
+        width: 26px;
+
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
+            no-repeat center center / cover;
     }
 }
 .slick-next {
@@ -118,8 +121,11 @@
         no-repeat center center;
 
     @media screen and (min-width: 2500px) {
+        height: 57.99px;
+        width: 26px;
+
         background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
-            no-repeat center center;
+            no-repeat center center / cover;
     }
 }
 .slick-arrow.slick-hidden {
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 3ad7abf..f39d459 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -33,8 +33,15 @@ body :where(ul, li, ol) {
 }
 
 .headerCheckout {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    left: 0;
+    background: $clr-common-white;
+    width: 100%;
     padding: 16px;
     border-bottom: 1px solid $clr-common-black;
+    z-index: 10000;
 
     .container {
         width: 100%;
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 7dcb2a2..41b9f63 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -47,6 +47,7 @@
 
             img {
                 max-width: 100%;
+                width: 100%;
                 height: auto;
             }
         }
@@ -69,11 +70,15 @@
     .product-item {
         &-name {
             min-height: 36px;
-
+            height: 36px;
             font-weight: 400;
             font-family: $font-family-100;
             text-overflow: ellipsis;
             text-align: center;
+
+            @media screen and (max-width:410px) {
+               height: 53px;
+            }
         }
 
         &-types {
@@ -82,8 +87,8 @@
             justify-content: center;
             flex-wrap: wrap;
             gap: 5px;
-
             min-height: 68px;
+            height: 68px
         }
     }
 }