/*
 * PRODUCT BOX IMAGE ASPECT RATIO - 3:4 (Taller Portrait)
 * Applies consistent aspect ratio across all product grid displays
 *
 * Target Ratio: 3:4 (width:height)
 * Calculation: height/width = 4/3 = 1.333 = 133.33%
 *
 * Features:
 * - Modern aspect-ratio property with fallback
 * - object-fit: cover for consistent filling
 * - Preserves Swiper functionality
 * - Responsive across all breakpoints
 * - Taller format reduces top/bottom cropping
 */

/* ============================================
   PRODUCT GRID - 3:4 Aspect Ratio
   ============================================ */

/* Modern browsers - aspect-ratio property */
.product-grid .item-box .picture,
.product-grid .item-box .thumbnail .picture {
    aspect-ratio: 3/4 !important; /* 3:4 ratio (0.75) - Taller portrait */
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Swiper container inherits aspect ratio */
.product-grid .item-box .picture .swiper,
.product-grid .item-box .thumbnail .picture .swiper {
    width: 100% !important;
    height: 100% !important;
}

/* Swiper slide wrapper */
.product-grid .item-box .picture .swiper-wrapper,
.product-grid .item-box .thumbnail .picture .swiper-wrapper {
    width: 100% !important;
    height: 100% !important;
}

/* Individual slide link containers */
.product-grid .item-box .picture .swiper-slide,
.product-grid .item-box .thumbnail .picture .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Single image link (non-swiper) */
.product-grid .item-box .picture > a,
.product-grid .item-box .thumbnail .picture > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Image styling - contain with centering */
.product-grid .item-box .picture img,
.product-grid .item-box .thumbnail .picture img,
.product-grid .item-box .picture .swiper-slide img,
.product-grid .item-box .thumbnail .picture .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Show full image within container, matching ocarousel pattern */
    object-position: center !important; /* Center image within frame */
    display: block !important;
    /* position removed - allows proper display in aspect-ratio containers */
}

/* ============================================
   LEGACY BROWSER FALLBACK - Padding-top technique
   ============================================ */

@supports not (aspect-ratio: 3/4) {
    /* Container with padding-top ratio */
    .product-grid .item-box .picture,
    .product-grid .item-box .thumbnail .picture {
        height: 0 !important;
        padding-top: 133.33% !important; /* 4/3 = 133.33% for 3:4 ratio */
        position: relative !important;
    }

    /* Absolute positioning for swiper */
    .product-grid .item-box .picture .swiper,
    .product-grid .item-box .thumbnail .picture .swiper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Absolute positioning for single image link */
    .product-grid .item-box .picture > a,
    .product-grid .item-box .thumbnail .picture > a {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Desktop - maintain 3:4 ratio */
@media (min-width: 1200px) {
    .product-grid .item-box .picture,
    .product-grid .item-box .thumbnail .picture {
        aspect-ratio: 3/4 !important;
    }

    @supports not (aspect-ratio: 3/4) {
        .product-grid .item-box .picture,
        .product-grid .item-box .thumbnail .picture {
            padding-top: 133.33% !important;
        }
    }
}

/* Tablet - maintain 3:4 ratio */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .product-grid .item-box .picture,
    .product-grid .item-box .thumbnail .picture {
        aspect-ratio: 3/4 !important;
    }

    @supports not (aspect-ratio: 3/4) {
        .product-grid .item-box .picture,
        .product-grid .item-box .thumbnail .picture {
            padding-top: 133.33% !important;
        }
    }
}

/* Mobile - maintain 3:4 ratio */
@media (max-width: 767.98px) {
    .product-grid .item-box .picture,
    .product-grid .item-box .thumbnail .picture {
        aspect-ratio: 3/4 !important;
    }

    @supports not (aspect-ratio: 3/4) {
        .product-grid .item-box .picture,
        .product-grid .item-box .thumbnail .picture {
            padding-top: 133.33% !important;
        }
    }
}

/* ============================================
   SWIPER NAVIGATION COMPATIBILITY
   ============================================ */

/* Ensure navigation arrows remain visible and functional */
.product-grid .item-box .picture .swiper-button-prev,
.product-grid .item-box .picture .swiper-button-next,
.product-grid .item-box .picture .swiper-pagination {
    z-index: 15 !important; /* Above images but below overlays */
}

/* ============================================
   OBJECT-FIT VARIATIONS (Optional customization)
   ============================================ */

/* Alternative: Use 'cover' instead of 'contain' to fill frame completely
 * Uncomment below to switch from letterboxing to cropping (may cut off product details) */
/*
.product-grid .item-box .picture img,
.product-grid .item-box .thumbnail .picture img {
    object-fit: cover !important;
}
*/

/* Alternative aspect ratios:
 * For 4:5 ratio: aspect-ratio: 4/5; padding-top: 125%;
 * For 1:1 ratio: aspect-ratio: 1/1; padding-top: 100%;
 * For 16:9 ratio: aspect-ratio: 16/9; padding-top: 56.25%;
 * For 2:3 ratio: aspect-ratio: 2/3; padding-top: 150%;
 */