/* =============================================================================
   Bhutib Gallery — gallery.css 
   ============================================================================= */

/* ── 1. Reset WC gallery defaults once we take over ─────────────────────────── */

.woocommerce-product-gallery.bhutib-gallery-active {
    position: relative;
    width: 100%;
    opacity: 1 !important;
}

.bhutib-gallery-active .woocommerce-product-gallery__trigger,
.bhutib-gallery-active .flex-control-nav,
.bhutib-gallery-active .flex-viewport {
    display: none !important;
}

/* ── 2. Gallery inner layout: flex row (thumbs left | main image right) ──────── */

.bhutib-gallery-inner {
    display:     flex;
    flex-direction: row;
    align-items: flex-start;
    gap:         12px;
    width:       100%;
}

/* ── 3. Vertical thumbnail strip (desktop left side) ─────────────────────────── */

.bhutib-thumbs-swiper {
    width:       72px;
    flex-shrink: 0;
    max-height:  480px;     
    overflow:    hidden;
}

.bhutib-thumbs-swiper .swiper-wrapper {
    flex-direction: column !important;
}

.bhutib-thumb-slide {
    width:      72px !important;
    height:     72px !important;
    flex-shrink: 0;
    cursor:      pointer;
    border:      2px solid transparent;
    border-radius: 4px;
    overflow:    hidden;
    transition:  border-color 0.2s ease;
    box-sizing:  border-box;
}

.bhutib-thumb-slide img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.bhutib-thumb-slide.swiper-slide-thumb-active {
    border-color: #8B6F47;
}

/* ── 4. Main image Swiper ────────────────────────────────────────────────────── */

.bhutib-main-swiper {
    flex:         1;
    min-width:    0;          
    position:     relative;
    background:   #F5F0E8;   
    border-radius: 4px;
    overflow:     hidden;
    aspect-ratio: 2 / 3;
    width:        100%;
}

.bhutib-main-swiper .swiper-wrapper {
    align-items: stretch;
}

.bhutib-main-swiper .swiper-slide {
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.bhutib-gallery-img {
    width:       100%;
    height:      auto;
    display:     block;
    object-fit:  cover;
    aspect-ratio: 2 / 3;
    cursor:      crosshair; /* Changed to crosshair to indicate zoom is available */
}

/* ── 5. Video slide ──────────────────────────────────────────────────────────── */

.bhutib-video-slide {
    aspect-ratio: 2 / 3;
    background:   #1A1A2E;
    width:        100%;
    position:     relative;
    overflow:     hidden;
}

.bhutib-video-slide video {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ── 6. Pagination dots ──────────────────────────────────────────────────────── */

.bhutib-pagination-outer {
    display:         none;
    justify-content: center;
    align-items:     center;
    padding:         12px 0 8px;
    gap:             6px;
}

.bhutib-pagination-outer .swiper-pagination-bullet {
    display:       inline-block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    transparent;
    border:        1.5px solid rgba(41, 41, 41, 0.35);
    opacity:       1;
    margin:        0;
    cursor:        pointer;
    transition:    width       0.25s ease,
                   border-radius 0.25s ease,
                   background  0.25s ease,
                   border-color 0.25s ease;
    box-sizing:    border-box;
    flex-shrink:   0;
}

.bhutib-pagination-outer .swiper-pagination-bullet-active {
    width:         26px;
    height:        10px;
    border-radius: 5px;
    background:    #FFC000;
    border-color:  #FFC000;
    opacity:       1;
}

/* ── 7. Prevent Elementor container overflow from clipping the gallery ────────── */

.elementor-element-619fe165 {
    overflow: visible !important;
}

/* ── 8. Mobile overrides & Full-Bleed Fix ────────────────────────────────────── */

@media (max-width: 767px) {

    .elementor-element-5e8a2def.e-con,
    .elementor-element-5e8a2def,
    .elementor-element-5e8a2def > .e-con-inner {
        --flex-direction: column !important;
        flex-direction:   column !important;
        flex-wrap:        nowrap !important;
        padding-left:     0 !important;
        padding-right:    0 !important;
        gap:              0 !important;
    }

    .elementor-element-619fe165,
    .elementor-element-619fe165.e-con {
        --e-con-width:   100% !important;
        --content-width: 100% !important;
        width:           100% !important;
        max-width:       100% !important;
        min-width:       0   !important;
        flex:            0 0 100% !important;
        flex-basis:      100% !important;
        padding:         0   !important;
        margin:          0   !important;
        overflow:        visible !important;
    }

    .elementor-element-5c969847,
    .elementor-element-5c969847.e-con {
        --e-con-width:   100% !important;
        --content-width: 100% !important;
        width:           100% !important;
        max-width:       100% !important;
        flex:            0 0 100% !important;
        position:        static !important;
        top:             auto !important;
        padding-left:    16px !important;
        padding-right:   16px !important;
    }

    .elementor-element-669f335f {
        margin: 0 !important;
    }

    /* FULL BLEED BREAKOUT FIX */
    .woocommerce-product-gallery.bhutib-gallery-active {
        width:       100vw !important;
        max-width:   100vw !important;
        margin-left: calc(50% - 50vw) !important;
        overflow:    hidden;
        position:    relative;
    }

    .bhutib-thumbs-swiper {
        display: none !important;
    }

    .bhutib-gallery-inner {
        gap: 0;
    }

    .bhutib-main-swiper {
        width:         100%;
        border-radius: 0;
    }

    .bhutib-gallery-img,
    .bhutib-video-slide {
        aspect-ratio: 2 / 3;
        width:        100%;
    }

    .bhutib-pagination-outer {
        display: flex;
    }
}

/* ── 9. Lightbox ─────────────────────────────────────────────────────────────── */

.bhutib-lightbox {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         99999;
    align-items:     center;
    justify-content: center;
}

.bhutib-lightbox.bhutib-lightbox-open {
    display: flex;
}

.bhutib-lightbox-backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.93);
}

