/* ==================== 字體系統 ==================== */
/*
 * 字體堆疊策略：
 * - 英文/數字：Archivo（自託管）
 * - 中文：Mac 優先 PingFang TC，Windows fallback Noto Sans TC
 */

body {
    color: var(--gray-950);
    font-family:
        "Archivo", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        "Archivo", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}

/* 符號分隔線（｜、/、-）使用極細字重 */
.separator {
    font-weight: var(--fw-thin);
}

/* ==================== 字重覆蓋（依 typography.pdf 規範） ==================== */
/*
 * 設計稿規範：
 * - 頁面英文大標：Bold 700
 * - 頁面中文大標/中標/內文：SemiBold 600
 * - 符號：Thin 100
 *
 * 以下覆蓋 global.css 和 navigation.css 中使用 --fw-medium (500) 的元素
 */

/* 表單輸入框：維持 Regular 400（設計稿 §7.3） */
input,
textarea,
select,
.input,
.textarea,
.select {
    font-weight: var(--fw-regular);
}

/* ==================== 頁面英文大標（Bold 700） ==================== */
/*
 * 適用：首頁區塊英文標題、內頁英文大標
 * 設計稿：47pt, Bold 700, Archivo
 */
.comfort-title,
.solution-title,
.partners-title .font-en,
.page-subtitle {
    font-weight: var(--fw-bold);
}

/* ==================== 中標/內文（SemiBold 600） ==================== */

/* 導覽列 */
.nav-multi-title,
.nav-single-link,
.mobile-panel-title,
.mobile-footer-btn,
.nav-navigation-link {
    font-weight: var(--fw-semibold);
}

/* 按鈕 */
.skip-link,
.search-button,
.category-nav-button,
.product-description-button {
    font-weight: var(--fw-semibold);
}

/* 標題 */
.page-title,
.sidebar-title,
.accordion-title,
.hero-banner-title,
.hero-banner-subtitle,
.feature-label,
.feature-title,
.info-card-title,
.brand-icon-title,
.product-card-title {
    color: var(--gray-950);
}

.product-card-title,
.product-card-subtitle,
.product-list-title,
.product-info-title,
.product-info-subtitle,
.product-grid-title-zh,
.product-grid-title-en,
.article-card-title,
.article-simple-card-title,
.article-detail-title,
.article-zone-item-title,
.application-card-title,
.category-card-title,
.category-card-subtitle,
.contact-office-title,
.media-card-title,
.no-results-title,
.download-title {
    font-weight: var(--fw-semibold);
}

/* 首頁區塊 */
.comfort-card-title,
.comfort-card-subtitle,
.solution-item-title,
.solution-item-desc,
.solution-item-title-zh,
.solution-item-title-en,
.partners-title-zh {
    font-weight: var(--fw-semibold);
}

/* 日期 */
.article-zone-item-date,
.application-card-date {
    font-weight: var(--fw-semibold);
}

/* 頁尾 */
.footer-base-info-title,
.footer-form-title {
    font-weight: var(--fw-semibold);
}

/* Tab */
.product-description-tabs .tab {
    font-weight: var(--fw-semibold);
}

/* 搜尋 */
.search-keyword,
.search-count {
    font-weight: var(--fw-semibold);
}

/* 聯絡資訊 */
.contact-info-row dt {
    font-weight: var(--fw-semibold);
}

/* 按鈕 */
.site-btn {
    font-weight: var(--fw-regular);
}

/* ==================== 主選單重構：上下兩區塊 ==================== */

/* ----- 結構性變更：新 class ----- */

/* 上層：Logo 區 */
.nav-logo-bar {
    display: flex;
    justify-content: center; /* Logo 置中 */
    align-items: center;
    padding: 20px 0 15px;
    position: relative;
    z-index: 3;
}

/* 手機版漢堡按鈕定位（絕對定位在右側） */
.nav-logo-bar .mobile-menu-toggle {
    position: absolute;
    right: 0;
}

/* 手機版漢堡按鈕樣式：外框線 + 微圓角 + 無底色 + 淺灰色 */
.mobile-menu-toggle {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
    background-color: var(--gray-300);
}

/* 下層：導航區 */
.nav-menu-bar {
    display: flex;
    justify-content: center; /* 導航項目置中 */
    position: relative;
    z-index: 3;
}

/* ----- 樣式微調：覆蓋舊 class ----- */

/* Logo 尺寸縮小 */
.navbar-brand .brand {
    height: 24px;
}

@media screen and (max-width: 1199.98px) {
    .navbar-brand .brand {
        height: 24px;
    }
}

