/* ═══════════════════════════════════════════════════════════════════════════
   BrandBook Viewer v2.0 — Premium Digital Catalog CSS
   Clean rebuild with mobile-first approach
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   SHELL & LAYOUT
   ───────────────────────────────────────────────────────────────────────── */

.bb-shell {
    position: relative;
    background: #d9dde0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: 100dvh;
    color: #26323a;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: none;
}

.bb-shell.is-loading > :not(.bb-loader) { visibility: hidden; }

.bb-loader {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(6, 14, 15, .20);
    transition: opacity .36s ease, visibility .36s ease;
}

.bb-loader.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }

.bb-loader-glass {
    width: min(320px, 88vw);
    padding: 32px 30px 26px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 18px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.bb-loader-book {
    position: relative;
    width: 116px;
    height: 78px;
    margin: 0 auto 20px;
    perspective: 520px;
}

.bb-loader-page {
    position: absolute;
    top: 4px;
    width: 58px;
    height: 70px;
    border-radius: 2px 5px 5px 2px;
    background: #fff;
    box-shadow: 0 5px 12px rgba(0,0,0,.18);
}

.bb-loader-page-back { left: 1px; transform: rotateY(4deg); opacity: .78; }
.bb-loader-page-front { right: 1px; transform: rotateY(-4deg); opacity: .92; }
.bb-loader-page-turn {
    right: 1px;
    transform-origin: left center;
    animation: bb-loader-page-turn 1.35s ease-in-out infinite;
}

@keyframes bb-loader-page-turn {
    0%, 18% { transform: rotateY(0deg); opacity: 1; }
    52% { transform: rotateY(-164deg); opacity: .88; }
    76%, 100% { transform: rotateY(-180deg); opacity: .72; }
}

.bb-loader-wordmark { color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: 1.5px; }
.bb-loader-caption { margin-top: 7px; color: rgba(255,255,255,.84); font-size: .82rem; }
.bb-loader-progress { height: 4px; margin-top: 20px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.26); }
.bb-loader-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; transition: width .18s ease; }
.bb-loader-percent { margin-top: 8px; color: rgba(255,255,255,.76); font-size: .72rem; font-variant-numeric: tabular-nums; }

.bb-stage-wrap {
    box-sizing: border-box;
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    min-height: 0;
    width: min(100%, 1320px);
    margin: 16px auto 0;
    padding: clamp(12px, 3vw, 28px) clamp(30px, 6vw, 84px) clamp(18px, 3vw, 32px);
    border-radius: 30px;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.bb-stage-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    border-radius: inherit;
}

.bb-stage-wrap::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 24px;
    border: 0;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   VIEWPORT & STAGE
   ───────────────────────────────────────────────────────────────────────── */

.bb-stage-viewport {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 8px;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.bb-stage-viewport::-webkit-scrollbar {
    display: none;
}

#bb-flipbook-stage {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.10));
    touch-action: pan-y;
    transform-origin: center center;
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE-ONLY ZOOM LAYER
   These styles are intentionally scoped to mobile viewport to avoid affecting desktop cover/spread behavior.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .bb-mobile-zoom-layer {
        position: absolute;
        inset: 0;
        z-index: 90;
        background: #d9dde0;
        overflow: hidden;
        touch-action: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bb-mobile-zoom-content {
        position: relative;
        width: 100%;
        max-width: 90%;
        height: auto;
        transform-origin: center center;
        will-change: transform;
        transition: none;
    }

    .bb-zoom-page-img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 14px;
        box-shadow: 0 18px 38px rgba(45, 31, 12, 0.16);
        border: 1px solid rgba(49, 37, 23, 0.08);
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }

    .bb-zoom-overlays {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 20;
    }


    .bb-zoom-controls {
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%) translateY(-8px);
        z-index: 220;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 24px rgba(41, 28, 13, 0.18);
        pointer-events: auto;
        opacity: 0;
        transition: opacity .2s ease, transform .2s ease;
    }

    .bb-zoom-controls.is-visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .bb-zoom-exit {
        border: none;
        background: #7a5232;
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 1.15rem;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(122, 82, 50, 0.24);
        touch-action: manipulation;
    }

    .bb-zoom-exit:active {
        transform: scale(0.96);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   PAGE CANVAS
   ───────────────────────────────────────────────────────────────────────── */

.bb-page-canvas {
    position: relative;
    overflow: hidden;
    background: transparent;
    border-radius: 14px;
    box-shadow: none;
    border: 0;
    isolation: isolate;
    will-change: transform;
}

.bb-page-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 1px 0 0 rgba(0,0,0,.18),
        inset -1px 0 0 rgba(0,0,0,.20),
        inset 10px 0 18px rgba(0,0,0,.06),
        inset -10px 0 18px rgba(0,0,0,.06),
        inset 0 -3px 9px rgba(0,0,0,.10);
    pointer-events: none;
    z-index: 2;
}

.bb-page-canvas::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(0,0,0,.055), transparent 12%, transparent 88%, rgba(0,0,0,.06)),
        linear-gradient(120deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 28%, rgba(0,0,0,.035) 100%);
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 3;
}

.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow {
    mix-blend-mode: multiply;
}

.bb-page-canvas .bb-page-img {
    position: relative;
    z-index: 1;
}

.bb-page-canvas img.bb-page-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   OVERLAYS
   ───────────────────────────────────────────────────────────────────────── */

.bb-overlays {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
}

.bb-overlay-item {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    z-index: 30;
}

.bb-overlay-externallink,
.bb-overlay-internallink {
    display: block;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    touch-action: manipulation;
}

.bb-overlay-externallink:hover,
.bb-overlay-externallink:focus,
.bb-overlay-internallink:hover,
.bb-overlay-internallink:focus {
    background: rgba(0, 120, 255, 0.08);
}

