/* =====================================================================
 * benq-flat.css — 前台共用「BenQ 平面化」設計系統
 * ---------------------------------------------------------------------
 * 色彩哲學對齊 benq.com（2026-07 實測）：
 *   - 黑白極簡為主體：主按鈕黑（實心 / 2px ghost 邊框、4px 圓角、700 字重）
 *   - 品牌紫 #7231C6 降級為 accent（小連結 / hover 點綴）
 *   - 表面色輪替：淺灰 #F2F2F2 / 米白 #F2E6DA / 薰衣草 #E6E6F2
 *   - 扁平：移除漸層、uppercase、過重 box-shadow；淡陰影、圓角 4–24px 分級
 *
 * Token 單一真相在 base/benq-tokens.css（:root），本檔僅消費變數。
 * 全部 selector 以 body.benq-flat 為 scope，避免污染後台。各頁 content
 * block 可直接用下列 .benq-* 元件 class，或讓 Bootstrap 既有 class
 * （.btn-primary / .card / .badge / .alert）被覆寫。
 * ===================================================================== */

body.benq-flat {
    color: var(--benq-text);
}

/* =====================================================================
 * 1. 連結
 * ===================================================================== */
body.benq-flat a {
    color: var(--benq-pri);
}
body.benq-flat a:hover {
    color: var(--benq-pri-dark);
}

/* 電商側邊「商店導覽」：所有連結（含展開子選單的分類 toggle / 子分類項 /
   商店首頁）文字一律 --benq-nav-text，取代原本散落的紫(body.benq-flat a)、
   Bootstrap 預設藍(#0d6efd)、深灰(#212529)。 */
body.benq-flat .shop-nav a {
    color: var(--benq-nav-text);
}
body.benq-flat .shop-nav a:hover,
body.benq-flat .shop-nav a:focus {
    color: var(--benq-pri-dark);
}
/* 選取項：淡底 + BenQ 紫字 + 粗體，取代原 Bootstrap 藍底白字
   （base2.css / list_products.css 的 #0d6efd + #fff !important）。 */
body.benq-flat .shop-nav .list-group-item.active,
body.benq-flat .shop-nav .list-group-item-action.active {
    background-color: var(--benq-bg-soft);
    border-color: var(--benq-border);
    color: var(--benq-pri);
    font-weight: 600;
}
body.benq-flat .shop-nav .list-group-item.active i,
body.benq-flat .shop-nav .list-group-item.active a,
body.benq-flat .shop-nav .list-group-item-action.active i {
    color: var(--benq-pri) !important;
}
/* 進入某分類頁後，側欄當前分類連結帶 Bootstrap .text-primary（藍 #0d6efd），
   改為 BenQ 紫（蓋過 Bootstrap 的 !important）。 */
body.benq-flat .shop-nav .text-primary {
    color: var(--benq-pri) !important;
}

/* =====================================================================
 * 2. 按鈕（覆寫 Bootstrap primary + 提供 .benq-btn 家族）
 * ---------------------------------------------------------------------
 * benq.com 式雙態：實心 = 黑底白字；ghost = 透明底 2px 黑框。
 * 共同特徵：4px 小圓角、700 字重、0.1s 快速 transition。
 * ===================================================================== */
body.benq-flat .btn-primary,
body.benq-flat .benq-btn {
    background: var(--benq-black);
    border: 2px solid var(--benq-black);
    color: var(--benq-white);
    border-radius: var(--benq-radius-btn);
    font-weight: 700;
    background-image: none;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    transition: background-color var(--benq-transition-fast) ease,
                color var(--benq-transition-fast) ease,
                border-color var(--benq-transition-fast) ease;
}
body.benq-flat .btn-primary:hover,
body.benq-flat .btn-primary:focus,
body.benq-flat .benq-btn:hover,
body.benq-flat .benq-btn:focus {
    background: var(--benq-white);
    border-color: var(--benq-black);
    color: var(--benq-black);
    box-shadow: none;
}

