/**
 * Remote Media for REHUB Affiliates - Minimal Layout Fixes
 * Uses REHUB's existing CSS classes where possible
 * @version 2.0.1
 */

/* =====================================================
   FLEXSLIDER THUMBNAIL NAVIGATION - Uniform sizing
   REHUB uses Flexslider which auto-generates .flex-control-thumbs
   ===================================================== */
.woocommerce-product-gallery .flex-control-thumbs li {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8f8f8;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1;
}

/* Fallback thumbnails created by our JS if Flexslider fails */
.rmra-fallback-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    padding: 0;
    list-style: none;
}

.rmra-fallback-thumbs li {
    width: calc(20% - 8px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    background: #f8f8f8;
    transition: border-color 0.2s ease;
}

.rmra-fallback-thumbs li:hover,
.rmra-fallback-thumbs li img.flex-active {
    border-color: var(--rh-main-color, #0073aa);
}

.rmra-fallback-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.rmra-fallback-thumbs li:hover img,
.rmra-fallback-thumbs li img.flex-active {
    opacity: 1;
}

/* =====================================================
   MAIN PRODUCT IMAGE - REHUB template compatibility
   ===================================================== */
.remote-main-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    transition: opacity 0.3s ease;
}

.remote-main-image.loading {
    opacity: 0.6;
}

/* Ensure main image container respects REHUB's height settings */
.woocommerce-product-gallery__image .remote-main-image {
    object-fit: cover;
    max-height: 100%;
}

/* =====================================================
   GRID UNIFORMITY - Prevent tall images breaking layout
   Uses 4:5 aspect ratio for product cards (portrait-friendly)
   ===================================================== */

/* Universal product grid image container fix */
.woo_grid_compact .img-centered-flex,
.col_item .img-centered-flex,
.woogridpart figure,
.woogridcompact figure,
.product-grid .product-image-wrap,
.woocommerce .products .product figure {
    overflow: hidden;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

/* Product grid images - uniform height with cover */
.woocommerce .products .product figure img,
.woo_grid_compact .img-centered-flex img,
.col_item .img-centered-flex img,
.woogridpart figure img,
.woogridcompact figure img,
.product-grid img.wp-post-image {
    width: 100% !important;
    height: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
    object-position: center;
    display: block !important;
    transition: all ease-in-out .2s;
}

/* Elementor widget grids */
.elementor-widget-wc-products .attachment-woocommerce_thumbnail,
.elementor-widget-rh-product-grid img.wp-post-image,
.rh-product-grid-item img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
}

/* REHUB specific grid wrappers */
.rh-flex-center-wrap figure,
.rh-cartbox figure,
.woo-image-part figure {
    /*aspect-ratio: 4 / 5;*/
    overflow: hidden;
}

.rh-flex-center-wrap figure img,
.rh-cartbox figure img,
.woo-image-part figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =====================================================
   SEARCH RESULTS - Ajax search image fix
   ===================================================== */
.re-search-result-thumb {
    width: 70px;
    height: 70px;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 4px;
    background: #f8f8f8;
}

.re-search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =====================================================
   RESPONSIVE BREAKPOINTS - Fallback thumbnails
   ===================================================== */
@media (max-width: 767px) {
    .rmra-fallback-thumbs li {
        width: calc(25% - 8px);
    }
}

@media (max-width: 480px) {
    .rmra-fallback-thumbs li {
        width: calc(20% - 6px);
    }
    .rmra-fallback-thumbs {
        gap: 6px;
    }
}

/* =====================================================
   ERROR STATE - Graceful degradation for broken images
   ===================================================== */
.woocommerce-product-gallery__image img[style*="opacity: 0.5"] {
    min-height: 60px;
    background: #f0f0f0;
}

/* Hide entire gallery slide if image fails */
.woocommerce-product-gallery__image:has(img[style*="display: none"]) {
    display: none !important;
}

/* =====================================================
   FULL-SCREEN GALLERY / LIGHTBOX - Tall image fix
   Ensures tall images fit within viewport without overflow
   ===================================================== */

/* PhotoSwipe / WooCommerce lightbox */
.pswp__img,
.pswp__zoom-wrap img {
    max-height: 90vh !important;
    max-width: 90vw !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: auto;
}

.pswp__item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* REHUB's built-in lightbox */
.rh-lightbox-content img,
.mfp-img,
.mfp-figure img {
    max-height: 90vh;
    max-width: 90vw;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Magnific Popup (used by some REHUB templates) */
.mfp-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mfp-content {
    max-height: 90vh;
    overflow: hidden;
}

.mfp-content img {
    max-height: 90vh;
    max-width: 100%;
    object-fit: contain;
}

/* Flexslider lightbox mode */
.flex-viewport img,
.woocommerce-product-gallery--with-images .flex-active-slide img {
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: cover;
    margin: 0 auto;
}

/* Single product main image - contain tall images */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
    max-height: 500px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* =====================================================
   SIDEBAR WIDGETS - Uniform image sizing
   ===================================================== */
.widget .product-small-item img,
.widget .woocommerce-product-gallery__image img,
.top_chart_wrap img,
.wpsm_toplist_item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 60px;
    height: 60px;
    border-radius: 4px;
}

/* Comparison table images */
.compare-table-wrap img.wp-post-image,
.rehub-compare-item img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}