.cpgw-gallery { --cpgw-thumbs-count: 5; --cpgw-thumb-gap: 10px; --cpgw-thumb-height: 80px; position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 100%; } /* ---------- Main image ---------- */ .cpgw-main-wrap { position: relative; width: 100%; height: 480px; overflow: hidden; background: #f6f6f6; border-radius: 6px; } .cpgw-main-image { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.3s ease, opacity 0.25s ease; } /* ---------- Zoom lens (both inside & outside modes) ---------- */ .cpgw-zoom-lens { position: absolute; top: 0; left: 0; display: none; pointer-events: none; background-repeat: no-repeat; box-sizing: border-box; z-index: 3; } /* Inside mode: the lens itself IS the magnified view — a clean magnifying-glass window, base image underneath stays untouched. */ .cpgw-zoom-lens--inside { border: 3px solid #ffffff; border-radius: 4px; background-color: #f6f6f6; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(0, 0, 0, 0.25); } /* Outside mode: the lens is just a translucent selection indicator; the actual magnified view renders in the fixed result panel. */ .cpgw-zoom-lens--outside { background-color: rgba(255, 255, 255, 0.35); border: 1px solid #ffffff; } /* Result panel (outside mode) — rendered in a fixed layer attached to so it is never clipped by column/section overflow rules. */ .cpgw-zoom-result { position: fixed; display: none; background-repeat: no-repeat; background-color: #ffffff; border: 1px solid #e2e2e2; border-radius: 6px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); z-index: 99999; pointer-events: none; } /* ---------- Thumbnail slider ---------- */ .cpgw-thumb-slider-wrap { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; } .cpgw-thumb-viewport { overflow: hidden; width: 100%; } .cpgw-thumb-track { display: flex; gap: var(--cpgw-thumb-gap); will-change: transform; } .cpgw-thumb-slide { flex: 0 0 calc((100% - (var(--cpgw-thumbs-count) - 1) * var(--cpgw-thumb-gap)) / var(--cpgw-thumbs-count)); height: var(--cpgw-thumb-height); border: 2px solid #e2e2e2; border-radius: 4px; overflow: hidden; cursor: pointer; box-sizing: border-box; transition: border-color 0.25s ease; } .cpgw-thumb-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s ease; } .cpgw-thumb-slide.is-active { border-color: #1a73e8; } /* ---------- Arrows ---------- */ .cpgw-arrow { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: none; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); color: #333; font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .cpgw-arrow:hover { background: #f0f0f0; } /* ---------- Left thumbnail position ---------- */ .cpgw-thumbpos-left .cpgw-gallery, .elementor-widget-cpgw-gallery.cpgw-thumbpos-left .cpgw-gallery { flex-direction: row; } .cpgw-thumbpos-left .cpgw-gallery { flex-direction: row; align-items: flex-start; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-main-wrap { order: 2; flex: 1 1 auto; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-thumb-slider-wrap { order: 1; flex-direction: column; width: 90px; flex: 0 0 90px; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-thumb-viewport { height: 480px; width: 100%; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-thumb-track { flex-direction: column; height: 100%; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-thumb-slide { height: calc((100% - (var(--cpgw-thumbs-count) - 1) * var(--cpgw-thumb-gap)) / var(--cpgw-thumbs-count)); flex-basis: auto; width: 100%; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-arrow { transform: rotate(90deg); } /* ---------- Empty state ---------- */ .cpgw-empty-notice { padding: 20px; text-align: center; background: #f8f8f8; border: 1px dashed #ccc; color: #777; border-radius: 6px; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .cpgw-main-wrap { height: 380px; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-thumb-viewport { height: 380px; } } @media (max-width: 767px) { .cpgw-thumbpos-left .cpgw-gallery { flex-direction: column; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-thumb-slider-wrap { flex-direction: row; width: 100%; flex: 0 0 auto; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-thumb-viewport { height: auto; width: 100%; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-thumb-track { flex-direction: row; height: auto; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-thumb-slide { height: var(--cpgw-thumb-height); width: auto; } .cpgw-thumbpos-left .cpgw-gallery .cpgw-arrow { transform: none; } .cpgw-main-wrap, .cpgw-thumbpos-left .cpgw-gallery .cpgw-thumb-viewport { height: 300px; } }