/* Product Gallery-only additions. Core widget styles live in core.css. */

/* Product video gallery integration */
.woocustom-product-gallery {
    --woocustom-gallery-video-play-size: 56px;
    --woocustom-gallery-video-play-bg: rgba(15, 23, 42, .78);
    --woocustom-gallery-video-play-color: #fff;
}

.woocustom-product-gallery-media-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.woocustom-product-gallery-thumb .woocustom-product-gallery-media-wrap,
.woocustom-product-gallery-mobile-slide .woocustom-product-gallery-media-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: inherit;
}

.woocustom-product-gallery-media-wrap--video img {
    filter: saturate(.96) contrast(.98);
}

.woocustom-product-gallery-video-play {
    position: absolute;
    inset: 50% auto auto 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--woocustom-gallery-video-play-size, 56px);
    height: var(--woocustom-gallery-video-play-size, 56px);
    border-radius: 999px;
    background: var(--woocustom-gallery-video-play-bg, rgba(15, 23, 42, .78));
    color: var(--woocustom-gallery-video-play-color, #fff);
    transform: translate(-50%, -50%);
    box-shadow: none;
    pointer-events: none;
}

.woocustom-product-gallery-video-play svg {
    width: 44%;
    height: 44%;
    margin-left: -2px;
    color: currentColor;
}

.woocustom-product-gallery-video-play path {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.woocustom-product-gallery-thumb .woocustom-product-gallery-video-play,
.woocustom-product-gallery-mobile-slide .woocustom-product-gallery-video-play {
    width: 34px;
    height: 34px;
    box-shadow: none;
}

.woocustom-product-gallery-lightbox-video {
    display: none;
    width: min(100%, 1060px);
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 170px);
    border-radius: var(--woocustom-lightbox-image-radius, 14px);
    overflow: hidden;
    background: #020617;
}

.woocustom-product-gallery-lightbox-video iframe,
.woocustom-product-gallery-lightbox-video video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #020617;
}

@media (max-width: 767px) {
    .woocustom-product-gallery-video-play {
        width: 46px;
        height: 46px;
    }

    .woocustom-product-gallery-thumb .woocustom-product-gallery-video-play,
    .woocustom-product-gallery-mobile-slide .woocustom-product-gallery-video-play {
        width: 32px;
        height: 32px;
    }

    .woocustom-product-gallery-lightbox-video {
        max-height: calc(100vh - 156px);
    }
}

/* WooCustom 1.64.28 - clean gallery defaults and desktop thumbnail carousel */
.woocustom-product-gallery {
    --woocustom-gallery-carousel-button-size: 38px;
    --woocustom-gallery-carousel-button-bg: #fff;
    --woocustom-gallery-carousel-button-color: var(--woocustom-gallery-primary, var(--woocustom-color-primary, #243752));
    --woocustom-gallery-carousel-button-border: #e2e8f0;
    --woocustom-gallery-carousel-button-hover-bg: var(--woocustom-primary-soft, #f8fafc);
    --woocustom-gallery-carousel-button-hover-color: var(--woocustom-gallery-primary, var(--woocustom-color-primary, #243752));
}

.woocustom-product-gallery-video-play,
.woocustom-product-gallery-thumb .woocustom-product-gallery-video-play,
.woocustom-product-gallery-mobile-slide .woocustom-product-gallery-video-play {
    box-shadow: none;
}

.woocustom-product-gallery--thumbs-bottom .woocustom-product-gallery-thumbs-shell {
    position: relative;
    min-width: 0;
    padding-inline: calc(var(--woocustom-gallery-carousel-button-size, 38px) + 8px);
}

.woocustom-product-gallery--thumbs-bottom .woocustom-product-gallery-thumbs {
    display: flex !important;
    grid-template-columns: none !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.woocustom-product-gallery--thumbs-bottom .woocustom-product-gallery-thumbs::-webkit-scrollbar {
    display: none;
}

.woocustom-product-gallery--thumbs-bottom .woocustom-product-gallery-thumb {
    flex: 0 0 var(--woocustom-gallery-thumb-size, 74px) !important;
    width: var(--woocustom-gallery-thumb-size, 74px) !important;
    min-width: var(--woocustom-gallery-thumb-size, 74px) !important;
    height: var(--woocustom-gallery-thumb-size, 74px) !important;
    scroll-snap-align: center;
}

.woocustom-product-gallery-thumbs-nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--woocustom-gallery-carousel-button-size, 38px);
    height: var(--woocustom-gallery-carousel-button-size, 38px);
    min-width: var(--woocustom-gallery-carousel-button-size, 38px);
    min-height: var(--woocustom-gallery-carousel-button-size, 38px);
    padding: 0 !important;
    border: 1px solid var(--woocustom-gallery-carousel-button-border, #e2e8f0) !important;
    border-radius: 999px !important;
    background: var(--woocustom-gallery-carousel-button-bg, #fff) !important;
    color: var(--woocustom-gallery-carousel-button-color, #243752) !important;
    box-shadow: none !important;
    transform: translateY(-50%);
    cursor: pointer;
}

.woocustom-product-gallery.has-thumb-carousel-overflow .woocustom-product-gallery-thumbs-nav {
    display: inline-flex;
}

.woocustom-product-gallery-thumbs-prev { inset-inline-start: 0; }
.woocustom-product-gallery-thumbs-next { inset-inline-end: 0; }

.woocustom-product-gallery-thumbs-nav svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.woocustom-product-gallery-thumbs-nav:hover,
.woocustom-product-gallery-thumbs-nav:focus-visible {
    background: var(--woocustom-gallery-carousel-button-hover-bg, #f8fafc) !important;
    color: var(--woocustom-gallery-carousel-button-hover-color, #243752) !important;
    box-shadow: none !important;
}

.woocustom-product-gallery-thumbs-nav:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--woocustom-gallery-carousel-button-hover-color, #243752) 35%, transparent);
    outline-offset: 2px;
}

.woocustom-product-gallery-lightbox {
    background: var(--woocustom-lightbox-bg, rgba(15, 23, 42, .76)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.woocustom-product-gallery-lightbox-figure {
    border: 1px solid color-mix(in srgb, var(--woocustom-gallery-primary, var(--woocustom-color-primary, #243752)) 12%, #e2e8f0) !important;
    background: var(--woocustom-lightbox-image-bg, #fff) !important;
    box-shadow: none !important;
}

.woocustom-product-gallery-lightbox-img,
.woocustom-product-gallery-lightbox-video,
.woocustom-product-gallery-lightbox-button,
.woocustom-product-gallery-lightbox-counter {
    box-shadow: none !important;
}

.woocustom-product-gallery-lightbox-button {
    border-color: color-mix(in srgb, var(--woocustom-gallery-primary, var(--woocustom-color-primary, #243752)) 15%, #e2e8f0) !important;
}

.woocustom-product-gallery-lightbox-button:hover,
.woocustom-product-gallery-lightbox-button:focus-visible {
    border-color: color-mix(in srgb, var(--woocustom-gallery-primary, var(--woocustom-color-primary, #243752)) 32%, #cbd5e1) !important;
    box-shadow: none !important;
    transform: none !important;
}

.woocustom-product-gallery-lightbox-video video {
    object-fit: contain;
}

@media (max-width: 767px) {
    .woocustom-product-gallery--thumbs-bottom .woocustom-product-gallery-thumbs-shell {
        padding-inline: 0;
    }

    .woocustom-product-gallery-thumbs-nav {
        display: none !important;
    }
}