@charset "UTF-8";

:root {
    --deep-blue: #002366;
    --purple-accent: #6f42c1;
    --purple-hover: #5a32a3;
    --text-black: #1a1a1a;
    --bg-light: #fbfbfd;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --logo_color: #644f9c;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    color: var(--text-black);
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* --- 1. 導覽列與側邊欄 --- */
.navbar {
    padding: 0.8rem 0;
    background: #fff;
    /* 加深陰影，營造浮在空中的感覺 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid #eee;

    /* 確保層級最高，壓在 Category 上 */
    z-index: 1030 !important;

    /* [關鍵修正] 開啟硬體加速，解決手機版捲動抖動 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.navbar-brand {
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--logo_color) !important;
}

.logo_img {
    height: 75px;
    width: auto;
}


/* 電腦版選單：滑入自動展開 */
@media (min-width: 1200px) {
    .nav-link {
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        padding: 0.5rem 12px !important;
        color: var(--text-black) !important;
    }

    .nav-item.dropdown:hover>.dropdown-menu {
        display: block;
        margin-top: 0;
    }

    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        display: none;
        margin-top: -5px;
    }

    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }

    .dropdown-submenu>.dropdown-item::after {
        content: "\f054";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        float: right;
        font-size: 0.6rem;
        margin-top: 0.2rem;
    }

    .logo_img {
        height: 75px !important;
    }

    .navbar_padding {
        padding: 5px !important;
    }

    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: calc(100% - 5px);
        /* 修改這裡：讓子選單向左交疊 5px */
        display: none;
        margin-top: -5px;
    }
}

/* 手機版側邊欄 (Offcanvas) */
.offcanvas {
    width: 320px !important;
    border-left: 5px solid var(--purple-accent);
}

.offcanvas-title {
    color: var(--logo_color);
    font-weight: 700;
}

.mobile-menu-item {
    border-bottom: 1px solid #eee;
}

.mobile-link {
    display: block;
    padding: 12px 15px;
    color: var(--text-black);
    text-decoration: none;
    font-weight: 600;
}

.mobile-submenu {
    background: #f9f9f9;
    padding-left: 10px;
}

.mobile-sub-link {
    display: block;
    padding: 10px 15px;
    color: #444;
    text-decoration: none;
    font-size: 0.85rem;
    border-bottom: 1px solid #eee;
}

/* --- 2. 輪播圖 (Carousel) 修正 --- */
.carousel-item {
    height: 70vh;
    min-height: 500px;
    background-color: #000;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

.carousel-caption {
    top: 50%;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 85%;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    padding: 0;
    text-align: center;
}

.carousel-caption h2 {
    font-size: 3.8rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.9);
    margin-bottom: 1rem;
}

.carousel-caption p {
    font-size: 1.35rem;
    color: #fff;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
    .carousel-item {
        height: 40vh !important;
        min-height: 250px !important;
    }

    .carousel-caption h2 {
        font-size: 1.6rem !important;
    }

    .carousel-caption p {
        font-size: 0.85rem !important;
    }

    .section-padding {
        padding: 60px 0 !important;
    }

    /*.logo_img { height: 50px !important;}*/
    .navbar_padding {
        padding: 5px !important;
    }

    .navbar-brand div span:first-child {
        font-size: 1rem !important;
        /* 手機版第一行字縮小 */
    }

    .navbar-brand div span:last-child {
        font-size: 0.7rem !important;
        /* 手機版第二行字縮小 */
    }

    .logo_img {
        height: 50px !important;
    }

}

/* --- 3. 區塊樣式 --- */
.section-padding {
    padding: 100px 0;
}

.feature-card {
    padding: 3rem 2rem;
    background: #fff;
    border: 1px solid #f1f1f1;
    transition: var(--transition);
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-bottom: 4px solid var(--purple-accent);
}

.dropdown-menu {
    border: none;
    border-top: 4px solid var(--purple-accent);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
    font-size: 0.85rem;
    min-width: 250px;
    padding: 10px 20px;
}

