From aaec739abb3978d4f1c2eaba038264b54b214ed8 Mon Sep 17 00:00:00 2001
From: DaviHKlein <davihgklein@gmail.com>
Date: Sun, 18 Dec 2022 22:07:13 -0300
Subject: [PATCH] feat(sass):Adiciona sass do carrinho

---
 .../sass/checkout/_checkout-carrinho.scss     | 843 +++++++++++++++---
 1 file changed, 718 insertions(+), 125 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 195f487..01efed1 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -5,6 +5,11 @@
 }
 
 .cart-template {
+    @include mq(l, max) {
+        display: flex;
+        flex-direction: column;
+    }
+
     font-family: $font-family;
     @include mq(md, max) {
         padding: 0 0;
@@ -13,10 +18,15 @@
         display: none;
     }
     .cart {
-        border: 3px solid $color-gray3;
+        border: 1px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
+        margin-bottom: 48px;
+
+        @include mq(l, max) {
+            padding: 0;
+        }
 
         @include mq(md, max) {
             margin: 0px 0 25px 0;
@@ -65,6 +75,15 @@
                 .price {
                     color: #7d7d7d;
                 }
+
+                .url {
+                    .photo {
+                        object-fit: cover;
+                        transform: rotateY(180deg);
+                        height: 60px;
+                        width: 60px;
+                    }
+                }
             }
         }
 
@@ -74,8 +93,22 @@
         }
 
         #go-to-cart-button a {
