.wc-vg-gallery-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 2em;
    position: relative;
    direction: ltr !important;
    text-align: left !important;
}

@media (min-width: 769px) {
    .woocommerce div.product div.images {
        float: left; /* Ensure it floats if theme uses floats */
        width: 48%; /* Typical WooCommerce image column width */
    }
    .woocommerce div.product div.summary {
        float: right;
        width: 48%;
    }
}

@media (max-width: 991px) {
    .wc-vg-gallery-wrapper {
        margin-top: 20px;
    }
}

.wc-vg-main-swiper {
    width: 100%;
    min-height: 300px;
    border-radius: var(--wc-vg-radius);
    overflow: hidden;
    background: transparent; /* Adapt to site background */
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    /* Sub-pixel clipping fix */
    transform: translateZ(0);
    isolation: isolate;
}

.wc-vg-main-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: transparent;
    aspect-ratio: 1 / 1;
    border-radius: var(--wc-vg-radius);
}

/* Videos need a dark backdrop */
.wc-vg-main-swiper .wc-vg-video-slide {
    background: #000;
}

.wc-vg-main-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced Persistent Hover for Controls */
.wc-vg-main-swiper:hover .plyr__controls,
.wc-vg-main-swiper.wc-vg-controls-locked .plyr__controls {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Force show controls on slide hover even on black bars */
.wc-vg-main-swiper:hover .plyr--video.plyr--hide-controls .plyr__controls,
.wc-vg-main-swiper.wc-vg-controls-locked .plyr--video.plyr--hide-controls .plyr__controls {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Ensure controls are on top of everything */
.wc-vg-video-slide .plyr__controls {
    z-index: 99;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
    pointer-events: auto !important; /* Ensure they are clickable */
}

/* Plyr Customization */
.wc-vg-video-slide .plyr {
    width: 100% !important;
    height: 100% !important;
    background: #000;
}

.wc-vg-video-slide .plyr__video-wrapper {
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.wc-vg-video-slide video,
.wc-vg-video-slide iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.wc-vg-video-slide .plyr--video {
    background: #000;
    width: 100% !important;
    height: 100% !important;
}

/* Zoom effect */
.wc-vg-image-slide {
    cursor: zoom-in;
}

/* Thumbs */
.wc-vg-thumb-swiper {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 10px 0;
}

.wc-vg-thumb-swiper .swiper-slide {
    aspect-ratio: 1 / 1;
    width: 23%;
    opacity: 0.5;
    cursor: pointer;
    border-radius: calc(var(--wc-vg-radius) * 0.75);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    background: #f0f0f0;
}

.wc-vg-thumb-swiper .swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--wc-vg-primary);
    box-shadow: 0 4px 12px rgba(var(--wc-vg-primary-rgb), 0.2);
}

.wc-vg-thumb-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wc-vg-thumb-video-slide {
    background: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wc-vg-thumb-video-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    opacity: 0.8;
}

.wc-vg-video-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.wc-vg-video-icon-overlay .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Navigation & Pagination */
.wc-vg-main-swiper .swiper-button-next, 
.wc-vg-main-swiper .swiper-button-prev {
    color: #1a1a1a;
    background: rgba(255, 255, 255, 0.9);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    opacity: 0; /* Hide by default */
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 101;
}

.wc-vg-main-swiper:hover .swiper-button-next, 
.wc-vg-main-swiper:hover .swiper-button-prev,
.wc-vg-main-swiper.wc-vg-controls-locked .swiper-button-next,
.wc-vg-main-swiper.wc-vg-controls-locked .swiper-button-prev {
    opacity: 1;
    visibility: visible;
}

.wc-vg-main-swiper .swiper-button-next::after, 
.wc-vg-main-swiper .swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}

/* Disabled arrows */
.wc-vg-main-swiper .swiper-button-disabled {
    opacity: 0.3 !important;
    pointer-events: none;
    cursor: not-allowed;
}

/* Variation Media Skeleton Loader */
@keyframes wcVgSkeletonShimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.wc-vg-gallery-wrapper.wc-vg-loading .wc-vg-main-swiper,
.wc-vg-gallery-wrapper.wc-vg-loading .wc-vg-thumb-swiper {
    position: relative;
    overflow: hidden;
}

.wc-vg-gallery-wrapper.wc-vg-loading .wc-vg-main-swiper::before,
.wc-vg-gallery-wrapper.wc-vg-loading .wc-vg-thumb-swiper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f6f7f8;
    background-image: linear-gradient(90deg, #f6f7f8 0px, #edeef1 20%, #f6f7f8 40%);
    background-size: 1000px 100%;
    animation: wcVgSkeletonShimmer 2s infinite linear;
    z-index: 999;
}

.wc-vg-main-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

/* Fullscreen support */
.wc-vg-main-swiper:fullscreen {
    background: #000;
}

.wc-vg-main-swiper:fullscreen img {
    object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wc-vg-main-swiper {
        border-radius: var(--wc-vg-radius);
        margin-top: 10px;
    }
    .wc-vg-thumb-swiper {
        height: auto;
    }
}

/* Lightbox Click Layer for Videos */
.wc-vg-video-slide {
    position: relative;
}

.wc-vg-video-lightbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.wc-vg-video-click-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%; /* Don't cover controls at bottom */
    z-index: 98;
    cursor: pointer;
}

.wc-vg-image-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lightbox Trigger Icon */
.wc-vg-lightbox-trigger {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 102;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    text-decoration: none !important;
}

.wc-vg-image-slide:hover .wc-vg-lightbox-trigger {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.wc-vg-lightbox-trigger:hover {
    background: var(--wc-vg-primary);
    color: #fff;
    transform: scale(1.1) !important;
}

.wc-vg-lightbox-trigger .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}