/*.notify-bar { background: linear-gradient(135deg, var(--deep-blue) 0%, #2a0a52 100%); color: white; padding: 60px 0; }*/
.notify-bar {
    background: linear-gradient(135deg, var(--logo_color) 0%, #2a0a52 100%);
    color: white;
    padding: 60px 0;
}

.form-control {
    border-radius: 0;
    padding: 12px;
}

.btn-primary {
    background: var(--deep-blue);
    border: none;
    padding: 15px 40px;
    border-radius: 0;
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--purple-accent);
}

/* --- 4. 選單優化：電腦版交疊與紫色 Bar 邏輯 --- */

/* [電腦版] 子選單向左交疊 5px */
@media (min-width: 1200px) {
    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: calc(100% - 5px) !important;
        margin-top: -5px;
    }
}

/* [共通] 建立紫色 Bar 偽元素 (適用於 dropdown-item 與手機版項目) */
.dropdown-item,
.mobile-link,
.mobile-sub-link {
    position: relative;
    padding-left: 35px !important;
    /* 統一間距 */
    transition: var(--transition);
}

.dropdown-item::before,
.mobile-link::before,
.mobile-sub-link::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background-color: var(--purple-accent);
    transition: height 0.3s ease;
}

/* [電腦版] 滑過顯示 Bar 且保持父層文字紫色 */
.dropdown-item:hover::before,
.dropdown-submenu:hover>.dropdown-item::before {
    height: 70%;
}

.dropdown-submenu:hover>.dropdown-item {
    color: var(--purple-accent) !important;
}

/* [手機版] 第一層：展開時顯示 Bar */
.mobile-link[aria-expanded="true"]::before {
    height: 20px;
}

.mobile-link[aria-expanded="true"] {
    color: var(--purple-accent) !important;
}

/* [手機版] 第二層：點擊/選中時顯示紫色 Bar */
.mobile-sub-link:active::before,
.mobile-sub-link:focus::before {
    height: 15px;
}

.mobile-sub-link:active,
.mobile-sub-link:focus {
    color: var(--purple-accent) !important;
    background-color: rgba(111, 66, 193, 0.05);
    outline: none;
}

/* --- 5. 新聞區塊樣式 (NEWS Section) --- */
.news-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    transition: var(--transition);
    height: 100%;
    cursor: pointer;
}

.news-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.news-img-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.news-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-img-wrapper img {
    transform: scale(1.1);
}

.news-content {
    padding: 1.5rem;
}

.news-date {
    font-size: 0.8rem;
    color: var(--purple-accent);
    font-weight: 600;
    margin-bottom: 0.8rem;
    display: block;
}

.news-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--deep-blue);
    line-height: 1.4;
    margin-bottom: 0.8rem;
    /* 限制標題為兩行，超出顯示省略號 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
    /* 限制內文為三行 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-outline-dark:hover {
    background-color: var(--deep-blue);
    border-color: var(--deep-blue);
    color: #fff;
}

/* 搜尋框微調 */
.navbar .form-control:focus {
    border-color: var(--purple-accent);
    box-shadow: none;
}

.navbar .input-group {
    width: 200px;
    /* 電腦版寬度 */
}

@media (max-width: 1199px) {

    /* 手機版隱藏導覽列內的搜尋，改放在 Offcanvas 側邊欄中 */
    .navbar .ms-xl-3 {
        display: none;
    }
}

/* =========================================
        [新增] 搜尋框樣式
        ========================================= */
.ypy-search-form .input-group {
    /* 關鍵：設定常駐的紫色邊框和圓角 */
    border: 2px solid var(--purple-accent);
    border-radius: 50rem;
    /* 製作膠囊狀圓角 */
    overflow: hidden;
    /* 確保內部元素不超出圓角 */
    background-color: #fff;
    /* 背景白色 */
    transition: all 0.3s ease;
    /* 為了讓電腦版不要太寬，手機版自動滿版，設定一個最大寬度 */
    max-width: 100%;
    width: 240px;
    /* 電腦版預設寬度，可自行調整 */
}

/* 修正手機版寬度 */
@media (max-width: 1199px) {
    .ypy-search-form .input-group {
        width: 100%;
        /* 手機版佔滿 */
    }

    /* 手機版增加一點下方距離 */
    .offcanvas-body .ypy-search-form {
        margin-bottom: 1.5rem;
    }
}