/* 調整導航連結高度（原 100px） */
.nav-menu-bar .nav-navigation-link {
    height: 52px;
}

/* 搜尋按鈕樣式 */
.nav-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    gap: 4px;
}

.nav-search-btn .material-symbols-outlined {
    font-size: 20px;
}

/* ----- RWD ----- */

/* 手機版隱藏導航區 */
@media (max-width: 1199.98px) {
    .nav-menu-bar {
        display: none !important;
    }
}

/* ==================== 主選單樣式覆蓋 ==================== */

/* 主選單背景改白色 + 底部陰影 */
.main-navigation {
    background-color: var(--white);
    padding: 44px 0;
}

@media (max-width: 1199.98px) {
    .main-navigation {
        padding: 8px 0;
    }
}

/* 移除下滑時的漸層效果 */
.main-bg-gradient.is-solid-bg {
    background-image: none;
    opacity: 0;
}

/* 導覽連結文字改黑色 */
.nav-navigation-link {
    color: var(--gray-950);
    padding: 0 20px;
}

.nav-navigation-link:hover,
.nav-navigation-link.active,
.is-dropdown-open .nav-navigation-link {
    color: var(--gray-950);
    background-color: var(--gray-100);
}

/* 桌面版導航：隱藏子選單下拉箭頭 */
.nav-menu-bar .nav-arrow {
    display: none;
}

/* 單層下拉選單文字顏色：對齊多層選單標題 */
.nav-single-link {
    color: var(--gray-900);
}

/* 多層選單標題文字置中 */
.nav-multi-title {
    text-align: center;
}

/* 下拉選單橋接區域：填補選單項目到下拉面板之間的 padding 空白 */
.nav-menu-bar [data-dropdown] {
    position: relative;
}

.nav-menu-bar [data-dropdown]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 44px;
    pointer-events: auto;
}

/* ==================== 首頁滿版輪播 ==================== */

.hero-banner-fullwidth .swiper-slide {
    display: block;
}

.hero-banner-fullwidth .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==================== 內頁間距調整 ==================== */

/* 內頁 padding-bottom 覆蓋（margin-top 已由 global.css 使用 var(--nav-height)） */
.page-section {
    padding-bottom: 0;
}

.content-layout {
    margin-top: 56px;
}

/* ==================== 首頁區塊通用間距 ==================== */

.home-section {
    padding: 50px 0;
}

@media (max-width: 767.98px) {
    .home-section {
        padding: 30px 0;
    }
}

/* 圖片展示區塊：加高內距 */
.gallery-section {
    padding: 70px 0;
}

/* 合作客戶區塊：移除底部內距 */
.partners-section {
    padding-bottom: 0;
}

@media (max-width: 767.98px) {
    .partners-section {
        padding-bottom: 0;
    }
}

/* ==================== 首頁區塊標題 - 共用樣式 ==================== */

.section-header {
    text-align: center;
    margin-bottom: 48px;
}

@media (max-width: 767.98px) {
    .section-header {
        margin-bottom: 24px;
    }
}

.section-header-title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    color: var(--gray-950);
}

/* ==================== 舒適製造區塊 ==================== */
/* .comfort-header margin-bottom 及 .comfort-title 樣式已整合至 .section-header / .section-header-title */

.comfort-subtitle {
    color: var(--gray-950);
    margin: 50px 0;
    line-height: 1.8;
}

/* 卡片樣式 */
.comfort-card {
    display: block;
    background-color: var(--white);
    text-decoration: none;
}

.comfort-card-image {
    overflow: hidden;
}

.comfort-card-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.comfort-card:hover .comfort-card-image img {
    transform: scale(1.1);
}

.comfort-card-body {
    padding: 20px;
    text-align: center;
}

.comfort-card-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--gray-950);
    margin-bottom: 8px;
}

.comfort-card-subtitle {
    font-size: var(--fs-xs);
    color: var(--gray-950);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 卡片容器 - 桌面版三欄 */
.comfort-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.comfort-cards-row {
    display: contents;
}

/* 手機版佈局 */
@media (max-width: 767.98px) {
    .comfort-cards {
        display: block;
    }

    /* 第一張卡片：左右排列 */
    .comfort-card-featured {
        display: flex;
        flex-direction: row;
    }

    .comfort-card-featured .comfort-card-image {
        width: 50%;
        flex-shrink: 0;
    }

    .comfort-card-featured .comfort-card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        padding: 20px;
    }

    /* 第二、三張卡片：並排兩欄，與第一張卡片間距 */
    .comfort-cards-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 8px;
    }
}