.bb-overlay-externallink:focus-visible,
.bb-overlay-internallink:focus-visible {
    outline: 2px solid rgba(0, 120, 255, 0.4);
    outline-offset: 2px;
}

.bb-overlay-externallink.bb-link-pulse,
.bb-overlay-internallink.bb-link-pulse {
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

/* Four delayed rays run around the frame in the same sequence as a neon sign. */
.bb-link-neon-edge {
    position: absolute;
    display: block;
    z-index: 1;
    pointer-events: none;
}

.bb-link-neon-edge-top { top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #20dff7, #d7fbff); box-shadow: 0 0 7px rgba(54,229,255,.88); animation: bb-link-neon-top 2s linear infinite; }
.bb-link-neon-edge-right { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #55f0d1, #ecfffb); box-shadow: 0 0 7px rgba(85,240,209,.84); animation: bb-link-neon-right 2s linear infinite .5s; }
.bb-link-neon-edge-bottom { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #8799ff, #e6e9ff); box-shadow: 0 0 7px rgba(135,153,255,.84); animation: bb-link-neon-bottom 2s linear infinite 1s; }
.bb-link-neon-edge-left { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #f062d4, #ffe1f8); box-shadow: 0 0 7px rgba(240,98,212,.82); animation: bb-link-neon-left 2s linear infinite 1.5s; }

@keyframes bb-link-neon-top { 0% { left: -100%; } 50%, 100% { left: 100%; } }
@keyframes bb-link-neon-right { 0% { top: -100%; } 50%, 100% { top: 100%; } }
@keyframes bb-link-neon-bottom { 0% { right: -100%; } 50%, 100% { right: 100%; } }
@keyframes bb-link-neon-left { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; } }

.bb-overlay-button,
.bb-overlay-hotspot {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    touch-action: manipulation;
}

.bb-overlay-button:hover,
.bb-overlay-hotspot:hover {
    background: rgba(80, 200, 80, 0.08);
}

.bb-overlay-image-hotspot { padding: 0; border: 2px solid rgba(255,255,255,.92); overflow: hidden; background: #111; cursor: zoom-in; box-shadow: 0 5px 18px rgba(0,0,0,.28); }
.bb-overlay-image-hotspot img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.bb-overlay-image-hotspot.bb-shape-circle { border-radius: 50%; }
.bb-overlay-image-hotspot.bb-shape-square { border-radius: 5px; }
.bb-overlay-image-hotspot.bb-shape-diamond { transform: rotate(45deg) scale(.72); }
.bb-overlay-image-hotspot.bb-shape-diamond img { transform: rotate(-45deg) scale(1.42); }
@keyframes bb-image-attention { 0%,100% { box-shadow: 0 0 0 0 rgba(53,215,183,.72),0 5px 18px rgba(0,0,0,.28); } 50% { box-shadow: 0 0 0 9px rgba(53,215,183,0),0 5px 18px rgba(0,0,0,.28); } }
.bb-overlay-image-hotspot.bb-image-pulse { animation: bb-image-attention 1.7s ease-out infinite; }
.bb-overlay-gallery-hotspot { padding: 3px; border: 2px solid rgba(255,255,255,.92); background: rgba(11,14,19,.82); color: #fff; cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.28); overflow: hidden; box-sizing: border-box; max-width: 100%; max-height: 100%; contain: paint; }
.bb-overlay-gallery-hotspot.bb-link-pulse { border-color: rgba(103,233,255,.72); }
.bb-gallery-hotspot-preview { position: relative; width: 100%; height: 100%; display: block; pointer-events: none; overflow: hidden; }
.bb-gallery-hotspot-preview img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; border-radius: 2px; opacity: 0; transform: translateX(16%); animation-duration: calc(var(--bb-gallery-slide-count, 1) * 3s); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: calc(var(--bb-gallery-slide-index, 0) * 3s); }
.bb-gallery-hotspot-preview img:only-child { opacity: 1; transform: none; animation: none; }
@keyframes bb-gallery-hotspot-slide-2 { 0% { opacity: 0; transform: translateX(16%); } 2%, 48% { opacity: 1; transform: translateX(0); } 50%, 100% { opacity: 0; transform: translateX(-12%); } }
@keyframes bb-gallery-hotspot-slide-3 { 0% { opacity: 0; transform: translateX(16%); } 2%, 31.33% { opacity: 1; transform: translateX(0); } 33.33%, 100% { opacity: 0; transform: translateX(-12%); } }
@keyframes bb-gallery-hotspot-slide-4 { 0% { opacity: 0; transform: translateX(16%); } 2%, 23% { opacity: 1; transform: translateX(0); } 25%, 100% { opacity: 0; transform: translateX(-12%); } }
@keyframes bb-gallery-hotspot-slide-5 { 0% { opacity: 0; transform: translateX(16%); } 1.5%, 18.5% { opacity: 1; transform: translateX(0); } 20%, 100% { opacity: 0; transform: translateX(-12%); } }
@keyframes bb-gallery-hotspot-slide-6 { 0% { opacity: 0; transform: translateX(16%); } 1.5%, 15.16% { opacity: 1; transform: translateX(0); } 16.66%, 100% { opacity: 0; transform: translateX(-12%); } }
@keyframes bb-gallery-hotspot-slide-7 { 0% { opacity: 0; transform: translateX(16%); } 1.25%, 13.03% { opacity: 1; transform: translateX(0); } 14.28%, 100% { opacity: 0; transform: translateX(-12%); } }
@keyframes bb-gallery-hotspot-slide-8 { 0% { opacity: 0; transform: translateX(16%); } 1%, 11.5% { opacity: 1; transform: translateX(0); } 12.5%, 100% { opacity: 0; transform: translateX(-12%); } }
.bb-gallery-hotspot-preview.is-cards { padding: 5%; gap: 0; perspective: 250px; }
.bb-gallery-hotspot-preview.is-cards img { inset: 5%; width: 90%; height: 90%; border: 1px solid rgba(255,255,255,.72); box-shadow: 0 2px 5px rgba(0,0,0,.38); }
.bb-overlay-gallery-hotspot.bb-shape-circle { border-radius: 50%; }
.bb-overlay-gallery-hotspot.bb-shape-square { border-radius: 6px; }
.bb-overlay-gallery-hotspot.bb-shape-diamond { transform: rotate(45deg) scale(.72); }
.bb-overlay-gallery-hotspot.bb-shape-diamond > span { transform: rotate(-45deg) scale(1.42); }
.bb-overlay-gallery-hotspot.bb-image-pulse { animation: bb-image-attention 1.7s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .bb-overlay-image-hotspot.bb-image-pulse { animation: none; outline: 3px solid rgba(53,215,183,.75); }
    .bb-link-neon-edge { animation: none; background: rgba(103, 233, 255, .85); }
    .bb-gallery-hotspot-preview img { animation: none; opacity: 0; transform: none; }
    .bb-gallery-hotspot-preview img:first-child { opacity: 1; }
}

.bb-overlay-button:focus-visible,
.bb-overlay-hotspot:focus-visible {
    outline: 2px solid rgba(80, 200, 80, 0.42);
    outline-offset: 2px;
}

.bb-overlay-text {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    padding: 0;
    line-height: 1.55;
    cursor: default;
    user-select: text;
    -webkit-user-select: text;
}

.bb-overlay-text-content {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: auto;
    height: auto;
    overflow: hidden;
    overflow-wrap: anywhere;
    padding: .45em .6em;
}

.bb-overlay-text-content p {
    margin: 0 0 .45em;
}

.bb-overlay-text-content p:last-child {
    margin-bottom: 0;
}

.bb-overlay-text-content a {
    color: inherit;
    text-decoration: underline;
    pointer-events: auto;
}

/* The same image-based reader used on mobile, sized for desktop and tablet. */
@media (min-width: 769px) {
    .bb-mobile-zoom-layer {
        position: absolute;
        inset: 0;
        z-index: 90;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #d9dde0;
        cursor: grab;
    }

    .bb-mobile-zoom-layer:active { cursor: grabbing; }

    .bb-mobile-zoom-content {
        position: relative;
        width: min(72vw, 760px);
        max-height: 86%;
        transform-origin: center center;
        will-change: transform;
    }

    .bb-zoom-page-img {
        display: block;
        width: 100%;
        max-height: 78vh;
        object-fit: contain;
        border-radius: 5px;
        box-shadow: 0 24px 52px rgba(0, 0, 0, 0.52), 0 3px 12px rgba(0, 0, 0, 0.28);
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }

    .bb-zoom-overlays {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 20;
    }

    .bb-zoom-controls {
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%) translateY(-8px);
        z-index: 220;
        display: flex;
        padding: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
        opacity: 0;
        transition: opacity .2s ease, transform .2s ease;
    }

    .bb-zoom-controls.is-visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .bb-zoom-exit {
        border: 0;
        background: #7a5232;
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 1.15rem;
        cursor: pointer;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   VIDEO OVERLAYS
   ───────────────────────────────────────────────────────────────────────── */

.bb-overlay-video {
    border: 1px solid rgba(18, 24, 39, 0.12);
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16);
}

.bb-overlay-video video,
.bb-overlay-video .bb-video-poster,
.bb-overlay-video .bb-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bb-video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    background: linear-gradient(135deg, #111827 0%, #0f172a 100%);
    cursor: pointer;
    overflow: hidden;
    display: block;
    -webkit-tap-highlight-color: transparent;
    z-index: 30;
}

.bb-video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bb-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    box-sizing: border-box;
    border: 2px solid rgba(255,255,255,.86);
    border-radius: 50%;
    font-size: 1.9rem;
    color: #fff;
    background: rgba(10, 19, 28, .42);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    pointer-events: none;
    transition: transform .2s ease, background .2s ease;
}

.bb-video-poster::after {
    display: none;
}

.bb-video-poster:hover .bb-video-play-icon {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(10, 19, 28, .62);
}
.bb-overlay-externallink.bb-link-shape-circle,
.bb-overlay-internallink.bb-link-shape-circle { border-radius: 50%; }
.bb-overlay-externallink.bb-link-shape-diamond,
.bb-overlay-internallink.bb-link-shape-diamond { clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.bb-overlay-internallink.bb-home-link, .bb-overlay-button.bb-download-button { display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: clamp(16px,2.6vw,34px); }
.bb-overlay-internallink.bb-home-link { border: 0; background: rgba(13,110,253,.84); box-shadow: 0 7px 20px rgba(13,110,253,.36); }
.bb-overlay-button.bb-download-button { background: rgba(211,158,0,.92); box-shadow: 0 7px 20px rgba(120,86,0,.32); }

/* In-page music and podcast overlays */
.bb-overlay-audiotrigger { overflow: hidden; border: 1px solid rgba(255,255,255,.42); border-radius: 10px; background: rgba(255,255,255,.16); box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.38); color: #fff; -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); }
.bb-audio-player { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: 36% 1fr; gap: 7px; padding: 6px; direction: rtl; background: var(--bb-audio-background, rgba(255,255,255,.08)); -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%); }
.bb-audio-player > audio { display: none; }
.bb-audio-artwork { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 7px; background: linear-gradient(135deg,#27c6e7,#6a4fe4); display: grid; place-items: center; }
.bb-audio-artwork > img { width: 100%; height: 100%; object-fit: cover; }
.bb-audio-fallback-icon { font-size: clamp(18px,4vw,42px); color: #fff; }
.bb-audio-visualizer { position: absolute; inset: 0; display: flex; direction: ltr; align-items: center; justify-content: center; gap: 3px; padding: 13%; opacity: 0; transition: opacity .35s ease; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bb-audio-visualizer span { width: min(8%,6px); min-height: 10%; height: 18%; border-radius: 999px; background: linear-gradient(to top,#00decc,#7d65ff); box-shadow: 0 0 8px rgba(82,240,229,.72); transition: height .08s linear; }
.bb-audio-player.is-visualizing .bb-audio-artwork > img, .bb-audio-player.is-visualizing .bb-audio-fallback-icon { opacity: .18; }
.bb-audio-player.is-visualizing .bb-audio-visualizer { opacity: 1; }
.bb-audio-content { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
.bb-audio-content strong, .bb-audio-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bb-audio-content strong { font-size: clamp(9px,1.5vw,17px); }
.bb-audio-artist { color: rgba(230,246,255,.72); font-size: clamp(8px,1.1vw,13px); }
.bb-audio-progress { width: 100%; accent-color: #38d9cb; cursor: pointer; }
.bb-audio-footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; direction: rtl; font-size: clamp(8px,1vw,12px); color: rgba(240,250,255,.76); }
.bb-audio-play { border: 0; width: clamp(24px,3vw,34px); height: clamp(24px,3vw,34px); flex: 0 0 auto; border-radius: 50%; background: #18b9cc; color: #fff; cursor: pointer; display: grid; place-items: center; }

/* ─────────────────────────────────────────────────────────────────────────
   VIDEO MODAL
   ───────────────────────────────────────────────────────────────────────── */

.bb-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(8px);
}

.bb-video-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10001;
}

.bb-video-modal-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.bb-video-modal-frame {
    position: relative;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bb-video-modal-video {
    width: 100%;
    height: auto;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────
   TOOLTIPS
   ───────────────────────────────────────────────────────────────────────── */

[data-bb-tooltip]:not(.bb-overlay-item) {
    position: relative;
}

[data-bb-tooltip]::after {
    content: attr(data-bb-tooltip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.8);
    color: #fff;
    font-size: .72rem;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 100;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-bb-tooltip]:hover::after {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   NAVIGATION ARROWS
   ───────────────────────────────────────────────────────────────────────── */

.bb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    width: 44px;
    height: 64px;
    border: 1px solid rgba(255,255,255,.34);
    background: rgba(255,255,255,.13);
    color: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    font-size: 1.95rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s, color .18s, transform .18s, box-shadow .18s;
    padding: 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255,255,255,.26);
}

.bb-arrow:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255,255,255,.34);
}

.bb-arrow:disabled {
    opacity: .22;
    cursor: default;
    box-shadow: none;
}

.bb-arrow-prev {
    left: 14px;
    right: auto;
}

/* Keep Font Awesome navigation glyphs physical; application-level RTL rules
   must not mirror a direction that was selected explicitly by the viewer. */
.bb-arrow > .fa,
.bb-mobile-page-btn > .fa {
    direction: ltr !important;
    unicode-bidi: isolate;
    transform: none !important;
}

.bb-arrow-next {
    right: 14px;
    left: auto;
}

/* A Persian catalog turns forward from the left edge, with a left-pointing next arrow. */
.bb-shell.bb-rtl .bb-arrow-prev { right: 14px; left: auto; }
.bb-shell.bb-rtl .bb-arrow-next { left: 14px; right: auto; }


/* ─────────────────────────────────────────────────────────────────────────
   TOP BAR (Mobile)
   ───────────────────────────────────────────────────────────────────────── */

.bb-top-bar {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   BOTTOM TOOLBAR
   ───────────────────────────────────────────────────────────────────────── */

.bb-bottom-bar {
    position: relative;
    flex-shrink: 0;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255,255,255,.22);
    border-top: 1px solid rgba(255,255,255,.42);
    color: #273b3b;
    z-index: 50;
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
    box-shadow: 0 -10px 28px rgba(8, 24, 27, .16), inset 0 1px 0 rgba(255,255,255,.20);
}

.bb-bottom-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(255,255,255,.30), transparent 42%, rgba(194,242,234,.14));
    pointer-events: none;
}

.bb-bottom-bar > * {
    position: relative;
    z-index: 1;
}

.bb-book-title {
    font-size: .82rem;
    color: #7a6548;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

#bb-page-indicator,
#bb-page-indicator-top {
    font-size: .82rem;
    min-width: 64px;
    text-align: center;
    color: #55432b;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.bb-thumbnails { direction: ltr; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 3px 4px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(141,107,63,.38) transparent; }
.bb-shell.bb-rtl .bb-thumbnails { direction: rtl; }
.bb-thumbnail { position: relative; flex: 0 0 48px; height: 58px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 5px; background: #fff; cursor: pointer; scroll-snap-align: center; box-shadow: 0 2px 7px rgba(55,38,17,.18); transition: border-color .2s, transform .2s, box-shadow .2s; }
.bb-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.bb-thumbnail span { position: absolute; right: 2px; bottom: 2px; min-width: 17px; padding: 1px 4px; border-radius: 999px; color: #fff; background: rgba(20,16,12,.72); font-size: 9px; line-height: 15px; text-align: center; }
.bb-thumbnail:hover, .bb-thumbnail:focus-visible { transform: translateY(-2px); outline: none; border-color: rgba(141,107,63,.55); }
.bb-thumbnail.is-active { border-color: #35b99f; box-shadow: 0 0 0 2px rgba(53,185,159,.2),0 3px 10px rgba(55,38,17,.22); }

.bb-bottom-btn {
    background: none;
    border: none;
    color: #5d5d5d;
    cursor: pointer;
    font-size: 1rem;
    padding: 6px 8px;
    border-radius: 999px;
    transition: background .15s, color .15s;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* The BrandBook viewer is rendered without the site's shared layout, so it
   must provide its own accessible-label utility instead of relying on
   Bootstrap's .visually-hidden class. */
.bb-shell .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.bb-bottom-btn:hover {
    background: rgba(120, 90, 54, 0.1);
    color: #2d241b;
}

.bb-bottom-btn:disabled {
    opacity: .3;
    cursor: default;
}

.bb-bottom-btn.bb-audio-playing {
    color: #8d6b3f;
}

.bb-print-frame { position: fixed; width: 1px; height: 1px; right: -2px; bottom: -2px; border: 0; visibility: hidden; }

.bb-catalog-navigation {
    flex-shrink: 0;
    position: relative;
    z-index: 50;
    padding: 8px 16px 10px;
    background: rgba(255,255,255,.20);
    border-top: 1px solid rgba(255,255,255,.40);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
    box-shadow: 0 -10px 28px rgba(8,24,27,.15), inset 0 1px 0 rgba(255,255,255,.20);
    transition: opacity .18s ease, visibility .18s ease;
}

.bb-catalog-navigation.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bb-copyright {
    padding-top: 2px;
    color: rgba(39, 59, 59, .72);
    font-size: .68rem;
    line-height: 1.45;
    text-align: center;
}

.bb-catalog-actions {
    min-height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    color: #273b3b;
    direction: ltr;
}

.bb-overlay-hotspot {
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.bb-overlay-hotspot > i { font-size: clamp(14px, 2.4vw, 36px); line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }
.bb-overlay-hotspot > .bb-social-icon-image { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }
.bb-overlay-hotspot.bb-icon-background-glass { border: 1px solid rgba(255,255,255,.40); border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: 0 5px 16px rgba(0,0,0,.20); backdrop-filter: blur(5px); }
.bb-overlay-hotspot.bb-icon-background-color { border-radius: 50%; background: var(--bb-icon-background); }
@keyframes bb-icon-attention { 0%,92%,100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); } 95% { transform: scale(1.2); opacity: .72; filter: drop-shadow(0 0 7px var(--bb-icon-color, currentColor)); } }
.bb-overlay-hotspot.bb-icon-pulse > i, .bb-overlay-hotspot.bb-icon-pulse > .bb-social-icon-image { animation: bb-icon-attention 14s ease-in-out infinite; transform-origin: center; }
.bb-overlay-hotspot.bb-icon-group { padding: clamp(3px, .55vw, 8px); border-radius: 8px; }
.bb-overlay-hotspot.bb-icon-group.bb-icon-background-glass { border-radius: 8px; }
.bb-overlay-hotspot.bb-icon-group.bb-icon-background-color { border-radius: 8px; }
.bb-icon-group-icons { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--bb-icon-count, 3), minmax(0, 1fr)); align-items: center; justify-items: center; gap: var(--bb-icon-gap, 8px); }
.bb-icon-group-icons > i { min-width: 0; font-size: clamp(14px, 2.3vw, 34px); line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }
.bb-icon-group-icons > .bb-social-icon-image { width: 82%; height: 82%; min-width: 0; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }
.bb-overlay-hotspot.bb-icon-pulse:not(.bb-icon-group) .bb-icon-group-icons > i, .bb-overlay-hotspot.bb-icon-pulse:not(.bb-icon-group) .bb-icon-group-icons > .bb-social-icon-image { animation: bb-icon-attention 14s ease-in-out infinite; transform-origin: center; }
.bb-icon-group-icons > .bb-icon-link { cursor: pointer; }
.bb-icon-group-icons > .bb-icon-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }
@keyframes bb-icon-shine { 0%,4%,100% { transform: scale(1); filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); opacity: 1; } 2% { transform: scale(1.12); filter: drop-shadow(0 0 9px currentColor) brightness(1.45); } }
@keyframes bb-icon-bounce { 0%,5%,100% { transform: translateY(0); } 2.5% { transform: translateY(-15%); } }
@keyframes bb-icon-float { 0%,5%,100% { transform: translateY(0); } 2.5% { transform: translateY(-10%) rotate(-2deg); } }
@keyframes bb-icon-pulse-soft { 0%,5%,100% { transform: scale(1); opacity: 1; } 2.5% { transform: scale(1.14); opacity: .72; } }
@keyframes bb-icon-heartbeat { 0%,3%,100% { transform: scale(1); } 1% { transform: scale(1.18); } 2% { transform: scale(.98); } }
@keyframes bb-icon-flash { 0%,3%,100% { opacity: 1; filter: none; } 1.5% { opacity: .35; filter: brightness(1.75); } }
@keyframes bb-icon-swing { 0%,5%,100% { transform: rotate(0); } 1.5% { transform: rotate(9deg); } 3% { transform: rotate(-7deg); } }
@keyframes bb-icon-wobble { 0%,5%,100% { transform: translateX(0); } 1.25% { transform: translateX(-8%); } 2.5% { transform: translateX(7%); } 3.75% { transform: translateX(-3%); } }
@keyframes bb-icon-jello { 0%,5%,100% { transform: skew(0,0); } 1.5% { transform: skew(-10deg,-8deg); } 3% { transform: skew(7deg,5deg); } }
@keyframes bb-icon-rotate { 0%,5%,100% { transform: rotate(0); filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); } 2.5% { transform: rotate(360deg); filter: drop-shadow(0 0 9px currentColor); } }
@keyframes bb-icon-breathe { 0%,5%,100% { transform: scale(1); filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); } 2.5% { transform: scale(1.08); filter: drop-shadow(0 0 11px currentColor); } }
.bb-icon-group-icons[class*="bb-icon-animation-"] > i, .bb-icon-group-icons[class*="bb-icon-animation-"] > .bb-social-icon-image { animation-duration: var(--bb-icon-cycle, 10s); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: 0s; transform-origin: center; }
.bb-icon-animation-shine > *, .bb-icon-animation-sequential-shine > * { animation-name: bb-icon-shine; }
.bb-icon-animation-sequential-bounce > * { animation-name: bb-icon-bounce; }
.bb-icon-animation-sequential-float > * { animation-name: bb-icon-float; }
.bb-icon-animation-sequential-shine > *, .bb-icon-animation-sequential-bounce > *, .bb-icon-animation-sequential-float > * { animation-delay: calc(var(--bb-icon-index, 0) * .62s) !important; }
.bb-icon-animation-pulse > * { animation-name: bb-icon-pulse-soft; }
.bb-icon-animation-heartbeat > * { animation-name: bb-icon-heartbeat; }
.bb-icon-animation-flash > * { animation-name: bb-icon-flash; }
.bb-icon-animation-swing > * { animation-name: bb-icon-swing; }
.bb-icon-animation-wobble > * { animation-name: bb-icon-wobble; }
.bb-icon-animation-jello > * { animation-name: bb-icon-jello; }
.bb-icon-animation-rotate > * { animation-name: bb-icon-rotate; }
.bb-icon-animation-breathe > * { animation-name: bb-icon-breathe; }
@media (prefers-reduced-motion: reduce) { .bb-icon-group-icons > *, .bb-overlay-hotspot.bb-icon-pulse > * { animation: none !important; } }

/* The group itself remains visually stable. Only the icon beneath the pointer reacts. */
.bb-overlay-hotspot.bb-icon-group:hover { background: transparent; }
.bb-overlay-hotspot.bb-icon-group.bb-icon-background-glass:hover { background: rgba(255,255,255,.16); }
.bb-overlay-hotspot.bb-icon-group.bb-icon-background-color:hover { background: var(--bb-icon-background); }
.bb-icon-group-icons { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; }
.bb-icon-group-icons > i, .bb-icon-group-icons > .bb-social-icon-image { flex: 0 0 auto; transition: filter .18s ease, opacity .18s ease; }
.bb-icon-group-icons > i:hover, .bb-icon-group-icons > .bb-social-icon-image:hover { filter: drop-shadow(0 0 8px currentColor) brightness(1.18); opacity: .9; }

.bb-catalog-actions {
    width: max-content;
    max-width: calc(100vw - 24px);
    margin: 0 auto 7px;
    padding: 4px 7px;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 6px;
    background: rgba(255,255,255,.24);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 5px 14px rgba(8,24,27,.12), inset 0 1px 0 rgba(255,255,255,.24);
}

.bb-shell.bb-rtl .bb-catalog-actions { direction: rtl; }

.bb-catalog-indicator {
    min-width: 64px;
    text-align: center;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.bb-view-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 40px;
    color: inherit;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bb-view-count > .fa {
    font-size: .86rem;
}

.bb-mobile-page-btn {
    display: none;
    width: 36px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(120, 90, 54, .18);
    border-radius: 5px;
    background: rgba(255,255,255,.72);
    color: #55432b;
}

.bb-mobile-page-btn:disabled { opacity: .35; }
.bb-mobile-page-btn > i { direction: ltr; transform: none; }

[data-bb-zoom-toggle] {
    width: 32px;
    height: 32px;
    justify-content: center;
}

.bb-thumbnails {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    padding: 2px 2px 0;
    scrollbar-width: thin;
}

.bb-thumbnails.is-collapsed { display: none; }

.bb-thumbnail {
    position: relative;
    flex: 0 0 52px;
    height: 68px;
    overflow: hidden;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(31, 23, 15, .18);
    cursor: pointer;
}

.bb-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bb-thumbnail span {
    position: absolute;
    right: 2px;
    bottom: 2px;
    min-width: 16px;
    padding: 1px 3px;
    border-radius: 2px;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: 10px;
    line-height: 1.2;
}
.bb-thumbnail.is-active { border-color: #188f77; box-shadow: 0 0 0 2px rgba(24,143,119,.2); }

.bb-overlay-pulse::after {
    content: '';
    position: absolute;
    inset: 8%;
    border: 2px solid rgba(25, 143, 119, .9);
    border-radius: 5px;
    animation: bb-link-pulse 1.65s ease-out infinite;
    pointer-events: none;
}

@keyframes bb-link-pulse {
    0% { opacity: .9; transform: scale(.82); }
    70% { opacity: 0; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(1.12); }
}

.bb-video-glass-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.06) 42%, rgba(0,0,0,.24));
    backdrop-filter: blur(2px);
}
.bb-video-glass-label {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 86%;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 5px;
    background: rgba(16, 23, 25, .42);
    color: #fff;
    font-size: .76rem;
    backdrop-filter: blur(8px);
}

/* ─────────────────────────────────────────────────────────────────────────
   EMPTY STATE
   ───────────────────────────────────────────────────────────────────────── */

.bb-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8090b0;
    font-size: 1rem;
    text-align: center;
    padding: 40px;
}

/* ─────────────────────────────────────────────────────────────────────────
   FULLSCREEN
   ───────────────────────────────────────────────────────────────────────── */

.bb-shell:fullscreen {
    background: #d9dde0;
}

.bb-shell:-webkit-full-screen {
    background: #d9dde0;
}

.bb-shell:-moz-full-screen {
    background: #d9dde0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .bb-shell {
        position: fixed;
        inset: 0;
        z-index: 1200;
        border-radius: 0;
        background: #d9dde0;
        color: #26323a;
    }

    .bb-stage-wrap {
        padding: 0;
        margin: 0;
        width: 100%;
        min-height: 0;
        border-radius: 0;
        box-shadow: none;
        border: 0;
        background: transparent;
    }

    .bb-stage-wrap::before,
    .bb-stage-wrap::after {
        display: none;
    }

    /* Mobile has its own controls. Showing desktop arrows here caused two
       controls to overlap on each side of the catalog. */
    .bb-arrow { display: none; }
    .bb-overlay-gallery-hotspot { padding: 2px; box-shadow: 0 3px 10px rgba(0,0,0,.24); }
    .bb-gallery-hotspot-preview { gap: 2px; }

    .bb-top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 10px 12px;
        z-index: 60;
        background: linear-gradient(180deg, rgba(4, 9, 10, .82), rgba(4, 9, 10, .34));
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(89, 232, 198, 0.12);
    }

    .bb-top-title {
        font-size: .92rem;
        color: #eefaf7;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }

    .bb-top-page {
        color: #eefaf7;
        font-size: .82rem;
        margin-left: 8px;
    }

    .bb-stage-viewport {
        padding: 0;
        touch-action: pan-y;
        overflow: visible;
    }

    .bb-stage-viewport::after {
        display: none;
    }

    .bb-shell.bb-rtl .bb-stage-viewport::after {
        left: 0;
    }

    .bb-shell:not(.bb-rtl) .bb-stage-viewport::after {
        right: 0;
    }

    #bb-flipbook-stage {
        filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.10));
        touch-action: pan-y;
    }

    .bb-page-canvas {
        border-radius: 3px;
        box-shadow: none;
        border: 0;
    }

    .bb-bottom-bar {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        padding: 8px 12px 12px;
        background: linear-gradient(0deg, rgba(4, 8, 9, .88), rgba(4, 8, 9, .36));
        border-top: 1px solid rgba(89, 232, 198, 0.10);
        box-shadow: none;
        color: #eefaf7;
    }

    .bb-catalog-navigation {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 7px 10px 10px;
        background: rgba(5, 13, 14, .48);
        border-top-color: rgba(255, 255, 255, .16);
        box-shadow: 0 -12px 32px rgba(0, 0, 0, .26);
        -webkit-backdrop-filter: blur(22px) saturate(145%);
        backdrop-filter: blur(22px) saturate(145%);
    }

    .bb-catalog-actions {
        width: 100%;
        max-width: 100%;
        min-height: 36px;
        margin: 0;
        padding: 3px 4px;
        box-sizing: border-box;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 2px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        color: #eefaf7;
        background: rgba(255, 255, 255, .14);
        border-color: rgba(255, 255, 255, .24);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 8px 20px rgba(0,0,0,.22);
        -webkit-overflow-scrolling: touch;
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        backdrop-filter: blur(16px) saturate(150%);
    }
    .bb-catalog-actions::-webkit-scrollbar { display: none; }
    .bb-catalog-actions > * { flex: 0 0 auto; scroll-snap-align: center; }
    .bb-catalog-indicator { min-width: 38px; color: #eefaf7; font-size: .72rem; }
    .bb-mobile-page-btn {
        display: inline-flex;
        position: absolute;
        top: 50%;
        z-index: 70;
        width: 34px;
        height: 42px;
        transform: translateY(-50%);
        color: #eefaf7;
        background: rgba(4, 12, 13, .58);
        border-color: rgba(89,232,198,.30);
        border-radius: 8px;
        backdrop-filter: blur(8px);
        touch-action: manipulation;
    }
    .bb-shell.bb-rtl .bb-mobile-page-btn-prev { right: 10px; }
    .bb-shell.bb-rtl .bb-mobile-page-btn-next { left: 10px; }
    .bb-shell:not(.bb-rtl) .bb-mobile-page-btn-prev { left: 10px; }
    .bb-shell:not(.bb-rtl) .bb-mobile-page-btn-next { right: 10px; }
    .bb-catalog-navigation .bb-bottom-btn {
        width: 30px;
        min-width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center;
        color: #eefaf7;
        font-size: .88rem;
    }
    .bb-catalog-navigation .bb-view-count {
        min-width: 32px;
        gap: 3px;
        font-size: .7rem;
    }
    .bb-thumbnails { gap: 7px; }
    .bb-thumbnail { flex-basis: 42px; height: 56px; border-radius: 3px; }
    .bb-thumbnail.is-active { border-color: #35d7b7; box-shadow: 0 0 0 2px rgba(53,215,183,.24); }

    .bb-book-title {
        display: none;
    }

    .bb-bottom-bar {
        gap: 6px;
        padding: 8px 10px 12px;
    }

    #bb-page-indicator,
    #bb-page-indicator-top,
    .bb-bottom-btn {
        color: #eefaf7;
    }

    .bb-thumbnails { gap: 6px; padding-block: 2px; scrollbar-width: none; }
    .bb-thumbnails::-webkit-scrollbar { display: none; }
    .bb-thumbnail { flex-basis: 42px; height: 52px; border-radius: 4px; }
    .bb-copyright { color: rgba(238, 250, 247, .72); }
}

@media (max-width: 600px) {
    .bb-stage-wrap {
        padding: 0;
    }

    .bb-stage-viewport {
        padding: 0;
    }

    .bb-bottom-bar {
        gap: 6px;
        padding: 8px 10px;
    }
}

/* Gallery is isolated from StPageFlip so it never changes the book DOM/state. */
.bb-modal-open { overflow: hidden; }
.bb-gallery { position: fixed; inset: 0; z-index: 10050; background: rgba(8,10,14,.9); backdrop-filter: blur(10px); padding: clamp(10px,3vw,32px); color: #fff; direction: rtl; }
.bb-gallery[hidden], .bb-gallery [hidden] { display: none !important; }
.bb-gallery-panel { width: min(1100px,100%); height: 100%; margin: auto; overflow: auto; background: #171b22; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 18px; }
.bb-gallery-panel header, .bb-lightbox header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bb-gallery-panel h2 { margin: 0; font-size: 1.35rem; }
.bb-gallery-close, .bb-lightbox button { border: 0; border-radius: 999px; min-width: 44px; min-height: 44px; background: rgba(255,255,255,.14); color: #fff; font-size: 1.5rem; cursor: pointer; }
.bb-gallery-grid { margin-top: 18px; }
.bb-gallery-grid.is-grid { display: grid; grid-template-columns: repeat(var(--bb-gallery-columns,3),minmax(0,1fr)); gap: 14px; }
.bb-gallery-grid.is-masonry { columns: var(--bb-gallery-columns,3); column-gap: 14px; }
.bb-gallery-grid.is-masonry .bb-gallery-card { width: 100%; margin: 0 0 14px; break-inside: avoid; }
.bb-gallery-grid.is-cards { display: grid; grid-template-columns: repeat(var(--bb-gallery-columns,3),minmax(0,1fr)); gap: clamp(16px,2.3vw,30px); padding: clamp(12px,2vw,26px); perspective: 1100px; overflow: hidden; }
.bb-gallery-card { padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #222832; color: #fff; text-align: right; cursor: pointer; transition: transform .48s cubic-bezier(.2,.8,.2,1), box-shadow .48s ease, border-color .3s ease; }
.bb-gallery-card img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.bb-gallery-grid.is-grid .bb-gallery-card img { aspect-ratio: 1/1; }
.bb-gallery-grid.is-cards .bb-gallery-card { position: relative; z-index: 1; transform: rotate(var(--bb-card-rotate,0deg)); box-shadow: 0 14px 34px rgba(0,0,0,.28); animation: bb-gallery-card-float 4.8s ease-in-out var(--bb-card-delay,0s) infinite alternate; will-change: transform; }
.bb-gallery-grid.is-cards .bb-gallery-card:nth-child(3n+2) { margin-top: clamp(14px,3vw,34px); }
.bb-gallery-grid.is-cards .bb-gallery-card img { aspect-ratio: 4/5; }
@keyframes bb-gallery-card-float { from { transform: translate3d(0,0,0) rotate(var(--bb-card-rotate,0deg)); } to { transform: translate3d(0,calc(-1 * var(--bb-card-lift,7px)),0) rotate(var(--bb-card-rotate,0deg)); } }
.bb-gallery-caption { display: block; padding: 10px; }
.bb-gallery-caption strong, .bb-gallery-caption small { display: block; }
.bb-gallery-caption strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-gallery-caption small { color: #cbd1da; line-height: 1.55; margin-top: 4px; }
.bb-gallery-description { margin: 6px 0 0; color: #cbd1da; line-height: 1.7; }
.bb-gallery-card:hover, .bb-gallery-card:focus-visible { outline: 2px solid #35d7b7; outline-offset: 2px; }
@media (hover:hover) and (pointer:fine) {
    .bb-gallery-grid.is-cards .bb-gallery-card:hover, .bb-gallery-grid.is-cards .bb-gallery-card:focus-visible { z-index: 4; animation-play-state: paused; transform: translate3d(0,-14px,70px) rotate(0deg) scale(1.045); box-shadow: 0 26px 54px rgba(0,0,0,.48); border-color: rgba(255,255,255,.38); }
    .bb-gallery-grid.is-cards .bb-gallery-card:hover img, .bb-gallery-grid.is-cards .bb-gallery-card:focus-visible img { transform: scale(1.085); filter: saturate(1.08); }
}
.bb-lightbox { position: absolute; inset: 0; display: block; padding: 0; overflow: hidden; background: #080a0d; direction: ltr; }
.bb-lightbox header { position: absolute; z-index: 4; top: clamp(8px,2vw,20px); right: clamp(8px,2vw,20px); left: clamp(8px,2vw,20px); direction: rtl; }
.bb-lightbox header > div { display: flex; gap: 8px; }
.bb-lightbox-count { direction: rtl; font-variant-numeric: tabular-nums; }
.bb-lightbox-stage { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; min-width: 0; min-height: 0; }
.bb-lightbox-stage img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; transform-origin: center; user-select: none; will-change: transform; }
.bb-lightbox-stage img.is-zoomed { cursor: grab; }
.bb-lightbox-nav { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); }
.bb-lightbox-nav.prev { left: clamp(8px,2vw,20px); }
.bb-lightbox-nav.next { right: clamp(8px,2vw,20px); }
.bb-lightbox footer { position: absolute; z-index: 4; right: 16px; bottom: 12px; left: 16px; text-align: center; direction: rtl; max-width: 850px; width: calc(100% - 32px); margin: auto; pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,.76); }
.bb-lightbox footer .bb-related-actions { pointer-events: auto; }
.bb-lightbox.is-zoomed footer, .bb-lightbox.is-zoomed .bb-lightbox-nav { opacity: 0; pointer-events: none; }
.bb-lightbox footer h3, .bb-lightbox footer p { margin: 4px 0; }
.bb-lightbox footer p { color: #cbd1da; line-height: 1.7; }
.bb-related-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.bb-related-actions a, .bb-related-actions button { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: #168f7b; color: #fff; text-decoration: none; font-size: .9rem; }
@media (max-width: 600px) {
    .bb-gallery { padding: 0; }
    .bb-gallery-panel { border-radius: 0; border: 0; padding: 14px; }
    .bb-gallery-grid.is-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .bb-gallery-grid.is-masonry { columns: 2; column-gap: 10px; }
    .bb-gallery-grid.is-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 9px 3px 20px; }
    .bb-gallery-grid.is-cards .bb-gallery-card:nth-child(3n+2) { margin-top: 12px; }
    .bb-gallery-grid.is-cards .bb-gallery-card { animation-duration: 5.8s; }
    .bb-lightbox footer { font-size: .88rem; }
    .bb-bottom-btn { min-width: 38px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .bb-gallery-grid.is-cards .bb-gallery-card { animation: none; }
    .bb-gallery-card, .bb-gallery-card img { transition-duration: .01ms; }
}