/* 移除 Bootstrap 預設的輸入框邊框和聚焦陰影 */
.ypy-search-form .form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    padding-left: 1.2rem;
    /* 增加左側內距讓文字不貼邊 */
    height: auto;
    /* 自動高度 */
}

/* 移除按鈕邊框並設定圖示顏色 */
.ypy-search-form .btn-search {
    border: none !important;
    background: transparent;
    color: var(--purple-accent);
    /* 圖示紫色 */
    padding-right: 1.2rem;
    /* 增加右側內距 */
    display: flex;
    align-items: center;
}

/* 滑鼠移過按鈕時變深色，增加互動感 (可選) */
.ypy-search-form .btn-search:hover {
    color: var(--deep-blue);
}

/* 針對小螢幕手機的修正 */
@media screen and (max-width: 414px) {

    /* 這裡假設你的藍色勾勾列表有一個特定的容器，或者直接針對段落 */
    /* 下面的 .paragraph 需替換為該文字實際的 class 或 ID */
    .paragraph {
        font-size: 14px !important;
        /* 強制縮小字體 */
        letter-spacing: 0px;
        /* 稍微縮小字元間距 */
    }

    /* 或者，如果是用列表製作的，嘗試減少圖示與文字的距離 */
    ul li {
        padding-left: 0px !important;
        /* 減少內距爭取空間 */
    }
}


/* =========================================
           2. 內頁特定樣式
========================================= */
.page-banner {
    position: relative;
    height: 350px;
    /*background-image: url('https://placehold.co/1920x350/efefef/ffffff?text=Background');*/
    /*background-image: var(--page-banner-img);*/
    /*background: var(--page-banner-bg) center center / cover no-repeat;*/
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
}

.page-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: rgba(0, 35, 102, 0.6);*/
    /*background: rgb(255, 255, 255);*/
}

.banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.banner-title {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}

.breadcrumb-custom .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
}

.breadcrumb-custom .breadcrumb-item.active {
    color: #fff;
    font-weight: 600;
}

.breadcrumb-custom .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
}

/* Sidebar Styles (Desktop) */
.sidebar-category {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}

.sidebar-header {
    background-color: var(--logo_color);
    color: #fff;
    padding: 15px 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cat-item {
    border-bottom: 1px solid #f5f5f5;
}

.cat-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    color: var(--text-black);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    font-size: 0.95rem;
}

.cat-link:hover,
.cat-link.active {
    background-color: var(--bg-light);
    color: var(--purple-accent);
    padding-left: 25px;
}

.cat-link.active {
    border-left: 4px solid var(--purple-accent);
    font-weight: 700;
}

.cat-link-back {
    background-color: #f8f9fa;
    color: #666;
    font-size: 0.85rem;
    font-weight: 600;
}

.cat-link-back:hover {
    color: var(--deep-blue);
}

/* Product Card */
.product-card {
    border: 1px solid #eee;
    background: #fff;
    transition: var(--transition);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--purple-accent);
}

.product-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 12;
    overflow: hidden;
    background-color: #f8f9fa;
    position: relative;
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.08);
}

.product-body {
    padding: 1.2rem;
    text-align: left;
}

.product-cat-tag {
    font-size: 0.75rem;
    color: var(--purple-accent);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 0.3rem;
}

.product-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--deep-blue);
    margin-bottom: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.view-btn {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
}

.product-card:hover .view-btn {
    color: var(--deep-blue);
    border-bottom-color: var(--deep-blue);
}

/* Pagination */
.pagination .page-link {
    border: 1px solid #eee;
    color: var(--text-black);
    padding: 0.6rem 1rem;
    margin: 0 3px;
    border-radius: 4px;
    font-weight: 500;
}

.pagination .page-link:hover {
    background-color: #eee;
    color: var(--deep-blue);
}

.pagination .page-item.active .page-link {
    background-color: var(--purple-accent);
    border-color: var(--purple-accent);
    color: #fff;
}

@media (max-width: 991px) {
    .page-banner {
        height: 200px;
    }

    .banner-title {
        font-size: 2rem;
    }

    .sidebar-category {
        margin-bottom: 2rem;
    }
}

