/* Layout & Container */
.fgp-wrap { display: flex; gap: 10px; position: relative; box-sizing: border-box; width: 100%; }
.fgp-wrap * { box-sizing: border-box; }

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

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

/* Image (Fit Contain stops cropping) */
.fgp-main-img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
}

/* Zoom Lens */
.fgp-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 ease; z-index: 5;
}
@media (hover: hover) {
    .fgp-stage:hover .fgp-lens { opacity: 1; pointer-events: auto; }
    .fgp-stage:hover .fgp-main-img { opacity: 0; }
}

/* Controls */
.fgp-icon {
    position: absolute; top: 10px; right: 10px; width: 36px; height: 36px;
    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 5px rgba(0,0,0,0.2); transition: 0.2s;
}
.fgp-icon:hover { transform: scale(1.1); }
.fgp-icon svg { width: 18px; height: 18px; stroke: #333; }

.fgp-arrow {
    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;
}
.fgp-stage:hover .fgp-arrow { opacity: 1; }
.fgp-prev { left: 10px; }
.fgp-next { right: 10px; }

/* Thumbnails */
.fgp-thumbs-wrapper { overflow: hidden; position: relative; }
.fgp-thumbs-list { 
    display: flex; gap: 8px; overflow: auto; 
    scrollbar-width: thin; scroll-behavior: smooth; 
}

/* Thumbnails Orientation */
.fgp-pos-left .fgp-thumbs-list, .fgp-pos-right .fgp-thumbs-list { 
    flex-direction: column; width: 90px; height: var(--fgp-h); 
}
.fgp-pos-bottom .fgp-thumbs-list, .fgp-pos-top .fgp-thumbs-list { 
    width: 100%; justify-content: center; 
}

/* Thumb Item */
.fgp-thumb-item {
    width: 70px; height: 70px; border: 2px solid transparent; 
    cursor: pointer; flex-shrink: 0; opacity: 0.6; background: #fff; transition: 0.2s;
}
.fgp-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.fgp-thumb-item.active { border-color: #ff6600; opacity: 1; }