/* =========================================
   檔案位置: Content/site.css

   說明: 包含全站樣式、輪播圖修正、手機版優化、付款頁面、商品詳細頁
   ========================================= */

/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

body {
    padding-top: 70px; /* 導覽列高度，依實際調整 */
    background-color: #F9F9F7;
}

/* ✅ 平板 */
@media (min-width: 577px) and (max-width: 991px) {
    body {
        padding-top: 90px;
    }
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

@media (max-width: 991px) {
    .navbar-collapse {
        /* 手機版下拉選單背景稍微加深，確保在透明模式下打開也能看清，但我們主要靠 JS 切換 bg-dark */
        border-radius: 0 0 10px 10px;
    }
}

/* ----------------------------------------------------------- */
/* [核心修正] 輪播圖與 Banner 樣式 (合併優化版) */
/* ----------------------------------------------------------- */

/* 基本樣式 */
.banner-img,
.carousel-item img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* ✅ 桌面版：依你的輪播圖 2560×860 設定 */
@media (min-width: 992px) {
    .banner-img,
    .carousel-item img {
        height: 560px;
    }
}

/* ✅ 平板 */
@media (min-width: 577px) and (max-width: 991px) {
    .banner-img,
    .carousel-item img {
        height: 350px;
    }
}

/* ✅ 手機 */
@media (max-width: 576px) {
    .banner-img,
    .carousel-item img {
        height: 250px;
    }
}

/* ✅ 平板 + 手機：搜尋框全寬 */
@media (max-width: 991px) {
    .search-form {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/* ----------------------------------------------------------- */

/* 購物車紅點 */
.cart-count-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background-color: #dc3545; /* 醒目的紅色 */
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 50%;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

@media (max-width: 576px) {
    .cart-count-badge {
        font-size: 0.65rem;
        top: -6px;
        right: -10px;
        padding: 1px 5px;
    }
}

/* 商品列表圖片 */
.product-img {
    display: block;
    width: 100%; /* 滿寬 */
    aspect-ratio: 4 / 3; /* 固定比例，避免高度不一致 */
    object-fit: cover; /* 裁切填滿，保持解析度 */
    border-radius: 0.25rem; /* 圓角美化（可選） */
}

@supports not (aspect-ratio: 4 / 3) {
    .product-img {
        height: 140px;
    }
}

/* 手機版再縮小一點 */
/*@media (max-width: 576px) {
    .product-img {
        height: 100px;
    }
}*/

/* 桌機版稍微放大 */
@media (min-width: 992px) {
    .product-img {
        height: 140px;
    }
}

/* 商品詳情圖片 (舊版相容) */
.product-detail-img {
    width: 100%;
    aspect-ratio: 4 / 3; /* 固定比例 */
    object-fit: contain; /* 保持完整圖片 */
    max-height: 300px; /* 避免太大 */
}

/* 植物照護圖片 */
.care img {
    width: 100%;
    height: auto;
}

/* 圖片變暗 */
.img-soldout {
    opacity: 0.4;
}

/* 禁止點擊 */
.disabled-link {
    pointer-events: none;
}

/* 售完標籤 */
.sold-out-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 4px 8px;
    font-size: 0.85rem;
    border-radius: 4px;
    z-index: 10;
}

/* 卡片整體淡化 */
.sold-out {
    opacity: 0.85;
}

/* 分類名稱省略 */
.category-name {
    font-size: 12px; /* 字體縮小 */
    font-weight: bold;
    white-space: nowrap; /* 不換行 */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 6em; /* 控制寬度，大約能放6字 */
    margin: 0 auto; /* 置中 */
}

/* Footer 連結 */
.footer-legal {
    margin-top: 10px;
}

.legal-link {
    font-size: 12px; /* 字體縮小 */
    color: #999; /* 顏色淡化 */
    text-decoration: none;
}

    .legal-link:hover {
        color: #666; /* 滑過時稍微加深 */
    }


/* 定義動畫關鍵影格 */
@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 確保下方內容不會貼太近 */
.main-content {
    padding-top: 60px;
}

/* 圖影並排專區樣式 */
.media-section-container {
    max-width: 1000px;
    margin: 0 auto;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

    .media-section-container h3 {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 1px;
    }

.card img {
    max-height: 300px; /* 限制圖片高度 */
    object-fit: cover; /* 保持比例裁切 */
}

/* 手機版再縮小一點 */
@media (max-width: 576px) {
    .card img {
        max-height: 200px; /* 限制圖片高度 */
    }
}

.google-btn {
    background-color: #fff;
    border: 1px solid #dadce0;
    color: #3c4043;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

    .google-btn:hover {
        background-color: #f7f8f8;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        color: #202124;
    }

.google-icon {
    width: 20px;
    height: 20px;
}

/* 跑馬燈 Bar */
.brand-slogan-bar {
    position: relative;
    z-index: 10; /* 確保浮在最上層 */
    max-width: 80%; /* 寬度不佔滿，比較好看 */
    margin: -25px auto 20px; /* ★關鍵：負的 margin-top 讓它往上重疊 */

    background-color: #2E4A3D; /* 深綠色背景 */
    color: #FDE69B; /* 金色文字 */

    border-radius: 15px; /* 圓角設計 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* 陰影增加立體感 */

    padding: 10px 20px;
    overflow: hidden; /* 藏住跑出去的字 */
    white-space: nowrap;
    text-align: center; /* 預設置中 */
}

.marquee-content {
    display: inline-block;
    padding-left: 100%; /* 從最右邊開始 */
    animation: marquee-slide 15s linear infinite; /* 15秒跑完一輪 */
}

/* 滑鼠移上去暫停 */
.brand-slogan-bar:hover .marquee-content {
    animation-play-state: paused;
}

@keyframes marquee-slide {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

@media (max-width: 768px) {
    .brand-slogan-bar {
        max-width: 80%;
        margin-top: -20px;
        font-size: 0.9rem;
    }
}

/* ========================================================= */
/* ★★★ 修正後的付款方式卡片樣式 (對應新的 View HTML) ★★★ */
/* ========================================================= */
/* ========================================================= */
/* ★★★ 極簡版：無圓點、無勾勾卡片樣式 ★★★ */
/* ========================================================= */

/* 1. 徹底隱藏原生 Radio Input (解決圓點跑出來的問題) */
input.payment-radio-input {
    display: none !important;
}

/* 2. 卡片本體 (Label) 樣式 */
.payment-card-label {
    display: flex;
    flex-direction: row; /* 橫向排列 */
    align-items: center;
    justify-content: center;
    gap: 8px; /* 圖示與文字間距 */

    height: 60px; /* 固定高度 */
    background-color: #f8f9fa; /* 未選中底色 (淺灰) */
    border: 1px solid #dee2e6; /* 未選中邊框 (灰) */
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
    color: #6c757d; /* 未選中文字顏色 (灰) */
    padding: 0 10px;
    margin-bottom: 0;
    width: 100%;
}

    /* 滑鼠移上去 */
    .payment-card-label:hover {
        background-color: #fff;
        border-color: #adb5bd;
        transform: translateY(-1px);
    }

/* 3. ★★★ 選中狀態 (Checked) ★★★ */
/* 當被選中時，只改變邊框和顏色，不顯示其他東西 */
input.payment-radio-input:checked + .payment-card-label {
    background-color: #fff !important;
    border: 1px solid #bfa15f !important; /* 變成金色邊框 */
    color: #000 !important; /* 文字變深黑 */
    box-shadow: 0 4px 8px rgba(191, 161, 95, 0.15); /* 加一點金色陰影 */
}

    /* 選中時圖示也變金 */
    input.payment-radio-input:checked + .payment-card-label i {
        color: #bfa15f !important;
    }

/* 4. 圖示與文字設定 */
.payment-card-label i {
    font-size: 1.2rem;
    margin-bottom: 0;
}

.payment-card-label span {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
}

.messenger-float-btn {
    position: fixed;
    bottom: 30px; /* 距離底部 30px */
    right: 30px; /* 距離右邊 30px */
    width: 60px;
    height: 60px;
    background-color: #0084FF; /* Messenger 官方藍色 */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999; /* 確保浮在最上層 */
    transition: all 0.3s ease;
    text-decoration: none; /* 移除底線 */
}

    /* 滑鼠移上去的效果 */
    .messenger-float-btn:hover {
        transform: scale(1.1); /* 稍微放大 */
        background-color: #006bcf; /* 顏色變深 */
        color: white;
    }

/* 手機版稍微調整位置，避免擋到其他東西 */
@media (max-width: 768px) {
    .messenger-float-btn {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 26px;
    }
}

/* ========================================================= */
/* ★★★ 雜誌風 / 首頁 區塊樣式 ★★★ */
/* ========================================================= */

/* 1. 響應式圖片設定 (回復標準圓角) */
.plant-responsive-img {
    width: 100%;
    height: 250px; /* 手機版高度 */
    object-fit: cover;
    object-position: center;
    display: block;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 12px;
    transition: filter 0.3s ease;
}

/* 2. 電腦版高度設定 */
@media (min-width: 768px) {
    .plant-responsive-img {
        height: 400px; /* 電腦版高度 */
    }
}

/* 3. 播放按鈕樣式 (懸浮在圖片右下角) */
.video-trigger-btn {
    position: absolute;
    bottom: -10px;
    right: 20px;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s, background 0.2s;
}

    .video-trigger-btn:hover {
        transform: translateY(-2px);
        background-color: #fafafa;
    }

/* 4. 彈窗 (Modal) 樣式 */
.video-modal-overlay {
    display: none; /* 預設隱藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.video-modal-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
}

    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

.close-modal-btn {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
}

/* ========================================================= */
/* ★★★ 商品詳細頁 (Product Detail) 專用樣式 ★★★ */
/* ========================================================= */

/* 1. 商品主圖 (詳細頁專用) */
.product-main-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    max-height: 300px;
}

@media (min-width: 768px) {
    .product-main-img {
        height: 400px; /* 電腦版高度 */
        max-height: 400px;
    }
}

/* 2. 規格按鈕容器 */
.spec-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
}

    /* 規格按鈕 - 自訂卷軸 */
    .spec-container::-webkit-scrollbar {
        width: 6px;
        display: block;
    }

    .spec-container::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    .spec-container::-webkit-scrollbar-track {
        background: transparent;
    }

/* 3. 規格按鈕本體 */
.spec-item {
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 44px;
    padding: 0 15px;
    margin: 0;
}

    .spec-item img {
        width: 30px;
        height: 30px;
        object-fit: cover;
        border-radius: 2px;
        margin-right: 8px;
        border: 1px solid #f0f0f0;
        display: block;
    }

    .spec-item span {
        font-size: 14px;
        color: #333;
        line-height: 1;
        white-space: nowrap;
    }

    .spec-item.active {
        border: 1px solid #198754;
        background-color: #D8F8E9;
        color: #198754;
    }

        .spec-item.active span {
            color: black;
        }

    .spec-item:hover {
        border-color: #999;
    }

    .spec-item.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: #f9f9f9;
        pointer-events: none;
    }

        .spec-item.disabled img {
            filter: grayscale(100%);
        }

.product-tag-badge {
    position: absolute; /* Key: Positions it relative to the parent image container */
    top: 10px; /* Distance from top */
    left: 10px; /* Distance from left */
    z-index: 10; /* Ensures it stays on top of the image */

    background-color: #dc3545; /* Red background (Bootstrap 'danger' color) */
    color: white; /* White text */
    padding: 4px 10px; /* Inner spacing */

    font-size: 0.85rem; /* Font size */
    font-weight: 700; /* Bold text */
    letter-spacing: 0.5px; /* Slight letter spacing */
    line-height: 1; /* Tighter line height */

    border-radius: 4px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.25); /* Subtle shadow for depth */
    /* Optional: Limit width if text is too long */
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Important: For Style B (Ribbon) to work, the parent card must hide overflow */
/* Your current .card CSS doesn't strictly enforce this, so we add it here just in case */
.card {
    overflow: hidden;
}

.boug-page-wrapper {
    --boug-magenta: #c2185b; /* 九重葛紫紅 */
    --boug-light-pink: #fce4ec; /* 極淺粉紅背景 */
    --boug-green: #2e5c32; /* 葉片深綠 */
    --boug-text: #37474f;
    /* 頁面基礎設定 */
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #fafafa;
    width: 100%;
    overflow-x: hidden; /* 防止橫向卷軸 */
}

/* 標題專用字體 */
.boug-serif-font {
    font-family: 'Noto Serif TC', serif;
    letter-spacing: 0.05em;
}

/* --- 1. Hero 區塊 (改名: boug-hero) --- */
.boug-hero-section {
    position: relative;
    /* 背景圖 */
    background: url('https://res.cloudinary.com/drgylgord/image/upload/v1770353033/IMG_0115_vxoqna.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: scroll; /* 手機版防抖動 */
    height: 70vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 992px) {
    .boug-hero-section {
        background-attachment: fixed; /* 電腦版視差滾動 */
    }
}

.boug-hero-box {
    background: rgba(255, 255, 255, 0.85);
    padding: 2rem 3rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.6);
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    max-width: 85%;
    border-radius: 4px;
}

.boug-hero-title {
    color: var(--boug-magenta);
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-family: 'Noto Serif TC', serif;
    line-height: 1.2;
}

.boug-hero-subtitle {
    color: var(--boug-green);
    font-size: 1.1rem;
    margin-top: 10px;
    font-weight: 500;
}

/* --- 2. 故事區塊 (改名: boug-story) --- */
.boug-story-section {
    background: linear-gradient(to bottom, #fff, var(--boug-light-pink));
    padding: 4rem 0;
}

.boug-story-text {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--boug-text);
    text-align: justify;
}

.boug-highlight {
    color: var(--boug-magenta);
    font-weight: 500;
    font-size: 1.2rem;
    border-bottom: 2px solid var(--boug-light-pink);
}

/* --- 3. 商品區塊 (改名: boug-product) --- */
.boug-product-section {
    padding-bottom: 5rem;
    background-color: var(--boug-light-pink);
}

/* 卡片樣式 (改名: boug-card) */
.boug-card {
    background: #fff;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.boug-card-img-wrap {
    position: relative;
    padding-top: 100%; /* 1:1 正方形 */
    overflow: hidden;
    display: block;
}

.boug-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 滑鼠移過圖片放大 */
.boug-card:hover .boug-card-img {
    transform: scale(1.08);
}

.boug-card-body {
    padding: 1.2rem;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.boug-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
    font-family: 'Noto Serif TC', serif;
}

.boug-card-price {
    color: var(--boug-magenta);
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* 按鈕樣式 (改名: boug-btn) */
.boug-btn {
    background-color: var(--boug-green);
    color: #fff;
    border-radius: 50px;
    padding: 8px 25px;
    letter-spacing: 1px;
    transition: all 0.3s;
    border: 1px solid var(--boug-green);
    display: inline-block;
    text-decoration: none;
    margin-top: auto; /* 將按鈕推到底部 */
}

    .boug-btn:hover {
        background-color: transparent;
        color: var(--boug-green);
        text-decoration: none;
    }

.boug-btn-outline {
    background-color: transparent;
    color: #333;
    border: 1px solid #333;
    border-radius: 50px;
    padding: 10px 40px;
    transition: 0.3s;
}

    .boug-btn-outline:hover {
        background-color: #333;
        color: #fff;
        text-decoration: none;
    }

/* --- 手機版微調 --- */
@media (max-width: 768px) {
    .boug-hero-box {
        padding: 1.5rem;
        width: 90%;
        max-width: 95%;
    }

    .boug-story-section {
        padding: 3rem 0;
    }

    .boug-story-text {
        text-align: left; /* 手機靠左讀起來比較順 */
    }
    /* 手機版卡片字體稍微調小 */
    .boug-card-title {
        font-size: 1rem;
    }
}
/* =========================================
   九重葛特輯 - 特效專用 CSS
   (請貼在 site.css 最下方)
   ========================================= */

/* --- 1. 花瓣飄落特效 (Falling Petals) --- */
#boug-petal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 關鍵：讓點擊穿透，不會擋住按鈕 */
    z-index: 9999;
    overflow: hidden;
}

.boug-petal {
    position: absolute;
    top: -50px; /* 從螢幕上方開始 */
    background-color: rgba(194, 24, 91, 0.4); /* 半透明洋紅色 */
    border-radius: 50% 0 50% 50%; /* 模擬苞片形狀 */
    animation: boug-fall linear infinite;
}

/* 定義飄落動畫 */
@keyframes boug-fall {
    0% {
        transform: translateY(0) rotate(0deg) translateX(0);
        opacity: 0.8;
    }

    100% {
        transform: translateY(100vh) rotate(360deg) translateX(50px);
        opacity: 0;
    }
}

/* --- 2. 滑動浮現特效 (Scroll Reveal) --- */
/* 初始狀態：隱藏且位置偏下 */
.boug-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

    /* 啟動狀態：顯示且位置歸零 (由 JS 加入此 class) */
    .boug-reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

/* 圖片滑入時的縮放效果 (需配合 HTML 的 boug-card) */
.boug-card.img-zoom-active .boug-card-img {
    transform: scale(1.05);
}

/* --- 3. 延遲出現 (讓畫面有層次感) --- */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}
/* ==========================================================================
   💜 鳶尾花特輯 (Iris) - 完整排版與特效修復包
   (包含：Hero大圖、色彩系統、卡片樣式、螢火蟲特效)
   ========================================================================== */

/* --- 1. 鳶尾花配色變數與基礎設定 --- */
.iris-page-wrapper {
    --iris-purple: #6a1b9a; /* 主色：深紫 */
    --iris-light-blue: #e3f2fd; /* 背景：水藍 */
    --iris-accent: #fbc02d; /* 點綴：花蕊黃 */
    --iris-text: #2c3e50; /* 文字：深灰藍 */

    font-family: 'Noto Sans TC', sans-serif;
    background-color: #f5fafd; /* 極淡藍白背景 */
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

.iris-serif-font {
    font-family: 'Noto Serif TC', serif;
    letter-spacing: 0.05em;
}

/* --- 2. Hero 大圖區塊 (修復圖片消失問題) --- */
.iris-hero-section {
    position: relative;
    /* ★★★ 這裡設定背景圖 ★★★ */
    background: url('https://res.cloudinary.com/drgylgord/image/upload/v1770607662/unnamed_huauo3.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: scroll;
    height: 70vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 992px) {
    .iris-hero-section {
        background-attachment: fixed; /* 電腦版視差滾動 */
    }
}

.iris-hero-box {
    background: rgba(255, 255, 255, 0.8);
    padding: 2.5rem 3.5rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.6);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 40px rgba(106, 27, 154, 0.2);
    max-width: 90%;
    border-radius: 4px;
}

.iris-hero-title {
    color: var(--iris-purple);
    font-size: clamp(2rem, 5vw, 3.8rem);
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-family: 'Noto Serif TC', serif;
}

.iris-hero-subtitle {
    color: #546e7a;
    font-size: 1.15rem;
    margin-top: 10px;
    font-weight: 500;
    letter-spacing: 2px;
}

/* --- 3. 故事區塊 --- */
.iris-story-section {
    background: linear-gradient(to bottom, #fff, var(--iris-light-blue));
    padding: 5rem 0;
}

.iris-story-text {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--iris-text);
    text-align: justify;
}

.iris-highlight {
    color: var(--iris-purple);
    font-weight: 500;
    border-bottom: 2px solid var(--iris-accent);
}

/* --- 4. 商品區塊 --- */
.iris-product-section {
    padding-bottom: 6rem;
    background-color: var(--iris-light-blue);
}

/* 卡片樣式 */
.iris-card {
    background: #fff;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(106, 27, 154, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .iris-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(106, 27, 154, 0.15);
    }

.iris-card-img-wrap {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    display: block;
}

.iris-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

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

.iris-card.img-zoom-active .iris-card-img {
    transform: scale(1.05);
}

.iris-card-body {
    padding: 1.5rem;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.iris-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--iris-purple);
    margin-bottom: 0.5rem;
    font-family: 'Noto Serif TC', serif;
}

.iris-card-price {
    color: #d81b60;
    font-weight: bold;
    font-size: 1.15rem;
    margin-bottom: 1.2rem;
}

/* --- 5. 按鈕樣式 (紫色系) --- */
.iris-btn {
    background-color: var(--iris-purple);
    color: #fff;
    border-radius: 4px;
    padding: 10px 30px;
    letter-spacing: 1px;
    transition: all 0.3s;
    border: 1px solid var(--iris-purple);
    display: inline-block;
    text-decoration: none;
    margin-top: auto;
}

    .iris-btn:hover {
        background-color: transparent;
        color: var(--iris-purple);
    }

.iris-btn-outline {
    background-color: transparent;
    color: var(--iris-purple);
    border: 1px solid var(--iris-purple);
    border-radius: 30px;
    padding: 12px 40px;
    transition: 0.3s;
}

    .iris-btn-outline:hover {
        background-color: var(--iris-purple);
        color: #fff;
        text-decoration: none;
    }

/* --- 6. 手機版 RWD 微調 --- */
@media (max-width: 768px) {
    .iris-hero-box {
        padding: 2rem;
        width: 90%;
    }

    .iris-story-text {
        text-align: left;
    }

    .iris-card-title {
        font-size: 1.05rem;
    }
}


#iris-petal-container {
    position: fixed; /* 關鍵：鎖定螢幕，不隨捲動跑掉 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* 讓點擊穿透 */
    z-index: 9999;
    overflow: hidden;
}

/* =========================================
   ✨ B. 鳶尾花專屬：上浮的螢火蟲 (Rising Fireflies)
   ========================================= */
.iris-petal {
    position: absolute;
    /* 螢火蟲位置由 JS 隨機決定，不需要 top */
    background-color: #ff8f00; /* 螢火蟲顏色：深琥珀色 */
    border-radius: 50%; /* 形狀：圓形 */
    border: 1px solid rgba(255, 143, 0, 0.5); /* 邊框：增加實體感 */
    box-shadow: 0 0 8px 2px rgba(255, 111, 0, 0.6); /* 光暈：橘金色光暈 */
    animation: firefly-float ease-in-out infinite;
    opacity: 0;
}

/* 定義上浮動畫 */
@keyframes firefly-float {
    0% {
        transform: translateY(110vh) translateX(0) scale(0.5);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(-10vh) translateX(30px) scale(1);
        opacity: 0;
    }
}

/* =========================================
   C. 共用滑動浮現特效 (Scroll Reveal)
   ========================================= */
.iris-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

    .iris-reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

/* =========================================
           🎨 彩葉草特輯專用樣式 (Coleus Style)
           ========================================= */

.coleus-page-wrapper {
    --c-burgundy: #880e4f;
    --c-lime: #c6ff00;
    --c-magenta: #d500f9;
    --c-orange: #ff6d00;
    --c-dark: #263238;
    /* 背景維持極淡暖色 */
    background: transparent;
    font-family: 'Noto Sans TC', sans-serif;
    width: 100%;
    overflow-x: hidden;
    position: relative;
    color: var(--c-dark);
    /* ★關鍵：讓背景的光斑只在 wrapper 內顯示，不蓋住導覽列 */
    z-index: 2;
}

.coleus-serif {
    font-family: 'Noto Serif TC', serif;
}

/* --- 1. Hero 區塊 --- */
.coleus-hero {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://res.cloudinary.com/drgylgord/image/upload/v1770620815/IMG_9849_nje6py.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    height: 75vh; /* 把 50vh 改回 75vh (讓它變高) */
    min-height: 500px; /* 把 350px 改回 500px (避免太扁) */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 15px;
    z-index: 2; /* 確保 Hero 在光斑之上 */
}

.coleus-hero-box {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1.5rem 2.5rem;
    max-width: 550px;
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

    .coleus-hero-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, var(--c-lime), var(--c-magenta), var(--c-burgundy), var(--c-orange));
    }