/* =========================================
 Mobile Sticky Dropdown & GoTop
========================================= */
/* 修改 .mobile-cat-sticky */
.mobile-cat-sticky {
    /* 層級比 Navbar 低，讓陰影可以蓋在它上面 */
    z-index: 1020;

    /* [微調] 根據手機版 Navbar 實際高度設定，避免產生縫隙或重疊 */
    top: 77px;

    border-bottom: 1px solid #eee;
    background-color: #fafafa;
    /* 稍微灰一點的背景，對比更明顯 */

    /* [關鍵修正] 開啟硬體加速，解決手機版捲動抖動 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: top 0.3s;
    /* 讓定位變化更滑順 */
}

.mobile-cat-btn {
    background-color: #fff;
    color: var(--deep-blue);
    font-weight: 700;
    border: none;
    border-left: 5px solid var(--purple-accent);
    border-radius: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.mobile-cat-btn:hover,
.mobile-cat-btn:focus,
.mobile-cat-btn:active {
    background-color: #f9f9f9 !important;
    color: var(--purple-accent) !important;
}

/* Dropdown Active Style Fixed */
.mobile-cat-sticky .dropdown-item.active,
.mobile-cat-sticky .dropdown-item:active {
    background-color: #f1ecff !important;
    color: var(--purple-accent) !important;
    font-weight: 700;
}

.mobile-cat-sticky .dropdown-item:hover {
    background-color: #fbfbfd;
    color: var(--purple-accent);
}

/* Go To Top */
.go-top-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background-color: var(--purple-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    cursor: pointer;
}

.go-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.go-top-btn:hover {
    background-color: var(--deep-blue);
    transform: translateY(-5px);
}

@media (max-width: 768px) {
    .mobile-cat-sticky {
        top: 60px;
    }
}

/* =========================================
           2. 簡潔版麵包屑 (手機版極簡化修正)
           ========================================= */
.breadcrumb-wrapper {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 12px 0;
    width: 100%;
    z-index: 1020;
    transition: top 0.3s ease;
}

.breadcrumb-item {
    display: inline-flex !important;
    align-items: center;
}

.breadcrumb-item a {
    color: #666;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
}

.breadcrumb-item a:hover {
    /*color: var(--purple-accent);*/
    color: #f0f0f0;
    text-shadow: 1px 1px 8px #661387 !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "\\";
    color: #ccc;
    display: flex;
    align-items: center;
    padding-top: 1px;
}

.breadcrumb-item.active {
    color: var(--deep-blue);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    line-height: 1;
}

/* [強烈調整] 手機版樣式：更緊湊 */
@media (max-width: 991px) {
    .breadcrumb-wrapper {
        position: sticky;
        top: 60px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 6px 0 !important;
        /* 強制縮小上下高度 */
    }

    .breadcrumb-item a,
    .breadcrumb-item.active {
        font-size: 0.7rem !important;
        /* 字體再縮小一點 */
    }

    /* 修正手機版麵包屑與內容的距離 */
    .breadcrumb-wrapper+section {
        margin-top: 0px;
    }

    .section-mobile-spacing {
        padding-top: 3rem !important;
        /* 加大上方空間 */
        margin-top: 1rem;
    }
}

/* =========================================
           3. 產品詳情頁特定樣式
           ========================================= */

/* 圖片區域 */
.product-gallery-main {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    position: relative;
    background-color: #f8f9fa;
}

.product-gallery-main img {
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 4/3;
    transition: transform 0.3s ease;
}

.product-gallery-main:hover img {
    transform: scale(1.02);
}

.product-gallery-main .zoom-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px;
    border-radius: 50%;
    color: var(--deep-blue);
    pointer-events: none;
}

/* 縮圖區域 */
.thumbnail-list {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 5px;
}

.thumbnail-item {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.6;
    transition: var(--transition);
}

.thumbnail-item.active,
.thumbnail-item:hover {
    opacity: 1;
    border-color: var(--purple-accent);
    box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.2);
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 產品資訊區域 */
.product-info-title {
    color: var(--logo_color);
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.product-meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.product-features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.product-features-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 0.8rem;
    font-size: 1rem;
    color: var(--text-black);
}

