.pswp {
    --pswp-bg: #fff !important;
    --pswp-icon-color: #000 !important
}

.pswp .pswp__button {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #000;
    border-radius: 50%;
    opacity: 1;
    border: 1px solid rgb(var(--color-border));
    transition: all var(--f-duration-default, 0.25s)
}

.pswp .pswp__button:hover, .pswp .pswp__button:focus {
    background: rgb(var(--color-button-hover));
    color: rgb(var(--color-button-text-hover));
    border-color: rgb(var(--color-button-hover));
    box-shadow: 0 0 0 .2rem rgb(var(--color-button-hover));
    transition: all var(--f-duration-default, 0.25s)
}

.pswp .pswp__top-bar {
    align-items: center;
    justify-content: center;
    gap: 20px;
    bottom: 30px;
    top: auto;
    height: auto
}

.pswp .deferred-media__poster img, .pswp .deferred-media__poster-button img {
    width: 100%
}

.pswp__video, .pswp__model, .pswp__external_video {
    max-width: 80%;
    width: 100%;
    max-width: 100%;
    position: relative;
    max-height: 80%;
    height: 100%
}

.pswp__video .f-product-media--model, .pswp__video .f-product-media--external_video, .pswp__video .f-product-media--video, .pswp__model .f-product-media--model, .pswp__model .f-product-media--external_video, .pswp__model .f-product-media--video, .pswp__external_video .f-product-media--model, .pswp__external_video .f-product-media--external_video, .pswp__external_video .f-product-media--video {
    height: 100%
}

.pswp__external_video deferred-media {
    position: relative;
    padding-top: 0 !important;
    height: 100%
}

.pswp__video .deferred-media, .pswp__model .deferred-media {
    padding: 0 !important;
    height: 100%
}

.pswp__external_video .deferred-media__poster, .pswp__video .deferred-media__poster, .pswp__model .deferred-media__poster {
    position: relative !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 auto !important
}

.pswp__video .deferred-media video {
    position: relative !important;
    height: auto !important;
    width: auto !important;
    margin: 0 auto;
    top: 50% !important;
    transform: translateY(-50%)
}

.pswp__model div[style*=-aspect-ratio] {
    height: 100%
}

.pswp__model div[style*=-aspect-ratio]:before {
    display: none
}

.pswp__item .f-product-media {
    opacity: 1;
    transform: none
}

@media screen and (min-width: 1280px) {
    .pswp__video, .pswp__model, .pswp__external_video {
        max-width: 80%;
        margin: 50px auto 50px
    }
}