/* Ghost：透明底 2px 黑框（benq.com「了解 XXX」鈕），hover 反轉黑底白字 */
body.benq-flat .btn-outline-primary,
body.benq-flat .benq-btn-secondary,
body.benq-flat .benq-btn--ghost {
    background: transparent;
    border: 2px solid var(--benq-black);
    color: var(--benq-black);
    border-radius: var(--benq-radius-btn);
    font-weight: 700;
    background-image: none;
    transition: background-color var(--benq-transition-fast) ease,
                color var(--benq-transition-fast) ease,
                border-color var(--benq-transition-fast) ease;
}
body.benq-flat .btn-outline-primary:hover,
body.benq-flat .btn-outline-primary:focus,
body.benq-flat .benq-btn-secondary:hover,
body.benq-flat .benq-btn--ghost:hover,
body.benq-flat .benq-btn--ghost:focus {
    background: var(--benq-black);
    border-color: var(--benq-black);
    color: var(--benq-white);
}

/* Ghost 反白（深色 / 圖片底用：白框白字，hover 反轉白底黑字，hero 用） */
body.benq-flat .benq-btn--ghost-inverse {
    background: transparent;
    border: 2px solid var(--benq-white);
    color: var(--benq-white);
    border-radius: var(--benq-radius-btn);
    font-weight: 700;
    transition: background-color var(--benq-transition-fast) ease,
                color var(--benq-transition-fast) ease;
}
body.benq-flat .benq-btn--ghost-inverse:hover,
body.benq-flat .benq-btn--ghost-inverse:focus {
    background: var(--benq-white);
    color: var(--benq-black);
}

/* =====================================================================
 * 3. 卡片
 * ===================================================================== */
body.benq-flat .card,
body.benq-flat .benq-card {
    background: var(--benq-bg);
    border: 1px solid var(--benq-border);
    border-radius: var(--benq-radius);
    box-shadow: var(--benq-shadow);
}
body.benq-flat .benq-card--soft {
    background: var(--benq-bg-soft);
}
body.benq-flat .card-header,
body.benq-flat .benq-card__header {
    background: var(--benq-bg-soft);
    border-bottom: 1px solid var(--benq-border);
    color: var(--benq-text);
}

/* =====================================================================
 * 4. Badge / 標籤
 * ===================================================================== */