.coleus-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    margin-bottom: 0.5rem;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
    letter-spacing: 1px;
    line-height: 1.1;
}

.coleus-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--c-lime);
    background: rgba(0,0,0,0.5);
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-block;
}

/* --- 2. 故事區塊 --- */
.coleus-story {
    padding: 5rem 0;
    /* 改為透明背景，讓背後的光斑透出來 */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px); /* 稍微模糊背景，讓文字清楚 */
    position: relative;
    z-index: 2;
}

.coleus-story-title {
    color: var(--c-dark);
    font-weight: bold;
}

.coleus-title-deco {
    width: 50px;
    height: 4px;
    background: linear-gradient(to right, var(--c-orange), var(--c-burgundy));
    margin: 15px auto;
    border-radius: 2px;
}

.coleus-text {
    font-size: 1.15rem;
    line-height: 2;
    color: #444;
    font-weight: 500;
}

.coleus-highlight {
    background: linear-gradient(120deg, transparent 0%, rgba(198, 255, 0, 0.5) 0%);
    color: var(--c-dark);
    font-weight: 800;
    padding: 2px 4px;
}

/* --- 3. 商品區塊 --- */
.coleus-product {
    padding-bottom: 6rem;
    position: relative;
    z-index: 2;
}

.coleus-product-heading {
    color: var(--c-dark);
}

