/* 僅保留此產品內頁專屬且必備的新樣式，移除冗餘 CSS */
.product-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}
/* 更新：Slogan Banner 局部樣式 */
.slogan-banner {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    padding: 40px;
    border-radius: 30px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    text-align: left;
}
.slogan-text-content {
    flex: 1;
}
.slogan-banner h2 {
    color: #1a365d;
    font-size: 2.4rem; /* 略為放大，突出第一行 */
    margin: 0 0 16px 0; /* 增加下邊距，確保清晰分開第二行 */
    line-height: 1.2;
}
.slogan-banner h2::after {
    display: none; /* 移除主網站預設的標題裝飾底線 */
}
.slogan-banner p {
    font-size: 1.3rem; /* 調整第二行字型大小 */
    color: #4a5568;
    margin: 0;
    line-height: 1.4;
    text-align: center;
}
.slogan-image-container {
    flex: 0 0 350px;
    max-width: 100%;
    text-align: center;
}
.slogan-image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

/* 四階段卡片佈局 */
.stage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}
.stage-card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    border: 1px solid #f0f0f0;
}
.stage-card h3 {
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px dashed #e2e8f0;
}
.stage-1 { color: #2d3748; }
.stage-2 { color: #e02424; }
.stage-3 { color: #16a34a; }
.stage-4 { color: #b45309; }
/* 新增：階段圖卡圖片容器樣式 */
.stage-image-container {
    width: 100%;
    height: 220px;
    background-color: #f7fafc;
    border-radius: 15px;
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #edf2f7;
}
.stage-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 確保圖卡比例完整顯示不被裁切 */
}
.feature-block {
    margin-bottom: 12px;
}
.feature-block strong {
    color: #1a365d;
    display: inline-block;
    margin-bottom: 4px;
}

/* 核心區塊樣式 */
.theory-box {
    background-color: white;
    border-radius: 30px;
    padding: 40px;
    margin-bottom: 50px;
    box-shadow: var(--card-shadow);
}
.theory-item {
    margin-bottom: 25px;
}
.theory-item:last-child {
    margin-bottom: 0;
}
.theory-item h4 {
    font-size: 1.15rem;
    color: var(--secondary-color);
    margin-bottom: 8px;
    margin-top: 0;
}



.guide-box {
    background-color: white;
    border-radius: 30px;
    padding: 40px;
    box-shadow: var(--card-shadow);
    margin-bottom: 50px;
}
.guide-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}
.guide-step:last-child {
    margin-bottom: 0;
}
.step-number {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.step-content h4 {
    margin: 0 0 5px 0;
    color: #2d3748;
    font-size: 1.1rem;
}
.step-content p {
    margin: 0;
    color: #4a5568;
}
.intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px; /* 稍微拉大間距，讓呼吸感更強 */
    margin-bottom: 40px;
}
.intro-card {
    background: transparent; /* 改為透明背景 */
    padding: 0;              /* 移除內邊距 */
    border-radius: 0;
    box-shadow: none;        /* 拿掉陰影 */
    border: none;            /* 拿掉邊框 */
    text-align: left;        /* 改為靠左對齊，讀起來更流暢 */
}
.intro-card h3 {
    color: #1a365d;          /* 換成深藍色，呼叫 Banner 的高質感 */
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
}
.intro-card p {
    font-size: 0.95rem;
    color: #4a5568;
    margin: 0;
    line-height: 1.6;
}

/* 2. 優化下方獨立圖片展示欄：讓它成為視覺焦點 */
.feature-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;               /* 稍微加大空隙，與主網站方塊風格呼應 */
    margin-top: 20px;
    padding: 20px;
    background-color: #f7fafc; /* 給整組圖片一個淡淡的底色大方塊，收納零散的圖卡 */
    border-radius: 24px;
}
.feature-gallery.single {
    display: flex;
    flex-direction: row;
    grid-template-columns: repeat(1, 1fr);
    gap: 25px;               /* 稍微加大空隙，與主網站方塊風格呼應 */
    margin-top: 20px;
    padding: 20px;
    background-color: #f7fafc; /* 給整組圖片一個淡淡的底色大方塊，收納零散的圖卡 */
    border-radius: 24px;
    align-items: stretch; /* 讓左右兩側高度保持一致 */
}


.gallery-image-box {
    background: #c0daec;       /* 圖卡本身是純白底色 */
    border-radius: 16px;
    box-shadow: var(--card-shadow); /* 這裡才保留陰影，讓圖卡立體化 */
    border: 1px solid #edf2f7;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.gallery-image-box:hover {
    transform: translateY(-5px); /* 輕微的浮動動態，增加互動感 */
}
.gallery-image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px; 
}

.feature-gallery.single .gallery-image-box{
    background: #ffffff;       /* 圖卡本身是純白底色 */
    aspect-ratio: unset;
    display: block;
}
.feature-gallery.single .gallery-image-box img {
    padding: 0;
    padding-top: 25px;
}
/* 左邊大卡片：精準控制佔 40% 寬度（可依圖片比例調整 35%~45%） */
.feature-gallery.single .main-card {
    flex: 0 0 60% !important;       
    background-color: #f3f6f5;
    display: flex;
    flex-direction: column;
}

