/* 1. 基本重置與字體 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    line-height: 1.8;
    color: #5D4037;   
    background-color: #FAF8F2; /* 米亞麻色背景 */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; 
}

h2, h3, h4 {
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
}

h3 {
    font-size: 30px;
    color: #8D6E63;
    padding-bottom: 10px;
    border-bottom: 2px solid #C59D5F;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 40px;
}

/* --- 日文翻譯通用樣式 --- */
.jp-text {
    display: block;        
    font-size: 0.85em;     
    color: #8D6E63;        
    font-weight: 400;      
    margin-top: 4px;       
    line-height: 1.5;
}

.h3-jp {
    display: block;
    font-size: 0.6em;      
    color: #A1887F;
    font-weight: 400;
    margin-top: 5px;
}

.nav-jp {
    display: block;
    font-size: 0.7em;
    color: #F5E6D3; 
    font-weight: 400;
    margin-top: 2px;
}
/* ----------------------- */

.section {
    padding: 70px 0;
}

/* 品牌故事樣式 (About Page) */
.about-content p {
    margin-bottom: 30px; 
    font-size: 17px;
    text-align: left; 
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    line-height: 1.9; 
    border-bottom: 1px dashed #E6D8C8; 
    padding-bottom: 20px;
}
.about-content p:last-child { border-bottom: none; }
.greeting { font-size: 20px !important; color: #C59D5F; margin-bottom: 30px !important; }
.bg-warm { background-color: #FFFDF9; border-top: 1px solid #E6D8C8; }

/* 2. 頂部導覽列 */
#main-header {
    background: #C59D5F;
    border-bottom: 4px solid #A1887F;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(93, 64, 55, 0.1);
}
#main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; 
}
.logo { font-size: 26px; font-weight: 900; margin: 0; }
.logo a {
    color: #FFF3E0; /* 溫暖的米白奶油色 */
    text-decoration: none;
    text-shadow: 1px 1px rgba(93, 64, 55, 0.4);
    transition: color 0.3s, text-shadow 0.3s;
}
.logo a:hover { color: #FFFFFF; text-shadow: 1px 1px rgba(93, 64, 55, 0.6); }

#main-nav a {
    margin-left: 15px;
    font-weight: 500;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.3s;
    opacity: 0.95;
    font-size: 16px;
    padding: 8px 15px;
    border: 1px solid transparent; 
    border-radius: 10px; 
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}
#main-nav a:hover, .nav-highlight {
    color: #FFFFFF !important;
    background-color: transparent !important; 
    border: 1px solid rgba(255, 255, 255, 0.7); 
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); 
    opacity: 1;
}

/* 3. 首圖區塊 */
.hero-image-container { padding: 40px 0 0 0 !important; text-align: center; }
.hero-image {
    width: 100%; max-width: 100%; height: auto; display: block; border-radius: 8px;
    box-shadow: 0 10px 25px rgba(93, 64, 55, 0.15);
}

