/* 產品詳細區塊樣式 */
/* 調整水平方向的內邊距和最大寬度 */
.product-detail-container {
    background-color: #fff;
    border-radius: 8px;
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
    margin: 20px auto; /* 改為水平居中 */
    padding: 20px 38px; /* 上下20px，左右38px */
    position: relative;
    max-width: 1640px; /* 設置最大寬度為1440px */
    width: 100%;
    scroll-margin-top: 20px; /* 為錨點滾動添加頂部邊距 */
}

/* 為頁面標題添加錨點滾動相關樣式 */
.innertitle {
    scroll-margin-top: 20px;
    position: relative;
}

/* 添加視覺指示，在跳轉後突出顯示標題 */
.innertitle.highlight-title {
    animation: highlight-fade 1s ease-out;
}

@keyframes highlight-fade {
    0% { background-color: rgba(6, 114, 67, 0.2); }
    100% { background-color: transparent; }
}

/* 特別處理 ID 為 page-title 的元素，使其成為良好的錨點目標 */
#page-title {
    scroll-margin-top: 30px; /* 提供足夠的頂部邊距，避免被固定導航欄遮擋 */
    /*padding-top*/: 80px; /* 增加上方內邊距，提供更好的視覺間距 */
    padding-bottom: 5px; /* 增加下方內邊距，提供更好的視覺效果 */
}

/* iOS的特殊視口高度處理 */
:root {
    --vh: 1vh;
}

html.ios-device {
    height: 100%;
}

html.ios-device body {
    min-height: 100vh; /* 使用視口高度作為最小高度 */
    min-height: calc(var(--vh, 1vh) * 100); /* 使用CSS變量作為備用 */
    position: relative;
}

.product-detail-content {
    max-width: 100%;
}

.product-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

    .product-detail-header h2 {
        margin: 0;
        font-size: 1.5rem;
        color: #333;
    }

.close-detail-btn {
    font-size: 1.25rem;
    color: #777;
    cursor: pointer;
    padding: 5px;
}

    .close-detail-btn:hover {
        color: #333;
    }

/* 產品圖片容器 - 桌面版 */
.product-image-container {
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

/* 響應式設計 - 手機版 */
@media screen and (max-width: 768px) {
    .product-image-container {
        width: 400px;
        height: 400px;
    }

    .product-detail-container {
        padding: 15px;
        margin-top: 15px; /* 減少頂部邊距 */
        scroll-margin-top: 10px; /* 為錨點滾動添加較小頂部邊距 */
    }
    
    /* 提高產品詳情區塊的可見性和加強邊界 */
    #product-detail {
        border-top: 2px solid #eaeaea;
        position: relative;
    }
    
    /* 添加明顯的視覺指示 */
    #product-detail:before {
        content: '';
        height: 2px;
        background-color: #067243; /* 使用網站主色調 */
        width: 60%;
        position: absolute;
        top: -2px;
        left: 20%;
    }
    
    /* 手機版錨點定位調整 */
    #page-title {
        scroll-margin-top: 20px; /* 手機版使用較小的頂部邊距 */
    }
    
    /* 為手機上的導航提供更好的視覺引導 */
    .innertitle.highlight-title {
        padding: 5px;
        border-radius: 4px;
    }
}

/* iOS設備特殊處理 */
html.ios-device #page-title {
    scroll-margin-top: 0; /* iOS上重置scroll-margin，使用JS來處理滾動位置 */
    /*padding-top: 10px;*/ /* 增加上方內邊距，提供更好的iOS視覺空間 */
    padding-bottom: 10px; /* 增加下方內邊距，提供更好的iOS視覺效果 */
}

/* 小型設備適配 */
@media screen and (max-width: 480px) {
    .product-image-container {
        width: 100%; /* 全寬顯示 */
        max-width: 400px; /* 最大寬度限制 */
        height: auto;
        aspect-ratio: 1/1; /* 保持正方形比例 */
    }
    
    /* 小型設備上進一步優化錨點目標 */
    #page-title {
        scroll-margin-top: 15px;
    }
}

/* 產品主圖片樣式 */
.main-product-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保持原始比例且完整顯示 */
}

/* 圖片縮略圖區域樣式 */
.innerspace .prodetail .box1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
}

