/* =========================================
   檔案位置: Content/site.css
   更新日期: 2025/12/15
   說明: 包含全站樣式、輪播圖修正、手機版優化
   ========================================= */

/* 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: 767px) {
    .navbar-collapse {
        /* 手機版下拉選單背景稍微加深，確保在透明模式下打開也能看清，但我們主要靠 JS 切換 bg-dark */
        border-radius: 0 0 10px 10px;
    }
}
/* ----------------------------------------------------------- */
/* [核心修正] 輪播圖與 Banner 樣式 (合併優化版) */
/* 同時套用於 .banner-img 和 Bootstrap 預設的 .carousel-item img */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* ✅ 統一輪播圖高度設定（不跳動版本） */
/* ----------------------------------------------------------- */

/* 基本樣式 */
.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;
    clip-path: inset(15% 0 15% 0);
    margin: -50px 0 -50px 0;
}

/* 分類名稱省略 */
.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; /* 滑過時稍微加深 */
    }

/* 升級版：懸浮標語條樣式 */
.brand-slogan-bar {
    /* 1. 背景升級：使用微漸層 */
    background: linear-gradient(135deg, #1e8354 0%, #254b38 100%);
    color: #f8f9fa;
    /* 2. 外觀修飾 */
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* 3. 排版設定 */
    text-align: center;
    padding: 5px 30px;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 2px;
    /* 4. 定位 */
    position: relative;
    z-index: 10;
    margin-top: -26px; /* 負邊距 */
    /* 5. 寬度控制 */
    width: 90%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    /* 6. 特效 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    /* 7. 動畫 */
    animation: floatUp 1s ease-out forwards;
    opacity: 0;
}

/* 定義動畫關鍵影格 */
@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: 200px; /* 限制圖片高度 */
    object-fit: cover; /* 保持比例裁切 */
}
.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;
}