/**
 * Product page – gallery (WooCommerce flexslider: viewport + thumbnail list).
 *
 * Part of the product page styles, see css/single-product.css.
 *
 * Sections:
 *   1. Gallery
 *
 * @package KauplusRattapood
 */

/* =========================================================================
   1. Gallery (WooCommerce flexslider: viewport + thumbnail list)
   ========================================================================= */
.kr-pdp .woocommerce-product-gallery {
    position: relative;
    margin: 0;
}

/* Thumbnails as a column left of the photo once the slider has built them */
.kr-pdp .woocommerce-product-gallery:has(.flex-control-thumbs) {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.kr-pdp .flex-viewport,
.kr-pdp .woocommerce-product-gallery__wrapper {
    grid-column: 2;
    grid-row: 1;
    border-radius: 12px;
    overflow: hidden;
}

.kr-pdp .woocommerce-product-gallery__wrapper {
    margin: 0;
}

/* Before the slider runs (or with one photo) only the first photo shows */
.kr-pdp .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:not(:first-child) {
    display: none;
}

.kr-pdp .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__wrapper {
    grid-column: auto;
}

/* No padding on the slide itself: flexslider measures it against its 800%-wide
   track and would compute a zero slide width – the photo is inset instead.
   The ground sits on each slide: the slider's transformed track isolates the
   photo's multiply blend from anything painted further out. */
.kr-pdp .woocommerce-product-gallery__image {
    aspect-ratio: 1 / 1;
    background: var(--kr-card-ground);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kr-pdp .woocommerce-product-gallery__image a {
    display: contents;
}

.kr-pdp .woocommerce-product-gallery__image img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.kr-pdp .flex-control-thumbs {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kr-pdp .flex-control-thumbs li {
    height: 72px; /* fixed: aspect-ratio alone lets the photo's own height win */
    padding: 6px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--kr-card-ground);
    cursor: pointer;
}

.kr-pdp .flex-control-thumbs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.kr-pdp .flex-control-thumbs li:has(.flex-active) {
    box-shadow: inset 0 0 0 1.5px var(--color-black);
}

.kr-pdp .flex-control-thumbs img.flex-active,
.kr-pdp .flex-control-thumbs img:hover {
    opacity: 1;
}

/* Lightbox trigger: a quiet "Suurenda" pill in the photo corner */
.kr-pdp .woocommerce-product-gallery__trigger {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--color-white);
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-gray-500);
    text-decoration: none;
    text-indent: 0;
}

.kr-pdp .woocommerce-product-gallery__trigger::after {
    content: "Suurenda";
}

.kr-pdp .woocommerce-product-gallery__trigger img,
.kr-pdp .woocommerce-product-gallery__trigger span {
    display: none !important;
}

.kr-pdp .woocommerce-product-gallery__trigger:hover {
    color: var(--color-black);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 968px) {
    /* "Suurenda" in the photo's top corner – the thumbnails sit below it */
    .kr-pdp .woocommerce-product-gallery__trigger {
        top: 12px;
        right: 12px;
        bottom: auto;
    }

    /* Thumbnails as a row under the photo */
    .kr-pdp .woocommerce-product-gallery:has(.flex-control-thumbs) {
        grid-template-columns: minmax(0, 1fr);
    }

    .kr-pdp .flex-viewport,
    .kr-pdp .woocommerce-product-gallery__wrapper {
        grid-column: auto;
    }

    .kr-pdp .flex-control-thumbs {
        grid-column: auto;
        grid-row: 2;
        flex-direction: row;
        overflow-x: auto;
    }

    .kr-pdp .flex-control-thumbs li {
        flex: 0 0 60px;
        height: 60px;
    }
}