.thumbnail {
    width: 60px;
    height: 60px;
    margin: 5px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

    .thumbnail.active {
        border-color: #ff6600;
    }

    .thumbnail img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* 調整產品列表中的box1和box2 padding一致 */
.oneset .onesetin .box1,
.oneset .onesetin .box2 {
    padding: 8px 10px; /* 設置統一的padding */
}

/* 主選單 - 水平滑動 */
.innermenu {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* 平滑滑動效果 (iOS) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 和 Edge */
    position: relative;
}

    .innermenu::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

.innermenuslick {
    display: inline-flex;
    white-space: nowrap;
    transition: transform 0.3s ease;
}

    .innermenuslick li {
        display: inline-block;
        white-space: nowrap;
    }

/* 次選單 - 水平滑動 */
.innersubout {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* 平滑滑動效果 (iOS) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 和 Edge */
    position: relative;
}

    .innersubout::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

.innersubtitle {
    display: inline-flex;
    white-space: nowrap;
    transition: transform 0.3s ease;
}

    .innersubtitle li {
        display: inline-block;
        white-space: nowrap;
    }

    /* 增加觸摸滑動指示 */
.innermenu:after, .innersubout:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.7));
    pointer-events: none;
    opacity: 0.8;
}

/* 讓選單項目有適當間距 */
.innermenuslick li a, .innersubtitle li a {
    padding: 8px 15px;
    display: inline-block;
}

    /* 活動項目樣式 */
    .innermenuslick li a.active, .innersubtitle li a.active {
        color: #067243;
        font-weight: bold;
    }

.page_box .page_num {
    font-size: 16px;
}

/* 在小螢幕裝置上顯示滑動提示 */
@media (max-width: 768px) {
    .innermenu:after, .innersubout:after {
        opacity: 1;
    }
    
    .product-detail-container {
        padding: 15px;
    }
}

/* 調整產品詳情頁面中的box1和box2 padding一致 */
.prodetail .box1,
.prodetail .box2 {
    padding: 15px; /* 設置統一的padding */
}

/* 一般桌面版布局 - 水平排列 */
@media screen and (min-width: 769px) {
    .prodetail {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        width: 100%;
        gap: 20px; /* 添加間距避免元素靠太近 */
    }

    .prodetail .box1,
    .prodetail .box2 {
        word-break: break-word;
        overflow-wrap: break-word;
        overflow: hidden; /* 防止內容溢出 */
        min-width: 0; /* 允許flex項目收縮到小於其內容大小 */
        box-sizing: border-box; /* 確保padding不會影響總寬度 */
    }

    .prodetail .box1 {
        flex: 0 0 40%; /* 固定比例，不允許增長或收縮 */
        width: 40%;
        max-width: 40%;
    }

    .prodetail .box2 {
        flex: 0 0 60%; /* 固定比例，不允許增長或收縮 */
        width: 60%;
        max-width: 60%;
    }

    /* 確保產品圖片容器在所有縮放級別都有固定比例 */
    .product-image-container {
        max-width: 100%;
        height: auto;
        aspect-ratio: 1/1; /* 保持正方形比例 */
    }
}

/* 專門針對250%縮放率的處理 - 判斷設備像素比和視窗寬度 */
@media screen and (min-width: 600px) and (max-width: 800px) and (min-resolution: 2.5dppx) {
    .prodetail {
        flex-direction: column !important; /* 強制垂直布局 */
        gap: 20px;
    }

    .prodetail .box1,
    .prodetail .box2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    
    /* 確保圖片容器適應寬度 */
    .product-image-container {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* 在中等屏幕上優化布局 */
@media screen and (max-width: 992px) and (min-width: 769px) {
    /* 保持水平布局，但調整比例 */
    .prodetail .box1 {
        flex: 0 0 40%;
        max-width: 40%;
        width: 40%;
    }
    
    .prodetail .box2 {
        flex: 0 0 60%;
        max-width: 60%;
        width: 60%;
    }
}

/* 小屏幕時讓元素完全堆疊顯示 */
@media screen and (max-width: 768px) {
    .prodetail {
        flex-direction: column;
    }
    
    .prodetail .box1,
    .prodetail .box2 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* 使用更具體的選擇器，提高特異性 */
html body .innersec .wrapper .ipboxs .onesetin .pic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

html body .innersec .wrapper .ipboxs .onesetin .photo {
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

html body .innersec .wrapper .ipboxs .onesetin .photo img {
    width: 240px;
    height: 240px;
    object-fit: cover;
}

/* 手機版樣式 */
@media (max-width: 767px) {
    html body .innersec .wrapper .ipboxs .onesetin .pic {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    html body .innersec .wrapper .ipboxs .onesetin .photo {
        width: 260px;
        height: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    
    html body .innersec .wrapper .ipboxs .onesetin .photo img {
        width: 240px;
        height: 240px;
        object-fit: cover;
    }
}

/* 修復錨點跳轉在iOS設備上的問題 */
@media (max-width: 768px) {
    /* iOS Safari的特殊處理 */
    html.ios-device #product-detail,
    html.ios-device #page-title {
        -webkit-overflow-scrolling: touch;
    }
    
    /* 增加間隔以改善可視性 */
    .product-detail-container {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}