/* ========================================
   ENHANCED IMAGE DISPLAY SYSTEM
   ========================================
   ปรับปรุงการแสดงภาพทั้งเว็บไซต์ให้สวยงาม
   ไม่โดนตัด และมีความสมดุลทุกหน้าจอ
   ======================================== */

/* === GLOBAL IMAGE ENHANCEMENT === */
img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: all 0.3s ease !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}

/* === HERO SLIDER SPECIFIC FIXES === */
#main-hero-slider .swiper-slide img,
.main-hero-slider-container .swiper-slide img,
.hero-slider img {
    object-fit: contain !important; /* แสดงภาพเต็มโดยไม่ตัด */
    object-position: center center !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 94% !important;
    max-height: 82% !important;
    margin: 0 auto !important;
    transition: transform 0.5s ease !important;
}

/* === PRODUCT IMAGES === */
.product-card img,
.product-item img,
.product-grid img,
.product-image img {
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    transition: all 0.3s ease !important;
}

/* Flash-sale: remove inner image padding/border to maximize visible area; wrapper handles visual canvas */
.flash-sale-section .product-card img,
.section-header-flash-sell .product-card img,
[class*="flash-sell"] .product-card img {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.product-card:hover img,
.product-item:hover img {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* === BANNER & PROMOTIONAL IMAGES === */
.banner img,
.promo-banner img,
.promotional-image,
.content-image img {
    object-fit: contain !important;
    object-position: center !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease !important;
}

.banner:hover img,
.promo-banner:hover img {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
}

/* === LOGO & BRAND IMAGES === */
.brand-logo img,
.vendor-logo img,
.logo-strip img,
.company-logo img {
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    filter: brightness(1) contrast(1.1) !important;
    transition: all 0.3s ease !important;
}

.brand-logo:hover img,
.vendor-logo:hover img {
    filter: brightness(1.1) contrast(1.2) !important;
    transform: scale(1.1) !important;
}

/* === CATEGORY IMAGES === */
.category-item img,
.category-card img,
.category-icon img {
    object-fit: cover !important; /* Categories ใช้ cover เพราะเป็น icons */
    object-position: center !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

.category-item:hover img,
.category-card:hover img {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
}

/* === GALLERY & LIGHTBOX IMAGES === */
.gallery-item img,
.lightbox-image img,
.portfolio-image img {
    object-fit: cover !important;
    object-position: center !important;
    background: #000000 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.gallery-item:hover img {
    filter: brightness(1.1) contrast(1.1) !important;
    transform: scale(1.02) !important;
}

/* === AVATAR & PROFILE IMAGES === */
.avatar img,
.profile-image img,
.user-photo img {
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
}

/* === IMAGE LOADING STATES === */
img[src=""],
img:not([src]),
img[src*="placeholder"],
.image-placeholder {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6c757d !important;
    font-size: 1.5rem !important;
    min-height: 150px !important;
    border-radius: 8px !important;
    border: 2px dashed #dee2e6 !important;
}

img[src=""]:before,
img:not([src]):before,
.image-placeholder:before {
    content: "🖼️ รูปภาพ" !important;
    text-align: center !important;
}

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

/* Mobile Portrait */
@media (max-width: 576px) {
    /* Hero slider - full bleed, no background visible */
    #main-hero-slider,
    #main-hero-slider .swiper,
    #main-hero-slider .swiper-wrapper,
    #main-hero-slider .swiper-slide,
    .hero-slider,
    .top-hero-row {
        background: transparent !important;
        padding: 0 !important;
    }
    
    #main-hero-slider .swiper-slide img,
    .hero-slider img {
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
    }
    
    .banner img,
    .promo-banner img {
        object-fit: cover !important;
        min-height: 200px !important;
        object-position: center !important;
    }
    
    .product-card img {
        padding: 5px !important;
    }
}

/* Mobile Landscape & Tablet */
@media (min-width: 577px) and (max-width: 992px) {
    #main-hero-slider .swiper-slide img {
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    #main-hero-slider .swiper-slide img,
    .hero-slider img {
        object-fit: cover !important;
        max-height: none !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    .product-card img {
        padding: 15px !important;
    }
    
    .banner img:hover {
        transform: translateY(-10px) scale(1.02) !important;
    }
}

/* === ASPECT RATIO UTILITIES === */
.aspect-ratio-16-9,
.ratio-16x9 {
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

.aspect-ratio-4-3,
.ratio-4x3 {
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

.aspect-ratio-1-1,
.ratio-1x1 {
    aspect-ratio: 1/1 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

.aspect-ratio-16-9 img,
.aspect-ratio-4-3 img,
.aspect-ratio-1-1 img,
.ratio-16x9 img,
.ratio-4x3 img,
.ratio-1x1 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* === SPECIAL EFFECTS === */
.image-blur-load {
    filter: blur(5px) !important;
    opacity: 0.6 !important;
    transition: all 0.5s ease !important;
}

.image-blur-load.loaded {
    filter: blur(0) !important;
    opacity: 1 !important;
}

.image-zoom-on-hover:hover {
    transform: scale(1.1) !important;
    z-index: 10 !important;
}

.image-shadow-hover:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
}

/* === PRINT STYLES === */
@media print {
    img {
        max-width: 100% !important;
        page-break-inside: avoid !important;
        filter: none !important;
        transform: none !important;
    }
}