.features-section {
    background-color: #fff;
    padding: 80px 0;
}

.brand-title {
    margin-bottom: 10px;
}

.brand-title img {
    width:353px;
}

.brand-subtitle {
    font-size: 29px;
    color: #0E1618;
    letter-spacing: 6px;
    font-weight: 200;
    margin-top:20px;
}

/* 確保電腦版中所有卡片都是顯示的 */
@media (min-width: 768px) {
    .custom-carousel-item {
        display: block !important;
        position: relative;
    }
    .feature-row-container {
        display: flex !important;
    }
}

/* 卡片容器樣式 */
.feature-card {
    background: #fff;
    border-top: 4px solid #D36750; /* 圖片中的棕紅色邊框 */
    border-radius: 15px;
    padding: 40px 20px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 輕微陰影 */
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.feature-icon-wrapper {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.feature-icon-wrapper img {
    max-height: 100%;
    width: auto;
}

.feature-text {
    font-size: 18px;
    color: #D96A52; /* 文字顏色配合邊框 */
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0;
}

/* 了解更多按鈕 */
.btn-more {
    background-color: #E39483; /* 圖片中的按鈕底色 */
    color: #fff !important;
    padding: 12px 100px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 500;
    border: none;
    box-shadow: 0 4px 15px rgba(227, 148, 131, 0.3);
    transition: all 0.3s ease;
}

.btn-more:hover {
    background-color: #D6816F;
    transform: scale(1.05);
}

/* 手機版微調 */
@media (max-width: 767.98px) {
   
    .feature-card {
        padding: 30px 15px;
    }
}

/* 1. 動畫初始狀態 */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. 動畫觸發狀態 (加上 :not(:hover) 確保不會跟 hover 衝突) */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 3. 修正後的 Feature Card Hover 效果 */
/* 我們增加一個父類別或提高權重，確保 hover 時能覆蓋動畫狀態 */
.features-section .feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.8s ease-out;
}

.features-section .feature-card:hover {
    /* 強制執行 hover 的位移，覆蓋動畫的 translateY(0) */
    transform: translateY(-10px) !important; 
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* --- 手機版樣式 (767px 以下) --- */
@media (max-width: 767.98px) {
    .brand-title img { width: 280px; max-width: 80%; }
    .brand-subtitle { font-size: 16px; letter-spacing: 4px; margin-top: 10px; }

    /* 將我們的 custom 類別轉為 Carousel 行為 */
    .custom-carousel-item {
        display: none;
        width: 100%;
        transition: transform 0.6s ease-in-out;
        padding: 10px 30px; /* 給陰影留空間 */
    }

    .custom-carousel-item.active {
        display: block;
    }

    /* 讓 Row 不要換行，變成橫向排列給 Carousel 用 */
    .feature-row-container {
        display: block !important;
        margin: 0 !important;
    }

    /* 指示圓點 */
    .carousel-indicators { bottom: -40px; }
    .carousel-indicators [button] {
        width: 10px; height: 10px; border-radius: 50%;
        background-color: #D6D6D6; border: none; margin: 0 5px;
    }
    .carousel-indicators .active { background-color: #D36750; }

    .btn-more { padding: 12px 0; width: 90%; max-width: 300px; }
    .carousel-indicators button {
        border: 1px #D36750 solid !important;
    }
}

.carousel-inner {
    overflow: visible;
}

.product-info-section {
    background-color: #F8F9F9;
    padding: 80px 0;
    overflow: hidden;
}

.product-image-wrapper {
    text-align: center;
}

.main-product-img {
    max-width: 100%;
    height: auto;
    width: 353px; /* 桌面版維持原樣 */
}

.info-title {
    font-size: 40px;
    font-weight: bold;
    color: #0E1618;
    line-height: 1.3;
}

.highlight-green {
    color: #68B43E;
}

.info-description {
    font-size: 18px;
    color: #0E1618;
    line-height: 36px;
}

.info-note {
    font-size: 14px;
    color: #0E1618;
    font-weight: 300;
    display: inline-block;
}

/* --- 手機版專屬優化 --- */
@media (max-width: 767.98px) {
    .features-section {
        padding: 60px 0;
    }
    .product-info-section {
        padding: 60px 20px; /* 增加邊距防止文字貼邊 */
    }
    
    .product-content-wrapper {
        text-align: center;
        padding-left: 0 !important;
        margin-bottom: 40px; /* 與下方圖片拉開距離 */
    }

    .info-title {
        font-size: 32px; /* 稍微調大一點，更接近附圖比例 */
        line-height: 1.4;
        margin-bottom: 20px;
        text-align: left;
    }

    .info-description {
        font-size: 16px;
        line-height: 28px; /* 手機版行高縮減，避免太鬆散 */
        text-align: left;  /* 根據附圖，內文通常靠左排版較易閱讀，或維持 center */
    }
    
    .info-note {
        text-align: left;
        width: 100%;
        font-size: 12px;
    }

    .main-product-img {
        width: 85%; /* 手機版圖片自適應縮小 */
        margin: 0 auto;
    }

    /* 調整按鈕在手機版的寬度 */
    .btn-more {
        padding: 12px 0;
        width: 100%;
        max-width: 300px;
    }
}

.how-to-buy-section {
    padding: 80px 0;
    background-color: #fff;
}

.buy-title {
    font-size: 32px;
    font-weight: bold;
    color: #0E1618;
    letter-spacing: 2px;
}

/* 卡片容器 */
.buy-card {
    background: #fff;
    border-top: 4px solid #D36750; /* 配合之前 Feature Card 的顏色 */
    border-radius: 15px;
    padding: 30px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 0 auto;
}

.buy-inner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* 確保手機版會自動換行 */
}

.buy-label {
    font-size: 24px;
    color: #0E1618;
    font-weight: 500;
    margin-right: 5px;
}

/* 標籤群組 */
.buy-tags-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.buy-tag {
    background-color: #F1F2EF; /* 淺灰色底 */
    padding: 10px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    margin: 10px;
    transition: transform 0.2s;
}

.buy-tag:hover {
    transform: scale(1.05);
}

.tag-icon {
    width: 40px;
    margin-right: 5px;
    display: flex;
    justify-content: center;
}

.tag-icon img {
    height: 35px;
    width: auto;
}

.buy-tag span {
    font-size: 20px;
    color: #0E1618;
    font-weight: 500;
}

/* --- 手機版微調 --- */
@media (max-width: 767.98px) {
    .how-to-buy-section {
        padding: 60px 0;
    }

    .buy-label {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0;
        font-size: 20px;
    }

    .buy-tag {
        padding: 8px 15px;
        margin: 5px;
    }

    .buy-tag span {
        font-size: 16px;
    }

    .tag-icon img {
        height: 28px;
    }
}