body.qty-discount-modal-open {
    height: 100vh;
    overflow: hidden;
    padding-right: 15px;
}



.qty-discount-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &.show .qty-discount-modal-card {
        animation: qty-discount-modal-appear 0.2s forwards;
    }

    .qty-discount-modal-overlay {
        background-color: rgba(0, 0, 0, 0.2);
        position: fixed;
        inset: 0;
        z-index: -1;
        opacity: 0;

        &:not(.show) {
            animation: qty-discount-modal-overlay-disappear 0.2s forwards;
        }
    }

    &.show .qty-discount-modal-overlay {
        animation: qty-discount-modal-overlay-appear 0.2s forwards;
    }
}

.qty-discount-modal.hide {
    display: none;
}

@keyframes qty-discount-modal-overlay-appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes qty-discount-modal-overlay-disappear {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes qty-discount-modal-appear {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes qty-discount-modal-disappear {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-100px);
    }
}

.qty-discount-modal-header {
    padding: 0px 30px 0px;
}

.qty-discount-modal-card {
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(-100px);

    &:not(.show) {
        animation: qty-discount-modal-disappear 0.2s forwards;
    }

    .product-sku {
        color: #818181;
        font-size: 15px;
        font-weight: 400;
    }

    .button-add-to-cart {
        font-size: 13px;
        white-space: nowrap;
        padding: 8px;
    }

    .qty-discount-modal-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        width: 100%;
    }

    .discount-label {
        font-size: 15px;
        border-radius: 4px;
        background: #FFC700;
        padding: 3px 6px;
        font-weight: 700;
        line-height: 25px;
        display: inline-flex;
    }

    .notice {
        display: flex;
        padding: 10px 15px 10px 38px;
        align-items: center;
        gap: 8px;
        border-radius: 6px;
        border: 1px solid rgba(106, 184, 255, 0.10);
        background: #ECF6FF;
        background-image: url('data:image/svg+xml,<svg width="19" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.75 14.75h1.5V9h-1.5v5.75Zm.75-7.462c.229 0 .42-.077.575-.232a.782.782 0 0 0 .233-.575.782.782 0 0 0-.232-.576.782.782 0 0 0-.576-.232.782.782 0 0 0-.575.232.782.782 0 0 0-.233.576c0 .229.078.42.232.575a.782.782 0 0 0 .576.232ZM9.502 19.5c-1.314 0-2.55-.25-3.706-.748a9.596 9.596 0 0 1-3.017-2.03 9.595 9.595 0 0 1-2.03-3.016A9.246 9.246 0 0 1 0 10.002c0-1.314.25-2.55.748-3.706a9.596 9.596 0 0 1 2.03-3.017 9.594 9.594 0 0 1 3.016-2.03A9.246 9.246 0 0 1 9.498.5c1.314 0 2.55.25 3.706.748a9.596 9.596 0 0 1 3.017 2.03 9.594 9.594 0 0 1 2.03 3.016A9.247 9.247 0 0 1 19 9.998c0 1.314-.25 2.55-.748 3.706a9.596 9.596 0 0 1-2.03 3.017 9.595 9.595 0 0 1-3.016 2.03 9.247 9.247 0 0 1-3.704.749ZM9.5 18c2.233 0 4.125-.775 5.675-2.325 1.55-1.55 2.325-3.442 2.325-5.675 0-2.233-.775-4.125-2.325-5.675C13.625 2.775 11.733 2 9.5 2c-2.233 0-4.125.775-5.675 2.325C2.275 5.875 1.5 7.767 1.5 10c0 2.233.775 4.125 2.325 5.675C5.375 17.225 7.267 18 9.5 18Z" fill="%231C2228"/></svg>');
        background-size: 19px 20px;
        background-repeat: no-repeat;
        background-position: left 10px center;
        margin-right: 20px;
    }
}


.qty-discount-modal-inner {
    flex: 1;
    max-height: 90dvh;
    background-color: #fff;
    margin: 20px;
    border-radius: 5px;
    max-width: 980px;
    width: 90%;
    width: calc(100% - 20px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 40px;
}

.qty-discount-modal-inner hr {
    width: calc(100% + 35px * 2);
    height: 1px;
    border: none;
    background-color: hsl(0deg 0% 96%);
    margin: 15px -35px;
}

.qty-discount-modal-close {
    position: absolute;
    top: 30px;
    right: 30px;
    padding: 5px;
    cursor: pointer;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    width: 30px;
    height: 30px;
    border-radius: 100px;
    border: 0px;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 15px;
        height: 15px;
    }

}

.qty-discount-modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.qty-discount-modal-footer {
    display: flex;
    width: 100%;
    margin-top: auto;
}

.qty-discount-modal-footer>button:only-child {
    margin: 0 auto;
}

.qty-discount-label {
    display: inline-flex;
    color: #1C2228;
    padding: 1px 5px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid #ECCC00;
    background: #FD0;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: .2s ease;
}

.qty-discount-label:hover {
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
    border-color: #ffdf15;
    transform: translate(0px, -1px);
}

li.product .qty-discount-label,
.blaze-track-container .product .qty-discount-label {
    position: absolute;
    left: 0;
    bottom: 5px;
    z-index: 99;
}

.product-list-item {
    position: relative;
}

div.product-list-item .qty-discount-label {
    position: static;
    margin-right: 10px;
}

@media screen and (min-width: 1124px) and (max-width: 1340px) {
    .qty-discount-label {
        max-width: 90px;
        margin-left: 30px;
        font-size: 11px;
    }
}

@media(max-width:1124px) {

    .qty-discount-label:hover {
        transform: unset;
    }

    .qty-discount-modal-header {
        display: none;
    }

    .qty-discount-modal-inner {
        padding-top: 20px;
    }

    .qty-discount-modal-inner {
        max-height: 80dvh;
        margin: 0px;
        width: 100%;
    }

    .qty-discount-modal-close {
        top: -10px;
        right: 10px;
        background: var(--color-white);
    }
}

/* Discount Banner */

.discount-banner-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.discount-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    background: #FFDD00;
    padding: 15px 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    border: solid 1px #ECCC00;
}

.discount-banner-icon {
    font-size: 40px;
    line-height: 100%;
}

span.discount-banner-title {
    font-size: 20px;
    font-weight: 600;
}

@media (max-width:767px) {
    .discount-banner {
        padding: 15px;
        align-items: flex-start;
        gap: 10px;
    }

    span.discount-banner-title {
        font-size: 18px;
    }

    span.discount-banner-desc {
        font-size: 14px;
        line-height: 150%;
    }

    .discount-banner-content {
        gap: 5px;
    }

    .discount-banner-icon {
        font-size: 30px;
        margin-top: 3px;
    }
}


@media(max-width:676px) {

    .qty-discount-modal-card {
        .min-qty {
            display: flex;
            min-width: 50px;
        }

        .qty-discount-modal-actions {
            flex-wrap: wrap;
        }
    }
}