/**
 * 原生 Lazy Loading 樣式
 * 
 * 使用瀏覽器原生的 loading="lazy" 屬性
 * 加上簡單的淡入效果，提升使用者體驗
 * 
 * 重要原則：
 * 1. 只對商品圖片套用淡入效果
 * 2. 首屏內容（輪播、LOGO、選單、橫幅）不使用 lazy loading
 * 3. 不干擾 Swiper 輪播的運作
 * 
 * @package Tixteel
 * @since 1.7.2
 */

/* ========================================
   商品圖片 Lazy Loading（精確選擇器）
   ======================================== */

/* 
 * 只針對商品圖片套用 lazy loading 效果
 * 使用精確的類別選擇器，避免影響其他圖片
 */

/* 商品圖片預設狀態 */
.proIMG[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
    background-color: #f5f5f5;
    min-height: 50px;
}

/* 商品圖片載入完成 */
.proIMG[loading="lazy"].loaded {
    opacity: 1;
}

/* 精選產品列表的圖片 */
.indexProList img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
    min-height: 100px;
}

.indexProList img[loading="lazy"].loaded {
    opacity: 1;
}

/* 相關商品的圖片 */
.guessLike img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
    min-height: 100px;
}

.guessLike img[loading="lazy"].loaded {
    opacity: 1;
}



/* ========================================
   排除規則（確保不影響首屏內容）
   ======================================== */

/* 
 * 首頁輪播、活動橫幅、LOGO 等首屏內容
 * 不應該有 loading="lazy" 屬性
 * 這裡只是保險措施，確保即使誤加了也不會影響顯示
 */

.indexSlide img,
.indexBoxLine img,
.custom-logo,
#navigation img {
    opacity: 1 !important;
}

/* ========================================
   背景圖片載入效果
   ======================================== */

.bg-image {
    background-color: #f5f5f5;
    background-size: cover;
    background-position: center;
    transition: opacity 0.3s ease-in;
}

.bg-image.loading {
    opacity: 0.3;
}

.bg-image.loaded {
    opacity: 1;
}

/* ========================================
   響應式圖片容器
   ======================================== */

.image-container {
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
}

.image-container::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 比例 */
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}