-            color: #303030;
-            text-decoration: underline;
+            color: $color-black;
+            font-family: "Open Sans";
+            font-style: normal;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            text-align: right;
+            text-decoration-line: underline;
+            @media (max-width: 1024px) {
+                float: right;
+            }
+            @include mq(xxl, min) {
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
         .summary-totalizers {
@@ -85,18 +118,27 @@
         }
 
         #payment-data-submit {
-            background: $color-black;
-            border: none;
-            border-radius: 0;
+            background: #298541;
+            border-radius: 8px;
             color: $color-white;
             outline: none;
             transition: all 0.2s linear;
+            span {
+                font-family: "Open Sans";
+                font-style: normal;
+                font-weight: 700;
+                font-size: 14px;
+                line-height: 19px;
+            }
+            i {
+                display: none;
+            }
             &:hover {
-                background: lighten($color-black, 5);
+                background: lighten(#298541, 5);
             }
 
             &:active {
-                background: darken($color-black, 5);
+                background: darken(#298541, 5);
             }
         }
     }
@@ -108,16 +150,44 @@
     .cart-items {
         .product-item {
             padding: 16px 0;
+
+            @include mq(c, max) {
+                padding: 16px 0 0 16px;
+                margin: 16px 16px 15px 16px;
+            }
+
+            @include mq(l, max) {
+                display: flex;
+                padding: 16px 0 15px 16px;
+            }
+
+            @include mq(m, max) {
+                position: relative;
+                padding: 0 0 0 16px;
+                margin: 16px 16px 15px 16px;
+            }
         }
 
         th {
-            color: $color-black;
-            padding: 0 0 16px;
+            text-align: start;
+            font-family: $font-family-secundary;
+            color: $color-black2;
+            padding: 0 0 17px;
             font-style: normal;
-            font-weight: bold;
+            font-weight: 400;
             font-size: 14px;
             line-height: 16px;
 
+            @include mq(l, max) {
+                display: none;
+            }
+
+            @include mq(xxl, min) {
+                font-weight: 400;
+                font-size: 28px;
+                line-height: 33px;
+            }
+
             @include mq(md, max) {
                 &.quantity-price,
                 &.shipping-date {
@@ -130,45 +200,84 @@
             height: auto;
             padding: 0;
             width: 60px;
-
-            @include mq(sm, max) {
-                width: 72px;
+            @include mq(xxl, min) {
+                width: 7.427%;
+                height: 146px;
             }
 
             img {
                 height: 60px;
                 max-width: 100%;
-                width: auto;
-
-                @include mq(sm, max) {
-                    height: 72px;
-                    width: auto;
+                width: 100%;
+                object-fit: cover;
+                transform: rotateY(180deg);
+                @include mq(xxl, min) {
+                    width: 100%;
+                    height: 146px;
                 }
             }
         }
 
         .product-name {
+            width: 32.425%;
             padding-right: 0;
+            padding-left: 0;
+
+            @include mq(l, max) {
+                position: absolute;
+                left: 92px;
+                padding: 0;
+            }
+
+            @include mq(xxl, min) {
+                width: 32.147%;
+            }
 
             @include mq(lg, max) {
                 width: 250px;
             }
 
+            @include mq(m, max) {
+                margin: 0 !important;
+                left: 78px !important;
+            }
+
             a {
-                color: $color-blue;
+                color: $color-black;
                 font-style: normal;
                 font-weight: normal;
+                font-family: $font-family-secundary;
                 font-size: 12px;
                 line-height: 14px;
                 transition: ease-in 0.22s all;
+                padding-left: 16px;
+
+                @include mq(l, max) {
+                    position: absolute;
+                    padding: 0;
+                    width: 200px;
+                }
+                @include mq(xxl, min) {
+                    padding-left: 31px;
+                    font-weight: 400;
+                    font-size: 24px;
+                    line-height: 28px;
+                }
 
                 &:hover {
-                    color: darken($color-blue, 10);
+                    color: darken($color-black, 10);
                     text-decoration: none;
                 }
 
                 @media (max-width: 490px) {
-                    margin-left: 23px;
+                    position: absolute;
+                    padding: 0;
+                    margin: 0;
+                    width: 200px;
+                }
+
+                @include mq(f, max) {
+                    font-size: 8px;
                 }
             }
 
@@ -179,17 +288,61 @@
         }
 
         td.shipping-date {
-            color: $color-gray2;
+            text-align: start;
+            color: $color-gray12;
             font-size: 12px;
             line-height: 14px;
+            width: 14.85%;
+            padding-left: 0;
+            font-weight: 400;
+            font-family: $font-family-secundary;
+
+            @include mq(l, max) {
+                display: none;
+            }
+
+            @include mq(xxl, min) {
+                width: 14.5982%;
+            }
+            @include mq(xxl, min) {
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 28px;
+            }
 
             @include mq(md, max) {
                 display: none;
             }
         }
 
+        td.product-price {
+            top: 10px;
+
+            @include mq(l, max) {
+                position: absolute;
+                right: 0;
+                top: 32px;
+            }
+            @include mq(m, max) {
+                top: 22px;
+            }
+        }
+
         .product-price {
-            min-width: 100px;
+            text-align: start;
+            width: 14.95%;
+            padding-left: 0;
+
+            @include mq(l, max) {
+                text-align: right;
+                width: fit-content;
+                padding-right: 16px;
+            }
+
+            @include mq(xxl, min) {
+                width: 14.904%;
+            }
+
             @include mq(md, max) {
                 min-width: 78px;
             }
@@ -200,77 +353,127 @@
             }
 
             span.list-price {
-                color: $color-gray2;
+                color: $color-gray12;
+                font-weight: 400;
                 font-size: 12px;
                 line-height: 14px;
                 text-decoration-line: line-through;
+                @include mq(xxl, min) {
+                    font-weight: 400;
+                    font-size: 24px;
+                    line-height: 28px;
+                }
                 @include mq(sm, max) {
                     font-size: 12px;
                     line-height: 14px;
                 }
 
+                @include mq(f, max) {
+                    font-size: 12px;
+                }
+
                 .old-product-price-label {
                     text-transform: lowercase;
+                    font-family: $font-family-secundary;
+                }
+
+                .muted {
+                    color: $color-gray12;
+                    font-family: $font-family-secundary;
                 }
             }
         }
 
+        .table td {
+            padding: 5px 5px 5px 0;
+        }
+
         td.quantity {
             align-items: center;
-            border: 1px solid $color-gray3;
             border-radius: 0;
             box-sizing: border-box;
             display: flex;
             justify-content: center;
-            margin: 6px auto 0;
-            max-height: 38px;
-            max-width: 118px;
+            margin: 18px 0 0;
+            max-height: 34px;
+            max-width: 99px;
+            min-height: 34px;
+            min-width: 99px;
             padding: 0;
             width: max-content !important;
+            border: 1px solid $color-gray3;
+            border-radius: 8px;
 
-            @media (max-width: 490px) {
-                margin-left: 84px !important;
+            @include mq(f, max) {
+                max-width: 70px;
+                min-width: 70px;
+            }
+
+            @include mq(l, max) {
+                margin-left: 16px;
+                margin-top: 26px;
+            }
+
+            @include mq(xxl, min) {
+                margin: 53px 0 0;
+                max-width: 135px;
+                max-height: 50px;
             }
 
             input {
                 background-color: $color-white;
                 border: 1px solid $color-gray3;
                 border-radius: 0;
-                border-width: 0 1px;
+                border-width: 0 0;
                 display: block;
                 max-height: 38px;
-                margin: 0 !important;
-                padding: 8px 0;
-                width: 38px;
+                padding: 0;
+                width: 45px;
                 color: $color-gray2;
                 box-shadow: none;
+                @include mq(xxl, min) {
+                    font-weight: 400;
+                    font-size: 28px;
+                    line-height: 33px;
+                    width: 54px;
+                }
 
                 @include mq(lg, max) {
-                    width: 24px !important;
+                    width: 45px !important;
+                }
+                @include mq(f, max) {
+                    width: 20px !important;
                 }
             }
 
             .icon-plus-sign,
             .icon-minus-sign {
                 &::before {
-                    color: $color-black;
+                    color: $color-black2;
                     display: block;
                     font-weight: 500;
-                    padding: 1px 12px;
                 }
             }
 
             .icon-minus-sign {
                 &:before {
-                    content: "-";
-                    font-size: 16px;
+                    font-size: 14px;
+                    color: $color-blue2;
+                    padding: 9px 0px 9px 11px;
+                    @include mq(xxl, min) {
+                        font-size: 29px;
+                    }
                 }
             }
 
             .icon-plus-sign {
                 &:before {
-                    content: "+";
                     font-size: 14px;
+                    color: $color-blue2;
+                    padding: 9px 11px 9px 0px;
+                    @include mq(xxl, min) {
+                        font-size: 29px;
+                    }
                 }
             }
 
@@ -290,6 +493,46 @@
             }
         }
 
+        .quantity-price {
+            text-align: start;
+            width: 10%;
+            padding-left: 0;
+            @include mq(xxl, min) {
+                width: 9.258%;
+            }
+
+            @include mq(l, max) {
+                display: none;
+            }
+
+            .total-selling-price {
+                font-weight: 700;
+                font-size: 14px;
+                line-height: 19px;
+                color: $color-black2;
+                font-family: $font-family;
+                @include mq(xxl, min) {
+                    font-weight: 700;
+                    font-size: 28px;
+                    line-height: 38px;
+                }
+            }
+        }
+
+        .item-remove {
+            @include mq(l, max) {
+                position: absolute;
+                top: 8px;
+                right: 0;
+            }
+            .item-link-remove {
+                vertical-align: super;
+                @include mq(xxl, min) {
+                    vertical-align: middle;
+                }
+            }
+        }
+
         .quantity-price,
         .best-price {
             .icon-question-sign {
@@ -298,9 +541,22 @@
             span {
                 font-style: normal;
                 font-weight: normal;
+                font-weight: 400;
                 font-size: 14px;
                 line-height: 16px;
-                color: $color-black;
+                color: $color-black2;
+                @include mq(xxl, min) {
+                    font-weight: 400;
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+            }
+            .new-product-price {
+                font-family: $font-family-secundary;
+            }
+            .new-product-price-label {
+                text-transform: lowercase;
+                font-family: $font-family-secundary;
             }
         }
 
@@ -312,12 +568,16 @@
 
         .item-remove {
             @media (max-width: 490px) {
-                top: 0;
+                top: -7px !important;
             }
             .icon::before {
-                color: $color-gray4;
+                color: $color-gray10;
                 font-size: 15px;
 
+                @include mq(xxl, min) {
+                    font-size: 26px;
+                }
+
                 @include mq(md, max) {
                     font-size: 18px;
                 }
@@ -339,24 +599,42 @@
     }
 
     .summary {
+        @include mq(l, max) {
+            display: flex !important;
+            flex-direction: column;
+            max-width: 992px;
+            width: auto;
+            margin: 0 16px;
+        }
         .cart-more-options {
             margin: 0;
-            width: max-content;
+            max-width: 55.68%;
+
+            @include mq(l, max) {
+                margin-bottom: 48px;
+            }
+
+            .srp-content {
+                @include mq(xxl, min) {
+                    width: 700px;
+                }
+            }
 
             .srp-container {
-                padding: 0 0 0 10px;
-
-                @include mq(md, max) {
-                    padding: 0 16px;
-                }
+                padding: 0;
 
                 .srp-main-title {
-                    margin: 32px 0 12px;
+                    margin: 0 0 11px;
                     font-style: normal;
-                    font-weight: normal;
+                    color: $color-black;
+                    font-weight: 400;
                     font-size: 24px;
-                    line-height: 28px;
-                    color: $color-gray2;
+                    line-height: 33px;
+                    @include mq(xxl, min) {
+                        font-weight: 400;
+                        font-size: 48px;
+                        line-height: 65px;
+                    }
 
                     @include mq(md, max) {
                         margin-top: 0;
@@ -365,24 +643,56 @@
 
                 .srp-description {
                     color: $color-gray2;
-                    font-size: 12px;
+                    font-weight: 400;
+                    font-size: 14px;
                     line-height: 18px;
-                    margin: 0 0 12px;
+                    max-width: 78.86%;
+                    @include mq(xxl, min) {
+                        font-weight: 400;
+                        font-size: 28px;
+                        line-height: 36px;
+                    }
+
+                    @include mq(l, max) {
+                        max-width: 276px;
+                        width: 276px;
+                    }
+
+                    @include mq(f, max) {
+                        width: 248px;
+                        font-size: 12px;
+                    }
                 }
 
                 button.shp-open-options {
-                    background-color: $color-gray5;
+                    width: 100%;
+                    background-color: $color-gray11;
                     border: none;
                     border-radius: 5px;
-                    color: $color-gray2;
-                    font-size: 16px;
-                    letter-spacing: 0.05em;
+                    font-weight: 400;
+                    font-size: 14px;
                     line-height: 19px;
-                    font-weight: 500;
+                    letter-spacing: 0.05em;
+                    color: $color-black;
                     outline: none;
                     padding: 12px 40px;
                     transition: all 0.2s linear;
 
+                    @include mq(l, max) {
+                        width: 157px;
+                        height: 44px;
+                    }
+
+                    @include mq(xxl, min) {
+                        width: 230px;
+                        font-weight: 400;
+                        font-size: 28px;
+                        line-height: 38px;
+                        letter-spacing: 0.05em;
+                        height: 44px;
+                        padding: 0;
+                    }
+
                     &:hover {
                         background-color: lighten($color-gray5, 5);
                     }
@@ -393,43 +703,85 @@
                 }
             }
 
+            .srp-pickup-empty__my-location {
+                width: 178.35%;
+
+                @include mq(l, max) {
+                    width: 343px;
+                    margin: 0;
+                }
+                @include mq(xxl, min) {
+                    width: 173.14%;
+                }
+            }
+
             .srp-data {
-                width: 280px;
+                width: 44.86%;
+                margin-top: 10.65px;
+
+                .shp-open-options {
+                    margin: 0;
+                }
 
                 @include mq(cstm, max) {
                     width: calc(100vw - 32px);
                 }
 
-                @include mq(md, max) {
-                    margin-bottom: 40px;
-                }
-
                 .srp-pickup-my-location__button {
-                    background-color: $color-black;
+                    background-color: $color-blue2;
                     border: none;
-                    border-radius: 5px;
+                    border-radius: 8px;
                     color: $color-white;
                     outline: none;
                     width: 100%;
+                    margin-top: 7px;
+                    padding: 13px 0;
 
                     font-style: normal;
                     font-weight: 500;
                     font-size: 14px;
                     line-height: 16px;
                     letter-spacing: 0.05em;
-
-                    &:hover {
-                        background-color: lighten($color-black, 5);
+                    @include mq(xxl, min) {
+                        height: 60.98px;
                     }
 
-                    &:active {
-                        background-color: darken($color-black, 5);
+                    @include mq(l, max) {
+                        height: 42px;
+                        width: 343px;
+                    }
+
+                    @include mq(f, max) {
+                        width: 248px;
+                        float: left;
+                    }
+
+                    span {
+                        font-weight: 700;
+                        font-size: 14px;
+                        line-height: 19px;
+                        letter-spacing: 0.05em;
+                        color: $color-white;
+                        @include mq(xxl, min) {
+                            font-weight: 700;
+                            font-size: 28px;
+                            line-height: 38px;
+                        }
                     }
                 }
             }
 
             .srp-toggle {
-                margin: 0 0 34px;
+                margin: 0;
+                padding-bottom: 13px;
+                width: 178.35%;
+
+                @include mq(l, max) {
+                    width: 343px;
+                }
+                @include mq(xxl, min) {
+                    width: 173.14%;
+                }
 
                 &__wrapper {
                     background-color: $color-white;
@@ -441,40 +793,69 @@
                     font-size: 14px;
                     line-height: 16px;
                     text-transform: uppercase;
+
+                    @include mq(l, max) {
+                        width: 343px;
+                    }
+
+                    @include mq(f, max) {
+                        width: 248px;
+                    }
                 }
 
                 &__current {
-                    border: 1px solid $color-blue;
-                    border-radius: 100px;
+                    border: 1px solid $color-black;
+                    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
                 }
 
                 .blue {
-                    color: $color-blue;
+                    color: $color-black;
                 }
 
                 label {
                     width: 50%;
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 19px;
+                    background-color: $color-white;
+                    border-radius: 100px;
+
+                    @include mq(xxl, min) {
+                        font-weight: 400;
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
 
                     &:active {
-                        background-color: #f0f0f0;
                     }
                 }
             }
 
             .srp-postal-code {
+                .srp-postal-code__form {
+                    .ship-country {
+                        display: none;
+                    }
+                }
+
                 .ship-postalCode {
                     label {
                         font-family: $font-family;
                         font-style: normal;
-                        font-weight: normal;
+                        font-weight: 400;
                         font-size: 12px;
-                        line-height: 14px;
+                        line-height: 16px;
                         color: $color-black;
-                        margin-bottom: 12px;
+                        margin-bottom: 2px;
+                        @include mq(xxl, min) {
+                            font-weight: 400;
+                            font-size: 24px;
+                            line-height: 33px;
+                        }
                     }
 
                     input {
-                        border: 1px solid $color-gray3;
+                        border: 1px solid $color-gray10;
                         border-radius: 5px;
                         box-shadow: none;
                         color: $color-gray3;
@@ -482,46 +863,90 @@
                         height: 36px;
                         padding: 12px 8px;
                         width: 172px;
+                        @include mq(xxl, min) {
+                            width: 333.96px;
+                            height: 55px;
+                            margin-bottom: 5px;
+                        }
+                        @include mq(l, max) {
+                            width: 215px;
+                        }
+                        @include mq(f, max) {
+                            width: 160px;
+                        }
                     }
 
                     & ~ button {
-                        background-color: $color-black;
+                        background-color: $color-blue2;
                         border: none;
                         border-radius: 5px;
                         color: $color-white;
-                        font-size: 12px;
+                        font-weight: 700;
+                        font-size: 14px;
+                        line-height: 19px;
                         height: 36px;
-                        letter-spacing: 1px;
+                        letter-spacing: 0.05em;
                         outline: none;
                         position: absolute;
                         right: -150px;
-                        top: 36px;
+                        top: 28px;
                         transition: all 0.2s linear;
-                        width: 96px;
+                        width: 100px;
                         text-transform: uppercase;
 
+                        @include mq(xxl, min) {
+                            width: 194.16px;
+                            height: 55px;
+                            right: -285px;
+                            top: 45px;
+                            font-weight: 700;
+                            font-size: 28px;
+                            line-height: 38px;
+                        }
+                        @include mq(l, max) {
+                            width: 120px;
+                            right: -213px;
+                        }
+                        @include mq(f, max) {
+                            font-size: 11px;
+                            width: 80px;
+                            right: -118px;
+                        }
+
                         &:hover {
-                            background-color: lighten($color-black, 5);
+                            background-color: lighten($color-blue2, 5);
                         }
 
                         &:active {
-                            background-color: darken($color-black, 5);
+                            background-color: darken($color-blue2, 5);
                         }
                     }
 
                     small a {
-                        font-family: $font-family;
-                        font-style: normal;
-                        font-weight: normal;
-                        font-size: 10px;
-                        line-height: 12px;
-                        color: $color-blue;
-                        margin-top: 7px;
+                        font-size: 0;
+
+                        &:after {
+                            text-decoration-line: underline;
+                            font-family: $font-family-secundary;
+                            font-style: normal;
+                            margin-top: 7px;
+                            font-size: 10px;
+                            font-weight: 400;
+                            line-height: 12px;
+                            color: $color-black;
+                            content: "Não sei meu código postal";
+                            @include mq(xxl, min) {
+                                font-weight: 400;
+                                font-size: 20px;
+                                line-height: 23px;
+                            }
+                        }
                     }
 
                     span.help.error {
+                        display: none !important;
                         color: red;
-                        font-size: 12px;
+                        font-size: 10px;
                         position: absolute;
                         left: 0;
                         width: 100%;
@@ -591,9 +1016,22 @@
         }
 
         &-totalizers {
+            margin: 0;
             padding: 0;
             width: 346px;
 
+            @include mq(c, max) {
+                padding: 0 !important;
+            }
+
+            @include mq(l, max) {
+                width: 100%;
+                margin: 0;
+            }
+            @include mq(xxl, min) {
+                width: 688.35px;
+            }
+
             .coupon-data {
                 #cart-link-coupon-add {
                     text-decoration: none;
@@ -603,13 +1041,19 @@
                     }
                 }
                 span {
-                    font-family: $font-family;
+                    font-family: $font-family-secundary;
                     font-style: normal;
-                    font-weight: normal;
+                    font-weight: 400;
                     font-size: 12px;
                     line-height: 14px;
                     color: $color-blue;
                     text-decoration: none;
+                    color: $color-black;
+                    @include mq(xxl, min) {
+                        font-weight: 400;
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
                 }
             }
 
@@ -621,6 +1065,79 @@
             .coupon-column {
                 .coupon {
                     margin: 0;
+
+                    .coupon-form {
+                        .coupon-fieldset {
+                            & div {
+                                text-align: initial;
+
+                                .coupon-value {
+                                    min-width: 50.96%;
+                                    border: 1px solid $color-gray5;
+                                    border-radius: 5px;
+                                    font-weight: 400;
+                                    font-size: 12px;
+                                    line-height: 14px;
+                                    font-family: $font-family-secundary;
+                                    color: $color-gray10;
+                                    @include mq(xxl, min) {
+                                        min-width: 54.105%;
+                                        height: 55px;
+                                        font-weight: 400;
+                                        font-size: 24px;
+                                        line-height: 28px;
+                                    }
+                                    @include mq(l, max) {
+                                        max-width: 83.367%;
+                                        min-width: 83.367%;
+                                        width: 83.367%;
+                                        margin-right: 5px;
+                                    }
+
+                                    @media screen and (max-width: 1019px) {
+                                        min-width: 70%;
+                                        width: 70%;
+                                    }
+
+                                    @include mq(c, max) {
+                                        width: 100%;
+                                        min-width: fit-content;
+                                    }
+                                }
+
+                                button {
+                                    margin-left: 2.036%;
+                                    min-width: 38.59%;
+                                    font-weight: 400;
+                                    font-size: 14px;
+                                    line-height: 19px;
+                                    letter-spacing: 0.05em;
+                                    font-family: $font-family;
+                                    color: $color-black;
+                                    background-color: $color-blue2;
+                                    @include mq(xxl, min) {
+                                        font-weight: 400;
+                                        font-size: 28px;
+                                        line-height: 38px;
+                                        letter-spacing: 0.05em;
+                                        height: 55px;
+                                        margin-left: 3.843%;
+                                        min-width: 37.822%;
+                                    }
+                                    @include mq(l, max) {
+                                        width: 133.51px;
+                                        min-width: 133.51px;
+                                        float: right;
+                                        margin: 0;
+                                    }
+                                    @include mq(f, max) {
+                                        min-width: 40px;
+                                        font-size: 10px;
+                                    }
+                                }
+                            }
+                        }
+                    }
                 }
 
                 .link-coupon-add {
@@ -631,13 +1148,18 @@
 
                 .coupon-label label {
                     margin-bottom: 12px;
-                    font-family: $font-family;
+                    font-family: $font-family-secundary;
                     font-style: normal;
-                    font-weight: normal;
+                    font-weight: 400;
                     font-size: 12px;
                     line-height: 14px;
                     color: $color-gray2;
                     cursor: none;
+                    @include mq(xxl, min) {
+                        font-weight: 400;
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
                 }
 
                 .coupon-fields {
@@ -673,7 +1195,7 @@
                     }
 
                     button {
-                        background: $color-black;
+                        background: $color-black2;
                         border: none;
                         border-radius: 5px;
                         color: $color-white;
@@ -691,11 +1213,11 @@
                         }
 
                         &:hover {
-                            background-color: lighten($color-black, 5);
+                            background-color: lighten($color-black2, 5);
                         }
 
                         &:active {
-                            background-color: darken($color-black, 5);
+                            background-color: darken($color-black2, 5);
                         }
                     }
                 }
@@ -713,11 +1235,17 @@
                         &.info,
                         &.monetary {
                             font-style: normal;
-                            font-weight: normal;
+                            font-weight: 400;
                             font-size: 14px;
                             line-height: 16px;
-                            color: $color-black;
+                            color: $color-black2;
                             padding: 12px 0;
+                            font-family: $font-family-secundary;
+                            @include mq(xxl, min) {
+                                font-weight: 400;
+                                font-size: 28px;
+                                line-height: 33px;
+                            }
                         }
 
                         &.info {
@@ -726,6 +1254,9 @@
 
                         &.monetary {
                             text-align: right;
+                            @include mq(xxl, min) {
+                                min-width: 240px;
+                            }
                         }
                     }
                 }
@@ -734,10 +1265,20 @@
                     td.info,
                     td.monetary {
                         font-style: normal;
-                        font-weight: normal;
+                        font-weight: 700;
                         font-size: 18px;
-                        line-height: 21px;
-                        color: $color-black;
+                        line-height: 25px;
+                        font-family: $font-family;
+                        color: $color-black2;
+
+                        @include mq(l, max) {
+                            width: 120px;
+                        }
+                        @include mq(xxl, min) {
+                            font-weight: 700;
+                            font-size: 36px;
+                            line-height: 49px;
+                        }
                     }
                 }
             }
@@ -749,40 +1290,45 @@
         flex-direction: column;
         width: 343px;
 
-        @include mq(md, max) {
-            padding: 0 16px;
+        @include mq(l, max) {
+            max-width: 992px;
             width: calc(100% - 32px);
-            float: none;
-            margin-bottom: 50px;
+            margin: 0 16px;
         }
 
-        @include mq(md, min) {
-            margin: 0;
-            padding-bottom: 50px;
+        @include mq(xxl, min) {
+            width: 688.34px;
         }
 
         .link-choose-more-products-wrapper {
             display: block;
             text-align: center;
             margin-bottom: 16px;
+            margin-right: 10px;
 
             @include mq(md, max) {
                 margin-bottom: 0px;
             }
 
             a {
-                font-family: $font-family;
+                font-family: $font-family-secundary;
                 font-style: normal;
-                font-weight: normal;
+                font-weight: 400;
                 font-size: 12px;
                 line-height: 14px;
-                color: $color-blue;
+                color: $color-black;
+                margin: 0;
+                @include mq(xxl, min) {
+                    font-weight: 400;
+                    font-size: 24px;
+                    line-height: 28px;
+                }
             }
         }
 
         .btn-place-order-wrapper {
             a {
-                background: $color-green;
+                background: $color-blue2;
                 border: none;
                 border-radius: 5px;
                 display: block;
@@ -791,22 +1337,69 @@
                 padding: 12px 19px;
 
                 &:hover {
-                    background-color: darken($color-green, 5);
+                    background-color: $color-blue2;
                 }
 
                 &:after {
                     content: "finalizar compra";
                     font-family: $font-family;
-                    font-weight: 500;
-                    font-size: 13px;
+                    font-weight: 700;
+                    font-size: 14px;
+                    line-height: 19px;
                     letter-spacing: 0.05em;
-                    color: $color-white;
+                    color: $color-black;
                     text-transform: uppercase;
                     vertical-align: middle;
-                    line-height: 19px;
                     text-shadow: none;
+                    @include mq(xxl, min) {
+                        font-weight: 700;
+                        font-size: 28px;
+                        line-height: 38px;
+                        letter-spacing: 0.05em;
+                    }
                 }
             }
         }
     }
 }
+
+.cart-items {
+    thead {
+        tr {
+            .shipping-date {
+                font-size: 0;
+                &:after {
+                    font-size: 14px;
+                    content: "Frete";
+                    vertical-align: middle;
+                    @include mq(xxl, min) {
+                        font-weight: 400;
+                        font-size: 28px;
+                        line-height: 33px;
+                    }
+                }
+            }
+
+            .product-price {
+                font-size: 0;
+                &:after {
+                    font-size: 14px;
+                    content: "Unidade";
+                    vertical-align: middle;
+                    @include mq(xxl, min) {
+                        font-weight: 400;
+                        font-size: 28px;
+                        line-height: 33px;
+                    }
+                }
+            }
+        }
+    }
+}
+@include mq(xxl, min) {
+    .vtex-shipping-preview-0-x-postalCodeForgotten {
+        p {
+            width: 260px !important;
+        }
+    }
+}