/* 🔥 重點修改：右邊群組佔餘下空間，並改為「單欄、由上而下」垂直排列 */
.feature-gallery.single .gallery-sub-group {
    flex: 1 !important;             
    display: grid !important;       
    grid-template-columns: 1fr !important; /* 改為單欄，讓子卡片自動由上而下堆疊 */
    gap: 15px;                      /* 卡片之間的上下間距 */
}

/* 右側子卡片：保持「上圖下字」的垂直排版 */
.feature-gallery.single .sub-card {
    background: white;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    border: 1px solid #edf2f7;
    display: flex !important;
    flex-direction: column !important; /* 確保內部元素是上下垂直排列 */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* 調整右側子卡片內的圖片尺寸與間距 */
.feature-gallery.single .sub-card img {
    width: auto;
    height: 90px;                  /* 適度放大圖片高度 */
    max-width: 100%;
    object-fit: contain;
}

/* 調整右側子卡片內的文字樣式，精準放在圖片下方 */
.feature-gallery.single .sub-card span {
    font-size: 1rem;
    font-weight: bold;
    color: #2d3748;
    margin: 12px 0 0 0;            /* 透過 margin-top 增加圖片與文字之間的距離 */
    display: block;
    text-align: center;
}


/*.floating-shop-btn {
    position: fixed;
    bottom: 30px;              
    right: 30px;               
    background-color: var(--secondary-color); 
    color: white;
    border: none;
    padding: 16px 28px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;       
    box-shadow: 0 6px 20px rgba(245, 166, 35, 0.4); 
    cursor: pointer;
    z-index: 9999;             
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease; 
}*/

/* 滑鼠移上去時的微動態特效 */
/*.floating-shop-btn:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(245, 166, 35, 0.6); 
    opacity: 0.95;
}*/

/* 點擊時的下壓反饋 */
/*.floating-shop-btn:active {
    transform: translateY(-2px);
}
*/
/* 覆蓋/加入到原本的 @media (max-width: 768px) 內 */
@media (max-width: 768px) {
    .slogan-banner { 
        flex-direction: column-reverse; /* 手機端圖片在上，文字在下 */
        text-align: center; 
        padding: 30px 20px;
    }
    .slogan-banner h2 { 
        font-size: 1.8rem; 
        margin: 0 0 12px 0; /* 手機端適度縮小兩行間距 */
    }
    .slogan-banner p { 
        font-size: 1.15rem; 
    }
    .slogan-image-container { 
        flex: initial; 
        width: 100%; 
        max-width: 260px; 
    }
    .stage-grid { grid-template-columns: 1fr; }
    .theory-box, .guide-box { padding: 25px; }
    .stage-image-container { height: 180px; }
    .intro-grid {
        grid-template-columns: 1fr; /* 手機端文字一行一行垂直排列 */
        gap: 25px;
    }
    .feature-gallery {
        grid-template-columns: none;       /* 取消網格多欄定義 */
        display: flex;                      /* 改為水平橫向排列 */
        overflow-x: auto;                   /* 開啟水平滾動條 */
        scroll-snap-type: x mandatory;      /* 開啟手機原生彈性吸附（一幅一幅卡住） */
        scroll-behavior: smooth;            /* 讓滑動更流暢 */
        gap: 20px;
        padding: 20px;
        margin-top: 20px;
        background-color: #f7fafc;
        border-radius: 24px;
        
        /* 隱藏滾動條（自由選擇，保留外觀純淨） */
        -webkit-overflow-scrolling: touch; /* 優化 iOS 滑動流暢度 */
    }
    
    /* 隱藏原生滾動條（可選） */
    .feature-gallery::-webkit-scrollbar {
        display: none; 
    }

    .gallery-image-box {
        flex: 0 0 85%;                      /* 每張卡片佔螢幕寬度的 85%，露出下一張的邊緣提示可滑動 */
        scroll-snap-align: center;          /* 滑動停止時，自動將卡片居中吸附 */
        aspect-ratio: 1 / 1;
        background: #c0dae;
        border-radius: 16px;
        box-shadow: var(--card-shadow);
        border: 1px solid #edf2f7;
    }
    
    .gallery-image-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 20px;                      /* 手機端稍微加寬內縮，讓識字卡看起來更精緻 */
    }
    .feature-gallery.single {
        flex-direction: column;    /* 手機螢幕太窄，全體自動變回垂直堆疊 */
        padding: 15px;
        gap: 15px;
    }
    .feature-gallery.single .main-card {
        width: 100% !important;
        flex: none !important;
        aspect-ratio: 1 / 1;
    }
    
    .feature-gallery.single .sub-card {
        padding: 15px;
    }

    .feature-gallery.single .sub-card img {
        height: 80px;
    }
}