:root {
    --color-white: #ffffff;
    --color-bg: #f8fafc;
    --color-black: #1b1b1b;
    --color-blackd: #000000;
    --color-purple: #7f00ff;
    --color-green: #16db65;
    --color-red: #E63946;
    --color-yellow: #FBE134;
    --font-primary: "Aspekta", sans-serif;
    --font-secondary: "Roboto", sans-serif;
    --font-tertiary: "Poppins", sans-serif;
    --font-other: "Work Sans", sans-serif;
    --shadow-shad: 0 0 50px #00000010;
    --shadow-hovershad: 0 0 50px #16db6550;
    --border-lit: 1px solid #00000020;
}

body {
    background-color: var(--color-bg);
}

img {
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
}

button {
    text-align: center;
    justify-items: center;
    align-content: center;
    letter-spacing: 0.5px;
}

div::-webkit-scrollbar {
    appearance: none;
    display: none;
}

#cart-wrap button svg {
    width: 20px;
    height: 20px;
    fill: var(--color-purple);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}


.remove-btn:active {
    background: #f8f8f8;
}

#confirm-modal b {
    font-weight: 600;
}

#rmModelBox {
    box-shadow: 0 0 50px #1b1b1b20;
}

@media (max-width: 1000px) {

    #cart-container {
        max-width: 800px;
        margin-top: 20px;
    }

    #cart-wrap {
        flex-direction: column;
        justify-content: start;
        align-items: center;
        margin-top: 20px;
    }

    #cart-items {
        width: 100%;
    }

    .summary-wrap {
        width: 100%;
    }
}

@media (max-width: 640px) {

    #heading {
        gap: 8px;
    }

    #heading button svg {
        width: 20px;
    }

    #heading h3 {
        font-size: 28px;
    }

    .cart-item {
        flex-direction: column;
        align-items: start;
        justify-content: center;
        max-height: 180px;
    }

    .item-details .item-name h4 {
        font-size: 18px;
    }

    .item-details .item-price p {
        font-size: 14px;
    }

    .aside-r {
        width: 100%;
    }

    .item-qty {
        display: flex;
        width: 100%;
        justify-content: end;
        flex-direction: row-reverse;
        gap: 20px;
    }

    #coupon-modal .cWrap {
        width: 100%;
        max-width: 800px;
    }

    #coupon-modal {
        align-items: end;
    }
}

@media (max-width: 400px) {
    #heading button svg {
        width: 18px;
    }

    #heading h3 {
        font-size: 24px;
    }

    .item-img {
        width: 70px;
        min-width: 70px;
        height: 60px;
        min-height: 60px;
    }

    .item-details .item-name h4 {
        font-size: 16px;
    }

    .item-details .item-name {
        max-height: 48px;
    }

    .item-qty {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: row-reverse;
        gap: 20px;
    }

}