/* PDP gallery slider — brand styling
   Plain CSS (not compiled from scss/). Loaded after style.css.
   Brand colors: blue #06205c, green #8ea00f, gray #414042 */

/* .product-images is a flex container below 620px, so the slider must be a
   flex item with a definite width — auto/min-content lets slick measure the
   full-size images and blow the track up to thousands of pixels wide.
   Its padding also cancels the parent's margin: 0 -9px (box-sizing: border-box)
   so the card stops short of the viewport edge. */
.product-images .product-gallery-slider {
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 9px;
    padding-right: 9px;
}

.product-images .product-gallery-slider.is-slider {
    margin-bottom: 26px;
    padding-bottom: 26px;
}

/* image never crops: fixed frame + contain.
   Mobile and tablet run a 10:7 frame — 30% shorter than the desktop square —
   so the gallery takes less of the screen before the product details. */
.single-product .product .product-images .product-gallery-slider .image-holder {
    background-color: #fff;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 10 / 7;
}

/* Customizer CSS hides .product-images .image-holder:first-child site-wide.
   Inside the slider every slide must render, so undo it here — the featured
   image is kept out of the slider in product-image.php instead. */
.single-product .product .product-images .product-gallery-slider .image-holder:first-child {
    display: flex;
}

.single-product .product .product-images .product-gallery-slider .image-holder img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}

.product-images .product-gallery-slider .slick-list {
    overflow: hidden;
}

/* slick sets pixel widths on the track and slides — keep its float layout so
   the widths survive a resize (a flex track shrinks them instead).
   Do not set a percentage min-width here: percentages resolve against the
   track, which is slideWidth x slideCount, and blow the layout up. */
.product-images .product-gallery-slider .slick-slide {
    height: auto;
}

/* arrows overlaid on the image — quiet by default, brand navy on hover */
.product-images .product-gallery-slider .slick-arrow {
    font-size: 0;
    line-height: 0;
    padding: 0;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(6, 32, 92, 0.12);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    transition: background-color 0.3s, border-color 0.3s;
}

.product-images .product-gallery-slider .slick-arrow:hover,
.product-images .product-gallery-slider .slick-arrow:focus {
    background-color: #06205c;
    border-color: #06205c;
    outline: none;
}

.product-images .product-gallery-slider .slick-arrow:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #06205c;
    border-right: 1px solid #06205c;
    transition: border-color 0.3s;
}

.product-images .product-gallery-slider .slick-arrow:hover:after,
.product-images .product-gallery-slider .slick-arrow:focus:after {
    border-bottom-color: #fff;
    border-right-color: #fff;
}

.product-images .product-gallery-slider .slick-arrow.slick-prev {
    left: 12px;
}

.product-images .product-gallery-slider .slick-arrow.slick-prev:after {
    transform: translate(-30%, -50%) rotate(135deg);
}

.product-images .product-gallery-slider .slick-arrow.slick-next {
    right: 12px;
}

.product-images .product-gallery-slider .slick-arrow.slick-next:after {
    transform: translate(-70%, -50%) rotate(-45deg);
}

.product-images .product-gallery-slider .slick-arrow.slick-disabled {
    opacity: 0.35;
    cursor: default;
}

/* brand dots — bars, green when active (matches home sliders) */
.product-images .product-gallery-slider .slick-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    z-index: 5;
}

.product-images .product-gallery-slider .slick-dots li {
    width: 25px;
    height: 2px;
    margin: 0 6px;
    background-color: #c3c4c6;
    cursor: pointer;
    transition: background-color 0.3s;
}

.product-images .product-gallery-slider .slick-dots li:hover {
    background-color: #06205c;
}

.product-images .product-gallery-slider .slick-dots li.slick-active {
    background-color: #8ea00f;
}

/* bar only — kill every trace of slick's default round dot button,
   but keep it as the (invisible) click target */
.product-images .product-gallery-slider .slick-dots li:before,
.product-images .product-gallery-slider .slick-dots li:after {
    display: none;
}

.product-images .product-gallery-slider .slick-dots li button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: none;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
}

.product-images .product-gallery-slider .slick-dots li button:before,
.product-images .product-gallery-slider .slick-dots li button:after {
    display: none;
    content: none;
}

@media (min-width: 620px) {

    /* Sticky gallery, from the two-column layout up.
       .site-main uses overflow: hidden to clip its skewed background, which
       also makes it a scroll container and stops position: sticky from ever
       engaging. overflow: clip clips identically without creating one.
       (Browsers without overflow: clip ignore this and the gallery simply
       scrolls as before.)
       The body.…single-product chain is needed because style.css is enqueued a
       second time (handle `style-css`) after this file, so a plain
       .product-template-default .site-main would lose the tie on source order. */
    body.product-template-default.single-product .site-main {
        overflow: clip;
    }

    /* .product-images is a flex item of .container and stretches to the full
       row height by default, leaving no slack to stick within — align-self
       shrinks it to its content. top clears the fixed header. */
    .single-product .product .product-images {
        position: sticky;
        top: 165px;
        align-self: flex-start;
    }

    .product-images .product-gallery-slider {
        padding-right: 0;
    }

    .product-images .product-gallery-slider.is-slider {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .single-product .product .product-images .product-gallery-slider .image-holder {
        width: 100%;
    }

    .product-images .product-gallery-slider .slick-arrow.slick-prev {
        left: 16px;
    }

    .product-images .product-gallery-slider .slick-arrow.slick-next {
        right: 16px;
    }

    .product-images .product-gallery-slider .slick-dots li {
        width: 40px;
        margin: 0 8px;
    }
}

/* the gallery column is narrow between 620 and 900, so the arrows only
   grow once it does — and stay modest even then */
@media (min-width: 900px) {

    .product-images .product-gallery-slider .slick-arrow {
        width: 36px;
        height: 36px;
    }

    .product-images .product-gallery-slider .slick-arrow:after {
        width: 8px;
        height: 8px;
    }
}

@media (min-width: 1100px) {

    /* the fixed header is shorter on desktop (119px vs 154px on tablet) */
    .single-product .product .product-images {
        top: 130px;
    }

    /* full square again once there is room for it */
    .single-product .product .product-images .product-gallery-slider .image-holder {
        aspect-ratio: 1 / 1;
    }

    .product-images .product-gallery-slider .slick-arrow {
        width: 40px;
        height: 40px;
    }

    .product-images .product-gallery-slider .slick-dots li {
        width: 50px;
        margin: 0 10px;
    }
}