/*
 * 產品縮圖樣式
 * 處理產品頁面中縮圖和主圖的視覺效果
 */

/* 縮圖容器樣式 - 固定大小的遗罩 */
.product-thumbnails .col {
    height: 80px;
    overflow: hidden; /* 隱藏超出容器的內容 */
    position: relative; /* 為絕對定位做準備 */
    border: 2px solid transparent; /* 將邊框移動到容器上 */
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 0; /* 確保沒有內邊距 */
}

/* 縮圖圖片樣式 */
.product-thumb {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(0); /* 確保圖片從底部開始顯示 */
}

/* 懸停時的容器樣式 */
.product-thumbnails .col:hover {
    transform: scale(1.05); /* 簡單放大效果 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1; /* 確保懸停時容器顯示在最上層 */
}

/* 活動縮圖容器樣式 */
.product-thumbnails .col.active {
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1; /* 確保活動縮圖容器顯示在最上層 */
}

/* 主圖片樣式 */
#mainProductImage {
    transition: opacity 0.3s ease;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain; /* 保持原始比例 */
}