﻿@charset "utf-8";

        :root {
            --fenglin-v2-primary-color: #2c5c3e;
            --fenglin-v2-dark-green: #1e3e2a;
            --fenglin-v2-light-green: #e9f5eb;
            --fenglin-v2-secondary-color: #8bc34a;
            --fenglin-v2-accent-color: #ff9800;
            --fenglin-v2-white: #ffffff;
            --fenglin-v2-light-gray: #f5f5f5;
            --fenglin-v2-gray: #666666;
            --fenglin-v2-dark-gray: #333333;
            --fenglin-v2-beige-bg: #f8f5f0;
            --fenglin-v2-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
            --fenglin-v2-shadow-md: 0 4px 8px rgba(0,0,0,0.12);
            --fenglin-v2-shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
            --fenglin-v2-radius-sm: 4px;
            --fenglin-v2-radius-md: 8px;
            --fenglin-v2-radius-lg: 12px;
            --fenglin-v2-radius-full: 50px;
            --fenglin-v2-space-xs: 4px;
            --fenglin-v2-space-sm: 8px;
            --fenglin-v2-space-md: 16px;
            --fenglin-v2-space-lg: 24px;
            --fenglin-v2-space-xl: 32px;
            --fenglin-v2-space-2xl: 48px;
            --fenglin-v2-space-3xl: 64px;
            --fenglin-v2-text-xs: 0.75rem;
            --fenglin-v2-text-sm: 0.875rem;
            --fenglin-v2-text-base: 1rem;
            --fenglin-v2-text-lg: 1.125rem;
            --fenglin-v2-text-xl: 1.25rem;
            --fenglin-v2-text-2xl: 1.5rem;
            --fenglin-v2-text-3xl: 2rem;
            --fenglin-v2-font-regular: 400;
            --fenglin-v2-font-medium: 500;
            --fenglin-v2-font-bold: 700;
            --fenglin-v2-transition-fast: 0.2s ease;
            --fenglin-v2-transition-normal: 0.3s ease;
        }
        
        /* 重置樣式範圍內的元素 */
        .fenglin-v2-granules-container * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        .fenglin-v2-granules-container {
            font-family: system-ui, -apple-system, sans-serif;
            line-height: 1.6;
            color: var(--fenglin-v2-dark-gray);
        }
        
        .fenglin-v2-granules-container .fenglin-v2-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--fenglin-v2-space-md);
        }
        
        /* 產品主視覺區 */
        .fenglin-v2-granules-hero {
            background: linear-gradient(135deg, var(--fenglin-v2-beige-bg) 0%, rgba(248,245,240,0.8) 100%);
            padding: var(--fenglin-v2-space-3xl) 0;
            position: relative;
            overflow: hidden;
        }
        
        .fenglin-v2-granules-hero::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            background: url('images/products/granules-bg.png') no-repeat right center;
            background-size: contain;
            opacity: 0.15;
        }
        
        /* 網格系統 */
        .fenglin-v2-grid {
            display: grid;
            gap: var(--fenglin-v2-space-xl);
        }
        
        .fenglin-v2-grid-2 {
            grid-template-columns: 1fr 1fr;
        }
        
        .fenglin-v2-grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }
        
        /* 產品相簿 */
        .fenglin-v2-product-gallery {
            position: sticky;
            top: 120px;
            align-self: start;
        }
        
        .fenglin-v2-product-main-image {
            background: var(--fenglin-v2-white);
            border-radius: var(--fenglin-v2-radius-lg);
            padding: var(--fenglin-v2-space-xl);
            box-shadow: var(--fenglin-v2-shadow-lg);
            margin-bottom: var(--fenglin-v2-space-lg);
            text-align: center;
        }
        
        .fenglin-v2-product-main-image img {
            max-width: 100%;
            height: auto;
            border-radius: var(--fenglin-v2-radius-md);
        }
        
        .fenglin-v2-product-thumbnails {
            display: flex;
            gap: var(--fenglin-v2-space-sm);
            justify-content: center;
        }
        
        .fenglin-v2-product-thumbnail {
            width: 80px;
            height: 80px;
            border: 2px solid transparent;
            border-radius: var(--fenglin-v2-radius-md);
            overflow: hidden;
            cursor: pointer;
            transition: all var(--fenglin-v2-transition-fast);
        }
        
        .fenglin-v2-product-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .fenglin-v2-product-thumbnail:hover {
            border-color: var(--fenglin-v2-primary-color);
            transform: translateY(-2px);
        }
        
        .fenglin-v2-product-thumbnail.active {
            border-color: var(--fenglin-v2-primary-color);
            box-shadow: var(--fenglin-v2-shadow-sm);
        }
        
        /* 產品資訊 */
        .fenglin-v2-product-info h1 {
            font-size: var(--fenglin-v2-text-3xl);
            color: var(--fenglin-v2-dark-green);
            margin-bottom: var(--fenglin-v2-space-md);
        }
        
        .fenglin-v2-product-info .fenglin-v2-lead {
            font-size: var(--fenglin-v2-text-lg);
            color: var(--fenglin-v2-gray);
            margin-bottom: var(--fenglin-v2-space-lg);
        }
        
        /* 產品標籤 */
        .fenglin-v2-product-badge {
            display: inline-block;
            background: var(--fenglin-v2-primary-color);
            color: var(--fenglin-v2-white);
            padding: var(--fenglin-v2-space-xs) var(--fenglin-v2-space-md);
            border-radius: var(--fenglin-v2-radius-full);
            font-size: var(--fenglin-v2-text-sm);
            font-weight: var(--fenglin-v2-font-bold);
            margin-right: var(--fenglin-v2-space-sm);
            margin-bottom: var(--fenglin-v2-space-sm);
        }
        
        /* GEO優化標籤 */
        .fenglin-v2-geo-badge-container {
            display: flex;
            flex-wrap: wrap;
            gap: var(--fenglin-v2-space-sm);
            margin-top: var(--fenglin-v2-space-md);
        }
        
        .fenglin-v2-geo-badge {
            background: var(--fenglin-v2-white);
            color: var(--fenglin-v2-primary-color);
            padding: var(--fenglin-v2-space-xs) var(--fenglin-v2-space-md);
            border-radius: var(--fenglin-v2-radius-full);
            font-size: var(--fenglin-v2-text-sm);
            border: 2px solid rgba(44,92,62,0.2);
        }
        
        /* 便利性特色 */
        .fenglin-v2-portability-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--fenglin-v2-space-lg);
            margin: var(--fenglin-v2-space-xl) 0;
        }
        
        .fenglin-v2-portability-item {
            text-align: center;
            padding: var(--fenglin-v2-space-lg);
            background: var(--fenglin-v2-white);
            border-radius: var(--fenglin-v2-radius-md);
            box-shadow: var(--fenglin-v2-shadow-sm);
            transition: all var(--fenglin-v2-transition-fast);
        }
        
        .fenglin-v2-portability-item:hover {
            transform: translateY(-4px);
            box-shadow: var(--fenglin-v2-shadow-md);
        }
        
        .fenglin-v2-portability-icon {
            font-size: 2.5rem;
            color: var(--fenglin-v2-primary-color);
            margin-bottom: var(--fenglin-v2-space-md);
        }
        
        .fenglin-v2-portability-item h4 {
            font-size: var(--fenglin-v2-text-lg);
            color: var(--fenglin-v2-dark-green);
            margin-bottom: var(--fenglin-v2-space-xs);
        }
        
        /* 口味選擇 */
        .fenglin-v2-flavor-options {
            display: flex;
            gap: var(--fenglin-v2-space-lg);
            justify-content: center;
            margin: var(--fenglin-v2-space-xl) 0;
            flex-wrap: wrap;
        }
        
        .fenglin-v2-flavor-option {
            text-align: center;
            padding: var(--fenglin-v2-space-md);
            border: 2px solid transparent;
            border-radius: var(--fenglin-v2-radius-md);
            cursor: pointer;
            transition: all var(--fenglin-v2-transition-fast);
            min-width: 100px;
        }
        
        .fenglin-v2-flavor-option:hover {
            border-color: var(--fenglin-v2-primary-color);
            background: rgba(44,92,62,0.05);
        }
        
        .fenglin-v2-flavor-option.active {
            border-color: var(--fenglin-v2-primary-color);
            background: rgba(44,92,62,0.1);
            box-shadow: var(--fenglin-v2-shadow-sm);
        }
        
        .fenglin-v2-flavor-icon {
            font-size: 2rem;
            margin-bottom: var(--fenglin-v2-space-sm);
        }
        
        /* 價格區 */
        .fenglin-v2-product-price {
            font-size: var(--fenglin-v2-text-3xl);
            color: var(--fenglin-v2-primary-color);
            font-weight: var(--fenglin-v2-font-bold);
            margin: var(--fenglin-v2-space-xl) 0;
        }
        
        .fenglin-v2-product-price small {
            font-size: var(--fenglin-v2-text-base);
            color: var(--fenglin-v2-gray);
            margin-left: var(--fenglin-v2-space-sm);
            font-weight: var(--fenglin-v2-font-regular);
        }
        
        /* 按鈕樣式 */
        .fenglin-v2-btn {
            display: inline-block;
            padding: var(--fenglin-v2-space-md) var(--fenglin-v2-space-xl);
            border-radius: var(--fenglin-v2-radius-md);
            text-decoration: none;
            font-weight: var(--fenglin-v2-font-medium);
            transition: all var(--fenglin-v2-transition-fast);
            border: 2px solid transparent;
            cursor: pointer;
            font-size: var(--fenglin-v2-text-base);
            font-family: inherit;
        }
        
        .fenglin-v2-btn-primary {
            background: var(--fenglin-v2-primary-color);
            color: var(--fenglin-v2-white);
        }
        
        .fenglin-v2-btn-primary:hover {
            background: var(--fenglin-v2-dark-green);
            transform: translateY(-2px);
            box-shadow: var(--fenglin-v2-shadow-md);
        }
        
        .fenglin-v2-btn-outline {
            background: transparent;
            color: var(--fenglin-v2-primary-color);
            border-color: var(--fenglin-v2-primary-color);
        }
        
        .fenglin-v2-btn-outline:hover {
            background: rgba(44,92,62,0.1);
        }
        
        .fenglin-v2-btn-large {
            padding: var(--fenglin-v2-space-lg) var(--fenglin-v2-space-2xl);
            font-size: var(--fenglin-v2-text-lg);
        }
        
        .fenglin-v2-btn-secondary {
            background: var(--fenglin-v2-secondary-color);
            color: var(--fenglin-v2-white);
        }
        
        .fenglin-v2-btn-secondary:hover {
            background: #7cb342;
        }

        /* =====================================================
           需求：行動裝置按鈕群組 — 強制同一列並排
           ===================================================== */
        .fenglin-v2-mt-4:has(.fenglin-v2-btn) {
            display: flex;
            flex-wrap: nowrap;
            gap: var(--fenglin-v2-space-sm);
            align-items: center;
        }

        /* 每個按鈕連結/按鈕平均分配空間 */
        .fenglin-v2-mt-4:has(.fenglin-v2-btn) > a,
        .fenglin-v2-mt-4:has(.fenglin-v2-btn) > button {
            flex: 1 1 0;
            min-width: 0;
            margin-left: 0 !important; /* 覆蓋 fenglin-v2-ml-3 */
        }

        /* 按鈕（包在 <a> 內的 <button>）填滿寬度 */
        .fenglin-v2-mt-4:has(.fenglin-v2-btn) > a > .fenglin-v2-btn {
            width: 100%;
            text-align: center;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* <a> 直接作為按鈕時也填滿 */
        .fenglin-v2-mt-4:has(.fenglin-v2-btn) > a.fenglin-v2-btn {
            width: 100%;
            text-align: center;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 行動裝置縮小 padding 和字體，防止文字截斷 */
        @media (max-width: 480px) {
            .fenglin-v2-mt-4:has(.fenglin-v2-btn) .fenglin-v2-btn-large,
            .fenglin-v2-mt-4:has(.fenglin-v2-btn) > a.fenglin-v2-btn {
                padding: 10px 8px;
                font-size: 0.82rem;
            }
        }

        /* 信任標章 */
        .fenglin-v2-certificate-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: var(--fenglin-v2-space-lg);
            margin: var(--fenglin-v2-space-xl) 0;
        }
        
        .fenglin-v2-certificate-item {
            text-align: center;
            padding: var(--fenglin-v2-space-md);
            background: var(--fenglin-v2-white);
            border-radius: var(--fenglin-v2-radius-md);
            box-shadow: var(--fenglin-v2-shadow-sm);
            text-decoration: none;
            color: inherit;
            transition: all var(--fenglin-v2-transition-fast);
        }
        
        .fenglin-v2-certificate-item:hover {
            transform: translateY(-4px);
            box-shadow: var(--fenglin-v2-shadow-md);
        }
        
        /* 產品詳細資訊區 */
        .fenglin-v2-product-detail {
            padding: var(--fenglin-v2-space-3xl) 0;
        }
        
        /* 使用情境區 */
        .fenglin-v2-usage-scenarios {
            background: var(--fenglin-v2-light-gray);
            border-radius: var(--fenglin-v2-radius-lg);
            padding: var(--fenglin-v2-space-2xl);
            margin: var(--fenglin-v2-space-2xl) 0;
        }
        
        .fenglin-v2-usage-scenarios h2 {
            font-size: var(--fenglin-v2-text-2xl);
            color: var(--fenglin-v2-dark-green);
            margin-bottom: var(--fenglin-v2-space-md);
        }
        
        .fenglin-v2-usage-scenarios .fenglin-v2-lead {
            font-size: var(--fenglin-v2-text-lg);
            color: var(--fenglin-v2-gray);
            margin-bottom: var(--fenglin-v2-space-lg);
        }
        
        .fenglin-v2-scenario-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--fenglin-v2-space-lg);
            margin-top: var(--fenglin-v2-space-lg);
        }
        
        .fenglin-v2-scenario-card {
            background: var(--fenglin-v2-white);
            padding: var(--fenglin-v2-space-lg);
            border-radius: var(--fenglin-v2-radius-md);
            border-top: 4px solid var(--fenglin-v2-primary-color);
        }
        
        .fenglin-v2-scenario-card h4 {
            font-size: var(--fenglin-v2-text-lg);
            color: var(--fenglin-v2-dark-green);
            margin-bottom: var(--fenglin-v2-space-sm);
        }
        
        /* 吸收時間軸 */
        .fenglin-v2-absorption-timeline {
            position: relative;
            padding: var(--fenglin-v2-space-xl);
            background: linear-gradient(to right, var(--fenglin-v2-light-green), var(--fenglin-v2-white));
            border-radius: var(--fenglin-v2-radius-lg);
            margin: var(--fenglin-v2-space-xl) 0;
        }
        
        .fenglin-v2-timeline-steps {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-top: var(--fenglin-v2-space-xl);
        }
        
        .fenglin-v2-timeline-step {
            text-align: center;
            position: relative;
            z-index: 2;
            flex: 1;
        }
        
        .fenglin-v2-step-number {
            width: 40px;
            height: 40px;
            background: var(--fenglin-v2-primary-color);
            color: var(--fenglin-v2-white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--fenglin-v2-space-md);
            font-weight: var(--fenglin-v2-font-bold);
        }
        
        .fenglin-v2-timeline-steps::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            height: 2px;
            background: var(--fenglin-v2-primary-color);
            opacity: 0.3;
            z-index: 1;
        }
        
        /* 引用樣式 */
        .fenglin-v2-citation {
            background: var(--fenglin-v2-light-green);
            border-left: 4px solid var(--fenglin-v2-primary-color);
            padding: var(--fenglin-v2-space-md) var(--fenglin-v2-space-lg);
            margin: var(--fenglin-v2-space-lg) 0;
            border-radius: 0 var(--fenglin-v2-radius-md) var(--fenglin-v2-radius-md) 0;
        }
        
        .fenglin-v2-citation strong {
            color: var(--fenglin-v2-primary-color);
        }
        
        /* 知識文章樣式 */
        .fenglin-v2-knowledge-article {
            margin-bottom: var(--fenglin-v2-space-2xl);
        }
        
        .fenglin-v2-knowledge-article h2 {
            font-size: var(--fenglin-v2-text-2xl);
            color: var(--fenglin-v2-dark-green);
            margin-bottom: var(--fenglin-v2-space-xl);
            padding-bottom: var(--fenglin-v2-space-sm);
            border-bottom: 2px solid var(--fenglin-v2-light-green);
        }
        
        /* 功效網格 */
        .fenglin-v2-benefit-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--fenglin-v2-space-lg);
            margin: var(--fenglin-v2-space-xl) 0;
        }
        
        .fenglin-v2-benefit-item {
            text-align: center;
            padding: var(--fenglin-v2-space-lg);
            background: var(--fenglin-v2-white);
            border-radius: var(--fenglin-v2-radius-lg);
            box-shadow: var(--fenglin-v2-shadow-sm);
            border-top: 4px solid var(--fenglin-v2-primary-color);
        }
        
        .fenglin-v2-benefit-icon {
            font-size: 2.5rem;
            color: var(--fenglin-v2-primary-color);
            margin-bottom: var(--fenglin-v2-space-md);
        }

        /* =====================================================
           規格表格（桌面版基礎）
           ===================================================== */
        .fenglin-v2-spec-table {
            width: 100%;
            border-collapse: collapse;
            margin: var(--fenglin-v2-space-lg) 0;
        }
        
        .fenglin-v2-spec-table tr {
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }
        
        .fenglin-v2-spec-table td {
            padding: var(--fenglin-v2-space-md);
            vertical-align: top;
        }
        
        .fenglin-v2-spec-table td:first-child {
            font-weight: var(--fenglin-v2-font-bold);
            width: 30%;
            color: var(--fenglin-v2-dark-green);
            background: var(--fenglin-v2-light-gray);
        }

        .fenglin-v2-spec-table th {
            background: var(--fenglin-v2-primary-color);
            color: var(--fenglin-v2-white);
            padding: var(--fenglin-v2-space-md);
            text-align: left;
            font-weight: var(--fenglin-v2-font-medium);
        }

        /* =====================================================
           需求：表格行動裝置優化
           ===================================================== */
        @media (max-width: 600px) {

            /* 規格表（二欄 key-value）：堆疊式 */
            .fenglin-v2-spec-table {
                display: block;
                overflow-x: visible;
            }

            .fenglin-v2-spec-table tbody,
            .fenglin-v2-spec-table tr {
                display: block;
            }

            .fenglin-v2-spec-table tr {
                margin-bottom: var(--fenglin-v2-space-sm);
                border: 1px solid rgba(0,0,0,0.1);
                border-radius: var(--fenglin-v2-radius-md);
                overflow: hidden;
                border-bottom: none; /* 用 border 取代 border-bottom */
            }

            .fenglin-v2-spec-table td {
                display: block;
                width: 100% !important;
                padding: var(--fenglin-v2-space-sm) var(--fenglin-v2-space-md);
            }

            /* 標題格：深綠底白字 */
            .fenglin-v2-spec-table td:first-child {
                background: var(--fenglin-v2-primary-color);
                color: var(--fenglin-v2-white);
                font-size: var(--fenglin-v2-text-sm);
                letter-spacing: 0.03em;
                border-radius: 0;
            }

            /* 內容格：白底 */
            .fenglin-v2-spec-table td:last-child {
                background: var(--fenglin-v2-white);
            }

            /* 比較表（多欄）：橫向捲動 */
            .fenglin-v2-comparison-section .fenglin-v2-comparison-table-compact {
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                border-radius: var(--fenglin-v2-radius-md);
            }

            .fenglin-v2-comparison-section .fenglin-v2-comparison-table-compact thead,
            .fenglin-v2-comparison-section .fenglin-v2-comparison-table-compact tbody,
            .fenglin-v2-comparison-section .fenglin-v2-comparison-table-compact tr,
            .fenglin-v2-comparison-section .fenglin-v2-comparison-table-compact th,
            .fenglin-v2-comparison-section .fenglin-v2-comparison-table-compact td {
                display: revert;
            }

            .fenglin-v2-comparison-section .fenglin-v2-comparison-table-compact th,
            .fenglin-v2-comparison-section .fenglin-v2-comparison-table-compact td {
                min-width: 110px;
                font-size: var(--fenglin-v2-text-sm);
                padding: var(--fenglin-v2-space-sm);
                white-space: normal;
            }
        }

        /* 比較區 */
        .fenglin-v2-comparison-section {
            background: var(--fenglin-v2-light-green);
            padding: var(--fenglin-v2-space-2xl);
            border-radius: var(--fenglin-v2-radius-lg);
            margin: var(--fenglin-v2-space-2xl) 0;
        }
        
        .fenglin-v2-comparison-table-compact {
            width: 100%;
            border-collapse: collapse;
            margin: var(--fenglin-v2-space-xl) 0;
        }
        
        .fenglin-v2-comparison-table-compact td {
            padding: var(--fenglin-v2-space-md);
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }
        
        .fenglin-v2-comparison-table-compact tr:last-child td {
            border-bottom: none;
        }
        
        .fenglin-v2-comparison-table-compact .fenglin-v2-highlight {
            background: rgba(44,92,62,0.1);
            font-weight: var(--fenglin-v2-font-bold);
        }
        
        /* =====================================================
           需求：使用指南 ol 左縮進減少 60%
           原本 margin-left: 24px → 減少60% = 9.6px ≈ 10px
           ===================================================== */
        .fenglin-v2-usage-guide {
            background: var(--fenglin-v2-light-gray);
            border-radius: var(--fenglin-v2-radius-lg);
            padding: var(--fenglin-v2-space-xl);
            margin: var(--fenglin-v2-space-xl) 0;
        }
        
        .fenglin-v2-usage-guide h2 {
            font-size: var(--fenglin-v2-text-2xl);
            color: var(--fenglin-v2-dark-green);
            margin-bottom: var(--fenglin-v2-space-lg);
        }
        
        .fenglin-v2-usage-guide h3 {
            font-size: var(--fenglin-v2-text-xl);
            color: var(--fenglin-v2-primary-color);
            margin: var(--fenglin-v2-space-lg) 0 var(--fenglin-v2-space-md);
        }
        
        .fenglin-v2-usage-guide ol,
        .fenglin-v2-usage-guide ul {
            margin-left: 10px;   /* 原 24px 減少60% = 9.6px，取整為 10px */
            margin-bottom: var(--fenglin-v2-space-md);
            padding-left: 0;
        }
        
        .fenglin-v2-usage-guide li {
            margin-bottom: var(--fenglin-v2-space-sm);
            padding-left: 2px;
        }
        
        /* 卡片樣式 */
        .fenglin-v2-card {
            background: var(--fenglin-v2-white);
            border-radius: var(--fenglin-v2-radius-lg);
            padding: var(--fenglin-v2-space-lg);
            box-shadow: var(--fenglin-v2-shadow-sm);
            border: 1px solid rgba(0,0,0,0.1);
        }
        
        .fenglin-v2-card-content {
            text-align: center;
        }
        
        .fenglin-v2-card-content h4 {
            font-size: var(--fenglin-v2-text-lg);
            color: var(--fenglin-v2-dark-green);
            margin-bottom: var(--fenglin-v2-space-sm);
        }
        
        /* 顧客見證 */
        .fenglin-v2-testimonial-quote {
            font-style: italic;
            color: var(--fenglin-v2-gray);
            border-left: 3px solid var(--fenglin-v2-secondary-color);
            padding-left: var(--fenglin-v2-space-lg);
            margin: var(--fenglin-v2-space-xl) 0;
        }
        
        /* FAQ區 */
        .fenglin-v2-faq-item {
            margin-bottom: var(--fenglin-v2-space-lg);
            border-bottom: 1px solid rgba(0,0,0,0.1);
            padding-bottom: var(--fenglin-v2-space-lg);
        }
        
        .fenglin-v2-faq-question {
            font-weight: var(--fenglin-v2-font-bold);
            color: var(--fenglin-v2-dark-green);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--fenglin-v2-space-sm) 0;
            user-select: none;
        }

        .fenglin-v2-faq-question:hover {
            background-color: rgba(0,0,0,0.02);
        }
        
        .fenglin-v2-faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            display: block !important;
        }

        .fenglin-v2-faq-answer-content {
            padding: 16px 20px;
            background: #f9f9f9;
            border-radius: 10px;
            border-left: 4px solid var(--fenglin-v2-accent-color, #ff9800);
            margin: 10px 0;
        }
        
        .fenglin-v2-faq-item.active .fenglin-v2-faq-answer {
            max-height: 500px !important;
        }

        .faq-toggle {
            font-size: 1.5rem;
            font-weight: bold;
            display: inline-block;
            width: 24px;
            text-align: center;
        }
        
        /* 行動呼籲區 */
        .fenglin-v2-cta-box {
            background: linear-gradient(135deg, var(--fenglin-v2-beige-bg) 0%, rgba(248,245,240,0.9) 100%);
            padding: var(--fenglin-v2-space-2xl);
            border-radius: var(--fenglin-v2-radius-lg);
            border: 2px solid var(--fenglin-v2-primary-color);
        }
        
        /* 工具類 */
        .fenglin-v2-text-center {
            text-align: center;
        }
        
        .fenglin-v2-mt-1 { margin-top: var(--fenglin-v2-space-xs); }
        .fenglin-v2-mt-2 { margin-top: var(--fenglin-v2-space-sm); }
        .fenglin-v2-mt-3 { margin-top: var(--fenglin-v2-space-md); }
        .fenglin-v2-mt-4 { margin-top: var(--fenglin-v2-space-lg); }
        .fenglin-v2-mt-5 { margin-top: var(--fenglin-v2-space-xl); }
        .fenglin-v2-mt-6 { margin-top: var(--fenglin-v2-space-2xl); }
        
        .fenglin-v2-ml-1 { margin-left: var(--fenglin-v2-space-xs); }
        .fenglin-v2-ml-2 { margin-left: var(--fenglin-v2-space-sm); }
        .fenglin-v2-ml-3 { margin-left: var(--fenglin-v2-space-md); }
        
        .fenglin-v2-small {
            font-size: var(--fenglin-v2-text-sm);
        }
        
        /* 響應式設計 */
        @media (max-width: 768px) {
            .fenglin-v2-grid-2 {
                grid-template-columns: 1fr;
            }
            
            .fenglin-v2-grid-3 {
                grid-template-columns: 1fr;
                gap: var(--fenglin-v2-space-md);
            }
            
            .fenglin-v2-product-gallery {
                position: static;
                margin-bottom: var(--fenglin-v2-space-xl);
            }
            
            .fenglin-v2-benefit-grid,
            .fenglin-v2-portability-features,
            .fenglin-v2-scenario-grid {
                grid-template-columns: 1fr;
            }
            
            .fenglin-v2-certificate-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--fenglin-v2-space-md);
            }
            
            .fenglin-v2-granules-hero::before {
                width: 100%;
                opacity: 0.05;
            }
            
            .fenglin-v2-timeline-steps {
                flex-direction: column;
                gap: var(--fenglin-v2-space-lg);
            }
            
            .fenglin-v2-timeline-steps::before {
                display: none;
            }
        }
        
        @media (max-width: 480px) {
            .fenglin-v2-product-info h1 {
                font-size: var(--fenglin-v2-text-2xl);
            }
            
            .fenglin-v2-product-price {
                font-size: var(--fenglin-v2-text-2xl);
            }
            
            /* btn-large 在非並排情境下仍縮小 */
            .fenglin-v2-btn-large {
                padding: var(--fenglin-v2-space-md) var(--fenglin-v2-space-lg);
                font-size: var(--fenglin-v2-text-base);
            }
            
            .fenglin-v2-certificate-grid {
                grid-template-columns: 1fr;
            }
            
            .fenglin-v2-product-thumbnails {
                gap: var(--fenglin-v2-space-xs);
            }
            
            .fenglin-v2-product-thumbnail {
                width: 60px;
                height: 60px;
            }
            
            .fenglin-v2-flavor-options {
                gap: var(--fenglin-v2-space-md);
            }
            
            .fenglin-v2-flavor-option {
                min-width: 80px;
                padding: var(--fenglin-v2-space-sm);
            }

            /* CTA 區按鈕群組行動裝置 padding */
            .fenglin-v2-cta-box .fenglin-v2-mt-4:has(.fenglin-v2-btn) .fenglin-v2-btn-large,
            .fenglin-v2-cta-box .fenglin-v2-mt-4:has(.fenglin-v2-btn) > a.fenglin-v2-btn {
                padding: 10px 6px;
                font-size: 0.82rem;
            }
        }
