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] 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
         }
     }
 }