/* ==================== 客製化解決方案區塊 ==================== */

.solution-section {
    background-color: var(--white);
}

.solution-item-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--gray-950);
}

.solution-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.solution-action {
    margin-top: auto;
}

.solution-item-desc {
    font-size: var(--fs-sm);
    color: var(--gray-600);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.solution-row {
    gap: 24px; /* 手機版間距 */
}

/* 桌面版圖文比例：圖片 2.5、文字 1 */
@media (min-width: 992px) {
    .solution-row {
        gap: 40px;
    }

    /* 圖片區塊 */
    .solution-row > div:has(img) {
        flex: 2.5;
    }

    /* 文字區塊 */
    .solution-row > div:has(.solution-content) {
        flex: 1;
    }
}

/* 手機版：圖片排在文字前（上圖下文） */
@media (max-width: 991.98px) {
    .solution-row > div:has(img) {
        order: -1;
    }
}

/* 小型按鈕 */
.site-btn-sm {
    padding: 6px 12px;
    font-size: var(--fs-2xs);
    line-height: initial;
}

/* 矩形按鈕基礎樣式（左下直角、其他三角倒角） */
.site-btn-rect {
    border: 1px solid var(--gray-950);
    border-radius: 8px 8px 8px 0;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

/* 矩形按鈕 - 黑底白字（hover 反轉） */
.site-btn-rect.is-dark {
    background-color: var(--gray-950);
    color: var(--white);
}

.site-btn-rect.is-dark:hover {
    background-color: var(--white);
    color: var(--gray-950);
}

/* 矩形按鈕 - 白底黑字（hover 反轉） */
.site-btn-rect.is-light {
    background-color: var(--white);
    color: var(--gray-950);
}

.site-btn-rect.is-light:hover {
    background-color: var(--gray-950);
    color: var(--white);
}

/* 方形按鈕（無倒角） */
.site-btn.is-square {
    border-radius: 0;
}

/* 相容舊 class */
.site-btn-black {
    background-color: var(--gray-950);
    border: 1px solid var(--gray-950);
    border-radius: 0;
    color: var(--white);
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.site-btn-black:hover {
    background-color: var(--white);
    color: var(--gray-950);
}

/* ==================== 圖片展示區塊 ==================== */

/* ==================== 文章專區區塊 ==================== */

.article-zone-section {
    background-color: var(--white);
    padding: 0;
}

/* 分隔線包在內距裡：使用內層 flex 容器 */
.article-zone-section > div > div {
    border-top: 1px solid var(--gray-600);
    border-bottom: 1px solid var(--gray-600);
    padding: 70px 0;
}

.article-zone-image {
    overflow: hidden;
}

.article-zone-image img {
    transition: transform 0.5s ease;
}

.article-zone-image:hover img {
    transform: scale(1.1);
}

.article-zone-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    border-bottom: 1px solid var(--gray-600);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.article-zone-item:last-child {
    border-bottom: none;
}

.article-zone-item-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--gray-950);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-zone-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.article-zone-item-date {
    font-size: var(--fs-sm);
    color: var(--gray-950);
}

.article-zone-item-action {
    width: 50px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
    font-size: 10px;
}

.article-zone-item:hover .article-zone-item-action {
    border-color: var(--gray-950);
    color: var(--gray-950);
}

/* 大平板以下：padding-bottom 歸 0 */
@media (max-width: 991.98px) {
    .article-zone-section > div > div {
        padding-bottom: 0;
    }
}

/* 桌面版圖文比例：各一半 */
@media (min-width: 992px) {
    .article-zone-section > div > div {
        display: flex;
    }

    .article-zone-image {
        width: 50%;
    }

    .article-zone-section > div > div > div:last-child {
        width: 50%;
        min-width: 0;
        padding-left: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* 桌面版：item 不均分，由 space-between 控制間距 */
    .article-zone-item {
        flex: initial;
        border-bottom: none;
    }

    /* 獨立分隔線 */
    .article-zone-divider {
        width: 100%;
        border: none;
        border-top: 1px solid var(--gray-600);
        margin: 0;
    }
}

@media (max-width: 991px) {
    .article-zone-item {
        padding: 20px 0;
    }

    /* 手機版隱藏獨立分隔線（由 item 的 border-bottom 處理） */
    .article-zone-divider {
        display: none;
    }
}

/* ==================== 合作客戶區塊 ==================== */

/* ==================== 頁尾區塊（白底深色字） ==================== */

.footer-section {
    background-color: var(--white);
    color: var(--gray-950);
    padding-top: 50px;
}

@media (max-width: 767.98px) {
    .footer-section {
        padding-top: 30px;
    }
}

.footer-section[data-theme="dark"] {
    color-scheme: light;
}

/* 移除原本的 navbar 區塊，改用新佈局 */
.footer-navbar {
    display: none;
}

/* 頁尾主內容區 */
.footer-main {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding-top: 60px;
    border-top: 1px solid var(--gray-600);
}

/* 左側資訊區 */
.footer-info {
    flex: 1;
    min-width: 300px;
}

.footer-info .footer-logo {
    max-width: 240px;
    margin-bottom: 24px;
}

/* 公司聯絡資訊 */
.footer-contact {
    margin-bottom: 32px;
}

.footer-contact-item {
    font-size: var(--fs-sm);
    color: var(--gray-700);
    margin-bottom: 8px;
}

/* 連結欄位群組 */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-links-col a {
    display: block;
    font-size: var(--fs-sm);
    color: var(--gray-700);
    margin-bottom: 8px;
}

.footer-links-col a:hover {
    color: var(--gray-950);
}

/* 右側表單區 */
.footer-form {
    padding-top: 0;
}

.footer-section .checkbox,
.footer-section .radio {
    border-color: var(--gray-400);
}

.footer-section .label {
    color: var(--gray-700);
}

/* 送出按鈕（白底版） */
.footer-section .site-btn-arrow {
    background-color: var(--white);
    border: 1px solid var(--gray-300);
}

.footer-section .site-btn-arrow .text-block {
    color: var(--gray-950);
}

.footer-section .site-btn-arrow .site-btn-arrow-icon {
    background-color: var(--gray-950);
    color: var(--white);
}

.footer-section .site-btn-arrow:hover {
    border-color: var(--gray-950);
}

/* 分隔線（白底版） */
.footer-section .divider-h {
    border-color: var(--gray-200);
}

/* 版權區（白底版） */
.footer-section .footer-copyright {
    margin-top: 40px;
    justify-content: center;
}

.footer-section .copyright {
    color: var(--gray-600);
    text-align: center;
}

.footer-section .copyright a {
    color: var(--gray-600);
    text-decoration: none;
}

.footer-section .copyright a:hover {
    color: var(--gray-950);
}

.footer-section .social a {
    color: var(--gray-500);
}

.footer-section .social a:hover {
    color: var(--gray-950);
}

.footer-section .social span {
    color: var(--gray-300);
}

/* RWD */
@media (max-width: 991px) {
    .footer-main {
        flex-direction: column;
    }

    .footer-form-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .footer-links {
        gap: 20px;
    }

    .footer-form-wrapper {
        min-width: 100%;
    }
}

/* .partners-header margin-bottom 及 .partners-title 樣式已整合至 .section-header / .section-header-title */

.partners-title-zh {
    margin-left: 16px;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-items: center;
}

.partners-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 100px;
}

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

/* 手機版 2 欄 */
@media (max-width: 767.98px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .partners-item {
        width: auto;
        height: auto;
    }

    .partners-item img {
        max-height: 60px;
    }
}

/* ==================== 內頁橫幅 ==================== */

.banner-image {
    height: unset;
    overflow: unset;
}

/* ==================== 聯絡我們頁面 ==================== */

/* 麵包屑和標題上下排列且置中（用於詳細頁） */
.header-layout-center {
    align-items: center;
    text-align: center;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--gray-600);
}

/* 麵包屑和標題左右分邊（覆蓋 .header-layout 的 flex-flow: column） */
.header-layout-row {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--gray-600);
}