.bhutib-lightbox-img {
    position:   relative;
    z-index:    1;
    max-width:  100vw;
    max-height: 100dvh;
    object-fit: contain;
    display:    block;
}

.bhutib-lightbox-close {
    position:    absolute;
    top:         16px;
    right:       16px;
    z-index:     2;
    background:  none;
    border:      none;
    color:       #fff;
    font-size:   36px;
    line-height: 1;
    cursor:      pointer;
    padding:     0;
    opacity:     0.85;
}

.bhutib-lightbox-close:hover {
    opacity: 1;
}

body.bhutib-no-scroll {
    overflow: hidden;
}

/* ── 10. Square aspect ratio (1:1) — Elementor template 4951 ──────────────── */

body.bhutib-ratio-square .bhutib-main-swiper {
    aspect-ratio: 1 / 1;
}

body.bhutib-ratio-square .bhutib-gallery-img {
    aspect-ratio: 1 / 1;
}

body.bhutib-ratio-square .bhutib-video-slide {
    aspect-ratio: 1 / 1;
}

@media (max-width: 767px) {
    body.bhutib-ratio-square .bhutib-main-swiper,
    body.bhutib-ratio-square .bhutib-gallery-img,
    body.bhutib-ratio-square .bhutib-video-slide {
        aspect-ratio: 1 / 1;
    }
}

/* ── 11. Video UI Enhancements ──────────────────────────────────────────────── */

.bhutib-thumb-video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.bhutib-video-thumb-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.bhutib-play-icon {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.6));
}

.bhutib-mute-toggle {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.3s ease;
}

.bhutib-mute-toggle:hover {
    background: rgba(0, 0, 0, 0.7);
}

.bhutib-mute-toggle svg {
    width: 28px;
    height: 28px;
}

.bhutib-pagination-outer .bhutib-bullet-video {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.bhutib-pagination-outer .bhutib-bullet-video svg {
    width: 6px;
    height: 6px;
    margin-left: 1px; 
    color: rgba(41, 41, 41, 0.4);
    transition: color 0.25s ease;
}

.bhutib-pagination-outer .swiper-pagination-bullet-active.bhutib-bullet-video svg {
    color: #ffffff; 
}