/* 4. 首頁品牌宣言 (名片/信箋風格) */
.intro-card-section { padding: 30px 0 10px 0 !important; }
.brand-intro-card {
    background-color: #FFFDF5; 
    max-width: 800px; margin: 0 auto; padding: 40px 30px; 
    border: 1px solid #C59D5F; 
    outline: 3px double #C59D5F; 
    outline-offset: -10px;       
    border-radius: 4px;        
    box-shadow: 0 10px 25px rgba(93, 64, 55, 0.08); 
    text-align: center;
    position: relative;
}
.card-title { font-size: 26px; color: #5D4037; font-weight: 700; margin-bottom: 10px; letter-spacing: 2px; }
.card-tags {
    display: inline-block; background-color: #F0E5D8; color: #6D4C41; padding: 5px 20px; border-radius: 20px;
    font-size: 15px; font-weight: 600; margin-bottom: 25px; letter-spacing: 1px;
}
.card-slogan { font-size: 24px; color: #C59D5F; font-weight: 900; margin-bottom: 20px; position: relative; display: inline-block; }
.card-slogan::after { content: ""; display: block; width: 40px; height: 3px; background: #E6D8C8; margin: 8px auto 0; }
.card-desc { font-size: 16px; color: #795548; line-height: 2.0; }


/* 5. 產品列表 (List Page) */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px; margin-top: 40px;
}
.cake-card { background: transparent; text-align: center; transition: transform 0.3s ease; }
.cake-card:hover { transform: translateY(-5px); }
.img-frame {
    width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 20px; 
    border: 3px solid #E6D8C8; box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin-bottom: 15px;
}
.cake-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.cake-card:hover img { transform: scale(1.05); }
.cake-card h4 { color: #5D4037; margin: 10px 0 10px; font-size: 19px; font-weight: 700; line-height: 1.4;}
.link-more {
    display: inline-block; padding: 5px 15px; color: #C59D5F; border: 1px solid #C59D5F;
    border-radius: 20px; text-decoration: none; font-size: 14px; transition: all 0.3s; margin-top: 10px;
}
.link-more:hover { background-color: #C59D5F; color: #FFFFFF; }


/* 6. 單一產品頁面 (Detail Page) */
.product-page { background-color: #FAF8F2; }
.product-layout { max-width: 900px; margin: 0 auto; display: block; }
.product-info-card {
    background: #FFFEFA; padding: 40px; border: 2px solid #C59D5F; 
    border-radius: 12px; box-shadow: 0 8px 20px rgba(93, 64, 55, 0.08); 
    margin-bottom: 40px; 
}
.product-info-card h2 { text-align: center; margin-bottom: 30px; font-size: 32px; color: #5D4037; border-bottom: 1px solid #E6D8C8; padding-bottom: 15px; }
.card-content p { margin-bottom: 20px; font-size: 17px; color: #795548; line-height: 1.9; text-align: left; max-width: 100%;}
.highlight { color: #8D6E63; font-weight: 600; background-color: #FFF8E1; padding: 15px 20px; border-radius: 8px; margin: 20px 0;}
.notes { list-style: none; padding: 0; margin-top: 30px; }
.notes li { margin-bottom: 15px; font-size: 16px; }
.note-important { color: #D84315; font-weight: 700; }
.note-recommend { color: #C59D5F; font-weight: 700; }
.btn-back { display: block; text-align: center; margin-top: 30px; color: #A1887F; text-decoration: none; font-weight: 600; font-size: 15px; }
.product-gallery { width: 100%; }
.gallery-container { display: flex; flex-direction: column; gap: 30px; }
.product-img { width: 100%; height: auto; border-radius: 12px; border: 1px solid #E6D8C8; box-shadow: 0 5px 15px rgba(93, 64, 55, 0.1); display: block; }

/* 7. 單一產品風格 (Style 01 - 14) */
.style-01 { border-style: double; border-width: 5px; border-color: #Bcaaa4; }
.style-02 { border: 3px solid #6D4C41; background-color: #FFFDFB; }
.style-03 { border: 3px dashed #A1887F; border-radius: 20px; }
.style-04 { border: 4px dotted #EF6C00; background-color: #FFFAFA; }
.style-05 { border: 4px dashed #FBC02D; background-color: #FFFDE7; }
.style-06 { border: 5px solid #8D6E63; outline: 2px dashed #FFB74D; outline-offset: -10px; background-color: #FFFDE7; }
.style-07 { border: 4px double #4E342E; background-color: #FAFAFA; }
.style-08 { border: 4px solid #FFA000; border-radius: 8px; }
.style-09 { border: 3px solid #BA68C8; background-color: #F3E5F5; }
.style-10 { border: 4px dotted #E91E63; background-color: #FCE4EC; }
.style-11 { border: 4px solid #424242; background-color: #FAFAFA; box-shadow: 10px 10px 0px rgba(0,0,0,0.1); }
.style-12 { border: 5px double #FDD835; background-color: #FFFDE7; border-radius: 15px; }
.style-13 { border: 4px solid #E53935; outline: 2px solid #FFEB3B; outline-offset: -8px; background-color: #FFEBEE; }
.style-14 { border: 3px solid #283593; border-radius: 4px; background-color: #E8EAF6; }

/* 8. 聯繫訂購頁面 & 社群按鈕 */
.contact-card { background: #FFFFFF; max-width: 600px; margin: 0 auto; padding: 50px 30px; border-radius: 15px; border: 2px solid #E6D8C8; box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); }
.contact-intro { font-size: 18px; margin-bottom: 40px; color: #8D6E63; }
.info-group { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; text-align: left; }
.info-icon { font-size: 40px; margin-right: 20px; width: 60px; height: 60px; background: #FFF8E1; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #C59D5F; }
.info-text { flex: 1; }
.label { display: block; font-size: 12px; text-transform: uppercase; color: #A1887F; letter-spacing: 1px; }
.info-main { display: block; font-size: 24px; color: #5D4037; margin: 5px 0; }
.divider { border: 0; height: 1px; background: #E6D8C8; margin: 30px 0; }
.social-links { margin-top: 10px; display: flex; gap: 15px; flex-wrap: wrap; }
.social-btn { display: inline-block; padding: 10px 20px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 15px; transition: transform 0.2s, box-shadow 0.2s; color: white !important; }
.social-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.social-btn.fb { background-color: #1877F2; border: 1px solid #1877F2; }
.social-btn.ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border: 1px solid #dc2743; }
.map-wrapper { max-width: 800px; margin: 60px auto 0; text-align: center; }
.map-frame { border-radius: 15px; overflow: hidden; border: 3px solid #E6D8C8; box-shadow: 0 5px 15px rgba(93, 64, 55, 0.1); background-color: #E6D8C8; }

/* 9. 底部隨機推薦區塊 */
.recommend-section { margin-top: 60px; padding-top: 40px; border-top: 2px dashed #E6D8C8; background-color: #FFFDF9;}
.recommend-title { text-align: center; font-size: 24px; color: #8D6E63; margin-bottom: 30px; font-weight: 700; }
.rec-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; 
    max-width: 700px; margin: 0 auto; 
}
.rec-card { background: #FFFFFF; border: 1px solid #E6D8C8; border-radius: 10px; overflow: hidden; text-align: center; padding-bottom: 15px; transition: transform 0.3s; }
.rec-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.rec-img-frame { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-bottom: 1px solid #E6D8C8; }
.rec-img-frame img { width: 100%; height: 100%; object-fit: cover; }
.rec-card h4 { font-size: 18px; color: #5D4037; margin: 15px 0 5px 0; padding: 0 10px; }
.rec-link {
    display: inline-block; font-size: 14px; color: #C59D5F; text-decoration: none; border: 1px solid #C59D5F;
    padding: 5px 15px; border-radius: 20px; margin-top: 10px;
}
.rec-link:hover { background-color: #C59D5F; color: #FFFFFF; }


/* 10. RWD 手機版優化 */
@media (max-width: 768px) {
    .container { padding: 0 25px; }
    #main-nav { display: none; flex-direction: column; width: 100%; position: absolute; top: 75px; left: 0; background: #C59D5F; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 10px 0; }
    #main-nav.active { display: flex; }
    #main-nav a { margin: 5px 20px; text-align: center; width: auto; display: block; }
    .menu-toggle { display: block; }
    .section { padding: 50px 0; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .cake-card h4 { font-size: 16px; }
    .rec-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .rec-card h4 { font-size: 16px; }
    .social-links { justify-content: center; }
    .info-group { flex-direction: column; text-align: center; }
    .info-icon { margin-right: 0; margin-bottom: 10px; }
    .info-text { text-align: center; }
    .info-main { font-size: 20px; }
    .map-frame iframe { height: 300px; }
    /* 修正品牌故事文字貼邊問題 */
    .about-content p {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
        padding: 0 10px; /* 多加一點內距保險，確保文字不會貼邊 */
    }
}

/* 9. 底部區塊 (Footer) - 修改為分欄佈局與動畫 */
footer {
    background-color: #5D4037; /* 深咖啡色背景 */
    color: #EFEBE9;
    padding: 40px 0 20px 0; /* 上方增加 padding，下方稍微縮小 */
    font-size: 14px;
    letter-spacing: 1px;
}

.footer-main-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 區隔線 */
}

.footer-column {
    flex-basis: 30%; /* 每欄佔比 */
    min-width: 150px;
}

.footer-column h4 {
    color: #F5E6D3; /* 淺奶油色標題 */
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: left;
}

/* 快速連結樣式 */
.footer-links ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.footer-links a {
    color: #EFEBE9;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #C59D5F; /* 土黃色高亮 */
}

.footer-contact p {
    margin-bottom: 8px;
    text-align: left;
}

/* 小雞動態圖案樣式與動畫 */
.chick-wiggle {
    display: inline-block;
    font-size: 24px;
    animation: wiggling 1.5s ease-in-out infinite; /* 套用動畫 */
    margin-left: 5px;
}

@keyframes wiggling {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(3px) rotate(3deg); }
    75% { transform: translateX(-3px) rotate(-3deg); }
}

/* RWD 手機版調整 (請確保這段在原本的 RWD 之前或之中，避免重複) */
@media (max-width: 768px) {
    .footer-main-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-column {
        flex-basis: 100%;
        margin-bottom: 30px;
    }
    .footer-column h4, .footer-links ul, .footer-contact p {
        text-align: center;
    }
    .footer-contact p {
        margin-left: 0;
    }
}

/* =========================================
   【新增】首頁幻燈片 (Slideshow)
========================================= */
.slider-section {
    padding-top: 0 !important; /* 上方不留白，緊接在品牌卡片下方 */
    padding-bottom: 40px !important;
}

.slideshow-container {
    max-width: 1200px; 
    position: relative;
    margin: auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(93, 64, 55, 0.15);
    border: 3px solid #E6D8C8;
    
    /* 修改：將高度比例調整為 600 (即 1200:600 = 2:1) */
    aspect-ratio: 1200 / 600; 
}

/* 隱藏圖片，透過 JS 顯示 */
.mySlides {
    display: none;
    width: 100%;
    height: 100%; /* 填滿容器 */
}

.mySlides img {
    vertical-align: middle;
    width: 100%;
    height: 100%;        /* 強制填滿高度 */
    object-fit: cover;   /* 關鍵：圖片會自動裁切中間，保持比例不變形 */
    display: block;
}

/* 幻燈片容器內的文字 (選用) */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑底 */
}

/* 下方的小圓點 */
.dot-container {
    text-align: center;
    margin-top: 15px;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #E6D8C8; /* 未選中顏色 */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
}

.active-dot {
    background-color: #C59D5F; /* 選中顏色 (土黃) */
}

/* 淡入動畫效果 */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

/* =========================================
   【修正】縮小首頁幻燈片與下方產品的間距
========================================= */

/* 1. 移除幻燈片區塊的下方留白 (原本是 40px) */
.slider-section {
    padding-bottom: 0 !important;
}

/* 2. 減少嚴選蛋糕區塊的上方留白 (原本是 70px) */
#gallery {
    padding-top: 30px !important; /* 這裡控制兩者之間的距離，數字越小越近 */
}