/* WAHAG product-card gallery: home, shop, and product archives. */

.wahag-card-gallery-page .wahag-card-gallery-enabled {
    position: relative;
    overflow: hidden;
}

.wahag-card-gallery-page .wahag-card-gallery-link,
.wahag-card-gallery-page .wahag-card-gallery-viewport,
.wahag-card-gallery-page .wahag-card-gallery-slide {
    display: block;
    width: 100%;
    height: 100%;
}

.wahag-card-gallery-page .wahag-card-gallery-viewport {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: inherit;
    touch-action: pan-y;
    transform: translateZ(0);
}

.wahag-card-gallery-page .wahag-card-gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 0, 0) scale(0.992);
    will-change: opacity, transform;
    transition:
        opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 420ms step-end;
}

.wahag-card-gallery-page .wahag-card-gallery-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0ms step-start;
}

.wahag-card-gallery-page .wahag-card-gallery-slide.is-entering-from-right {
    opacity: 0;
    transform: translate3d(7%, 0, 0) scale(0.985);
}

.wahag-card-gallery-page .wahag-card-gallery-slide.is-entering-from-left {
    opacity: 0;
    transform: translate3d(-7%, 0, 0) scale(0.985);
}

.wahag-card-gallery-page .wahag-card-gallery-slide.is-leaving-to-left {
    opacity: 0;
    transform: translate3d(-5%, 0, 0) scale(0.99);
}

.wahag-card-gallery-page .wahag-card-gallery-slide.is-leaving-to-right {
    opacity: 0;
    transform: translate3d(5%, 0, 0) scale(0.99);
}

.wahag-card-gallery-page .wahag-card-gallery-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* Minimal premium controls inspired by the supplied reference. */
.wahag-card-gallery-page .wahag-card-gallery-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 9999 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(20, 20, 20, 0.12) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #171717 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transform: translateY(-50%) scale(0.94);
    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.wahag-card-gallery-page .wahag-card-gallery-arrow span {
    display: block;
    margin: -2px 0 0;
    font-family: Arial, sans-serif;
    font-size: 23px;
    font-weight: 300;
    line-height: 1;
}

.wahag-card-gallery-page .wahag-card-gallery-arrow--previous {
    left: 10px !important;
}

.wahag-card-gallery-page .wahag-card-gallery-arrow--next {
    right: 10px !important;
}

.wahag-card-gallery-page .wahag-card-gallery-enabled:hover .wahag-card-gallery-arrow,
.wahag-card-gallery-page .wahag-card-gallery-arrow:focus-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.wahag-card-gallery-page .wahag-card-gallery-arrow:hover {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16) !important;
    transform: translateY(-50%) scale(1.05);
}

.wahag-card-gallery-page .wahag-card-gallery-arrow:focus-visible,
.wahag-card-gallery-page .wahag-card-gallery-dot:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.30) !important;
    outline-offset: 2px;
}

.wahag-card-gallery-page .wahag-card-gallery-dots {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 10px;
    z-index: 9999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
}

.wahag-card-gallery-page .wahag-card-gallery-dot {
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    min-height: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(35, 35, 35, 0.25) !important;
    box-shadow: none !important;
    cursor: pointer;
    transform: none;
    transition:
        background-color 180ms ease,
        transform 180ms ease,
        opacity 180ms ease;
}

.wahag-card-gallery-page .wahag-card-gallery-dot:hover {
    background: rgba(35, 35, 35, 0.55) !important;
}

.wahag-card-gallery-page .wahag-card-gallery-dot.is-active {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    min-height: 6px !important;
    background: #111111 !important;
    transform: scale(1.06);
}

html.wahag-dark-mode .wahag-card-gallery-page .wahag-card-gallery-arrow {
    background: rgba(28, 28, 28, 0.88) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

html.wahag-dark-mode .wahag-card-gallery-page .wahag-card-gallery-dot {
    background: rgba(255, 255, 255, 0.34) !important;
}

html.wahag-dark-mode .wahag-card-gallery-page .wahag-card-gallery-dot.is-active {
    background: #ffffff !important;
}

@media (hover: none), (max-width: 767px) {
    /* Match the reference: swipe on mobile, dots stay visible, arrows stay hidden. */
    .wahag-card-gallery-page .wahag-card-gallery-arrow {
        display: none !important;
    }

    .wahag-card-gallery-page .wahag-card-gallery-dots {
        bottom: 9px;
        gap: 4px;
    }

    .wahag-card-gallery-page .wahag-card-gallery-dot {
        width: 5px !important;
        height: 5px !important;
        min-width: 5px !important;
        min-height: 5px !important;
    }

    .wahag-card-gallery-page .wahag-card-gallery-dot.is-active {
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
        min-height: 6px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wahag-card-gallery-page .wahag-card-gallery-slide,
    .wahag-card-gallery-page .wahag-card-gallery-arrow,
    .wahag-card-gallery-page .wahag-card-gallery-dots,
    .wahag-card-gallery-page .wahag-card-gallery-dot {
        transition: none !important;
    }
}


/* Keep controls above all WoodMart product overlays and make them clickable. */
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled {
    isolation: isolate;
}

.wahag-card-gallery-page .wahag-card-gallery-arrow,
.wahag-card-gallery-page .wahag-card-gallery-dots,
.wahag-card-gallery-page .wahag-card-gallery-dot {
    pointer-events: auto !important;
}

.wahag-card-gallery-page .wahag-card-gallery-arrow,
.wahag-card-gallery-page .wahag-card-gallery-dots {
    z-index: 9999 !important;
}


/*
 * WoodMart's built-in hover image is a separate layer above the product image.
 * Disable that layer only on cards enhanced by this plugin, so the active
 * gallery slide remains visible while the pointer is over the product image.
 */
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled .hover-img,
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled .wd-product-hover-img,
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled .product-image-hover,
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled [class*="hover-img"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Keep our gallery above WoodMart image-transition layers. */
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled .wahag-card-gallery-link {
    position: relative !important;
    z-index: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled:hover .wahag-card-gallery-link,
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled:hover .wahag-card-gallery-viewport,
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled:hover .wahag-card-gallery-slide.is-active,
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled:hover .wahag-card-gallery-image {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Neutralize WoodMart's default primary-image fade/zoom on hover. */
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled .product-image-link > .wahag-card-gallery-viewport,
.wahag-card-gallery-page .product-element-top.wahag-card-gallery-enabled:hover .product-image-link > .wahag-card-gallery-viewport {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}