/* =====================================================
   需求：修正按鈕群組顯示問題
   ===================================================== */

/* 頂部按鈕群組 - 讓按鈕寬度自動調整 */
.fenglin-v2-granules-hero .fenglin-v2-mt-4 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fenglin-v2-space-sm);
    align-items: center;
}

/* 頂部按鈕群組內的連結 - 不要強制寬度 */
.fenglin-v2-granules-hero .fenglin-v2-mt-4 > a {
    flex: 0 1 auto;
    min-width: 160px; /* 設定最小寬度保持一致性 */
    margin: 0;
}

/* 修正按鈕寬度問題 */
.fenglin-v2-granules-hero .fenglin-v2-mt-4 .fenglin-v2-btn {
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

/* 底部 CTA 按鈕群組 - 兩個按鈕並排且等寬 */
.fenglin-v2-cta-box .fenglin-v2-mt-4 {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.fenglin-v2-cta-box .fenglin-v2-mt-4 > a {
    flex: 1 1 0; /* 平均分配寬度 */
    min-width: 0;
    margin: 0 !important;
}

.fenglin-v2-cta-box .fenglin-v2-mt-4 .fenglin-v2-btn {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 8px;
    padding-right: 8px;
}

/* 行動裝置優化 */
@media (max-width: 600px) {
    /* 頂部按鈕在小螢幕也佔滿 */
    .fenglin-v2-granules-hero .fenglin-v2-mt-4 > a {
        flex: 1 1 0;
        min-width: 0;
    }
    
    .fenglin-v2-granules-hero .fenglin-v2-mt-4 .fenglin-v2-btn-large {
        padding: 12px 8px;
        font-size: 0.9rem;
    }
    
    /* CTA 按鈕文字大小調整 */
    .fenglin-v2-cta-box .fenglin-v2-mt-4 .fenglin-v2-btn-large {
        padding: 12px 6px;
        font-size: 0.85rem;
    }
}

/* 非常小的螢幕 (480px 以下) */
@media (max-width: 480px) {
    .fenglin-v2-cta-box .fenglin-v2-mt-4 {
        gap: 6px;
    }
    
    .fenglin-v2-cta-box .fenglin-v2-mt-4 .fenglin-v2-btn-large {
        padding: 10px 4px;
        font-size: 0.8rem;
    }
}
/* =====================================================
   需求：版面優化 - 按鈕大小、間距調整
   ===================================================== */

/* 頂部立即購買按鈕 - 縮小寬度 */
.fenglin-v2-granules-hero .fenglin-v2-product-info > .fenglin-v2-mt-4:first-of-type {
    display: block !important; /* 覆蓋 flex 設定 */
}

.fenglin-v2-granules-hero .fenglin-v2-product-info > .fenglin-v2-mt-4:first-of-type > a {
    display: inline-block;
    width: auto;
    min-width: 180px; /* 設定適當的最小寬度 */
    max-width: 220px; /* 限制最大寬度 */
}

/* 修正使用情境區的上方間距 */
.fenglin-v2-usage-scenarios {
    margin-top: 0 !important; /* 移除上方間距 */
}

.fenglin-v2-product-detail .fenglin-v2-container > .fenglin-v2-usage-scenarios:first-child {
    margin-top: 0 !important;
}

/* 確保所有按鈕連結可點擊區域完整 */
.fenglin-v2-btn {
    display: inline-block;
    cursor: pointer;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

/* 確保連結區域覆蓋整個按鈕 */
a.fenglin-v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(44,92,62,0.2); /* 點擊反饋效果 */
}

/* 移除可能阻擋點擊的偽元素 */
.fenglin-v2-btn::before,
.fenglin-v2-btn::after {
    display: none !important;
}

/* 行動裝置按鈕優化 */
@media (max-width: 768px) {
    /* 頂部按鈕群組修正 */
    .fenglin-v2-granules-hero .fenglin-v2-product-info .fenglin-v2-mt-4 {
        display: flex !important;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: flex-start;
    }
    
    .fenglin-v2-granules-hero .fenglin-v2-product-info .fenglin-v2-mt-4 > a {
        flex: 0 1 auto;
        min-width: 160px;
        margin: 0 !important;
    }
    
    /* 底部 CTA 按鈕群組 - 確保兩個按鈕並排 */
    .fenglin-v2-cta-box .fenglin-v2-mt-4 {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        width: 100%;
    }
    
    .fenglin-v2-cta-box .fenglin-v2-mt-4 > a {
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
        padding: 12px 6px !important;
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* 手機版優化 */
@media (max-width: 480px) {
    /* 頂部立即購買按鈕在小螢幕上調整 */
    .fenglin-v2-granules-hero .fenglin-v2-product-info .fenglin-v2-mt-4 > a {
        min-width: 140px;
        padding: 12px 10px !important;
        font-size: 0.9rem;
    }
    
    /* 底部按鈕更緊湊 */
    .fenglin-v2-cta-box .fenglin-v2-mt-4 {
        gap: 6px;
    }
    
    .fenglin-v2-cta-box .fenglin-v2-mt-4 > a {
        padding: 10px 4px !important;
        font-size: 0.85rem;
    }
    
    /* 確保按鈕文字不被截斷 */
    .fenglin-v2-cta-box .fenglin-v2-mt-4 > a:first-child {
        min-width: 100px;
    }
    
    .fenglin-v2-cta-box .fenglin-v2-mt-4 > a:last-child {
        min-width: 80px;
    }
}

/* 修復可能的點擊問題 - 確保按鈕區域完整 */
.fenglin-v2-granules-hero a,
.fenglin-v2-cta-box a {
    -webkit-transform: translateZ(0); /* 強制硬體加速 */
    transform: translateZ(0);
}

/* 確保按鈕文字在手機上不會太小 */
@media (max-width: 360px) {
    .fenglin-v2-cta-box .fenglin-v2-mt-4 > a {
        font-size: 0.8rem;
        padding: 8px 3px !important;
    }
}

/* 移除可能影響點擊的上層元素 */
.fenglin-v2-product-info,
.fenglin-v2-cta-box {
    position: relative;
    z-index: 5;
}

/* 確保沒有其他元素遮擋按鈕 */
.fenglin-v2-granules-hero::before,
.fenglin-v2-granules-hero::after {
    pointer-events: none; /* 讓背景不阻擋點擊 */
}


/* =====================================================
   緊急修復：頂部立即購買按鈕連結無作用
   ===================================================== */

/* 強制修正頂部按鈕的連結行為 */
.fenglin-v2-granules-hero .fenglin-v2-product-info .fenglin-v2-mt-4 a.fenglin-v2-btn {
    display: inline-block !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 999 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 確保按鈕內的文字可點擊 */
.fenglin-v2-granules-hero .fenglin-v2-product-info .fenglin-v2-mt-4 a.fenglin-v2-btn * {
    pointer-events: none; /* 讓內部元素不阻擋點擊，點擊事件由 a 標籤處理 */
}

/* 移除可能阻擋點擊的父層樣式 */
.fenglin-v2-granules-hero .fenglin-v2-product-info .fenglin-v2-mt-4 {
    position: relative !important;
    z-index: 998 !important;
    overflow: visible !important;
}

/* 確保沒有其他元素遮擋 */
.fenglin-v2-granules-hero {
    overflow: visible !important;
}

.fenglin-v2-product-info {
    position: relative !important;
    z-index: 10 !important;
}

/* 測試用 - 加上紅色邊框確認樣式有套用 測試用，確認後可移除 */
/* .fenglin-v2-granules-hero .fenglin-v2-product-info .fenglin-v2-mt-4 a.fenglin-v2-btn { border: 2px solid red !important; } */