/* 標題區塊：英文和中文左右分邊 */
.header-layout-row .page-header {
    flex-flow: row;
    align-items: center;
    gap: 16px;
    text-align: right;
}

/* 副標題（英文）使用與主標題相同字級和顏色 */
.header-layout-row .page-subtitle {
    font-size: var(--fs-3xl);
    color: var(--gray-950);
}

/* 手機版：左右改回上下，字級各降一級 */
@media (max-width: 575px) {
    .header-layout-row,
    .header-layout-center {
        gap: 12px;
    }
    .header-layout-row {
        flex-flow: column;
        align-items: flex-center;
        padding-bottom: 20px;
    }

    .header-layout-row .page-header {
        flex-flow: column;
        text-align: left;
        gap: 4px;
    }
    .header-layout-row .page-subtitle,
    .header-layout-center .page-subtitle {
        font-size: var(--fs-2xl);
    }
    .header-layout-row .page-title,
    .header-layout-center .page-title {
        font-size: var(--fs-xl);
    }
    .header-layout-center {
        padding-bottom: 20px;
    }
}

/* 聯絡我們表單 */
.contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
}

.contact-form-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-form-row.full-width {
    grid-column: span 2;
}

.contact-form-row label {
    flex-shrink: 0;
    min-width: 120px;
    text-align: right;
    color: var(--gray-950);
}