body.benq-flat .badge.bg-primary,
body.benq-flat .benq-badge {
    background: var(--benq-black) !important;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
body.benq-flat .benq-badge--soft {
    background: var(--benq-surface-gray) !important;
    color: var(--benq-text) !important;
}
body.benq-flat .benq-badge--success { background: var(--benq-success-bg) !important; color: var(--benq-success-fg) !important; }
body.benq-flat .benq-badge--warning { background: var(--benq-warning-bg) !important; color: var(--benq-warning-fg) !important; }
body.benq-flat .benq-badge--danger  { background: var(--benq-danger-bg) !important;  color: var(--benq-danger-fg) !important; }

/* =====================================================================
 * 5. 表格
 * ===================================================================== */
body.benq-flat .benq-table-wrapper {
    background: var(--benq-bg);
    border: 1px solid var(--benq-border);
    border-radius: var(--benq-radius);
    box-shadow: var(--benq-shadow);
    overflow: hidden;
}
body.benq-flat table.benq-table thead,
body.benq-flat table.benq-table thead th {
    background: var(--benq-bg-soft);
    color: var(--benq-text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--benq-border);
}
body.benq-flat table.benq-table tbody tr {
    border-bottom: 1px solid var(--benq-border);
}
body.benq-flat table.benq-table tbody tr:hover {
    background: var(--benq-bg-soft);
}

/* =====================================================================
 * 6. 表單
 * ===================================================================== */
body.benq-flat .form-control,
body.benq-flat .form-select {
    border: 1px solid var(--benq-border);
    border-radius: var(--benq-radius-sm);
    color: var(--benq-text);
}
body.benq-flat .form-control:focus,
body.benq-flat .form-select:focus {
    border-color: var(--benq-pri);
    box-shadow: 0 0 0 3px var(--benq-pri-light);
    outline: none;
}
body.benq-flat .form-label {
    color: var(--benq-text);
    font-weight: 600;
}
body.benq-flat .form-check-input:checked {
    background-color: var(--benq-pri);
    border-color: var(--benq-pri);
}

/* =====================================================================
 * 7. Alert / 提示
 * ===================================================================== */
body.benq-flat .alert {
    border-radius: var(--benq-radius-sm);
    border-width: 1px;
}
body.benq-flat .alert-primary,
body.benq-flat .alert-info {
    background: var(--benq-pri-light);
    border-color: var(--benq-pri);
    color: var(--benq-pri-dark);
}
body.benq-flat .alert-success { background: var(--benq-success-bg); border-color: var(--benq-success-fg); color: var(--benq-success-fg); }
body.benq-flat .alert-warning { background: var(--benq-warning-bg); border-color: var(--benq-warning-fg); color: var(--benq-warning-fg); }
body.benq-flat .alert-danger  { background: var(--benq-danger-bg);  border-color: var(--benq-danger-fg);  color: var(--benq-danger-fg); }

/* =====================================================================
 * 8. 區段標題 / 文字輔助
 * ===================================================================== */
body.benq-flat .text-muted {
    color: var(--benq-text-soft) !important;
}
body.benq-flat .benq-section-title {
    color: var(--benq-text);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* =====================================================================
 * 9. 分頁（Bootstrap / DataTables 共用）
 * ===================================================================== */
body.benq-flat .page-link {
    color: var(--benq-text);
    border-radius: 6px;
}
body.benq-flat .page-link:hover {
    background: var(--benq-surface-gray);
    color: var(--benq-text);
    border-color: var(--benq-surface-gray);
}
body.benq-flat .page-item.active .page-link {
    background: var(--benq-black);
    border-color: var(--benq-black);
    color: #fff;
}

/* =====================================================================
 * 10. Marketing — BenQ 式行銷 section 元件（首頁敘事層用）
 * ---------------------------------------------------------------------
 * 在既有扁平基調上加「行銷深度」：大標題字重、寬鬆垂直節奏、
 * 圖文交錯、滾動進場。沿用上方 --benq-* token，僅新增 type/節奏值。
 * 全部 body.benq-flat scope，純新增、不動既有 selector。
 * ===================================================================== */

/* type scale token 已移至 base/benq-tokens.css（:root） */

/* ---- Section 容器 / 垂直節奏 ---- */
body.benq-flat .benq-section {
    padding-top: var(--benq-section-pad);
    padding-bottom: var(--benq-section-pad);
    background: var(--benq-bg);
}
body.benq-flat .benq-section--soft { background: var(--benq-bg-soft); }
body.benq-flat .benq-section--full { padding-left: 0; padding-right: 0; }
/* 底色輪替 variant（benq.com 式：米白 / 薰衣草 / 黑底反白） */
body.benq-flat .benq-section--cream { background: var(--benq-surface-cream); }
body.benq-flat .benq-section--lavender { background: var(--benq-surface-lavender); }
body.benq-flat .benq-section--gray { background: var(--benq-surface-gray); }
body.benq-flat .benq-section--dark {
    background: var(--benq-black);
    color: var(--benq-white);
}
body.benq-flat .benq-section--dark .benq-headline,
body.benq-flat .benq-section--dark .benq-eyebrow { color: var(--benq-white); }
body.benq-flat .benq-section--dark .benq-lede,
body.benq-flat .benq-section--dark .benq-footnote { color: rgba(255, 255, 255, 0.75); }

/* ---- Section intro（eyebrow + headline + lede + footnote）---- */
/* Eyebrow：benq.com 式「產品名」小標（黑字 20px/700）。
   變體：--new 紅標（新品/推薦）、--accent 保留紫（特定頁需要時用） */
body.benq-flat .benq-eyebrow {
    display: inline-block;
    font-size: var(--benq-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--benq-text);
    margin-bottom: 0.75rem;
}
body.benq-flat .benq-eyebrow--new { color: var(--benq-red); font-size: 0.95rem; }
body.benq-flat .benq-eyebrow--accent { color: var(--benq-pri); font-size: 0.95rem; }
body.benq-flat .benq-headline {
    font-size: var(--benq-h2);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--benq-text);
    margin: 0 0 1rem;
}
body.benq-flat .benq-headline--xl { font-size: var(--benq-h1); }
body.benq-flat .benq-lede {
    font-size: var(--benq-lede-size);
    line-height: 1.7;
    color: var(--benq-text-soft);
    margin: 0 auto;
    max-width: 46rem;
}
body.benq-flat .benq-footnote {
    font-size: 0.8rem;
    color: var(--benq-text-soft);
    margin-top: 0.75rem;
}
/* 置中 intro 的標準間距 */
body.benq-flat .benq-section-intro { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

/* ---- 圖文交錯 feature ---- */
body.benq-flat .benq-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}
body.benq-flat .benq-feature + .benq-feature { margin-top: clamp(2.5rem, 6vw, 5rem); }
body.benq-flat .benq-feature--reverse .benq-feature__media { order: 2; }
body.benq-flat .benq-feature__media {
    border-radius: var(--benq-radius-media);
    overflow: hidden;
    box-shadow: var(--benq-shadow-hover);
    background: var(--benq-bg-soft);
}
body.benq-flat .benq-feature__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}
body.benq-flat .benq-feature__body .benq-headline { font-size: var(--benq-h2); }
body.benq-flat .benq-feature__body .benq-lede { margin-left: 0; max-width: none; }

