.vitamino-woo-side-cart {
    opacity: 1 !important;

    * {
        font-family: var(--e-global-typography-text-font-family), sans-serif;
    }

    .vitamino-woo-side-cart-toggle {
        position: relative;
        display: flex;
        margin-right: 10px;

        img {
            width: 25px;
        }

        .items_in_cart {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--e-global-color-text);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            top: -10px;
            right: -10px;
        }

        &:hover {
            cursor: pointer;
        }
    }

    .vitamino-woo-side-cart-popup {
        display: flex;
        position: fixed;
        top: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: rgba(0, 0, 0, .3);
        justify-content: end;

        .vitamino-woo-side-cart-popup-content {
            display: flex;
            flex-direction: column;
            width: 500px;
            background: #fff;
            padding: 50px;
            position: relative;
            right: -500px;
            transition: .3s ease-in-out;

            @media(max-width: 1024px) {
                width: 80%;
                right: -80%;
                padding: 20px;
            }

            @media(max-width: 767px) {
                width: 100%;
                right: -100%;
            }

            &.visible {
                right: 0;
            }

            .vitamino-woo-side-cart__header {
                height: 55px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                strong {
                    position: relative;
                    font-size: 22px;
                    color: var(--e-global-color-text);

                    span {
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        background: var(--e-global-color-text);
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 10px;
                        top: -12px;
                        right: -20px;
                    }
                }

                svg {
                    width: 25px;

                    &:hover {
                        cursor: pointer;
                    }
                }
            }

            .vitamino-woo-side-cart__body {
                height: calc(100% - 315px);
                display: flex;
                flex-direction: column;
                gap: 10px;
                overflow-y: auto;
                overflow-x: hidden;
                padding-bottom: 25px;

                .cart_item {
                    display: grid;
                    grid-template-columns: 50px auto 16px;

                    .product-price {
                        display: flex;
                        flex-direction: column;

                        .price {
                            display: flex;
                            align-items: center;
                            gap: 5px;
                            font-size: 16px;
                            color: var(--e-global-color-text);

                            ins {
                                text-decoration: none;

                                * {
                                    font-size: 16px;
                                    color: var(--e-global-color-text);
                                }
                            }

                            del {
                                font-size: 12px;
                                color: var(--e-global-color-secondary);

                                * {
                                    font-size: 12px;
                                    color: var(--e-global-color-secondary);
                                }
                            }
                        }

                        .product-sale {
                            display: flex;
                            gap: 5px;
                            flex-wrap: wrap;

                            * {
                                font-size: 10px;
                                color: #fff;
                                line-height: 1;
                            }

                            .sale-saving,
                            .bulk-saving {
                                padding: 3px;
                                border-radius: 50px;
                                background: var(--e-global-color-accent);
                                width: fit-content;
                            }
                        }
                    }

                    .remove_container {
                        svg {
                            width: 16px;
                        }
                    }
                }
            }

            .vitamino-woo-side-cart__footer {
                height: 260px;
                padding-top: 25px;
                border-top: 1px solid var(--e-global-color-text);
                display: flex;
                flex-direction: column;
                justify-content: end;
                gap: 20px;

                .order_total {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    .footer-row {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        strong {
                            color: var(--e-global-color-text);
                            display: flex;
                            gap: 2px;
                            align-items: center;
                            svg {
                                width: 20px;
                                path {
                                    fill: var(--e-global-color-text);
                                }
                            }
                        }
                        &.price {
                            strong {
                                font-size: 20px;
                            }
                        }
                    }
                }

                .buttons-container {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    a {
                        width: 100%;

                        button {
                            width: 100%;
                            background: var(--e-global-color-text);
                            color: #fff;
                            border: 1px solid var(--e-global-color-text);
                            font-size: 16px;
                            border-radius: 10px;

                            &:hover {
                                color: var(--e-global-color-text);
                                background: none;

                            }
                        }
                    }
                }

                .payments-container {
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    span {
                        color: var(--e-global-color-text);
                        font-size: 14px;
                        line-height: 1;
                    }
                    .payments {
                        display: flex;
                        gap: 5px;
                        flex-wrap: wrap;
                        img {
                            width: 25px;
                        }
                    }
                }
            }

        }
    }
}