.contact-form-row input,
.contact-form-row textarea {
    flex: 1;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 12px 16px;
    background-color: var(--white);
}

.contact-form-row input:focus,
.contact-form-row textarea:focus {
    outline: none;
    border-color: var(--gray-500);
}

/* 需求訊息標籤對齊頂部 */
.contact-form-row.textarea-row {
    align-items: flex-start;
}

.contact-form-row.textarea-row label {
    padding-top: 12px;
}

/* 表單底部：說明文字 + 按鈕 */
.contact-form-footer {
    grid-column: span 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 24px;
}

.contact-form-footer p {
    font-size: var(--fs-sm);
    color: var(--gray-600);
    line-height: 1.8;
    margin-left: 136px; /* 對齊輸入框：label 120px + gap 16px */
}

/* 送出按鈕 */
.contact-submit-btn {
    padding: 10px 28px;
    border: 1px solid var(--gray-950);
    border-radius: 8px;
    background-color: var(--white);
    color: var(--gray-950);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.contact-submit-btn:hover {
    background-color: var(--gray-100);
}

/* RWD：手機版改為單欄 */
@media (max-width: 767.98px) {
    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-form-row.full-width,
    .contact-form-footer {
        grid-column: span 1;
    }

    .contact-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .contact-form-row label {
        text-align: left;
    }

    .contact-form-row input,
    .contact-form-row textarea {
        width: 100%;
    }

    .contact-form-footer {
        flex-direction: column;
        gap: 24px;
    }

    .contact-form-footer p {
        margin-left: 0;
    }

    .contact-submit-btn {
        width: 100%;
    }
}

/* ==================== 頁尾表單 ==================== */

.footer-contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}

.footer-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-form-row.full-width {
    grid-column: span 2;
}

.footer-form-row label {
    flex-shrink: 0;
    min-width: 100px;
    text-align: right;
    font-size: var(--fs-sm);
    color: var(--gray-700);
}

.footer-form-row input,
.footer-form-row textarea {
    flex: 1;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 10px 14px;
    background-color: var(--white);
    font-size: var(--fs-sm);
}

.footer-form-row input:focus,
.footer-form-row textarea:focus {
    outline: none;
    border-color: var(--gray-500);
}

/* 需求訊息標籤對齊頂部 */
.footer-form-row.textarea-row {
    align-items: flex-start;
}

.footer-form-row.textarea-row label {
    padding-top: 10px;
}

/* 表單底部：按鈕靠右 */
.footer-form-footer {
    grid-column: span 2;
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
}

/* 送出按鈕 */
.footer-submit-btn {
    padding: 10px 28px;
    border: 1px solid var(--gray-950);
    border-radius: 8px;
    background-color: var(--white);
    color: var(--gray-950);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.footer-submit-btn:hover {
    background-color: var(--gray-100);
}

/* RWD：平板版（992px-1199px）改為單欄，因為 footer 左右欄佈局導致表單區寬度受限 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .footer-contact-form {
        grid-template-columns: 1fr;
    }

    .footer-form-row.full-width,
    .footer-form-footer {
        grid-column: span 1;
    }
}

/* RWD：手機版改為單欄 */
@media (max-width: 767.98px) {
    .footer-contact-form {
        grid-template-columns: 1fr;
    }

    .footer-form-row.full-width,
    .footer-form-footer {
        grid-column: span 1;
    }

    .footer-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .footer-form-row label {
        text-align: left;
    }

    .footer-form-row input,
    .footer-form-row textarea {
        width: 100%;
    }

    .footer-submit-btn {
        width: 100%;
    }
}

/* ==================== 產品目錄九宮格 ==================== */

/* 產品九宮格項目 */
.product-grid-item {
    position: relative;
    display: block;
    overflow: hidden;
}

.product-grid-item > img {
    transition: transform 0.5s ease;
}

.product-grid-item:hover > img {
    transform: scale(1.1);
}

/* 文字遮罩層：定位在圖片底部 */
.product-grid-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    transition: opacity 0.3s ease;
}

/* 文字樣式 */
.product-grid-title-zh {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    margin-bottom: 2px;
}

.product-grid-title-en {
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
}