.product-features-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--purple-accent);
}

/* 分頁籤 Tabs */
.custom-tabs .nav-link {
    color: #555;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 1rem 1.5rem;
    background: transparent;
}

.custom-tabs .nav-link:hover {
    color: var(--purple-accent);
}

.custom-tabs .nav-link.active {
    color: var(--purple-accent);
    border-bottom-color: var(--purple-accent);
    background: transparent;
}

.tab-content {
    background: #fff;
    padding: 2rem 0;
    line-height: 1.8;
    color: #444;
}

.spec-table th {
    background-color: #f8f9fa;
    width: 30%;
    color: var(--deep-blue);
}

/* 相關產品 (繼承 Card 樣式) */
.product-card {
    border: 1px solid #eee;
    background: #fff;
    transition: var(--transition);
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--purple-accent);
}

.product-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 12;
    overflow: hidden;
    background-color: #f8f9fa;
    position: relative;
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.08);
}

.product-body {
    padding: 1.2rem;
    text-align: left;
}

.product-cat-tag {
    font-size: 0.75rem;
    color: var(--purple-accent);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 0.3rem;
}

.product-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--deep-blue);
    margin-bottom: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.view-btn {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
}

.product-card:hover .view-btn {
    color: var(--deep-blue);
    border-bottom-color: var(--deep-blue);
}

/* =========================================
           4. 相關產品左右滑動 (Horizontal Scroll)
           ========================================= */
.related-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    /* 強制不換行 */
    overflow-x: auto;
    /* 超出範圍時顯示水平捲軸 */
    gap: 1rem;
    /* 卡片間距 */
    padding-bottom: 1rem;
    /* 預留底部空間給捲軸 */
    -webkit-overflow-scrolling: touch;
    /* 讓 iOS 滑動更順暢 */
    scroll-behavior: smooth;
}

/* 自訂捲軸樣式 */
.related-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.related-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.related-scroll-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.related-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--purple-accent);
}

/* 設定滑動項目寬度 */
.related-item {
    flex: 0 0 240px;
    /* 電腦版每張卡片寬 240px */
    max-width: 240px;
}

@media (max-width: 768px) {
    .related-item {
        flex: 0 0 180px;
        /* 手機版稍微縮小，寬 180px */
        max-width: 180px;
    }

    .related-item .product-title {
        font-size: 0.95rem;
    }

    .related-item .product-body {
        padding: 1rem;
    }
}

/* 聯絡表單 Section */
.contact-section-box {
    background-color: var(--bg-light);
    border-radius: 10px;
    padding: 3rem;
    border: 1px solid #eee;
}

.form-control-custom {
    border: 1px solid #ddd;
    padding: 0.8rem 1rem;
    border-radius: 4px;
}

.form-control-custom:focus {
    border-color: var(--purple-accent);
    box-shadow: 0 0 0 4px rgba(111, 66, 193, 0.1);
}

/* Go To Top */
.go-top-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background-color: var(--purple-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    cursor: pointer;
}

.go-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.go-top-btn:hover {
    background-color: var(--deep-blue);
    transform: translateY(-5px);
}


/* =========================================
           4. Swiper 輪播樣式 (修正 Hover 被切掉的問題)
           ========================================= */
.swiper {
    width: 100%;
    /* [關鍵修正] 增加上方內距 (20px)，讓卡片上浮時有空間，不會被切掉 */
    padding-top: 20px !important;

    /* [關鍵修正] 增加左右內距 (10px)，避免卡片左右陰影被切掉 */
    padding-left: 10px !important;
    padding-right: 10px !important;

    /* 底部預留空間給圓點 */
    padding-bottom: 40px !important;
}

/* 確保 Slide 不會因為 Padding 跑版，通常不需要額外設定，但保險起見 */
.swiper-slide {
    height: auto;
}

/* 自訂 Swiper 圓點顏色 (品牌紫) */
:root {
    --swiper-theme-color: #6f42c1;
    --swiper-pagination-bullet-inactive-color: #999;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}

.swiper-pagination-bullet-active {
    background: var(--purple-accent) !important;
}

/* 自訂 Swiper 箭頭顏色 */
.swiper-button-next,
.swiper-button-prev {
    color: var(--purple-accent);
}

/* 避免箭頭在手機版太大或擋住內容，可以視情況縮小 */
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px;
    font-weight: bold;
}

