/**
 * Product gallery thumbnail carousel.
 *
 * The thumbnail strip (.product-slider-nav) is a Slick slider configured in
 * main.js (`h`): 4 thumbnails on desktop (1024+), 3 on tablet (768-1023), 2 on
 * mobile (<768), one thumbnail per step, no looping. Everything here is scoped
 * to .product-slider-nav so other Slick sliders are untouched.
 */

/* Before Slick initialises, lay the thumbnails out in the same single row so
   the strip does not stack vertically and then jump. */
.theme-single-product .product-slider-nav:not(.slick-initialized):not(.hide) {
    display: flex;
    overflow: hidden;
}

.theme-single-product .product-slider-nav:not(.slick-initialized) > div {
    flex: 0 0 25%;
    box-sizing: border-box;
    padding-left: .5rem;
    padding-right: .5rem;
}

.theme-single-product .product-slider-nav:not(.slick-initialized) img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1023px) {
    .theme-single-product .product-slider-nav:not(.slick-initialized) > div {
        flex-basis: 33.3333%;
    }
}

@media (max-width: 767px) {
    .theme-single-product .product-slider-nav:not(.slick-initialized) > div {
        flex-basis: 50%;
    }
}

/* Never let the strip widen the page. */
.theme-single-product .product-slider-nav {
    max-width: none;
    overflow: hidden;
}

.theme-single-product .product-slider-nav .slick-list {
    overflow: hidden;
}

.theme-single-product .product-slider-nav .slick-slide {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.theme-single-product .product-slider-nav .slick-slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* Arrows: small discs straddling the strip's edges, same palette as the main
   image arrows. Hidden at either end of the strip (and by Slick entirely when
   every thumbnail already fits). */
.theme-single-product .product-slider-nav .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--violet-dark, #292642);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s ease, opacity .2s ease;
}

.theme-single-product .product-slider-nav .slick-arrow::before {
    display: none;
}

.theme-single-product .product-slider-nav .slick-arrow:hover,
.theme-single-product .product-slider-nav .slick-arrow:focus-visible {
    background: var(--violet, #6057a6);
}

.theme-single-product .product-slider-nav .slick-arrow.slick-hidden {
    display: none;
}

.theme-single-product .product-slider-nav .slick-prev {
    left: 0;
}

.theme-single-product .product-slider-nav .slick-next {
    right: 0;
}

.theme-single-product .product-slider-nav .slick-arrow.slick-disabled {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    /* Larger tap target; the 28px disc stays visually the same size. */
    .theme-single-product .product-slider-nav .slick-arrow::after {
        content: "";
        position: absolute;
        inset: -8px;
    }
}