/* 桌面版：預設隱藏，hover 顯示黑底白字 */
@media (min-width: 992px) {
    .product-grid-overlay {
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .product-grid-item:hover .product-grid-overlay {
        opacity: 1;
    }

    .product-grid-title-zh,
    .product-grid-title-en {
        color: var(--white);
    }
}

/* 手機/平板版：預設顯示毛玻璃效果 */
@media (max-width: 991px) {
    .product-grid-overlay {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .product-grid-title-zh,
    .product-grid-title-en {
        color: var(--white);
    }
}

/* ==================== Solutions 頁面方案列表 ==================== */

.solution-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}

.solution-item > a {
    display: block;
    overflow: hidden;
}

.solution-item > a > img {
    transition: transform 0.5s ease;
}

.solution-item > a:hover > img {
    transform: scale(1.1);
}

.solution-item {
    border-bottom: 1px solid var(--gray-600);
    padding-bottom: 40px;
}

.solution-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.solution-item-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
}

.solution-item-title-zh {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--gray-950);
}

.solution-item-title-en {
    font-size: var(--fs-sm);
    color: var(--gray-600);
    letter-spacing: 0.5px;
}

/* ==================== Application 應用分享頁面 ==================== */

/* 應用分享列表容器 */
.application-list-wrapper {
    display: flex;
    flex-direction: column;
}

/* 應用分享卡片 */
.application-card {
    display: flex;
    padding: 56px 0;
    border-bottom: 1px solid var(--gray-600);
}

.application-card:first-child {
    padding-top: 0;
}

.application-card:last-child {
    border-bottom: none;
}

/* 應用分享卡片圖片 */
.application-card-image {
    flex-shrink: 0;
    width: 50%;
    overflow: hidden;
}

.application-card-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.application-card-image:hover img {
    transform: scale(1.1);
}

/* 應用分享卡片內容 */
.application-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 40px;
}

.application-card-content {
    flex: 1;
}

.application-card-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--gray-950);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.application-card-summary {
    font-size: var(--fs-sm);
    color: var(--gray-950);
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 應用分享卡片底部（日期+按鈕） */
.application-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}

/* 應用分享日期 */
.application-card-date {
    font-size: var(--fs-sm);
    color: var(--gray-600);
}

/* RWD：平板/手機版改為上圖下文 */
@media (max-width: 991px) {
    .application-card {
        flex-direction: column;
        padding: 24px 0;
    }

    .application-card:first-child {
        padding-top: 0;
    }

    .application-card-image {
        width: 100%;
        max-width: none;
    }

    .application-card-body {
        padding-left: 0;
        padding-top: 24px;
    }
}

/* 應用分享頁面 - 分頁樣式覆寫 */
.page-number-btn {
    border: none;
}

.page-number-btn.active {
    border: 1px solid var(--gray-300);
    border-radius: 0.25rem;
    background-color: transparent;
    color: var(--gray-950);
}

.page-number-btn:hover {
    border: 1px solid var(--gray-300);
    background-color: transparent;
    color: var(--gray-950);
}

/* 分頁箭頭樣式 */
.pagination-prev-btn,
.pagination-next-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    font-size: var(--fs-2xl);
    line-height: 1;
    color: var(--brand-blue);
}

.pagination-prev-btn:hover,
.pagination-next-btn:hover {
    color: var(--brand-blue-600);
}

/* 分頁按鈕 focus 樣式：改用品牌藍 */
.page-number-btn:focus-visible {
    outline: 2px solid var(--brand-blue-500);
}

.pagination-prev-btn:focus-visible,
.pagination-next-btn:focus-visible {
    outline: 2px solid var(--brand-blue-500);
}

/* ==================== 分頁導航覆蓋樣式 ==================== */

.pagination-content {
    border-top: 1px solid var(--gray-600);
}

/* ==================== 麵包屑覆蓋樣式 ==================== */

/* 麵包屑字體加粗、文字深色黑 */
.bread-crumbs {
    font-weight: bold;
    color: var(--gray-950);
}

.bread-crumbs a {
    color: var(--gray-950);
}

/* 麵包屑 hover：改用品牌藍 */
.bread-crumbs a:hover {
    color: var(--brand-blue-500);
}

/* 麵包屑當前頁：改用品牌藍 */
.bread-crumbs li[aria-current="page"] {
    color: var(--brand-blue-500);
}

/* ==================== 產品列表頁標籤樣式 ==================== */

.product-list-tags {
    margin-top: 5rem;
    margin-bottom: 2rem;
}

@media (max-width: 767.98px) {
    .product-list-tags {
        margin-top: 3rem;
        margin-bottom: 0.5rem;
    }
}

