/* ================================================================
   NEKOJIMA THEME RC12.34
   Stable horizontal thumbnail carousel.
   Keeps WooCommerce/FlexSlider's native thumbnail list in place.
================================================================ */

body.single-product .neko-single-product__gallery .woocommerce-product-gallery {
    --neko-thumb-size: 82px;
    --neko-thumb-gap: 10px;
    --neko-thumb-arrow-size: 38px;
}

/* Neutralize all previous grid thumbnail rules and keep the native list. */
body.single-product .neko-single-product__gallery .woocommerce-product-gallery ol.flex-control-thumbs,
body.single-product .neko-single-product__gallery .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    grid-template-columns: none !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--neko-thumb-gap) !important;
    box-sizing: border-box !important;
    width: calc(100% - 96px) !important;
    max-width: calc(100% - 96px) !important;
    margin: 14px 48px 0 !important;
    padding: 2px !important;
    list-style: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
}

body.single-product .neko-single-product__gallery .woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar,
body.single-product .neko-single-product__gallery .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

body.single-product .neko-single-product__gallery .woocommerce-product-gallery ol.flex-control-thumbs > li,
body.single-product .neko-single-product__gallery .woocommerce-product-gallery .flex-control-thumbs > li {
    display: block !important;
    flex: 0 0 var(--neko-thumb-size) !important;
    width: var(--neko-thumb-size) !important;
    min-width: var(--neko-thumb-size) !important;
    max-width: var(--neko-thumb-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    scroll-snap-align: start;
}

body.single-product .neko-single-product__gallery .woocommerce-product-gallery ol.flex-control-thumbs img,
body.single-product .neko-single-product__gallery .woocommerce-product-gallery .flex-control-thumbs img {
    display: block !important;
    box-sizing: border-box !important;
    width: var(--neko-thumb-size) !important;
    height: var(--neko-thumb-size) !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid transparent !important;
    border-radius: 13px !important;
    opacity: .72 !important;
    cursor: pointer !important;
    transition: opacity .18s ease, border-color .18s ease, transform .18s ease !important;
}

body.single-product .neko-single-product__gallery .woocommerce-product-gallery ol.flex-control-thumbs img.flex-active,
body.single-product .neko-single-product__gallery .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
body.single-product .neko-single-product__gallery .woocommerce-product-gallery ol.flex-control-thumbs img:hover,
body.single-product .neko-single-product__gallery .woocommerce-product-gallery .flex-control-thumbs img:hover,
body.single-product .neko-single-product__gallery .woocommerce-product-gallery ol.flex-control-thumbs img:focus-visible,
body.single-product .neko-single-product__gallery .woocommerce-product-gallery .flex-control-thumbs img:focus-visible {
    opacity: 1 !important;
    border-color: var(--color-primary, #d8688c) !important;
}

/* Navigation buttons sit beside the native strip; no DOM wrapping required. */
body.single-product .neko-single-product__gallery .neko-thumb-strip-arrow {
    position: absolute !important;
    z-index: 30 !important;
    top: var(--neko-thumb-arrow-top, calc(100% - 41px)) !important;
    transform: translateY(-50%) !important;
    display: inline-grid !important;
    place-items: center !important;
    width: var(--neko-thumb-arrow-size) !important;
    height: var(--neko-thumb-arrow-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--color-border, #eadfe3) !important;
    border-radius: 999px !important;
    color: var(--color-text, #4f4349) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 5px 16px rgba(58,44,52,.10) !important;
    cursor: pointer !important;
    transition: border-color .18s ease, background-color .18s ease, opacity .18s ease !important;
}

body.single-product .neko-single-product__gallery .neko-thumb-strip-arrow--prev {
    left: 2px !important;
}

body.single-product .neko-single-product__gallery .neko-thumb-strip-arrow--next {
    right: 2px !important;
}

body.single-product .neko-single-product__gallery .neko-thumb-strip-arrow:hover,
body.single-product .neko-single-product__gallery .neko-thumb-strip-arrow:focus-visible {
    border-color: var(--color-primary, #d8688c) !important;
    background: #fff !important;
    outline: none !important;
}

body.single-product .neko-single-product__gallery .neko-thumb-strip-arrow[disabled],
body.single-product .neko-single-product__gallery .neko-thumb-strip-arrow.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.single-product .neko-single-product__gallery .neko-thumb-strip-arrow svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Remove the obsolete wrapper if it is present in cached markup. */
body.single-product .neko-single-product__gallery .neko-thumb-carousel,
body.single-product .neko-single-product__gallery .neko-thumb-carousel__viewport {
    display: contents !important;
}
body.single-product .neko-single-product__gallery .neko-thumb-carousel__button {
    display: none !important;
}

@media (max-width: 767px) {
    body.single-product .neko-single-product__gallery .woocommerce-product-gallery {
        --neko-thumb-size: 68px;
        --neko-thumb-gap: 8px;
        --neko-thumb-arrow-size: 34px;
    }

    body.single-product .neko-single-product__gallery .woocommerce-product-gallery ol.flex-control-thumbs,
    body.single-product .neko-single-product__gallery .woocommerce-product-gallery .flex-control-thumbs {
        width: calc(100% - 80px) !important;
        max-width: calc(100% - 80px) !important;
        margin-left: 40px !important;
        margin-right: 40px !important;
    }

    body.single-product .neko-single-product__gallery .neko-thumb-strip-arrow--prev {
        left: 0 !important;
    }

    body.single-product .neko-single-product__gallery .neko-thumb-strip-arrow--next {
        right: 0 !important;
    }
}

@media (max-width: 420px) {
    body.single-product .neko-single-product__gallery .woocommerce-product-gallery {
        --neko-thumb-size: 62px;
        --neko-thumb-gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.single-product .neko-single-product__gallery .woocommerce-product-gallery ol.flex-control-thumbs,
    body.single-product .neko-single-product__gallery .woocommerce-product-gallery .flex-control-thumbs {
        scroll-behavior: auto !important;
    }
}