/* =========================================
        修正 Swiper 箭頭圖示 (強制使用 FontAwesome)
        這能確保手機版與電腦版圖示方向絕對正確
        ========================================= */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    border-radius: 50%;
    /* 選用：加點圓角背景讓它更明顯 */
}

/* 強制指定：Next 按鈕顯示「右箭頭」 */
.swiper-button-next::after {
    content: "\f054" !important;
    /* FontAwesome 的 fa-chevron-right */
}

/* 強制指定：Prev 按鈕顯示「左箭頭」 */
.swiper-button-prev::after {
    content: "\f053" !important;
    /* FontAwesome 的 fa-chevron-left */
}

/* 調整手機版按鈕位置，避免貼太近邊緣或誤觸 */
@media (max-width: 768px) {

    .swiper-button-next,
    .swiper-button-prev {
        width: 30px;
        /* 手機版按鈕觸控區大小 */
        height: 30px;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 1.2rem !important;
        /* 手機版圖示稍微縮小 */
    }
}

/* =========================================
   Loading Screen Styles
   ========================================= */

/* 1. Loading 遮罩層 (預設顯示) */
#global-loader {
    position: fixed;       /* 強制固定在視窗 */
    z-index: 999999;       /* 確保層級最高，蓋住所有內容 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffffe9; /* 背景色 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* 關鍵：JS 依賴這裡的 transition 設定 */
    transition: opacity 0.5s ease, visibility 0.5s ease; 
}

/* 2. 當 JS 加入此 class 時的狀態 (隱藏) */
.loader-hidden {
    opacity: 0;           /* 透明度變 0 */
    visibility: hidden;   /* 隱藏元素，確保滑鼠可以點擊下方的按鈕 */
}

/* 3. Logo 樣式調整 */
#global-loader .loader-logo {
    width: 150px;         /* 依照您的 Logo 大小調整 */
    height: auto;
    margin-bottom: 10px;
}

/* 4. 旋轉圖示樣式 */
#global-loader .loader-icon {
    font-size: 20px;
    color: var(--logo_color);       /* 或是您的品牌色 var(--purple-accent) */
}

/* 請將 .level-3-link 替換成您實際的 class 名稱 */
.level-3-link {
    /* 階層感關鍵：增加左側內距 */
    padding-left: 45px !important; /* 數值可依您喜好調整，建議比上一層多 15-20px */
    
    /* 大小調整：讓它看起來像子項目 */
    font-size: 14px; 
    font-weight: normal; /* 如果原本有加粗，這裡要拿掉 */
}

/* =========================================
   修正手機版第三層選單樣式 (Fly Wheel)
========================================= */

/* 1. 設定階層縮排與字體 */
.level-3-link {
    /* 1. 階層感 (您原本設定的) */
    margin-left: 30px !important; /* 這是整塊按鈕往右移，製造階梯效果 */
    
    /* 2. ★ 這裡控制「線條」跟「文字」的距離 ★ */
    padding-left: 20px !important; /* 數字越大，字離線越遠；數字越小，字離線越近 */
    
    /* 其他樣式維持不變 */
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    position: relative;
}

/* 2. 修正選中時的紫色線條 (使用偽元素畫短線) */
.level-3-link.active-level-3::before {
    content: "";
    position: absolute;
    
    /* 位置設定：靠最左邊 */
    left: 0; 
    
    /* 垂直置中設定 */
    top: 50%;
    transform: translateY(-50%);
    
    /* 線條外觀：高度設為 20px (跟上層差不多)，寬度 4px */
    height: 20px;
    width: 4px;
    background-color: var(--purple-accent);
}

/* 確保文字顏色正確 */
.level-3-link.active-level-3 {
    color: var(--purple-accent) !important;
}


.dropdown-item.active, 
.dropdown-item:active {
    background-color: var(--purple-accent, #6f42c1);
    color: #ffffff;
    /* 確保背景圖 (Bootstrap 預設的打勾符號) 變色或隱藏，視需求而定 */
}