/* 
 * Square Image Containers CSS
 * This file forces all divs surrounding images to maintain a 1:1 aspect ratio
 * Applied system-wide to ensure consistent square image display
 */

/* ========================================
   PRODUCT IMAGE CONTAINERS
   ======================================== */

/* Main product image containers */
.card-product .product-img,
.card-product .card-product-wrapper,
.product-card .product-image,
.product-list-card .product-img,
.product-list-item .product-img,
.single-product-component .product-img,
.single-product-component .card-product-wrapper {
    aspect-ratio: 1 !important;
}

/* Product grid variations */
.tf-col-2 .product-img,
.tf-col-3 .product-img,
.tf-col-4 .product-img,
.tf-col-5 .product-img,
.product-grid-view .product-card-image {
    aspect-ratio: 1 !important;
}

/* ========================================
   SWIPER SLIDE IMAGE CONTAINERS
   ======================================== */

/* Product detail swiper containers */
.swiper-slide .item,
.swiper-slide .stagger-item .item,
.tf-product-media-thumbs .swiper-slide .item,
.tf-product-media-main .swiper-slide .item,
.tf-product-media-thumbs .swiper-slide .stagger-item .item,
.tf-product-media-main .swiper-slide .stagger-item .item {
    aspect-ratio: 1 !important;
}

/* ========================================
   QUICK VIEW IMAGE CONTAINERS
   ======================================== */

/* Quick view modal image containers */
.quickView-item,
.tf-quick-view-images-horizontal .quickView-item,
.wrap-quick-view .quickView-item,
.item-scroll-quickview {
    aspect-ratio: 1 !important;
}

/* ========================================
   GENERAL IMAGE CONTAINERS
   ======================================== */

/* Generic image containers */
.image-container,
.img-container,
.media-container,
.gallery-item,
.portfolio-item .img-wrap,
.promotion-item .img-wrap,
.content-item .img-wrap {
    aspect-ratio: 1 !important;
}

/* ========================================
   COLLECTION AND CATEGORY CONTAINERS
   ======================================== */

/* Collection and category image containers */
.cls-item .img-cls,
.collection-item .img-wrap,
.category-item .img-wrap,
.banner-cls-discover .img-style {
    aspect-ratio: 1 !important;
}

/* ========================================
   BANNER AND HERO CONTAINERS
   ======================================== */

/* NOTE: Hero/banner/slider artwork is intentionally NOT forced to 1:1.
   These are wide artwork (hero slides, promo banners) and a forced square
   aspect-ratio (with object-fit:cover) squashed them and cropped their sides
   on every breakpoint. The 1:1 enforcement is kept ONLY for genuine
   product/thumbnail containers above. The selectors
   `.banner-img`, `.hero-img`, `.slider-item .img-wrap`, `.banner-cls-discover`
   were removed from the forced-square rule here on purpose — do not re-add. */

/* ========================================
   BLOG AND CONTENT CONTAINERS
   ======================================== */

/* Blog and content image containers */
.blog-item .img-wrap,
.content-item .img-wrap,
.article-item .img-wrap,
.news-item .img-wrap {
    aspect-ratio: 1 !important;
}

/* ========================================
   ADMIN INTERFACE CONTAINERS
   ======================================== */

/* Admin interface image containers */
.admin-product-image,
.admin-image-preview,
.image-editor-container,
.unfold-image-widget .image-container {
    aspect-ratio: 1 !important;
}

/* ========================================
   RESPONSIVE IMAGE CONTAINERS
   ======================================== */

/* Responsive image containers */
.img-responsive,
.img-fluid-container,
.responsive-image-wrapper {
    aspect-ratio: 1 !important;
}

/* ========================================
   IMAGE FIT RULES
   ======================================== */

/* Ensure all images within square containers maintain proper fit */
.card-product .product-img img,
.card-product .card-product-wrapper img,
.product-card .product-image img,
.product-list-card .product-img img,
.product-list-item .product-img img,
.single-product-component .product-img img,
.single-product-component .card-product-wrapper img,
.tf-col-2 .product-img img,
.tf-col-3 .product-img img,
.tf-col-4 .product-img img,
.tf-col-5 .product-img img,
.product-grid-view .product-card-image img,
.swiper-slide .item img,
.swiper-slide .stagger-item .item img,
.tf-product-media-thumbs .swiper-slide .item img,
.tf-product-media-main .swiper-slide .item img,
.tf-product-media-thumbs .swiper-slide .stagger-item .item img,
.tf-product-media-main .swiper-slide .stagger-item .item img,
.quickView-item img,
.tf-quick-view-images-horizontal .quickView-item img,
.wrap-quick-view .quickView-item img,
.item-scroll-quickview img,
.image-container img,
.img-container img,
.media-container img,
.gallery-item img,
.portfolio-item .img-wrap img,
.promotion-item .img-wrap img,
.content-item .img-wrap img,
.cls-item .img-cls img,
.collection-item .img-wrap img,
.category-item .img-wrap img,
.banner-cls-discover .img-style img,
.banner-img img,
.hero-img img,
.slider-item .img-wrap img,
.banner-cls-discover img,
.blog-item .img-wrap img,
.content-item .img-wrap img,
.article-item .img-wrap img,
.news-item .img-wrap img,
.admin-product-image img,
.admin-image-preview img,
.image-editor-container img,
.unfold-image-widget .image-container img,
.img-responsive img,
.img-fluid-container img,
.responsive-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ========================================
   HOVER EFFECTS
   ======================================== */

/* Maintain square aspect ratio during hover effects */
.card-product .card-product-wrapper:hover .product-img,
.card-product .card-product-wrapper:hover .card-product-wrapper,
.product-card:hover .product-image,
.swiper-slide:hover .item {
    aspect-ratio: 1 !important;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Ensure square aspect ratio is maintained across all breakpoints */
@media (max-width: 768px) {
    .card-product .product-img,
    .card-product .card-product-wrapper,
    .product-card .product-image,
    .swiper-slide .item,
    .quickView-item {
        aspect-ratio: 1 !important;
    }
}

@media (max-width: 576px) {
    .card-product .product-img,
    .card-product .card-product-wrapper,
    .product-card .product-image,
    .swiper-slide .item,
    .quickView-item {
        aspect-ratio: 1 !important;
    }
}

/* ========================================
   OVERRIDE RULES
   ======================================== */

/* Override any existing height/width rules that might interfere */
.card-product .product-img,
.card-product .card-product-wrapper,
.product-card .product-image {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Ensure flex containers maintain square aspect ratio */
.card-product .product-img {
    align-items: stretch !important;
}

/* ========================================
   LEGACY SUPPORT
   ======================================== */

/* Support for older browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1) {
    .card-product .product-img,
    .card-product .card-product-wrapper,
    .product-card .product-image {
        position: relative;
        width: 100%;
        padding-bottom: 100%; /* 1:1 aspect ratio */
    }
    
    .card-product .product-img img,
    .card-product .card-product-wrapper img,
    .product-card .product-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}