.cg-product-lightbox__button:focus-visible {
outline: 2px solid var(--cg-color-dark);
outline-offset: 3px;
outline-color: #fff;
}
.cg-product-lightbox {
position: fixed;
inset: 0;
z-index: 2000;
display: grid;
grid-template-rows: auto 1fr;
gap: 18px;
padding: 22px;
background: rgba(18, 16, 15, 0.88);
backdrop-filter: blur(18px);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
.cg-product-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.cg-product-lightbox__top {
display: flex;
justify-content: flex-end;
}
.cg-product-lightbox__stage {
position: relative;
min-height: 0;
overflow: hidden;
}
.cg-product-lightbox__swiper {
width: 100%;
height: 100%;
min-height: 0;
}
.cg-product-lightbox__slide {
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.cg-product-lightbox__image {
display: block;
max-width: min(1120px, 92vw);
max-height: 82vh;
object-fit: contain;
border-radius: 24px;
background: #fff;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}
.cg-product-lightbox__button {
position: relative;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.cg-product-lightbox__button:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.cg-product-lightbox__close {
position: relative;
}
.cg-product-lightbox__close::before,
.cg-product-lightbox__close::after {
content: none;
}
.cg-product-lightbox__close::before {
content: "";
display: block;
flex: 0 0 22px;
width: 22px;
height: 22px;
background-color: currentColor;
-webkit-mask: url(//collagenica.com.ua/wp-content/uploads/2026/04/close-svgrepo-com.svg) center / 100% 100% no-repeat;
mask: url(//collagenica.com.ua/wp-content/uploads/2026/04/close-svgrepo-com.svg) center / 100% 100% no-repeat;
}
.cg-product-lightbox__nav {
position: absolute;
top: 50%;
z-index: 5;
transform: translateY(-50%);
}
.cg-product-lightbox__nav:hover {
transform: translateY(-50%);
}
.cg-product-lightbox__nav--prev {
left: clamp(8px, 3vw, 38px);
}
.cg-product-lightbox__nav--next {
right: clamp(8px, 3vw, 38px);
}
.cg-product-lightbox__nav::before {
content: "";
display: block;
flex: 0 0 24px;
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url(//collagenica.com.ua/wp-content/uploads/2026/04/arrow-prev-small-svgrepo-com.svg) center / 100% 100% no-repeat;
mask: url(//collagenica.com.ua/wp-content/uploads/2026/04/arrow-prev-small-svgrepo-com.svg) center / 100% 100% no-repeat;
}
.cg-product-lightbox__nav::after {
content: none;
}
.cg-product-lightbox__nav--next::before {
transform: rotate(180deg);
}
body.cg-product-lightbox-open {
overflow: hidden;
}