#catalog { max-width: 1800px; margin: 0 auto; }
#catalog-book { margin: 0 auto; width: 100%; touch-action: pan-y; }
/* No "position" here: the page-turn library positions pages absolutely while they turn, and
   overriding it drops the turning page below the book. Absolute still anchors the video buttons. */
#catalog-book .cat-page { background: #f4f4f4; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
#catalog-book .cat-page img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff;
    user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
/* Controls: matches the site's square black, uppercase buttons (red on hover) */
#catalog-controls:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin: 1.25rem auto 0; max-width: 560px; }
.cat-nav, .cat-tools { display: flex; align-items: stretch; justify-content: center; gap: .75rem; width: 100%; }
.cat-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: 1 1 0; min-height: 50px;
    padding: .8rem 1.4rem; border: 2px solid #000; border-radius: 0; background: #000; color: #fff !important;
    font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; line-height: 1;
    text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cat-btn:hover, .cat-btn:focus-visible { background: #c2272c; border-color: #c2272c; color: #fff !important; }
.cat-btn-outline { background: #fff; color: #000 !important; }
.cat-btn .bi { font-size: 1em; }
.cat-count { display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-width: 88px; font-weight: 700; letter-spacing: .08em; font-size: .95rem; }
/* wide screens: all four buttons on one row so the book can be taller */
@media (min-width: 992px) {
    #catalog-controls:not([hidden]) { flex-direction: row; max-width: 1000px; }
}
@media (max-width: 575.98px) {
    .cat-btn { padding: .8rem .75rem; letter-spacing: .1em; }
    .cat-count { min-width: 72px; }
}
.cat-hint { font-size: .9rem; color: #666; }
.cat-hotspot { position: absolute; display: block; cursor: pointer; z-index: 5; }
.cat-video-btn {
    position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); white-space: nowrap;
    padding: .45em 1em; border-radius: 0; background: #c2272c; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    font-size: clamp(10px, 1.6vw, 15px); line-height: 1.2; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.cat-hotspot:hover .cat-video-btn, .cat-hotspot:focus-visible .cat-video-btn { background: #000; }
.cat-hotspot:focus-visible { outline: 3px solid #c8a24a; }
.cat-mapper-box { position: absolute; border: 2px dashed #e00; background: rgba(255,0,0,.15); z-index: 6; pointer-events: none; }
#cat-mapper-out { width: 100%; font-family: monospace; font-size: 12px; }
@media (max-width: 767.98px) {
    #videoModal .modal-dialog { margin: .5rem; }
}
/* Zoom view: opens with the page(s) on screen fitted; click a page to zoom it to the image's full
   sharpness (width set in JS so it is never stretched past it); arrows step through the catalog. */
.cat-zoom-header { gap: .5rem; }
.cat-zoom-nav { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cat-zoom-nav:hover:not(:disabled) { background: #c2272c; border-color: #c2272c; }
.cat-zoom-nav:disabled { opacity: .3; }
.cat-zoom-label { color: #fff; font-weight: 700; letter-spacing: .06em; font-size: .9rem; min-width: 9.5em; text-align: center; }
.cat-zoom-body { overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.cat-zoom-pages { display: flex; justify-content: center; align-items: flex-start; gap: 4px; }
.cat-zoom-pages img { display: block; min-width: 0; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 58px); cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.cat-zoom-pages.two img { max-width: calc(50% - 2px); }
.cat-zoom-pages.is-zoomed { display: block; text-align: center; }
.cat-zoom-pages.is-zoomed img.zoomed { display: inline-block; max-width: none; max-height: none; cursor: zoom-out; }