/* 無實圖時的漸層 icon panel（可由 multiStrings 圖 URL 覆寫成 <img>） */
body.benq-flat .benq-media-panel {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--benq-black);
    color: #fff;
}
body.benq-flat .benq-media-panel i { font-size: clamp(3rem, 8vw, 5.5rem); opacity: 0.92; }

/* 導向卡（showcase）：整張可點、hover 抬升 */
body.benq-flat .benq-nav-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
    text-decoration: none;
    color: var(--benq-text);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.benq-flat .benq-nav-card__title { font-size: 1.25rem; }
body.benq-flat .benq-nav-card__desc { font-size: 0.95rem; }
body.benq-flat .benq-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--benq-shadow-hover);
    border-color: var(--benq-text-soft);
    color: var(--benq-text);
}
body.benq-flat .benq-nav-card__icon {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--benq-radius-sm);
    background: var(--benq-surface-gray);
    color: var(--benq-text);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
body.benq-flat .benq-nav-card__arrow { color: var(--benq-pri); font-weight: 500; font-size: 0.85rem; margin-top: auto; }
body.benq-flat .benq-nav-card:hover .benq-nav-card__arrow { color: var(--benq-pri-dark); }

/* benq.com 式小連結（「了解更多 ›」：紫色 12px/500，唯一保留紫的地方之一） */
body.benq-flat .benq-link {
    display: inline-block;
    color: var(--benq-pri);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
}
body.benq-flat .benq-link::after {
    content: '›';
    margin-left: 0.35em;
    font-weight: 700;
}
body.benq-flat .benq-link:hover { color: var(--benq-pri-dark); }

/* ---- 結尾 CTA 帶（benq.com 式黑底反白） ---- */
body.benq-flat .benq-cta-band {
    background: var(--benq-black);
    border-radius: var(--benq-radius-lg);
    padding: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    color: #fff;
}
body.benq-flat .benq-cta-band .benq-headline,
body.benq-flat .benq-cta-band .benq-eyebrow { color: #fff; }
body.benq-flat .benq-cta-band .benq-lede { color: rgba(255, 255, 255, 0.75); }
/* CTA 帶內反白主鈕（黑底上白實心，hover 轉白 ghost） */
body.benq-flat .benq-cta-band .benq-btn-onpri {
    background: #fff;
    color: var(--benq-black);
    border: 2px solid #fff;
    border-radius: var(--benq-radius-btn);
    font-weight: 700;
    padding: 0.75rem 1.75rem;
    transition: background-color var(--benq-transition-fast) ease,
                color var(--benq-transition-fast) ease;
}
body.benq-flat .benq-cta-band .benq-btn-onpri:hover {
    background: transparent;
    color: #fff;
}

/* ---- 滾動進場（reveal）---- */
body.benq-flat .benq-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
body.benq-flat .benq-reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* 依序延遲（同 section 內手風琴式揭示） */
body.benq-flat .benq-reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
body.benq-flat .benq-reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
body.benq-flat .benq-reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }

/* ---- 手機：交錯改上下、節奏縮放 ---- */
@media (max-width: 767.98px) {
    body.benq-flat .benq-feature { grid-template-columns: 1fr; }
    body.benq-flat .benq-feature--reverse .benq-feature__media { order: 0; }
}

/* ---- 減少動態偏好：關閉進場動畫 ---- */
@media (prefers-reduced-motion: reduce) {
    body.benq-flat .benq-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}