html.customer-gallery-open,
body.customer-gallery-open {
    overflow: hidden;
}

html.customer-gallery-open {
    scrollbar-gutter: auto;
}

.customer-photo-viewer {
    --pswp-bg: #10151d;
    --pswp-icon-color: #fff;
    --pswp-icon-color-secondary: #10151d;
    --pswp-icon-stroke-color: #10151d;
    z-index: 11000;
    width: 100vw;
    overscroll-behavior: contain;
}

.customer-photo-viewer .pswp__top-bar {
    padding: env(safe-area-inset-top, 0px) 12px 0;
    background: linear-gradient(rgba(0, 0, 0, .45), transparent);
}

.customer-photo-viewer .pswp__button {
    border-radius: 50%;
}

.customer-photo-viewer .pswp__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -4px;
    background-color: #334155;
    opacity: 1;
}

.customer-photo-viewer .pswp__counter {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: 1;
}

.customer-photo-viewer .pswp__button--arrow {
    width: 52px;
    height: 52px;
    margin: -26px 16px 0;
    background: rgba(30, 41, 59, .7);
}

.customer-photo-viewer .pswp__button--arrow .pswp__icn {
    top: 10px;
    left: 10px;
    right: auto;
    width: 32px;
    height: 32px;
    margin-top: 0;
    /* Center the glyph inside PhotoSwipe's asymmetric 60-unit SVG viewBox. */
    transform: translateX(5.6px);
}

.customer-photo-viewer .pswp__button--arrow--next .pswp__icn {
    transform: translateX(-5.6px) scaleX(-1);
}

.customer-photo-viewer .pswp__img {
    border-radius: 3px;
    object-fit: contain;
}

.pswp.customer-photo-viewer .pswp__img {
    cursor: grab;
}

.pswp.customer-photo-viewer .pswp__img:active {
    cursor: grabbing;
}

@media (max-width: 600px) {
    .customer-photo-viewer .pswp__button--arrow {
        margin-right: 6px;
        margin-left: 6px;
    }
}