.product-popup {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: none;
    align-items: center;
    justify-content: center;

    visibility: hidden;
    opacity: 0;
	
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.product-popup.is-open {
    display: flex;
    visibility: visible;
    opacity: 1;
}


/**
 * Hintergrund
 */
.product-popup__overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.7);

    cursor: pointer;
}


/**
 * Dialog
 */
.product-popup__dialog {
    position: relative;
    z-index: 2;
	min-width: 50vw;
	max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
	max-height: calc(100vh - var(--wp--preset--spacing--30));
    overflow-y: auto;
    background: var(--wp--preset--color--white);
    border-radius: 15px;
}

/**
 * Inhalt
 */
.product-popup__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--30);
}

/**
 * Bild
 */
.product-popup__image-wrapper {
    display: flex;

    align-items: flex-start;
    justify-content: center;
}

.product-popup__image-wrapper img {
    display: block;

    width: 40vw;
    max-height: 300px;

    object-fit: contain;
}

/**
 * Produktdetails
 */
.product-popup__details {
    align-self: center;
}

#product-popup-title {
    margin: 0 0 20px;
}

/**
 * Beschreibung
 */
.product-popup__description {
    margin-bottom: 25px;

    font-size: 16px;
    line-height: 1.6;
}

/**
 * ISBN
 */
.lw-product-popup__isbn {
    flex-grow: 1;
}

.lw-product-popup__data-wrapper {
	display: flex;
	flex-direction: row;
	align-content: space-between;
	justify-content: baseline;
}

/**
 * Preis
 */
.product-popup__price {
	text-align: right;
}


/**
 * Link
 */

.lw-product-popup__link {
	margin-top: 25px;
	width: 100%;
}

.product-popup__link:hover {
    color: #fff;
    background: var(--wp--preset--color--accent-4);
}

.product-popup__link.is-hidden {
    display: none;
}


/**
 * Schließen
 */

.product-popup__close {
    position: absolute;

    top: var(--wp--preset--spacing--30);
    right: var(--wp--preset--spacing--30);

    z-index: 5;

    width: 30px;
    height: 30px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #fff;
    background: var(--wp--preset--color--accent-3);

    font-size: 30px;
    line-height: 1;

    cursor: pointer;
}

.product-popup__close:hover {
    background: var(--wp--preset--color--accent-4);
}


/**
 * Loading
 */

.product-popup__loading {
    display: none;

    align-items: center;
    justify-content: center;

    min-height: 300px;
}

.product-popup.is-loading .product-popup__loading {
    display: flex;
}

.product-popup.is-loading .product-popup__content {
    display: none;
}

.product-popup__spinner {
    width: 40px;
    height: 40px;

    border: 4px solid #ddd;
    border-top-color: #111;

    border-radius: 50%;

    animation: product-popup-spin 0.8s linear infinite;
}

@keyframes product-popup-spin {
    to {
        transform: rotate(360deg);
    }
}


/**
 * Mobile
 */

@media (max-width: 700px) {
    .product-popup__content {
        grid-template-columns: 1fr;

        gap: 20px;
    }
}