.floating-arrow{
    position:fixed;
    top:50%;
    margin-top:-24px;
    width:48px;
    height:48px;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:9999998;
    transition:background .15s ease, transform .15s ease;
}
.floating-arrow:hover{
    background:rgba(0,0,0,.75);
    transform:scale(1.08);
}
.floating-arrow:disabled{
    opacity:.25;
    cursor:default;
}
#btn-float-prev{
    left:16px;
}
#btn-float-next{
    right:16px;
}
.zoom-in ~ .floating-arrow,
#canvas:has(.magazine.zoom-in) .floating-arrow,
#canvas:has(.magazine.zoom-in) #progress-bar-wrapper{
    display:none;
}
#progress-bar-wrapper{
    position:fixed;
    left:0;
    right:0;
    bottom:14px;
    display:flex;
    justify-content:center;
    z-index:9999997;
    pointer-events:none;
}
#progress-bar-track{
    width:min(500px, 70vw);
    height:5px;
    background:rgba(0,0,0,.15);
    border-radius:10px;
    overflow:hidden;
}
#progress-bar-fill{
    height:100%;
    width:0%;
    background:rgba(0,0,0,.6);
    transition:width .25s ease;
}
@media (max-width:700px){
    .floating-arrow{
        width:38px;
        height:38px;
        font-size:14px;
    }
    #btn-float-prev{
        left:8px;
    }
    #btn-float-next{
        right:8px;
    }
}
.catalog-navigation{
    position:fixed;
    top:16px;
    left:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    z-index:9999999;
}
.catalog-home{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:18px;
    transition:background .15s ease, transform .15s ease;
}
.catalog-home:hover{
    background:rgba(0,0,0,.75);
    color:#fff;
    transform:scale(1.08);
}
.catalog-languages{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
}
.catalog-languages a{
    display:block;
    line-height:0;
}
.catalog-languages img{
    width:38px;
    height:38px;
    max-width:38px !important;
    max-height:38px !important;
    object-fit:contain;
    display:block;
    border-radius:4px;
}
@media (max-width:700px){
    .catalog-navigation{
        top:10px;
        left:10px;
        flex-direction:row;
        align-items:center;
        gap:8px;
    }
    .catalog-languages{
        flex-direction:row;
        gap:5px;
    }
    .catalog-home{
        width:38px;
        height:38px;
        font-size:15px;
    }
    .catalog-languages img{
        width:32px;
        height:32px;
        max-width:32px !important;
        max-height:32px !important;
    }
}
.catalog-share{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:18px;
    border:none;
    cursor:pointer;
    transition:background .15s ease, transform .15s ease;
}
.catalog-share:hover{
    background:rgba(0,0,0,.75);
    color:#fff;
    transform:scale(1.08);
}
.catalog-toast{
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%) translateY(100px);
    background:rgba(0, 0, 0, 0.85);
    color:#fff;
    padding:10px 20px;
    border-radius:20px;
    font-size:14px;
    font-family:sans-serif;
    z-index:99999999;
    transition:transform 0.3s ease, opacity 0.3s ease;
    opacity:0;
    pointer-events:none;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.catalog-toast.show{
    transform:translateX(-50%) translateY(0);
    opacity:1;
}
@media (max-width:700px){
    .catalog-share{
        width:38px;
        height:38px;
        font-size:15px;
    }
}