/* your-theme/assets/pgc/pgc.css  یا داخل style.css */
.custom-product-carousel-wrapper { position: relative; max-width: 100%; overflow: hidden; }
.custom-product-carousel img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 1/1; cursor: pointer; }

.swiper-progress-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 10; }
.swiper-progress-bg      { width: 100%; height: 100%; background: #444; }
.swiper-progress-bar     { position: absolute; top: 0; height: 100%; background: #c0392b; transition: left .3s ease; }

.pgc-zoom-btn {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(0,0,0,.6); color: #fff; border: none;
    border-radius: 50%; width: 36px; height: 36px;
    cursor: pointer; font-size: 18px; display: flex;
    align-items: center; justify-content: center; z-index: 20;
}
.pgc-zoom-btn:hover { background: rgba(0,0,0,.85); }
.pswp__bg { background: rgba(255,255,255,.95) !important; }

.swiper-progress-wrapper {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: transparent;
}
.pgc-seg {
    flex: 1;
    height: 2px;
    background: #444;
    transition: background .3s;
}
.pgc-seg.active {
    background: #c0392b;
}