.tag-group-list {
    gap: 0.75rem;
}

/* 透明底 + 淡色邊框與文字 */
.product-list-tags .tag-group-list a {
    background-color: transparent;
    border: 1px solid var(--gray-400);
    border-radius: 0.25rem 0.25rem 0 0.25rem;
    padding: 6px;
    font-size: var(--fs-xs);
    color: var(--gray-500);
    min-width: 110px;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* hover 時外框和文字變深色，不變底色 */
.product-list-tags .tag-group-list a:hover {
    border-color: var(--gray-950);
    color: var(--gray-950);
}

/* active 狀態：深色底 + 白字 */
.product-list-tags .tag-group-list a.active {
    background-color: var(--gray-950);
    border-color: var(--gray-950);
    color: var(--white);
}

/* ==================== 產品卡片：簡約風格覆蓋 ==================== */

/* 按鈕區上方內距 */
.product-card-active {
    padding-top: 10px;
}

/* 產品卡片/列表按鈕：參考標籤樣式 */
.product-card-active .site-btn,
.product-list-active .site-btn {
    background-color: transparent;
    border: 1px solid var(--gray-400);
    border-radius: 0.25rem 0.25rem 0 0.25rem;
    padding: 6px;
    font-size: var(--fs-xs);
    color: var(--gray-500);
    min-width: 110px;
    line-height: normal;
}

.product-card-active .site-btn:hover,
.product-list-active .site-btn:hover {
    border-color: var(--gray-950);
    color: var(--gray-950);
}

/* 移除邊框 */
.product-card {
    border: none;
}

/* 圖片置中對齊，移除 padding */
.product-card-image {
    padding: 0;
    overflow: hidden;
}

.product-card-img {
    transition: transform 0.5s ease;
}

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

.product-card-img {
    object-fit: cover;
    border-radius: 0;
}

/* 移除卡片圓角 */
.product-card {
    border-radius: 0;
}

/* 文字置中對齊 */
.product-card-body {
    padding: 16px 10px 0 10px;
    text-align: center;
}

/* 副標題大寫 + 字距 */
.product-card-subtitle {
    font-size: var(--fs-xs);
    color: var(--gray-950);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 型號隱藏（預設不顯示） */
.product-card-meta {
    display: none;
}

/* 產品標題區：移除底線與底部間距 */
.product-info-title-wrap {
    border-bottom: 0;
    padding-bottom: 0;
}

.product-info-title {
    font-size: var(--fs-2xl);
}

/* ==================== 產品詳情圖片輪播：上下佈局 ==================== */

/* 套用與手機版相同的佈局（大圖在上、縮圖在下） */
.product-gallery {
    flex-direction: column;
}

.product-gallery-main {
    order: 1;
}

.product-gallery-thumbs {
    display: flex;
    order: 2;
    flex-direction: row;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.product-gallery-nav {
    flex-shrink: 0;
}

/* 箭頭方向：取消 global.css 手機版的旋轉（因為現在全尺寸都是水平排列） */
.product-gallery-nav-prev .material-symbols-outlined,
.product-gallery-nav-next .material-symbols-outlined {
    transform: none;
}

/* 縮圖 Swiper 容器：佔滿寬度 */
#product-thumb-swiper {
    flex: 1;
    height: auto !important;
    min-width: 0;
}

/* 縮圖樣式：三等分顯示（覆蓋 global.css 的 70px 固定寬度） */
#product-thumb-swiper .swiper-slide {
    width: calc((100% - 20px) / 3) !important; /* 三等分，扣除 2 個間距 10px */
    height: auto !important;
    aspect-ratio: 1 / 1;
}

#product-thumb-swiper .swiper-wrapper {
    gap: 10px;
}

/* 縮圖選中狀態邊框顏色 */
#product-thumb-swiper .swiper-slide-thumb-active {
    border-color: transparent;
}

/* 大圖輪播：白底、無圓角 */
#product-main-swiper {
    background-color: var(--white);
    border-radius: 0;
}

/* ==================== 產品詳情 Tab 樣式 ==================== */

/* 修復 DaisyUI tabs-lift grid-span: 9999 造成的寬度溢出問題 */
/* 參考：https://github.com/saadeghi/daisyui/issues/2988 */
.product-description-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-description-tabs .tab {
    order: 0;
}

/* Tab 標籤基本樣式（未點擊狀態：只有外框線） */
.product-description-tabs .tab {
    background-color: transparent;
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
    border-radius: 0; /* 無倒角 */
    padding: 6px 16px;
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    height: auto;
    line-height: 1.8;
    min-height: initial;
}

