/**
 * صفحه محصول - گالری محصول
 * فقط تنظیمات تکمیلی گالری و غیرفعال‌سازی sticky موبایل.
 */

/* گالری موبایل نباید sticky/fixed باشد. */
@media (max-width: 900px) {
    html body.single-product,
    html body.single-product.rp-mobile-product-sticky-gallery-ready {
        --rp-mobile-service-strip-height: 0px !important;
    }

    html body.single-product .rp-single-product-page .rp-product-top,
    html body.single-product .rp-single-product-page .rp-single-desktop-layout,
    html body.single-product .rp-single-product-page .rp-product-gallery-col,
    html body.single-product .rp-single-product-page .rp-product-gallery,
    html body.single-product .rp-single-product-page .rp-product-custom-gallery,
    html body.single-product .rp-single-product-page .woocommerce-product-gallery,
    html body.single-product .rp-single-product-page .woocommerce-product-gallery__wrapper,
    html body.single-product .rp-single-product-page .rp-product-gallery-stage,
    html body.single-product .rp-product-gallery-col,
    html body.single-product .rp-product-gallery,
    html body.single-product .rp-product-custom-gallery,
    html body.single-product .woocommerce-product-gallery {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        contain: none !important;
        isolation: auto !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-col,
    html body.single-product .rp-product-gallery-col {
        order: 1 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    html body.single-product .rp-single-product-page .rp-product-custom-gallery,
    html body.single-product .rp-product-custom-gallery {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        background: #fff !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-stage,
    html body.single-product .rp-product-gallery-stage {
        height: var(--rp-gallery-tablet, 320px) !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }

    html body.single-product .rp-single-product-page .rp-product-summary-col {
        margin-top: 0 !important;
    }
}

/* v0.1.389: mobile gallery must be normal document flow, never sticky/fixed, and always visible. */
@media (max-width: 900px) {
    html body.single-product .rp-single-product-page .rp-product-gallery-col,
    html body.single-product .rp-single-product-page .rp-product-custom-gallery,
    html body.single-product .rp-single-product-page .rp-product-gallery-stage {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        z-index: auto !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-col {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
        padding: 0 !important;
        margin: 0 0 8px !important;
        overflow: visible !important;
    }

    html body.single-product .rp-single-product-page .rp-product-custom-gallery {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: var(--rp-gallery-radius-top-left, 0) var(--rp-gallery-radius-top-right, 0) var(--rp-gallery-radius-bottom-right, 0) var(--rp-gallery-radius-bottom-left, 0) !important;
        overflow: visible !important;
        background: #fff !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-stage {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: var(--rp-gallery-tablet, 320px) !important;
        min-height: 1px !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: var(--rp-gallery-radius-top-left, 0) var(--rp-gallery-radius-top-right, 0) var(--rp-gallery-radius-bottom-right, 0) var(--rp-gallery-radius-bottom-left, 0) !important;
        background: #f3f6f7 !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-slide {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        -webkit-transform: none !important;
        z-index: 1 !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-slide.is-active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 2 !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-slide img {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        margin-inline: auto !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Let the image element fill the frame while its complete, uncropped source
       is fitted and centered inside that box. */
    html body.single-product .rp-single-product-page .rp-product-gallery-stage .rp-product-gallery-slide img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Keep the outgoing image behind the incoming fade at every breakpoint so
   the stage background cannot flash during the last-to-first wrap. */
html body.single-product .rp-single-product-page .rp-product-gallery-slide.is-rp-gallery-leaving {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: none !important;
}

/* Final no-crop contract for every desktop/mobile breakpoint. Keeping this
   outside media queries prevents older broad gallery rules from restoring
   cover or intrinsic-width sizing. */
html body.single-product .rp-single-product-page .rp-product-gallery-stage .rp-product-gallery-slide img,
html body.single-product .rp-product-gallery-stage .rp-product-gallery-slide img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

@media (max-width: 768px) {
    html body.single-product .rp-single-product-page .rp-product-breadcrumb {
        margin: 0 !important;
    }

    html body.single-product .rp-single-product-page .rp-product-breadcrumb > .woocommerce-breadcrumb.rp-single-breadcrumb-custom {
        margin: 0 0 24px !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-col,
    html body.single-product .rp-product-gallery-col {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-stage,
    html body.single-product .rp-product-gallery-stage {
        height: var(--rp-gallery-mobile, 260px) !important;
        aspect-ratio: auto !important;
    }
}

/* Component-owned corner radii from Product Page > Product Gallery Image. */
html body.single-product .rp-single-product-page .rp-product-gallery-stage,
html body.single-product .rp-product-gallery-stage {
    border-radius: var(--rp-gallery-radius-top-left, 0) var(--rp-gallery-radius-top-right, 0) var(--rp-gallery-radius-bottom-right, 0) var(--rp-gallery-radius-bottom-left, 0) !important;
}

html body.single-product .rp-single-product-page .rp-product-gallery-thumb,
html body.single-product .rp-product-gallery-thumb {
    border-radius: var(--rp-gallery-thumbnail-radius-top-left, 0) var(--rp-gallery-thumbnail-radius-top-right, 0) var(--rp-gallery-thumbnail-radius-bottom-right, 0) var(--rp-gallery-thumbnail-radius-bottom-left, 0) !important;
}

html body.single-product .rp-single-product-page .rp-product-gallery-thumb img,
html body.single-product .rp-product-gallery-thumb img,
html body.single-product .rp-single-product-page .rp-product-gallery-all-btn img,
html body.single-product .rp-product-gallery-all-btn img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: inherit !important;
}

/* Frame dimensions are independent from image fitting mode. Crop controls
   cover/contain only; all modes use the configured device width and height. */
html body.single-product .rp-single-product-page .rp-product-custom-gallery,
html body.single-product .rp-product-custom-gallery {
    width: min(100%, var(--rp-gallery-desktop-width, 500px)) !important;
    max-width: var(--rp-gallery-desktop-width, 500px) !important;
    margin-inline: auto !important;
}

html body.single-product .rp-single-product-page .rp-product-gallery-stage,
html body.single-product .rp-product-gallery-stage {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: var(--rp-gallery-desktop-ratio, 1 / 1) !important;
}

@media (max-width: 1024px) {
    html body.single-product .rp-single-product-page .rp-product-custom-gallery,
    html body.single-product .rp-product-custom-gallery {
        width: min(100%, var(--rp-gallery-tablet-width, 400px)) !important;
        max-width: var(--rp-gallery-tablet-width, 400px) !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-stage,
    html body.single-product .rp-product-gallery-stage {
        height: auto !important;
        aspect-ratio: var(--rp-gallery-tablet-ratio, 1 / 1) !important;
    }
}

/* The main image opens the gallery lightbox, so expose its click behavior. */
html body.single-product .rp-single-product-page .rp-product-gallery-stage .rp-product-gallery-slide,
html body.single-product .rp-single-product-page .rp-product-gallery-stage .rp-product-gallery-slide img {
    cursor: pointer !important;
}

@media (max-width: 768px) {
    html body.single-product .rp-single-product-page .rp-product-custom-gallery,
    html body.single-product .rp-product-custom-gallery {
        width: min(100%, var(--rp-gallery-mobile-width, 260px)) !important;
        max-width: var(--rp-gallery-mobile-width, 260px) !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-stage,
    html body.single-product .rp-product-gallery-stage {
        height: auto !important;
        aspect-ratio: var(--rp-gallery-mobile-ratio, 1 / 1) !important;
    }
}
/* On mobile, keep the configured image width; tools live in the outside gutter. */
@media (max-width: 900px) {
    html body.single-product .rp-single-product-page .rp-product-custom-gallery {
        display: block !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-action-rail {
        position: absolute !important;
        top: 0 !important;
        right: -30px !important;
        left: auto !important;
        width: 34px !important;
        z-index: 8 !important;
    }

    html body.single-product .rp-single-product-page .rp-product-gallery-progress {
        margin: 8px auto 10px !important;
    }
}

/* Reserve an outside tool gutter within the intermediate layout's column. */
@media (min-width: 768px) and (max-width: 1100px) {
    html body.single-product .rp-single-product-page .rp-product-gallery-col {
        padding-right: 50px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    html body.single-product .rp-single-product-page .rp-product-custom-gallery {
        overflow: visible !important;
    }
    html body.single-product .rp-single-product-page .rp-product-gallery-action-rail {
        right: -50px !important;
        width: 40px !important;
    }
}

/* Two-column product galleries use dots and swipe, not thumbnail navigation. */
@media (min-width: 768px) and (max-width: 1269px) {
    html body.single-product .rp-single-product-page .rp-product-gallery-thumbs {
        display: none !important;
    }
    html body.single-product .rp-single-product-page .rp-product-gallery-progress {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        direction: ltr !important;
        width: max-content !important;
        height: 20px !important;
        padding: 0 8px !important;
        margin: 8px auto 10px !important;
        gap: 5px !important;
        border-radius: 999px !important;
        background: var(--rp-theme-general-heading, #1b2430) !important;
    }
    html body.single-product .rp-single-product-page .rp-product-gallery-progress-item {
        flex: 0 0 6px !important;
        width: 6px !important;
        min-width: 6px !important;
        height: 6px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--rp-theme-general-surface, #fff) !important;
        opacity: .8 !important;
    }
    html body.single-product .rp-single-product-page .rp-product-gallery-progress-item.is-active {
        opacity: 1 !important;
        transform: scale(1.15) !important;
    }
}

/* The gallery is centered inside a 32px-padded mobile column. Let the rail
 * consume only the available outside gutter, even at 320px. */
@media (max-width: 767px) {
    html body.single-product .rp-single-product-page .rp-product-gallery-action-rail {
        right: calc(-17px - max(0px, (100vw - 324px) / 2)) !important;
    }
}