.quickViewModalContent {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-around;
    align-items: center;
    background-color:white;
    padding: 1rem; 
    border-radius: 0.5rem; 
    max-width: 500px; 
    width: 100%; 
    position: relative;
    font-size: 0.8rem;
    border-radius: .5rem;
    width: calc(100% - 2rem);
    max-width: 500px;
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    margin: 1rem;
    -webkit-overflow-scrolling: touch;

    .closeModal { 
        position: absolute; 
        top: 1rem; 
        right: 1rem; 
        background: none; 
        border: none; 
        font-size: 2rem;
        transition: 0.3s;

        &:hover {
            cursor: pointer;
            transform: scale(1.5);
            transition: 0.3s;
        }
    }

    .quickViewProductName {
        padding: 0.5rem;
        background-color: #232F3E;
        color: white;
        border-radius: 0.25rem;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
        font-size: 0.9rem;
    }

    .quickViewImgContainer {
        position: relative;

        .quickViewImg {
            width: 200px;
            border-radius: 0.25rem;
            box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
            max-height: 250px;
            object-fit: contain;

            @media (min-width: 768px) {
                width: 300px;
            }
        }

        .quickViewBrandLabel {
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            width: 80px;
            display: block;
            object-fit: contain;
        }
    }

    .quickViewModalMainContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        background-color: #232F3E;
        border: solid black 1px;
        border-radius: 0.25rem;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
        padding: 1rem;
        color: white;
        font-size: 0.8rem;
    
        @media (min-width: 768px) {
            font-size: 1rem;
        }

        .quickViewItem {
            margin-right: auto;

            h3 {
                font-weight: bolder;
            }

            .quickViewItemContent {
                display: grid;
                text-transform: lowercase;
            }

            .availableSizeContainer {
                grid-template-columns: repeat(auto-fit, minmax(30px, max-content));
            }
            
            .availableColorContainer {
                grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
                
                @media (min-width: 768px) {
                    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
                }
            }
        }

        .descriptionContainer {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
    }

    .quickViewProductPageLink {
        text-transform: uppercase;
        padding: 0.5rem;
        background-color: mediumseagreen;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
        border-radius: 0.25rem;
        text-decoration: none;
        color: black;
        transition: 0.3s;
        display: flex;
        gap: 0.5rem;
        align-items: center;

        img {
            width: 16px;
            transition: 0.3s;
        }

        &:hover {
            cursor: pointer;
            color: white;
            transform: scale(1.1);
            transition: 0.3s;
            
            img {
                filter: invert(100%);
                transition: 0.3s;
            }
        }
    }
}

.quickViewModal { 
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.openQuickViewModal { 
    display: flex; 
}