:root {
    --primary-red: #1e36a5;
    --bg-modal: rgba(0, 0, 0, 0.98);
    --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.product-viewer { max-width: 100%; margin: 0 auto; user-select: none; }
@media (min-width: 769px) {
    .product-viewer{
         max-width: 80%;
    }
} 
.main-display-container {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden; 
    background: #f0f0f0; cursor: pointer;
}
.slide-wrapper { 
    display: flex; width: 100%; height: 100%; 
    transition: transform var(--transition);
}
.slide-wrapper img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }

.lupa-overlay {
    position: absolute; top: 0; right: 0; width: 45px; height: 45px; 
    z-index: 99; cursor: pointer; background: rgba(0,0,0,0.5); 
    display: flex; justify-content: center; align-items: center;
}
.lupa-overlay svg { width: 24px; height: 24px; pointer-events: none; }

.thumb-bar { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 2px; }
.thumb { 
    flex: 0 0 52px; aspect-ratio: 1 / 1; cursor: pointer; 
    border: 3px solid transparent; opacity: 0.6; transition: 0.3s;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.active { border-color: var(--primary-red); opacity: 1; }

/* --- MODO MODAL --- */
.modal { 
    display: none; position: fixed; z-index: 9999999 !important; 
    left: 0; top: 0; width: 100%; height: 100%; background: var(--bg-modal); 
}
.modal-header {
    position: absolute; top: 0; left: 0; width: 100%; padding: 15px 25px;
    display: flex; justify-content: space-between; align-items: center; 
    box-sizing: border-box; z-index: 100005; pointer-events: none;
}
.modal-counter { color: white; font-size: 1.1rem; font-weight: bold; pointer-events: auto; }
.close-x { color: white; font-size: 3rem; cursor: pointer; line-height: 1; pointer-events: auto; }
.modal-flex-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
.modal-viewport { width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; z-index: 100001; touch-action: none; }
.modal-slide-wrapper { display: flex; width: 100%; height: 100%; transition: transform var(--transition); }
.img-container { flex: 0 0 100%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.modal-slide-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; transition: transform 0.2s ease-out; }

.nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5); border: none;
    color: white; width: 45px; height: 45px; cursor: pointer; z-index: 100010;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.nav-btn span { font-size: 1.5rem; display: block; margin-top: -2px; pointer-events: none; }
.prev { left: 0; }
.next { right: 0; }