/* ============================================================
   1. 全域文字與閱讀感優化
   ============================================================ */
html, body {
    font-family: 'Noto Sans TC', -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: #333333;
}

/* ============================================================
   2. 原有響應式寬度框架 (ibf01)
   ============================================================ */
@media (min-width: 576px)  { .ibf01 { max-width: 510px; } }
@media (min-width: 768px)  { .ibf01 { max-width: 690px; } }
@media (min-width: 992px)  { .ibf01 { max-width: 922px; } }
@media (min-width: 1200px) { .ibf01 { max-width: 1102px; } }
@media (min-width: 1400px) { .ibf01 { max-width: 1282px; } }

/* ============================================================
   3.  特定區塊與導覽列微調
   ============================================================ */
/* bKind-06 類別內的 h3 與 h6 文字 */
.bKind-06 .info h3 {
    text-shadow: 4px 4px 10px rgba(255, 255, 255, 0.6) !important;
    font-weight: 700 !important;
    color: #FF1D7B !important;
}

.bKind-06 .info h6 {
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.6) !important;
    font-weight: 500 !important;
}

/* 強制撐開捲動後的容器高度 */
header.sticky, 
.site-header.fixed-top, 
.is-sticky header,
.header-scrolled {
    height: auto !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Logo 容器增加內部呼吸空間 */
header.sticky .logo, 
header.sticky .header-logo,
.fixed-top .logo {
    display: block !important;
    padding: 5px 0 !important;
}

/* 確保 Logo 圖片尺寸適中且不貼邊 */
header.sticky .logo img, 
header.sticky .header-logo img,
.fixed-top .header-logo img {
    max-height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* 同步修正捲動後的選單文字垂直居中 */
header.sticky .nav-link, 
header.sticky .menu-item a {
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* 導覽列功能隱藏 (購物車與幣值) */
li.lang, li.cart, .header-right .cart, .header-right .lang {
    display: none !important;
}

/* 一般狀態 Logo 尺寸控制 */
.header-logo img, .logo img {
    height: auto !important;
    max-height: 55px !important;
    margin: 0 !important;
}

/* ============================================================
   4. 內頁輪播圖取消強制比例讓圖寬100%
   ============================================================ */
.pageSwiper {
    aspect-ratio: unset !important;
    width: 100%;
    height: auto !important;
}

.pageSwiper .swiper-slide {
    width: 100%;
    height: auto !important;
}

.pageSwiper .swiper-slide img {
    width: 100%;
    height: auto !important;
    display: block;
    object-fit: unset !important;
}

/* ============================================================
   5. 響應式裝置 (手機與平板 max-width: 991px) 整合設定
   ============================================================ */
@media (max-width: 991px) {
    /* Header 微調 */
    header, .site-header {
        padding-top: 0px !important;
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
    }

    .header-logo img, .logo img {
        max-height: 40px !important;
    }  

    /* 隱藏購物車與數量標籤 */
    .nbar .btn-outline-main, 
    .nbar .badge,
    .btn-group a:has(.bi-cart3) {
        display: none !important;
    }

    /* 漢堡選單全圓角化 (消除右側直角) */
    .btn-group > .btn-main.btn,
    .btn-group > .btn-main {
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
        margin-right: 0 !important; 
    }

    /* 修正父容器，確保圓角不會被裁切 */
    .btn-group {
        filter: none !important;
        border-radius: 8px !important;
    }
}

/* ============================================================
   6.  圖文特色區塊手機版置中 (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
    section.suit .iia .col-md-3 {
        text-align: center !important;
    }

    section.suit .iia .col-md-3 ul {
        padding-left: 0 !important;
        list-style-position: inside;
    }
}