/* =======================================================================
   Custom Product Gallery — FULL CSS (with sticky + aspect ratio + fixes)
   ======================================================================= */

/* -------- Base wrapper -------- */
.cpg-product-gallery {
    max-width: 100%;
    margin: 0 auto;
}

/* -------- Sticky fix -------- */
/* Apply sticky to the Elementor widget container, not just inner gallery */
.single-product .elementor-widget-custom-product-gallery>.elementor-widget-container {
    position: sticky !important;
    top: 110px;
    /* adjust to clear header/menu */
    align-self: flex-start;
    z-index: 3;
}

/* Remove overflow/contain that break sticky in parents */
.single-product .wd-sticky-container-lg,
.single-product .wd-sticky-container-md-sm,
.single-product .e-con,
.single-product .e-con-inner,
.single-product .elementor-container,
.single-product .elementor-column,
.single-product .product .summary,
.single-product .product .summary>div {
    overflow: visible !important;
    contain: none !important;
}

/* Make sure Elementor flex doesn’t stretch vertically */
.single-product .wd-sticky-container-lg.wd-sticky-container-md-sm.e-con-full.e-flex.e-con.e-child {
    align-items: flex-start !important;
}

/* Optional: if Elementor adds transforms, kill them on product pages */
.single-product .e-con[style*="transform"],
.single-product .e-con-inner[style*="transform"] {
    transform: none !important;
}

/* -------- Main Image -------- */
.cpg-main-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border: 1px solid #e1e1e1;
    overflow: hidden;
}

.cpg-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    transition: opacity .3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.cpg-main-img.cpg-active {
    opacity: 1;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

/* -------- Thumbnails -------- */
.cpg-thumbnails {
    margin-top: 15px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.cpg-thumbnails-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100%;
    gap: var(--cpg-gap, 10px);
    transition: transform .3s ease;
}

/* Each item takes (100% - gaps) / visible; height from aspect-ratio */
.cpg-thumbnail {
    flex: 0 0 calc((100% - (var(--cpg-visible, 4) - 1) * var(--cpg-gap, 10px)) / var(--cpg-visible, 4)) !important;

    aspect-ratio: var(--cpg-ar, 1 / 1);
    /* e.g., 1/1, 4/3, 3/2, 16/9 */
    position: relative;

    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    opacity: .7;
    transition: border-color .3s ease, opacity .3s ease;
}

.cpg-thumbnail:hover {
    opacity: 1;
    border-color: #ccc;
}

.cpg-thumbnail.cpg-active {
    border-color: #007cba;
    opacity: 1;
}

/* Thumbnail images fill the frame with cover (no stretching) */
.cpg-thumbnail img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
}

/* -------- Nav Arrows -------- */
.cpg-nav-arrow {
    background: rgba(255, 255, 255, .7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px;
    z-index: 2;
}

.cpg-nav-arrow:hover {
    background: #fff;
}

.cpg-prev {
    left: 0;
}

.cpg-next {
    right: 0;
}

/* -------- Responsive -------- */
@media (max-width:768px) {
    .cpg-main-image {
        height: 300px !important;
    }
}

@media (max-width:480px) {
    .cpg-main-image {
        height: 250px !important;
    }
}

/* -------- Lightbox -------- */
.cpg-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.cpg-lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.cpg-lightbox .cpg-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}

.cpg-lightbox .cpg-close:hover {
    opacity: .7;
}