/* 移除 tabs-lift 的指示線效果（只移除 tab-content 的偽元素，保留 tab 按鈕文字） */
.product-description-tabs .tab-content::before {
    display: none !important;
}

/* Tab 標籤選中狀態 */
.product-description-tabs .tab:checked,
.product-description-tabs .tab[aria-selected="true"],
.product-description-tabs .tab:is(:checked),
.product-description-tabs .tab:is([aria-selected="true"]) {
    background-color: var(--brand-blue-500);
    color: var(--white);
    border: 1px solid var(--brand-blue-500) !important; /* 保持邊框寬度一致，避免高度變化 */
    border-radius: 0;
}

/* Tab 內容區：修復寬度溢出 */
.product-description-tabs .tab-content {
    order: 1;
    width: 100%;
    border: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ==================== 搜尋結果頁面樣式覆蓋 ==================== */

/* 搜尋關鍵字顏色 */
.search-keyword {
    color: var(--brand-blue-500);
}

.search-count {
    color: var(--brand-blue-500);
}

/* 分類標題樣式 */
.search-category-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--gray-950);
    margin-bottom: 16px;
}

/* 搜尋結果區塊間距 */
.search-result-section {
    margin-bottom: 60px;
}

.search-result-section:last-child {
    margin-bottom: 0;
}

/* ==================== 產品分類導航列表 ==================== */

/* 分類導航列容器間距 + 外框線 */
.product-category-nav {
    display: flex;
    width: fit-content;
    margin-top: 3.5rem;
    margin-inline: auto;
    padding: 1rem;
    font-weight: var(--fw-semibold);
    border: 1px solid var(--gray-600);
}

/* 分類導航列連結：block 撐滿 li 高度 */
.product-category-nav a {
    display: block;
}

/* 分類導航列連結 hover */
.product-category-nav a:hover {
    color: var(--gray-950);
}

/* 分類導航列分隔線 */
.product-category-nav li[aria-hidden="true"] {
    font-weight: var(--fw-thin);
    color: var(--gray-950);
}

/* 分類導航列表樣式（統一控制） */
.product-category-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--gray-950);
}

/* ==================== 手機版主選單白底覆蓋 ==================== */

/* 面板容器背景：漸層 → 白底 */
.mobile-menu-panels {
    background: var(--white);
}

.mobile-panel {
    background: var(--white);
}

/* 面板標題文字 */
.mobile-panel-title {
    color: var(--gray-950);
}

/* 返回按鈕 */
.mobile-back-btn {
    color: var(--gray-950);
}

/* 關閉按鈕：青色 → 灰色系 */
.mobile-close-btn {
    background-color: var(--gray-200);
    color: var(--gray-950);
}

/* 導航連結文字 */
.mobile-nav-link {
    color: var(--gray-950);
}

.mobile-nav-link:hover {
    color: var(--gray-950);
    background-color: var(--gray-100);
}

.mobile-nav-link.active {
    color: var(--gray-950);
    background-color: var(--gray-100);
}

/* 有子選單的項目 hover */
.mobile-nav-item:hover {
    background-color: var(--gray-100);
}

/* 子選單箭頭 */
.mobile-nav-arrow {
    color: var(--gray-600);
}

/* 社群圖示 */
.mobile-social a {
    color: var(--gray-700);
}

.mobile-social a:hover {
    color: var(--gray-950);
}

/* 底部功能列按鈕 */
.mobile-footer-btn {
    color: var(--gray-950);
}

/* 底部分隔線 */
.mobile-footer-divider {
    background-color: var(--gray-300);
}

/* ==================== 頁面介紹區塊文字控制 ==================== */
/* 修飾 class：加上 .page-intro-detail 後，簡述、內容、說明內容字體縮小 */

.page-intro.page-intro-detail .page-intro-summary,
.page-intro.page-intro-detail .page-intro-passage,
.page-intro.page-intro-detail .page-intro-description {
    font-size: var(--fs-sm);
}

/* 產品詳情頁：移除介紹區塊底部虛線與內距 */
.product-introduce .page-intro-wrapper {
    border-bottom: 0;
    padding-bottom: 0;
    line-height: 2;
}

/* 產品詳情頁：隱藏大圖輪播箭頭 */
.product-main-nav {
    display: none;
}

/* ==================== 文章卡片網格容器 ==================== */

.article-card-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 56px;
    column-gap: 1rem;
}

@media (min-width: 992px) {
    .article-card-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .article-card-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}