/* =============================================================================
   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 ────────────────────────────────────────────────────── */

/* v1.1.1: the frame follows the product's own image ratio via --bhutib-ratio
   (set in wp_head from the featured image's metadata, with a JS fallback).
   The old hardcoded 2:3 desktop / 1:1 mobile frames cropped square images on
   desktop and portrait images on mobile; they remain only as fallbacks when
   no ratio is known. */

.bhutib-main-swiper {
    flex:         1;
    min-width:    0;
    position:     relative;
    background:   #F5F0E8;
    border-radius: 4px;
    overflow:     hidden;
    aspect-ratio: var(--bhutib-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; /* v1.1.2: restored — apparel's 2:3 frame is meant to crop the square studio shot; adaptive categories set --bhutib-ratio so cover has nothing to crop */
    aspect-ratio: var(--bhutib-ratio, 2 / 3);
    cursor:      crosshair; /* Changed to crosshair to indicate zoom is available */
}

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

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

/* Blurred backdrop video — fills the square frame, hidden behind main */
.bhutib-video-slide .bhutib-video-backdrop {
    position:        absolute;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    display:         block;
    z-index:         1;
    filter:          blur(28px) saturate(1.1);
    -webkit-filter:  blur(28px) saturate(1.1);
    transform:       scale(1.15);
    pointer-events:  none;
    opacity:         0.9;
}

/* Main video — letterboxed in centre, never cropped */
.bhutib-video-slide .bhutib-video-main {
    position:   relative;
    z-index:    2;
    width:      100%;
    height:     100%;
    object-fit: contain;
    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:    #8A2B2E;
    border-color:  #8A2B2E;
    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) {

    /* v1.1.3 — visual belt-and-braces: if a WC core zoom clone ever attaches
       on mobile despite the JS suppression, make sure it is never seen or hit.
       (Its touch handlers live on the slide, not the clone — JS handles those.) */
    .bhutib-gallery-active .zoomImg {
        display:        none !important;
        pointer-events: none !important;
    }

    .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;
        aspect-ratio:  var(--bhutib-ratio, 1 / 1);
    }

    .bhutib-gallery-img,
    .bhutib-video-slide {
        aspect-ratio: var(--bhutib-ratio, 1 / 1);
        width:        100%;
    }

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

    /* Navigation arrows — mobile only, matches standalone PDP reference */
    .bhutib-button-prev,
    .bhutib-button-next {
        position:        absolute;
        top:             50%;
        transform:       translateY(-50%);
        width:           38px;
        height:          38px;
        border-radius:   50%;
        background:      rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        border:          1px solid rgba(41, 41, 41, 0.18);
        display:         flex;
        align-items:     center;
        justify-content: center;
        cursor:          pointer;
        color:           #2A231C;
        z-index:         5;
        padding:         0;
        transition:      background 0.2s ease, opacity 0.2s ease;
    }
    .bhutib-button-prev { left:  10px; }
    .bhutib-button-next { right: 10px; }
    .bhutib-button-prev svg,
    .bhutib-button-next svg {
        width:  18px;
        height: 18px;
        display: block;
    }
    .bhutib-button-prev:hover,
    .bhutib-button-next:hover {
        background: rgba(255, 255, 255, 0.95);
    }
    .bhutib-button-prev.swiper-button-disabled,
    .bhutib-button-next.swiper-button-disabled {
        opacity: 0.35;
        pointer-events: none;
    }
}

/* Desktop — keep arrows hidden (side thumb strip handles navigation) */
@media (min-width: 768px) {
    .bhutib-button-prev,
    .bhutib-button-next {
        display: none !important;
    }
}

/* ── 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. Reserved (was square-ratio whitelist, removed in v1.0.6) ──────────── */

/* ── 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;
    width:  14px;
    height: 14px;
}

.bhutib-pagination-outer .swiper-pagination-bullet-active.bhutib-bullet-video {
    width:         30px;
    height:        14px;
    border-radius: 7px;
}

.bhutib-pagination-outer .bhutib-bullet-video svg {
    width: 9px;
    height: 9px;
    margin-left: 0.5px;
    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;
}