/* CLS (Cumulative Layout Shift) 修復樣式 - 針對行動版優化 */

/* 1. 為圖片設置固定尺寸和佔位符，防止載入時佈局偏移 */
@media (max-width: 767px) {
    /* 商品圖片容器固定高度 */
    .goods_details .gallery .cover img {
        width: 100% !important;
        height: 300px !important;
        object-fit: contain !important;
        background-color: #f8f8f8 !important;
    }
    
    /* 商品縮圖固定尺寸 */
    .goods_details .gallery .thumb img {
        width: 60px !important;
        height: 60px !important;
        object-fit: cover !important;
    }
    
    /* 商品列表圖片固定高度 */
    .goods_list .photo img {
        width: 100% !important;
        height: 125px !important;
        object-fit: cover !important;
    }
    
    /* 推薦商品圖片固定尺寸 */
    .thumbnail img {
        width: 100% !important;
        height: 150px !important;
        object-fit: cover !important;
        background-color: #f8f8f8 !important;
    }
    
    /* 2. 防止文字內容導致的佈局偏移 */
    .goods_details h1 {
        min-height: 60px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
    }
    
    .goods_brief {
        min-height: 40px !important;
        overflow: hidden !important;
    }
    
    /* 商品標題固定高度 */
    .thumbnail h3 {
        height: 45px !important;
        overflow: hidden !important;
        line-height: 1.2 !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    
    /* 3. 價格區域固定高度 */
    .goods_details .basic {
        min-height: 200px !important;
    }
    
    .price {
        min-height: 24px !important;
        display: inline-block !important;
        line-height: 1.4 !important;
    }
    
    .goods_details .price .market_price,
    .goods_details .price .shop_price {
        display: inline-block !important;
        min-width: 60px !important;
        min-height: 24px !important;
    }
    
    /* 4. 按鈕區域固定佈局 */
    .goods_details .actions {
        min-height: 120px !important;
        padding-top: 10px !important;
    }
    
    .goods_details .actions .btn {
        margin-bottom: 10px !important;
        min-height: 40px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 商品規格選擇器優化 */
    .goods_details .properties {
        margin-bottom: 15px !important;
    }
    
    .goods_details .properties dl {
        margin-bottom: 10px !important;
        min-height: 40px !important;
    }
    
    .goods_details .properties dt {
        min-height: 20px !important;
        margin-bottom: 5px !important;
    }
    
    .goods_details .properties dd {
        min-height: 30px !important;
    }
    
    /* 商品數量選擇器 */
    .goods_details .number {
        min-height: 40px !important;
        margin-bottom: 10px !important;
    }
    
    .goods_details .number input {
        min-height: 30px !important;
        width: 60px !important;
    }
    
    /* 5. 防止動態載入內容造成偏移 */
    .bought_goods {
        min-height: 200px !important;
    }
    
    .goods_attrlinked {
        min-height: 150px !important;
    }
    
    /* 6. 固定容器高度避免內容載入時跳動 */
    .goods_description {
        min-height: 100px !important;
    }
    
    /* 7. 評論區域預留空間 */
    .comments {
        min-height: 100px !important;
    }
    
    /* 商品列表頁面優化 */
    .goods_list .photo {
        min-height: 125px !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .goods_list .photo img {
        width: 100% !important;
        height: 125px !important;
        object-fit: cover !important;
        background-color: #f8f8f8 !important;
    }
    
    .goods_list .name {
        min-height: 40px !important;
        line-height: 1.3 !important;
        padding: 5px 0 !important;
    }
    
    .goods_list .price {
        min-height: 30px !important;
        padding: 5px 0 !important;
    }
    
    /* 縮圖優化 */
    .thumbnail {
        min-height: 150px !important;
        overflow: hidden !important;
    }
    
    .thumbnail img {
        width: 100% !important;
        height: 150px !important;
        object-fit: cover !important;
        background-color: #f8f8f8 !important;
    }
    
    /* 會員等級信息彈窗優化 */
    .rankDiscountInfo {
        position: absolute !important;
        z-index: 1000 !important;
        max-width: 90vw !important;
        background: white !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        padding: 10px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* 8. 圖片載入前的佔位符樣式 */
    img {
        background-color: #f0f0f0 !important;
        background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f0f0f0"/><text x="50" y="50" text-anchor="middle" dy=".3em" fill="%23999" font-family="Arial, sans-serif" font-size="12">載入中...</text></svg>') !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
    }
    
    /* 9. 防止字體載入造成的佈局偏移 */
    body {
        font-display: swap !important;
    }
    
    .fonts-loaded body {
        transition: font-family 0.3s ease !important;
    }
    
    /* 導航欄優化 */
    .navbar,
    .wsmenu {
        min-height: 50px !important;
    }
    
    .navbar-brand {
        min-height: 40px !important;
        display: inline-block !important;
    }
    
    /* 頁腳優化 */
    .footer {
        min-height: 100px !important;
    }
    
    /* 搜索框優化 */
    .search-form {
        min-height: 40px !important;
    }
    
    .search-form input {
        min-height: 30px !important;
    }
    
    /* 分頁導航優化 */
    .pagination {
        min-height: 40px !important;
        margin: 10px 0 !important;
    }
    
    /* 購物車圖標優化 */
    .cart-icon {
        min-width: 30px !important;
        min-height: 30px !important;
    }
    
    /* 麵包屑導航優化 */
    .breadcrumb {
        min-height: 30px !important;
        margin-bottom: 10px !important;
    }
    
    /* 側邊欄優化 */
    .sidebar {
        min-height: 200px !important;
    }
    
    /* 廣告橫幅優化 */
    .banner,
    .ad-banner {
        min-height: 100px !important;
        background-color: #f5f5f5 !important;
    }
    
    /* 載入動畫優化 */
    .loading-spinner {
        width: 40px !important;
        height: 40px !important;
        margin: 20px auto !important;
    }
    
    /* 表單元素優化 */
    .form-group {
        margin-bottom: 15px !important;
        min-height: 60px !important;
    }
    
    .form-control {
        min-height: 34px !important;
    }
    
    /* 標籤頁優化 */
    .nav-tabs {
        min-height: 42px !important;
    }
    
    .tab-content {
        min-height: 100px !important;
        padding-top: 15px !important;
    }
    
    /* 10. 固定導航欄高度 */
    .navbar-wrapper {
        height: 52px !important;
    }
    
    .main-header {
        margin-top: 52px !important;
        min-height: 80px !important;
    }
    
    /* 11. 商品規格選擇區域固定高度 */
    .properties {
        min-height: 80px !important;
    }
    
    .properties dl {
        margin-bottom: 10px !important;
    }
    
    /* 12. 數量選擇器固定尺寸 */
    .quantity {
        min-height: 50px !important;
    }
    
    .ui-number {
        height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    /* 13. 促銷信息區域固定高度 */
    .goods_promotion {
        min-height: 60px !important;
    }
    
    /* 14. 會員等級信息固定高度 */
    .checkRank {
        min-height: 40px !important;
    }
    
    .rankDiscountInfo {
        position: absolute !important;
        z-index: 1000 !important;
        width: 300px !important;
        max-width: 90vw !important;
    }
    
    /* 15. 載入動畫，減少視覺跳動 */
    .loading-placeholder {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
        background-size: 200% 100% !important;
        animation: loading 1.5s infinite !important;
    }
    
    @keyframes loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }
    
    /* 16. 確保所有圖片都有 aspect-ratio */
    .goods_details .gallery {
        aspect-ratio: 1 / 1 !important;
    }
    
    .thumbnail {
        aspect-ratio: 4 / 5 !important;
    }
    
    /* 17. 防止 JavaScript 載入前的佈局偏移 */
    .js-loading {
        visibility: hidden !important;
    }
    
    .js-loaded .js-loading {
        visibility: visible !important;
    }
}

/* 針對平板設備的優化 */
@media (min-width: 768px) and (max-width: 991px) {
    .goods_details .gallery .cover img {
        height: 400px !important;
        object-fit: contain !important;
    }
    
    .thumbnail img {
        height: 200px !important;
        object-fit: cover !important;
    }
}

/* 通用優化 - 適用於所有設備 */
/* 預載入關鍵字體 */
@font-face {
    font-family: 'system-ui';
    font-display: swap;
}

/* 確保圖片載入時不會造成佈局偏移 */
img[src=""], img:not([src]) {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

img[src]:not([src=""]) {
    opacity: 1 !important;
}

/* 為動態內容預留空間 */
.dynamic-content {
    min-height: 50px !important;
    transition: height 0.3s ease !important;
}

/* 確保所有容器都有最小高度 */
.box {
    min-height: 50px !important;
}

/* 優化載入狀態 */
.loading {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

.loaded {
    pointer-events: auto !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
}