/* LAYOUTS */
.fg4-wrap { display: flex; gap: 10px; position: relative; box-sizing: border-box; }
.fg4-wrap * { box-sizing: border-box; }

.fg4-bottom { flex-direction: column; }
.fg4-top { flex-direction: column-reverse; }
.fg4-left { flex-direction: row-reverse; }
.fg4-right { flex-direction: row; }

/* STAGE */
.fg4-stage {
    position: relative; background: #f4f4f4;
    width: 100%; height: var(--fg4-h);
    border-radius: 4px; overflow: hidden; flex-grow: 1;
}

/* IMAGE (Fit Contain) */
.fg4-main {
    width: 100%; height: 100%;
    object-fit: contain; /* Prevents Cropping */
    display: block;
}

/* ZOOM LENS */
.fg4-lens {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; background-color: #fff;
    background-repeat: no-repeat; background-position: center; background-size: 200%;
    transition: opacity 0.2s; z-index: 5;
}
@media (hover: hover) {
    .fg4-stage:hover .fg4-lens { opacity: 1; pointer-events: auto; }
    .fg4-stage:hover .fg4-main { opacity: 0; }
}

/* CONTROLS */
.fg4-icon {
    position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
    background: rgba(255,255,255,0.9); border-radius: 50%; display: flex;
    align-items: center; justify-content: center; cursor: pointer; z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.fg4-icon svg { width: 18px; height: 18px; stroke: #333; }

.fg4-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; background: rgba(255,255,255,0.8);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; font-size: 20px; color: #333; opacity: 0; transition: 0.3s;
}
.fg4-stage:hover .fg4-nav { opacity: 1; }
.fg4-prev { left: 10px; }
.fg4-next { right: 10px; }

/* THUMBNAILS WRAPPER */
.fg4-list-wrap { overflow: hidden; position: relative; }
.fg4-list { 
    display: flex; gap: 8px; 
    overflow: auto; 
    scrollbar-width: thin; 
    scroll-behavior: smooth; /* Smooth internal scrolling */
}

/* Positioning Thumbs */
.fg4-left .fg4-list, .fg4-right .fg4-list { 
    flex-direction: column; width: 90px; height: var(--fg4-h); 
}
.fg4-bottom .fg4-list, .fg4-top .fg4-list { 
    width: 100%; justify-content: center; 
}

.fg4-item {
    width: 70px; height: 70px; border: 2px solid transparent; 
    cursor: pointer; flex-shrink: 0; opacity: 0.6; background: #fff;
}
.fg4-item img { width: 100%; height: 100%; object-fit: cover; }
.fg4-item.active { border-color: #ff6600; opacity: 1; }