:root {
    --side-cart-width: 300px;
}

/* Side cart */

#taskPeakNav {
    height: 100vh;
    width: var(--side-cart-width);
    position: fixed;
    z-index: 5;
    right: calc(var(--side-cart-width) * -1);
    top: 0;
    overflow-x: hidden;
    transition: all 0.5s ease;
    background-color: var(--light);
}

.ccm-toolbar-visible #taskPeakNav {
    top: 48px;
    height: calc(100vh - 48px);
}

body {
    transition: padding 0.3s ease;
}

body.task-slider-open {
    padding-right: var(--side-cart-width);
}

body.task-slider-open #taskPeakNav {
    right: 0;
    -webkit-box-shadow: -5px 0px 10px 0px rgba(30, 30, 30, 0.3);
    -moz-box-shadow: -5px 0px 10px 0px rgba(30, 30, 30, 0.3);
    box-shadow: -5px 0px 10px 0px rgba(30, 30, 30, 0.3);
}

.product-card-cart {
    border-bottom: 1px solid var(--dark);
    padding-bottom: 1rem;
}

.product-card-cart .product-image img {
    aspect-ratio: 1/1;
    max-width: 100%;
    object-fit: contain;
}

#taskPeakNav ::-webkit-scrollbar {
    width: 7px;
}

#taskPeakNav ::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
}

/* Mobile */

@media (max-width: 991px) {
    #taskPeakNav {
        max-width: 95vw;
    }

    body.task-slider-open {
        padding-right: 0;
    }
}