.catalog-flip-page {
    margin: 30px 0 60px;
}

.catalog-flip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 30px;
}

.catalog-flip-head h1 {
    margin: 0;
}

.catalog-flip-wrapper {
    /* widest spread that still fits the viewport height (book + controls);
       --page-ratio = page width / height, set from the PDF in view.latte */
    max-width: calc((100vh - 120px) * 2 * var(--page-ratio, 0.707));
    margin: 0 auto;
}

.catalog-flip {
    margin: 0 auto;
    box-shadow: 0 0 33px 0 rgba(0, 0, 0, 0.1);
}

/* no `position` here: page-flip positions pages absolutely (.stf__item) and this file loads after its styles */
.catalog-flip__page {
    background: #fff;
    overflow: hidden;
}

.catalog-flip__page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.catalog-flip-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.catalog-flip-controls__counter {
    min-width: 70px;
    text-align: center;
    font-weight: 600;
}

.page-magnifier {
    position: absolute;
    left: calc(var(--lx, 50) * 1%);
    top: calc(var(--ly, 50) * 1%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    box-shadow: 0 0 0 3px #fff, 0 5px 25px rgba(0, 0, 0, 0.35);
    background-image: var(--bg-src);
    background-repeat: no-repeat;
    background-size: calc(var(--page-w, 0px) * var(--scale, 1.5)) auto;
    background-position: var(--bg-x, 0) var(--bg-y, 0);
    z-index: 10;
}

.page-magnifier.is-active {
    opacity: 1;
}

@media (hover: none) {
    .page-magnifier {
        display: none;
    }
}