/**
 * LuxaLife v0.15.5 — productgallery as one horizontal carousel.
 * WooCommerce FlexSlider owns slide state, thumbnails and native touch swipes.
 * The video tile remains a separate second VISUAL thumbnail, not a photo slide.
 */

/* Override earlier grid/row rules without touching WooCommerce gallery internals. */
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(.4rem, 1vw, .7rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    padding: .35rem .2rem .65rem;
    margin: clamp(.6rem, 1.5vw, 1.1rem) 0 0;
    list-style: none;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: .2rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Laat horizontale thumb-swipes én normaal verticaal pagina-scrollen toe. */
    touch-action: auto;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar {
    display: none;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs > li {
    float: none !important;
    display: block;
    flex: 0 0 clamp(76px, 8vw, 108px) !important;
    width: clamp(76px, 8vw, 108px) !important;
    min-width: clamp(76px, 8vw, 108px) !important;
    max-width: none;
    height: clamp(78px, 8.4vw, 110px);
    margin: 0 !important;
    padding: 3px;
    scroll-snap-align: start;
    border-radius: 8px;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs > li img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs > li.luxalife-video-thumb {
    order: 1;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs > li:first-child:not(.luxalife-video-thumb) {
    order: 0;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs > li:not(:first-child):not(.luxalife-video-thumb) {
    order: 2;
}

/* The built-in FlexSlider creates these arrows only if more than one photo exists.
   They navigate real images while the swipe and video behaviour remain native. */
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav {
    position: absolute;
    z-index: 7;
    top: 42%;
    inset-inline: .5rem;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
    transform: translateY(-50%);
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav li {
    position: static;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: -21px 0 0;
    padding: 0;
    border: 1px solid #e5ded3;
    border-radius: 50%;
    background: rgb(255 255 255 / .93);
    color: #292722;
    box-shadow: 0 4px 15px rgb(39 31 22 / .10);
    opacity: 1;
    text-indent: -9999px;
    font-size: 0;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color .16s ease, border-color .16s ease;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a.flex-prev {
    left: 0;
    right: auto;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a.flex-next {
    right: 0;
    left: auto;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a::after {
    content: '';
    display: block;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    pointer-events: none;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a.flex-prev::after {
    transform: translateX(2px) rotate(-135deg);
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a.flex-next::after {
    transform: translateX(-2px) rotate(45deg);
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a:hover,
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a:focus-visible {
    background: #fff;
    border-color: #caa864;
    color: #9f7429;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a.flex-disabled {
    opacity: .22;
    pointer-events: none;
    cursor: default;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a:focus-visible {
    outline: 2px solid #b59352;
    outline-offset: 2px;
}

@media (max-width: 850px) {
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs > li {
        flex-basis: 76px !important;
        width: 76px !important;
        min-width: 76px !important;
        height: 79px;
    }
}
@media (max-width: 480px) {
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs {
        gap: .42rem;
        padding: .25rem .15rem .45rem;
        scrollbar-width: none;
    }
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar {
        display: none;
    }
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery ol.flex-control-thumbs > li {
        flex-basis: 70px !important;
        width: 70px !important;
        min-width: 70px !important;
        height: 73px;
    }
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav {
        inset-inline: .2rem;
        top: 40%;
    }
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a {
        width: 35px;
        height: 35px;
        margin-top: -18px;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .flex-direction-nav a {
        transition: none;
    }
}


/* v0.25.16 — navigable thumbnail rail.
   The two arrows and 1 / N photo counter use the rail's existing vertical
   space; WooCommerce still handles actual thumbnail selection. */
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-controls {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: .35rem;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: clamp(.6rem, 1.5vw, 1.1rem) 0 0;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-controls ol.flex-control-thumbs {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-controls ol.flex-control-thumbs:active {
    cursor: grabbing;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-controls ol.flex-control-thumbs img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e5d9c3;
    border-radius: 50%;
    background: #fff;
    color: #987336;
    box-shadow: 0 3px 12px rgb(39 31 22 / .09);
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color .16s ease, background-color .16s ease, opacity .16s ease;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-arrow::after {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-arrow--previous::after {
    transform: translateX(2px) rotate(-135deg);
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-arrow--next::after {
    transform: translateX(-2px) rotate(45deg);
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-arrow:hover:not(:disabled),
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-arrow:focus-visible {
    border-color: #bb934c;
    background: #fff9ed;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-arrow:focus-visible {
    outline: 2px solid #b59352;
    outline-offset: 2px;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-arrow:disabled {
    opacity: .28;
    cursor: default;
}
body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-counter {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40px;
    color: #836226;
    background: #fff;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}
@media (max-width: 480px) {
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-controls {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: .2rem;
    }
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-arrow {
        width: 42px;
        height: 42px;
    }
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-counter {
        width: 42px;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-arrow {
        transition: none;
    }
}


/* v0.25.17 — mobile thumbnails use the full width for finger swipes.
   Keep desktop arrows untouched. The peeking next tile and photo counter
   show that the rail continues even when its scrollbar is hidden. */
@media (max-width: 850px) {
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-controls {
        display: block;
        margin-bottom: 1.5rem;
    }
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-controls .luxa-gallery-thumb-arrow {
        display: none;
    }
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-controls ol.flex-control-thumbs {
        width: 100%;
        overflow-x: auto !important;
        touch-action: auto;
        cursor: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-controls .luxa-gallery-thumb-counter {
        right: .25rem;
        bottom: -1.2rem;
        width: auto;
        font-size: 11px;
    }
}
@media (max-width: 480px) {
    body.single-product .site-main div.product .luxalife-product-hero .woocommerce-product-gallery .luxa-gallery-thumb-controls ol.flex-control-thumbs > li {
        flex: 0 0 clamp(78px, 25vw, 112px) !important;
        flex-basis: clamp(78px, 25vw, 112px) !important;
        width: clamp(78px, 25vw, 112px) !important;
        min-width: clamp(78px, 25vw, 112px) !important;
        height: clamp(80px, 26vw, 115px);
    }
}