/* 卡片設計 */
.coleus-card {
    background: #fff;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border-bottom: 3px solid var(--c-lime);
}

@media (min-width: 992px) {
    .coleus-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 40px rgba(0,0,0,0.15);
        border-bottom-color: var(--c-magenta);
    }

        .coleus-card:hover .coleus-img {
            transform: scale(1.15) rotate(3deg);
        }
}

.coleus-card:active {
    transform: scale(0.97);
    transition: 0.1s;
}

.coleus-img-wrap {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}

.coleus-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.coleus-body {
    padding: 1.25rem;
    text-align: center;
    background: #fff;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.coleus-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--c-dark);
}

.coleus-price {
    font-size: 1.1rem;
    color: var(--c-orange);
    font-weight: 800;
    margin-bottom: 1.2rem;
}

/* 按鈕：鮮活翠綠 */
.coleus-btn {
    background: linear-gradient(45deg, #2e7d32, #64dd17);
    color: #fff;
    padding: 10px 0;
    width: 85%;
    margin: auto auto 0;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
    letter-spacing: 1px;
    border: none;
    box-shadow: 0 4px 15px rgba(100, 221, 23, 0.3);
}

    .coleus-btn:hover {
        background: linear-gradient(45deg, #64dd17, #aeea00);
        transform: scale(1.05);
        color: #fff;
        box-shadow: 0 6px 20px rgba(100, 221, 23, 0.5);
    }

#coleus-dots-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

/* --- 外層包裹器：負責「呼吸」動畫 --- */
.leaf-wrapper {
    position: absolute;
    top: 0;
    opacity: 0; /* 一開始隱藏 */
    animation: leaf-breathe linear infinite; /* 套用呼吸動畫 */
}

/* --- 內層葉子：負責「形狀、顏色、角度」 --- */
.coleus-leaf {
    width: 100%;
    height: 100%;
    /* ★關鍵：利用邊框圓角製造葉子形狀 (左上/右下尖，右上/左下圓) */
    border-radius: 0 50% 0 50%;
    /* 加入一點點陰影增加立體感 */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* 定義動畫：浮現 -> 慢慢縮小消失 */
@keyframes leaf-breathe {
    0% {
        opacity: 0;
        transform: scale(0.4); /* 從小小的開始 */
    }

    25% {
        opacity: 0.7; /* 快速浮現 (透明度 0.7 保持清透感) */
        transform: scale(1); /* 變回正常大小 */
    }

    100% {
        opacity: 0; /* 慢慢變透明 */
        transform: scale(0.2); /* 最後縮到很小不見 */
    }
}

/* RWD */
@media (max-width: 768px) {
    .coleus-hero {
        height: 65vh; /* 原本是 40vh (太扁)，改成 65vh (佔螢幕 2/3) */
        min-height: 450px; /* 原本是 300px，改大一點確保字不會切到 */
        background-attachment: scroll;
    }

    .coleus-hero-box {
        padding: 1.5rem 1rem;
        width: 85%;
        backdrop-filter: blur(8px);
    }

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

    .coleus-story {
        padding: 3.5rem 0;
    }

    .coleus-text {
        text-align: left;
        padding: 0 5px;
    }

    .coleus-product {
        padding-bottom: 4rem;
    }

    .coleus-card {
        border-radius: 12px;
    }

    .coleus-btn {
        width: 100%;
        padding: 10px 0;
    }
}

.coleus-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

    .coleus-reveal.active {
        opacity: 1;
        transform: translateY(0);
    }