/* === Upload card === */
.upload-card{
    max-width:500px; margin:20px auto 40px; padding:20px 25px;
    background: var(--paper); border-radius:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.08); text-align:center;
}

/* Upload methods - dual box layout */
.upload-methods{
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px;
}

/* Three-column layout for upload methods with video */
.upload-methods-three{
    grid-template-columns:1fr 1fr 1fr;
}

.upload-box{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px 16px; cursor:pointer; border-radius:12px;
    border:2px dashed var(--upload-border);
    background:var(--upload-bg);
    transition:all .25s ease;
    min-height:120px;
}
.upload-box:hover{ 
    background:var(--upload-bg-hover); 
    border-color:color-mix(in srgb,var(--upload-border) 90%, #000 10%);
    transform:translateY(-2px);
}
.upload-box:active{
    transform:translateY(0);
}
.upload-box-camera{
    border-style:solid;
    background:linear-gradient(135deg, var(--sage-200) 0%, var(--upload-bg) 100%);
}
.upload-box-video{
    border-style:solid;
    background:linear-gradient(135deg, var(--rose-100, #f5e6e6) 0%, var(--upload-bg) 100%);
}
.upload-icon{ font-size:36px; margin-bottom:8px; }
.upload-text{ font-size:1rem; margin-bottom:4px; font-weight:600; }
.upload-box small{ display:block; color:#666; font-size:.75rem; text-align:center; }

/* Preview grid for multiple files (images + videos) */
.preview-header{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:12px; padding:0 4px;
}
.preview-header span{ font-weight:600; color:var(--sage-700); }
.clear-btn{
    background:none; border:none; color:var(--rose-600); cursor:pointer;
    font-size:.9rem; padding:4px 8px; border-radius:6px;
    transition:background .2s ease;
}
.clear-btn:hover{ background:rgba(0,0,0,.05); }

/* Video preview in upload grid */
.preview-item-video{
    position:relative;
}
.preview-item-video::after{
    content:"▶";
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    font-size:24px; color:rgba(255,255,255,.9);
    text-shadow:0 2px 4px rgba(0,0,0,.5);
    pointer-events:none;
}

.preview-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); gap:8px;
}
.preview-item{
    position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.preview-item img{
    width:100%; height:100%; object-fit:cover;
}
.preview-item .remove-btn{
    position:absolute; top:4px; right:4px; width:22px; height:22px;
    background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%;
    cursor:pointer; font-size:14px; line-height:22px; text-align:center;
    opacity:0; transition:opacity .2s ease;
}
.preview-item:hover .remove-btn{ opacity:1; }

.form-group{ margin-top:20px; text-align:left; }
.form-group label{ display:block; margin-bottom:5px; font-weight:500; }
.form-group input{
    width:100%; padding:10px 12px; border:1px solid var(--brand-border); border-radius:8px;
}

/* Category management UI (Crew role only) */
.category-management {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--brand-border, #ddd);
}
.category-toggle-btn {
    background: none;
    border: 1px dashed var(--sage-400, #aaa);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--sage-600, #666);
    transition: all 0.2s ease;
    width: 100%;
}
.category-toggle-btn:hover {
    background: var(--sage-100, #f0f0f0);
    border-color: var(--sage-500, #888);
}
.category-form {
    margin-top: 12px;
    padding: 16px;
    background: var(--sage-100, #f8f8f8);
    border-radius: 12px;
}
.category-form-fields .form-group {
    margin-top: 12px;
}
.category-form-fields .form-group:first-child {
    margin-top: 0;
}
.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-group-row .form-group {
    margin-top: 12px;
}
.form-group input[type="color"] {
    width: 100%;
    height: 40px;
    padding: 4px;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    cursor: pointer;
}
.create-category-btn {
    margin-top: 16px;
    width: 100%;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: var(--sage-600, #7A9A8A);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.create-category-btn:hover:not(:disabled) {
    background: var(--sage-700, #5a7a6a);
}
.create-category-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Button */
.upload-btn{
    width:100%; margin-top:20px; padding:12px 24px; border:none; border-radius:8px;
    background:var(--brand-secondary); color:var(--brand-secondary-ink);
    font-weight:600; font-size:1rem;
    transition:all .25s ease;
}
.upload-btn:hover:not(:disabled){ background:var(--brand-secondary-hover); transform:translateY(-1px); }
.upload-btn:disabled{ opacity:.5; cursor:not-allowed; }
.upload-btn .btn-loading{ display:inline-flex; align-items:center; gap:8px; }

.preview-container{ margin-top:15px; text-align:center; padding:12px; background:rgba(0,0,0,.02); border-radius:12px; }
.preview-container img{
    max-width:100%; max-height:250px; border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* === Mobile-first filter panel === */
.filter-panel{
    max-width:500px; margin:0 auto 24px;
    background: var(--paper); border-radius:16px;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    overflow:hidden;
}
.filter-toggle{
    width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:14px 20px; border:none; background:transparent;
    font-weight:600; font-size:1rem; cursor:pointer;
    color:var(--sage-700);
    transition:background .2s ease;
}
.filter-toggle:hover{ background:rgba(0,0,0,.02); }
.filter-toggle-icon{ 
    transition:transform .3s ease; 
    font-size:.8rem;
}
.filter-panel.open .filter-toggle-icon{ transform:rotate(180deg); }

.filter-form{
    display:none; padding:0 20px 20px;
}
.filter-panel.open .filter-form{ display:block; }

.filter-row{
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
    margin-bottom:16px;
}
.filter-field label{ display:block; margin-bottom:6px; font-size:.85rem; font-weight:500; color:#666; }
.filter-field .form-select{
    width:100%; padding:10px 12px; border:1px solid var(--brand-border);
    border-radius:8px; font-size:.95rem;
}
.filter-actions{
    display:flex; gap:12px; align-items:center;
}
.filter-btn{
    flex:1; padding:10px 20px; border:none; border-radius:8px;
    background:var(--brand-primary); color:var(--brand-primary-ink);
    font-weight:600; cursor:pointer;
    transition:background .2s ease;
}
.filter-btn:hover{ background:var(--brand-primary-hover); }
.filter-reset{
    padding:10px 16px; color:var(--sage-700); font-size:.9rem;
    text-decoration:none;
}
.filter-reset:hover{ text-decoration:underline; }

@media (max-width: 560px){
    .upload-methods{ grid-template-columns:1fr; }
    .upload-methods-three{ grid-template-columns:1fr; }
    .filter-row{ grid-template-columns:1fr; }
    .filter-actions{ flex-direction:column; }
    .filter-btn{ width:100%; }
    .filter-reset{ text-align:center; }
}

@media (min-width: 561px) and (max-width: 700px){
    .upload-methods-three{ grid-template-columns:1fr 1fr; }
}

/* === Belts (scrolling thumbnail strips) === */
/* Reworked for smooth animation using CSS transforms with JS control */
.belt{ 
    position:relative; height:100px; overflow:hidden; 
    margin:0 -20px 24px; /* negative margin for full-width effect */
    background: linear-gradient(135deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.04) 100%);
}
.belt-track{ 
    display:inline-flex; gap:14px; align-items:center;
    padding:8px 0;
    /* JS handles animation via transforms for smoother performance */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
/* Fallback CSS animation disabled by JS when using transform-based animation */
.belt-track:not([style*="transform"]) {
    animation: belt-scroll 60s linear infinite;
}
.belt-track-reverse:not([style*="transform"]) { animation-direction:reverse; }
.belt:hover .belt-track, .belt:has(.belt-track:hover) .belt-track{ 
    /* Pause handled by JS */ 
}

.belt-fader{
    position:absolute; top:0; bottom:0; width:80px; z-index:2;
    pointer-events:none;
}
.belt-fader.left{ 
    left:0; 
    background:linear-gradient(to right, var(--sage-500), transparent);
}
.belt-fader.right{ 
    right:0; 
    background:linear-gradient(to left, var(--sage-500), transparent);
}

.belt-item{
    display:inline-block; flex:0 0 auto; width:150px; height:90px;
    border-radius:14px; overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.15); 
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    border:2px solid rgba(255,255,255,.3);
}
.belt-item:hover{ 
    transform:translateY(-6px) scale(1.05); 
    box-shadow:0 12px 30px rgba(0,0,0,.2);
    z-index:10;
}
/* Active image highlighting in belt */
.belt-item-active {
    border-color: var(--brand-primary, #7A9A8A);
    box-shadow: 0 0 0 3px var(--brand-primary, #7A9A8A), 0 8px 24px rgba(0,0,0,.25);
    transform: translateY(-4px) scale(1.08);
    z-index:15;
}
.belt-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Belt video indicator */
.belt-item-video{ position:relative; }
.belt-video-indicator{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    font-size:20px; color:rgba(255,255,255,.95);
    text-shadow:0 2px 4px rgba(0,0,0,.5);
    pointer-events:none;
    opacity:0.9;
}
.belt-item-video:hover .belt-video-indicator{ opacity:1; }

/* Belt spacing between top and bottom */
.belt-top{ margin-bottom:8px; }
.belt-bottom{ margin-bottom:32px; }


@keyframes belt-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* === Masonry-like grid === */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.gallery-item{
    position:relative; border-radius:18px; overflow:hidden; background:#f2f3f5;
    box-shadow:0 8px 28px rgba(0,0,0,.08); transition:transform .18s ease, box-shadow .18s ease;
}
.gallery-item:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.12); }

/* Video play overlay for gallery items */
.gallery-item-video .video-play-overlay{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:60px; height:60px;
    background:rgba(0,0,0,.5);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, transform .2s ease;
    pointer-events:none;
    z-index:5;
}
.gallery-item-video:hover .video-play-overlay{
    background:rgba(0,0,0,.7);
    transform:translate(-50%, -50%) scale(1.1);
}
.video-play-overlay .play-icon{
    width:28px; height:28px;
    color:#fff;
    margin-left:4px; /* Optical centering for play triangle */
}

.img-thumb{ width:100%; height:100%; object-fit:cover; display:block; filter:blur(12px); transform:scale(1.02); transition:filter .3s, transform .3s; }
.img-thumb.ready{ filter:blur(0); transform:scale(1); }

.caption{
    position:absolute; left:0; right:0; bottom:0; padding:10px 14px; color:#fff; font-weight:500;
    text-shadow:0 1px 3px rgba(0,0,0,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gallery-item::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:40%;
    background:linear-gradient(to top, rgba(0,0,0,.45), transparent); pointer-events:none;
}

.chip{
    position:absolute; top:10px; padding:4px 10px; border-radius:999px; font-size:.8rem; font-weight:600;
    color:#fff; background:rgba(0,0,0,.35); backdrop-filter:blur(4px);
}
.chip-category{ left:10px; }
.chip-uploader{ right:10px; background: var(--brand-primary); }

/* ============ Fullscreen Image Viewer ============ */
.viewer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    z-index: 1050;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.viewer-backdrop.open {
    display: flex;
}

.viewer-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.viewer-image-wrapper {
    position: relative;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.viewer-image {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    object-fit: contain;
    /* Smooth transitions for fade and slide effects */
    transition: opacity 0.4s ease, transform 0.4s ease;
    position: relative;
}

/* ============ Video Player in Viewer ============ */
.viewer-video {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    object-fit: contain;
    background: #000;
}
.viewer-video:focus {
    outline: none;
}

/* Hide video when showing image */
.viewer-backdrop:not(.viewer-video-mode) .viewer-video {
    display: none;
}

/* Hide image when showing video */
.viewer-backdrop.viewer-video-mode .viewer-image,
.viewer-backdrop.viewer-video-mode .viewer-image-next,
.viewer-backdrop.viewer-video-mode .viewer-canvas {
    display: none;
}

/* Secondary image element for smooth transitions */
.viewer-image-next {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: calc(100vh - 140px);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    object-fit: contain;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.viewer-canvas {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    border-radius: 12px;
}

.viewer-caption {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1rem;
    text-align: center;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    max-width: 80%;
    backdrop-filter: blur(8px);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}
.viewer-caption:empty {
    display: none;
}

/* Centered bottom controls */
.viewer-controls {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 999px;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.viewer-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.viewer-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}
.viewer-btn:active {
    transform: scale(0.95);
}
.viewer-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.viewer-btn svg {
    width: 24px;
    height: 24px;
}

/* Settings toggle button */
.viewer-settings-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}
.viewer-settings-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Settings panel */
.viewer-settings {
    position: fixed;
    top: 70px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    padding: 16px;
    min-width: 200px;
    display: none;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.viewer-settings.open {
    display: block;
}

.settings-row {
    margin-bottom: 12px;
}
.settings-row:last-child {
    margin-bottom: 0;
}
.settings-row label {
    display: block;
    color: #fff;
    font-size: 0.85rem;
    margin-bottom: 6px;
    opacity: 0.8;
}
.settings-row select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
}
.settings-row select option {
    background: #333;
    color: #fff;
}

/* Slideshow mode - hide non-essential UI on hover-away */
.viewer-backdrop.slideshow-mode .viewer-controls {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
}
.viewer-backdrop.slideshow-mode .viewer-caption {
    opacity: 0;
}
.viewer-backdrop.slideshow-mode .viewer-settings-toggle {
    opacity: 0;
    pointer-events: none;
}
.viewer-backdrop.slideshow-mode:hover .viewer-controls,
.viewer-backdrop.slideshow-mode:hover .viewer-settings-toggle {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.viewer-backdrop.slideshow-mode:hover .viewer-settings-toggle {
    transform: none;
}

/* ============ Fullscreen Slideshow Mode ============ */
/* True fullscreen mode - hides all UI, image fills viewport */
.viewer-backdrop.fullscreen-mode .viewer-image-wrapper {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
}
.viewer-backdrop.fullscreen-mode .viewer-image,
.viewer-backdrop.fullscreen-mode .viewer-image-next {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: contain;
}
.viewer-backdrop.fullscreen-mode .viewer-canvas {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.viewer-backdrop.fullscreen-mode .viewer-container {
    padding: 0;
}
/* Hide all UI in fullscreen mode by default */
.viewer-backdrop.fullscreen-mode .viewer-controls {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
}
.viewer-backdrop.fullscreen-mode .viewer-caption {
    opacity: 0;
}
.viewer-backdrop.fullscreen-mode .viewer-settings-toggle,
.viewer-backdrop.fullscreen-mode .viewer-settings {
    opacity: 0;
    pointer-events: none;
}
/* Show UI on hover in fullscreen mode */
.viewer-backdrop.fullscreen-mode:hover .viewer-controls {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.viewer-backdrop.fullscreen-mode:hover .viewer-caption {
    opacity: 0.9;
}
.viewer-backdrop.fullscreen-mode:hover .viewer-settings-toggle {
    opacity: 1;
    pointer-events: auto;
}

/* Fullscreen controls hidden state - toggled by click/tap */
.viewer-backdrop.fullscreen-controls-hidden .viewer-controls,
.viewer-backdrop.fullscreen-controls-hidden .viewer-caption,
.viewer-backdrop.fullscreen-controls-hidden .viewer-settings-toggle,
.viewer-backdrop.fullscreen-controls-hidden .viewer-settings {
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Override hover when controls are explicitly hidden */
.viewer-backdrop.fullscreen-controls-hidden:hover .viewer-controls,
.viewer-backdrop.fullscreen-controls-hidden:hover .viewer-caption,
.viewer-backdrop.fullscreen-controls-hidden:hover .viewer-settings-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============ Body class for hiding site chrome in fullscreen ============ */
/* When fullscreen slideshow is active, hide all site UI elements */
/* Uses specific selectors for site layout elements to avoid conflicts */
body.fullscreen-slideshow {
    overflow: hidden !important;
}
body.fullscreen-slideshow header,
body.fullscreen-slideshow header.site-header,
body.fullscreen-slideshow nav,
body.fullscreen-slideshow nav.navbar,
body.fullscreen-slideshow nav.navbar.mobile-tabbar,
body.fullscreen-slideshow .upload-card,
body.fullscreen-slideshow .filter-panel,
body.fullscreen-slideshow .belt,
body.fullscreen-slideshow .belt-top,
body.fullscreen-slideshow .belt-bottom,
body.fullscreen-slideshow .gallery,
body.fullscreen-slideshow .container,
body.fullscreen-slideshow .invite-stars,
body.fullscreen-slideshow main.pb-3 > *:not(.viewer-backdrop),
body.fullscreen-slideshow footer,
body.fullscreen-slideshow aside,
body.fullscreen-slideshow .sidebar {
    display: none !important;
    visibility: hidden !important;
}
/* Ensure the viewer backdrop remains visible in fullscreen mode */
body.fullscreen-slideshow .viewer-backdrop {
    display: flex !important;
    visibility: visible !important;
}
/* Fullscreen mode ensures image container uses full viewport */
body.fullscreen-slideshow main {
    padding: 0 !important;
    margin: 0 !important;
}

/* Toast notifications */
.gallery-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 2000;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
}
.gallery-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.gallery-toast-info {
    background: rgba(42, 42, 42, 0.9);
}
.gallery-toast-error {
    background: rgba(185, 28, 28, 0.9);
}
.gallery-toast-success {
    background: rgba(21, 128, 61, 0.9);
}

/* Legacy lightbox - keep for backward compatibility but hidden */
.lb-backdrop{ display: none !important; }

/* Responsiv */
@media (max-width: 992px){ .gallery{ column-count:2; } }
@media (max-width: 560px){
    .gallery{ column-count:1; }
    .belt{ height:80px; margin:0 -16px 20px; }
    .belt-item{ width:120px; height:72px; }
    .belt-fader{ width:50px; }
    
    .viewer-controls {
        bottom: 20px;
        gap: 8px;
        padding: 10px 16px;
    }
    .viewer-btn {
        width: 44px;
        height: 44px;
    }
    .viewer-btn svg {
        width: 20px;
        height: 20px;
    }
    .viewer-caption {
        bottom: 90px;
        font-size: 0.9rem;
        padding: 6px 12px;
    }
    .viewer-settings {
        top: auto;
        bottom: 100px;
        right: 10px;
        left: 10px;
    }
    .viewer-settings-toggle {
        top: 15px;
        right: 15px;
    }
    
    /* Fullscreen mode on mobile - image fills more viewport */
    .viewer-backdrop.fullscreen-mode .viewer-image,
    .viewer-backdrop.fullscreen-mode .viewer-image-next {
        object-fit: contain;
    }
}

/* Tablet responsiveness */
@media (min-width: 561px) and (max-width: 992px) {
    .belt{ height:90px; }
    .belt-item{ width:140px; height:84px; }
}