/* Container for the quick view */
.quick-view {
    position: absolute;
    top: 115px;
    right: -100%; /* Hidden initially */
    width: 75%; /* Adjust width as needed */
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease; /* Smooth sliding animation */
    z-index: 1000;
}

/* Visible state */
.quick-view.show {
    right: 0; /* Slide into view */
}

/* Content styling */
.quick-view-content {
    padding: 20px;
}

/* Close button */
.close-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

/* media query settings */
@media (prefers-reduced-motion: reduce){
    .quick-view{
        transition: none;
    }
}