/**
 * Site-wide image standards — prevent skewed / squashed images.
 * Load after theme CSS (style.css, main.css, coderspy.css).
 */

/* ── Baseline ─────────────────────────────────────────────── */
img,
picture img,
video:not([controls]) {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
}

picture {
    display: block;
    max-width: 100%;
}

/* ── Utility wrappers (use in new markup) ─────────────────── */
.mfm-media {
    display: block;
    overflow: hidden;
    max-width: 100%;
}

.mfm-media--product {
    aspect-ratio: 1 / 1;
}

.mfm-media--landscape {
    aspect-ratio: 4 / 3;
}

.mfm-media--wide {
    aspect-ratio: 16 / 9;
}

.mfm-media--square {
    aspect-ratio: 1 / 1;
}

.mfm-media img,
.mfm-media picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mfm-media--cover img,
.mfm-media--cover picture img {
    object-fit: cover;
}

.mfm-img-contain {
    object-fit: contain !important;
}

.mfm-img-cover {
    object-fit: cover !important;
}

.mfm-bg-cover {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* Legacy alias */
.img-fit {
    object-fit: cover;
    max-width: 100%;
    height: auto;
}

/* ── Header / UI icons (fixed-size, never stretch) ────────── */
header .flag-icon img,
header .flag-icon2 img,
header .mfm-flag-svg,
header .mfm-mobile-cart img,
.mfm-footer-shipped-logos img,
img[width="18"],
img[width="24"],
svg + img,
.btn img,
button img {
    object-fit: contain;
}

/* ── Product tiles & catalog ──────────────────────────────── */
.single_tranding img,
.product-carousel .single-product-carousel .single_tranding img,
.Trending_area .tranding_prouct .single_tranding img,
.brand_area .tranding_prouct .single_tranding img,
.product_item img,
.single-product-carousel img,
.product-box-1 .card-image img,
.product-box-2 .product-image img,
.product-box-2.alt-box .product-image img,
.product-box-3 .product-image img,
.product-card-1 .card-image img,
.product-card-2 .card-image img,
.added-to-cart .product-box .block-image img,
.card-image-container .card-img > img,
.xzoom,
.xzoom-gallery,
.product-details-img img,
.product-details-img .tab-content .tab-pane img,
.product-details-img .nav-pills a img,
.prdct_dtl_mdl_right img,
.prdct_dtls_vdo .video-wrapper .right-content .video-img img {
    width: 100%;
    object-fit: contain;
    object-position: center center;
}

/* ── Blog, community, editorial (fill frame, crop OK) ─────── */
.mfm-blog-card-media img,
.service_thumb img,
.service_thumb .list_img img,
.blog-list-full .blog-header img,
.blog-header .img-responsive,
.blog_area .single-blog img,
.comments-area .media-object,
.OnlineCommunityDetails img,
[class*="blog"] .service_thumb img {
    object-fit: cover;
}

/* ── Avatars & profile photos ─────────────────────────────── */
.avatar,
img.avatar,
.rounded-circle,
.img-circle,
.wp-user-avatar,
img[class*="avatar"],
.customer_profile_photo img,
.customer_cover_photo img,
.hr_profile_img img,
.hr_profile_logo img {
    object-fit: cover;
    object-position: center center;
}

/* ── Cart, orders, compare ────────────────────────────────── */
.table-cart tbody tr td.product-image img,
.table-cart tbody tr td.product-image a img,
.order-details-product img,
.compare-list img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.table-cart tbody tr td.product-image a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Carousels & sliders ──────────────────────────────────── */
.carousel-inner img,
.owl-carousel .owl-item img,
.home-slider .owl-item img,
.myfragslider .carousel-item img,
.info_back_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Background hero / banner slides — never stretch */
.slider-height2,
.home_about_area,
.about_area.section-bg,
.Subscription_area,
.Subscription_area2,
.ulta-beauty .ulta-beauty-wrapper,
.mfm-bg-cover {
    background-size: cover !important;
    background-position: center center !important;
}

/* ── Admin panel ──────────────────────────────────────────── */
.panel-media-img img,
.panel .panel-bg-cover img,
.panel .panel-bg-wrap > img,
.widget-img img,
.tasklist .task-img,
.img-user,
.img-upload-preview img,
.img-md,
.new_invoice img,
.info_qrcode img,
.tp_nt ul li img,
.mdl_nt ul li img,
.bs_nt ul li img,
.t_note_up img,
.t_note_down img,
.b_note_up img,
.b_note_down img,
.m_note_up img,
.m_note_down img,
.timeline-icon img,
.mail-attach-list > li img,
.comments .comment-photos img {
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

/* Admin avatars / thumbnails that should fill a square frame */
.img-user,
.timeline-icon img {
    object-fit: cover;
}

/* Override myfragslider width hack — keep products proportional */
.myfragslider .single_tranding img,
.home-slider ~ * .single_tranding img {
    width: 100% !important;
    object-fit: contain !important;
}

/* ── Search dropdown thumbnails ───────────────────────────── */
.mfm-search-result-thumb img {
    object-fit: cover;
}