/*
 * Single product gallery, Modern style (Customizer: "Gallery style").
 * Covers both gallery engines: WooCommerce's FlexSlider (.flex-viewport, .flex-control-thumbs) and the
 * theme's Swiper (.product-gallery-slider, .product-gallery-thumbs-slider). Loaded after css/woocommerce.css.
 */
.woocommerce div.product div.images.ahura-gallery-modern {
    --ahura-gallery-accent: var(--ahura-theme-primary, #1d67e8);
    --ahura-gallery-card: #f4f5f7;
    --ahura-gallery-border: rgba(15, 23, 42, .06);
    --ahura-gallery-radius: 20px;
    --ahura-gallery-thumb-radius: 12px;
    position: relative;
}

/* Stage: every slide is a soft card, the viewport clips it to rounded corners. */
.woocommerce div.product div.images.ahura-gallery-modern :is(.flex-viewport, .product-gallery-slider) {
    position: relative;
    overflow: hidden;
    border-radius: var(--ahura-gallery-radius);
}

.woocommerce div.product div.images.ahura-gallery-modern .woocommerce-product-gallery__image {
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--ahura-gallery-border);
    border-radius: var(--ahura-gallery-radius);
    background: var(--ahura-gallery-card);
}

/* White product photo backgrounds melt into the card. */
.woocommerce div.product div.images.ahura-gallery-modern .woocommerce-product-gallery__image img {
    display: block;
    mix-blend-mode: multiply;
}

/* WooCommerce hover zoom lays .zoomImg over the photo: hide the photo under it, or both show through the blend. */
.woocommerce div.product div.images.ahura-gallery-modern .woocommerce-product-gallery__image > a img {
    transition: opacity .12s ease;
}

.woocommerce div.product div.images.ahura-gallery-modern .woocommerce-product-gallery__image:hover:has(> .zoomImg) > a img {
    opacity: 0;
}

/* Zoom button: a floating circle inside the card. */
.woocommerce div.product div.images.ahura-gallery-modern .woocommerce-product-gallery__trigger {
    top: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}

/* FlexSlider thumbnails: one row, 4 visible (the "Gallery Thumbnails Gap" option still sets the gap), more scroll. */
.woocommerce div.product div.images.ahura-gallery-modern .flex-control-thumbs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--ahura-gallery-thumbs-gap, 10px)) / 4);
    margin-top: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.woocommerce div.product div.images.ahura-gallery-modern .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

.woocommerce div.product div.images.ahura-gallery-modern .flex-control-thumbs li {
    scroll-snap-align: start;
}

.woocommerce div.product div.images.ahura-gallery-modern .flex-control-thumbs li,
.woocommerce div.product div.images.ahura-gallery-modern .product-gallery-thumbs-slider .swiper-slide {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: var(--ahura-gallery-thumb-radius);
    background: var(--ahura-gallery-card);
    box-shadow: none;
    cursor: pointer;
}

.woocommerce div.product div.images.ahura-gallery-modern .flex-control-thumbs li img,
.woocommerce div.product div.images.ahura-gallery-modern .product-gallery-thumbs-slider .swiper-slide img {
    display: block;
    border: 0;
    border-radius: var(--ahura-gallery-thumb-radius);
    background: transparent;
    mix-blend-mode: multiply;
    opacity: .5;
    transition: opacity .2s ease;
}

/* Accent ring on the active thumbnail (inset, so the slider's overflow does not clip it). */
.woocommerce div.product div.images.ahura-gallery-modern .flex-control-thumbs li::after,
.woocommerce div.product div.images.ahura-gallery-modern .product-gallery-thumbs-slider .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--ahura-gallery-border);
    pointer-events: none;
    transition: box-shadow .2s ease;
}

.woocommerce div.product div.images.ahura-gallery-modern .flex-control-thumbs li:hover img,
.woocommerce div.product div.images.ahura-gallery-modern .product-gallery-thumbs-slider .swiper-slide:hover img {
    opacity: .85;
}

.woocommerce div.product div.images.ahura-gallery-modern .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images.ahura-gallery-modern .product-gallery-thumbs-slider .swiper-slide-thumb-active img {
    opacity: 1;
}

.woocommerce div.product div.images.ahura-gallery-modern .flex-control-thumbs li:has(img.flex-active)::after,
.woocommerce div.product div.images.ahura-gallery-modern .product-gallery-thumbs-slider .swiper-slide-thumb-active::after {
    box-shadow: inset 0 0 0 2px var(--ahura-gallery-accent);
}

/* Swiper thumbnail arrows: small round buttons. */
.woocommerce div.product div.images.ahura-gallery-modern .product-gallery-thumbs-slider :is(.swiper-button-next, .swiper-button-prev) {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
    color: #111827;
}

.woocommerce div.product div.images.ahura-gallery-modern .product-gallery-thumbs-slider :is(.swiper-button-next, .swiper-button-prev)::after {
    font-size: 12px;
    font-weight: 700;
}

/* The style's own arrows replace Swiper's buttons on the main image. */
.woocommerce div.product div.images.ahura-gallery-modern.ahura-gallery-modern--arrows .product-gallery-slider > :is(.swiper-button-next, .swiper-button-prev) {
    display: none;
}

.woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -20px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
    color: #111827;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}

.woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav--prev {
    inset-inline-start: 12px;
}

.woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav--next {
    inset-inline-end: 12px;
}

.woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav svg {
    display: block;
    width: 18px;
    height: 18px;
}

.rtl div.product div.images.ahura-gallery-modern .ahura-gallery-nav svg {
    transform: scaleX(-1);
}

.woocommerce div.product div.images.ahura-gallery-modern :is(.flex-viewport, .product-gallery-slider):hover .ahura-gallery-nav,
.woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav:focus-visible {
    opacity: 1;
}

.woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav:hover {
    background: #ffffff;
    transform: scale(1.06);
}

.woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav:focus-visible {
    outline: 2px solid var(--ahura-gallery-accent);
    outline-offset: 2px;
}

.woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* Image counter: a small pill at the bottom center, clear of the zoom button and the arrows. */
.woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .66);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    pointer-events: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Touch screens have no hover: keep the arrows visible. */
@media (hover: none) {
    .woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .woocommerce div.product div.images.ahura-gallery-modern {
        --ahura-gallery-radius: 16px;
        --ahura-gallery-thumb-radius: 10px;
    }

    .woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav {
        width: 34px;
        height: 34px;
        margin-top: -17px;
    }
}

html:is(.ahura-dark-theme, .ahura-black-theme) .woocommerce div.product div.images.ahura-gallery-modern {
    --ahura-gallery-card: rgba(255, 255, 255, .06);
    --ahura-gallery-border: rgba(255, 255, 255, .08);
}

/* Multiply would darken photos on a dark card. */
html:is(.ahura-dark-theme, .ahura-black-theme) .woocommerce div.product div.images.ahura-gallery-modern img {
    mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce div.product div.images.ahura-gallery-modern .ahura-gallery-nav,
    .woocommerce div.product div.images.ahura-gallery-modern img {
        transition: none;
    }
}