.cepg-widget { width:100%; position:relative; }
.cepg-gallery { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; }
.cepg-position-bottom .cepg-gallery { grid-template-columns:1fr; }

.cepg-thumbnails { display:flex; flex-direction:column; gap:12px; }
.cepg-position-bottom .cepg-thumbnails { order:2; flex-direction:row; overflow-x:auto; padding-top:12px; }

.cepg-thumb {
    flex:0 0 auto; padding:0; background:#fff; border:1px solid #ddd;
    overflow:hidden; cursor:pointer; transition:.2s ease; line-height:0;
}
.cepg-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cepg-thumb:hover { transform:translateY(-1px); }
.cepg-thumb.active { border-width:2px; }

.cepg-main {
    position:relative; width:100%; aspect-ratio:1/1; min-width:0;
    overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.cepg-image-button { border:0; padding:0; margin:0; width:100%; height:100%; background:transparent; cursor:zoom-in; }
.cepg-main-image { width:100%; height:100%; display:block; object-fit:contain; transition:opacity .18s ease; }

.cepg-arrow,.cepg-zoom {
    position:absolute; z-index:3; border:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.92); color:#111;
    box-shadow:0 3px 12px rgba(0,0,0,.12); transition:.2s ease;
}
.cepg-arrow { top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; font-size:20px; }
.cepg-prev { left:14px; } .cepg-next { right:14px; }
.cepg-zoom { right:14px; bottom:14px; width:42px; height:42px; border-radius:50%; font-size:20px; }
.cepg-arrow:hover,.cepg-zoom:hover { background:#111; color:#fff; }

.cepg-lightbox {
    position:fixed; inset:0; z-index:999999; display:none;
    align-items:center; justify-content:center; padding:40px; background:rgba(0,0,0,.92);
}
.cepg-lightbox.active { display:flex; }
.cepg-lightbox img { max-width:90vw; max-height:90vh; width:auto; height:auto; object-fit:contain; }
.cepg-lightbox-close,.cepg-lightbox-prev,.cepg-lightbox-next {
    position:absolute; z-index:2; border:0; color:#fff; background:rgba(255,255,255,.12);
    width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:24px;
    display:flex; align-items:center; justify-content:center;
}
.cepg-lightbox-close { top:24px; right:28px; font-size:32px; }
.cepg-lightbox-prev { left:24px; top:50%; transform:translateY(-50%); }
.cepg-lightbox-next { right:24px; top:50%; transform:translateY(-50%); }
.cepg-lightbox-close:hover,.cepg-lightbox-prev:hover,.cepg-lightbox-next:hover { background:rgba(255,255,255,.25); }

.cepg-empty { padding:30px; border:1px dashed #bbb; text-align:center; }

@media(max-width:767px){
    .cepg-gallery,.cepg-position-left .cepg-gallery { grid-template-columns:1fr; }
    .cepg-main { order:1; }
    .cepg-thumbnails { order:2; flex-direction:row; overflow-x:auto; padding-top:12px; }
    .cepg-thumb { width:70px; height:70px; }
    .cepg-lightbox { padding:20px; }
    .cepg-lightbox-prev { left:10px; }
    .cepg-lightbox-next { right:10px; }
}