/*
Theme Name: My Theme
Description: 一個現代化的WordPress主題
Version: 1.0
Author: Your Name
Author URI: https://yoursite.com
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
*/

/* 導入 Taipei Sans TC Beta 字型 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

/* 防止水平溢出 */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans TC', 'Taipei Sans TC Beta', 'Microsoft JhengHei', 'PingFang TC', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fefaf0;
    padding-top: 90px;
    /* 減少為固定header留出的空間 */
    text-align: left;
    /* 確保對齊為主 */
}

/* 全局對齊設定 */
* {
    text-align: inherit;
}

/* 容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
    /* 確保對齊為主 */
}

/* 头部样式 */
.site-header {
    background-color: #fff;
    box-shadow: none;
    /* 預設不顯示陰影，避免看起來像滿版線條 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
}

.header-top {
    padding: 4px 0;
    /* 減少上下間距，與 navigation-fix.css 保持一致 */
    border-bottom: none;
    /* 移除多餘的滿版分隔線 */
}

/* Header 區容器：滿版 + 響應式左右留白 */
.header-top .container {
    max-width: none;
    width: 100%;
    margin: 0;
    /* 取消置中限制，讓左右可貼齊視窗 */
    padding-inline: clamp(16px, 4vw, 80px);
}

.header-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* 左空白 / 中logo / 右工具列 */
    align-items: center;
    column-gap: 16px;
}

.header-spacer {
    /* 讓中間 logo 真置中 */
    height: 1px;
}

/* Logo樣式 */
.site-branding {
    display: flex;
    justify-content: center;
    grid-column: 2;
    /* 中間欄位 */
}

.logo-link {
    display: inline-block;
    text-decoration: none;
}

.site-logo {
    width: 60px;
    height: 60px;
    /* 放大1.2倍 (39px * 1.2 = 46.8px) */
    display: block;
    transition: transform 0.3s ease;
}

.logo-link:hover .site-logo {
    transform: scale(1.05);
}

/* 工具圖標區域 */
.header-tools {
    display: flex;
    align-items: center;
    gap: 0px;
    justify-content: flex-end;
    grid-column: 3;
    /* 右側欄位 */
}

/* 桌面端：不使用負 margin，改由容器留白控制對齊 */
@media (min-width: 1024px) {
    .header-tools {
        margin-right: 0;
    }
}


.tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    /* 36px * 0.8 = 28.8px */
    height: 29px;
    /* 36px * 0.8 = 28.8px */
    border-radius: 50%;
    background: transparent;
    /* 使用原圖，取消底色 */
    text-decoration: none;
    position: relative;
    overflow: hidden;
    padding: 0;
    /* 讓圖示可滿版貼齊 */
    transition: all 0.3s ease;
}

/* 工具圖標hover效果 */
.tool-icon:hover {
    transform: scale(1.1);
}

.tool-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 滿版填滿容器 */
    filter: none;
    /* 顯示原色 */
    display: block;
}

/* 聯絡我們按鈕 */

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 29px;
    /* 36px * 0.8 = 28.8px */
    padding: 0;
    /* 取消內距，讓圖示滿版 */
    background: transparent;
    /* 使用原圖底色 */
    border-radius: 6px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 聯絡我們按鈕hover效果 */
.contact-btn:hover {
    transform: scale(1.05);
}

.contact-btn img {
    width: auto;
    height: 100%;
    object-fit: contain;
    /* 膠囊圖等比貼齊高度 */
    filter: none;
    /* 顯示原色 */
    display: block;
}

/* 导航菜单 */
.main-navigation {
    background-color: #fff;
    border-bottom: none;
    /* 移除多餘的滿版分隔線 */
    padding: 0;
}

.main-navigation .container {
    display: block;
    /* 讓選單可滿版撐開 */
    max-width: none;
    width: 100%;
    padding-inline: clamp(16px, 4vw, 80px);
    /* 與上層一致的響應式留白 */
}

.main-navigation ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    /* 滿版平均分配 */
    align-items: flex-start;
    /* 改為頂部對齊，讓padding生效 */
    width: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    position: relative;
    flex: 1 1 0;
    /* 每個項目平均分配寬度 */
    text-align: center;
}

.main-navigation a {
    text-decoration: none;
    color: #333;
    font-weight: 400;
    font-size: 19.6px;
    /* 縮小為70% (28px * 0.7 = 19.6px) */
    font-family: 'Noto Sans TC', 'Taipei Sans TC Beta', 'Microsoft JhengHei', 'PingFang TC', 'Helvetica Neue', Arial, sans-serif;
    padding: 22px 24px 0px 24px;
    /* 下方增加20px空白間距 (22px + 20px = 42px) */
    display: block;
    position: relative;
    z-index: 10;
    white-space: nowrap;
    pointer-events: auto;
    /* 恢復點擊效果 */
    cursor: pointer;
    /* 恢復手型游標 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 更平滑的過渡效果 */
}

/* 選單hover效果 */
.main-navigation a:hover {
    color: #876d5d;
    /* 咖啡色hover效果 */
    background-color: rgba(135, 109, 93, 0.05);
    /* 淡咖啡色背景 */
    transform: translateY(-2px);
    /* 輕微上移效果 */
}

/* 選單下劃線效果 */
.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    /* 緊貼文字底部，只留2px間距 */
    left: 50%;
    width: 0;
    height: 4.5px;
    /* 加粗1.5倍 (3px * 1.5 = 4.5px) */
    background: linear-gradient(90deg, #D2B48C, #F4E4BC);
    /* 咖啡色漸層下劃線 */
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.main-navigation a:hover::after {
    width: 80%;
    /* hover時顯示下劃線 */
    box-shadow: 0 2px 4px rgba(210, 180, 140, 0.3);
    /* 下劃線陰影效果 - 與咖啡色底線一致 */
}

/* 禁用選單項目樣式 */
.main-navigation .menu-item-disabled {
    color: #999;
    font-weight: 400;
    font-size: 19.6px;
    font-family: 'Noto Sans TC', 'Taipei Sans TC Beta', 'Microsoft JhengHei', 'PingFang TC', 'Helvetica Neue', Arial, sans-serif;
    padding: 20px 15px;
    display: block;
    text-align: center;
    cursor: not-allowed;
    opacity: 0.6;
    text-decoration: none;
    transition: none;
}

/* 當前頁面選單項目效果 */
.main-navigation .current-menu-item>a,
.main-navigation .current_page_item>a,
.main-navigation .active>a,
.main-navigation a.active,
.main-navigation a.current-page-active {
    color: #876d5d;
    transform: translateY(-2px);
    /* 與hover效果一致 */
}

.main-navigation .current-menu-item>a::after,
.main-navigation .current_page_item>a::after,
.main-navigation .active>a::after,
.main-navigation a.active::after,
.main-navigation a.current-page-active::after {
    width: 80%;
    /* 當前頁面顯示下劃線 */
    box-shadow: 0 2px 4px rgba(210, 180, 140, 0.3);
    /* 下劃線陰影效果 - 與咖啡色底線一致 */
    bottom: 2px;
    /* 緊貼文字底部，只留2px間距 */
}

/* 漢堡選單按鈕 */
.menu-toggle {
    display: none;
    /* 預設隱藏，在行動裝置端顯示 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px;
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    background-color: rgba(135, 109, 93, 0.1);
    transform: scale(1.05);
}

.menu-toggle:active {
    transform: scale(0.95);
}

.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #876d5d;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 1px;
    margin: 0 auto;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #876d5d;
    transition: all 0.3s ease;
    border-radius: 1px;
    left: 0;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    top: 8px;
}

/* 漢堡選單動畫效果 */
.menu-toggle[aria-expanded="true"] .hamburger {
    background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
}

/* 主要内容区域 */
.site-main {
    padding: 0;
}

/* 頁面標題樣式 */
.page-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
}

.page-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.page-description {
    font-size: 1.1rem;
    color: #666;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* 文章样式 */
.entry {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.entry-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #333;
}

.entry-title a {
    text-decoration: none;
    color: inherit;
}

.entry-meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.entry-content {
    line-height: 1.8;
}

.entry-content p {
    margin-bottom: 1rem;
}

/* 单篇文章页面样式 */
.single-entry {
    max-width: 100%;
}

.single-entry .entry-title {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #333;
    border-bottom: 3px solid #007cba;
    padding-bottom: 1rem;
}

.single-entry .entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 5px;
}

.single-entry .entry-meta span {
    display: inline-flex;
    align-items: center;
}

.single-entry .entry-thumbnail {
    margin-bottom: 2rem;
    text-align: center;
}

.single-entry .entry-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.single-entry .entry-content {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.single-entry .entry-content h2,
.single-entry .entry-content h3,
.single-entry .entry-content h4 {
    margin: 2rem 0 1rem 0;
    color: #333;
}

.single-entry .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 1rem 0;
}

.single-entry .entry-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #eee;
}

/* 文章导航样式 */
.post-navigation {
    margin: 2rem 0;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
    background: #e9ecef;
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.post-navigation .nav-title {
    font-weight: 600;
    color: #333;
}

/* 分类和标签样式 */
.cat-links a,
.tags-links a {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    margin: 0.2rem;
    background: #2a63a6;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.8rem;
    transition: background-color 0.3s ease;
}

.cat-links a:hover,
.tags-links a:hover {
    background: #1e4a7a;
}

/* 找不到文章时的样式 */
.no-post {
    text-align: center;
    padding: 3rem 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.no-post h2 {
    color: #333;
    margin-bottom: 2rem;
}

.latest-posts {
    list-style: none;
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.latest-posts li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #eee;
}

.latest-posts li:last-child {
    border-bottom: none;
}

.latest-posts a {
    color: #007cba;
    text-decoration: none;
    font-weight: 500;
}

.latest-posts a:hover {
    text-decoration: underline;
}



.widget {
    margin-bottom: 2rem;
}

.widget-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #333;
    border-bottom: 2px solid #007cba;
    padding-bottom: 0.5rem;
}

/* 页脚 */
.site-footer {
    background-color: #876d5d;
    color: #fff;
    padding: 2.2rem 0 1.6rem;
    margin-top: 0rem;
    text-align: left;
}


@media (min-width: 768px) {

    /* 首頁電腦端頁脚特殊設定 */
    .home .site-footer {
        margin-top: -2rem;
    }
}

.site-footer .container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-inline: clamp(16px, 4vw, 80px);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

/* Logo样式 */
.footer-logo {
    margin-bottom: 1rem;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-img {
    height: 60px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* 电脑端 footer logo 放大 1.3 倍 */
@media (min-width: 1025px) {
    .footer-logo-img {
        height: 78px;
    }
}

/* 社交媒体图标 */
.social-media {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    text-decoration: none;
    transition: transform 0.3s ease;
    overflow: hidden;
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-icon .icon-text {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.social-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 0;
}

/* Instagram 保持圓框，其他維持無邊框但同尺寸一致 */
.social-icon.instagram-icon {
    border-radius: 50%;
    overflow: hidden;
}

.social-icon.instagram-icon img {
    border-radius: 50%;
}

/* 联系信息 */
.site-footer .contact-info,
footer#colophon .contact-info,
#colophon .contact-info {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem;
    margin-bottom: 1.5rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
}

.site-footer .contact-item {
    color: #fff;
    font-size: 0.9rem;
    margin: 0;
    background: none;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 分隔线 */
.footer-divider {
    width: 100%;
    height: 1px;
    background-color: #718096;
    margin: 1rem 0;
}

/* 版权信息 */
.copyright {
    margin-top: 1rem;
}

.copyright p {
    color: #fff;
    font-size: 0.8rem;
    margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {

    /* 鎖死行動裝置左右滾軸 */
    html,
    body {
        overflow-x: hidden;
        position: relative;
        width: 100%;
        max-width: 100vw;
    }

    body {
        padding-top: 0;
        /* RWD端移除頂部間距，讓HERO圖片緊貼header */
    }

    header.site-header .header-top {
        padding: 0px 0 !important;
        /* 再減少上下空白 */
        position: relative;
        /* 讓 .menu-toggle 以此為定位基準 */
    }

    /* 強制鎖定整體 header 高度，避免其他樣式撐高 */
    header.site-header,
    header.site-header .header-top,
    header.site-header .header-top .container,
    header.site-header .header-content {
        height: 72px !important;
        min-height: 72px !important;
        overflow: visible !important;
        /* 避免截斷圖示/Logo */
    }

    /* 視覺縮減高度：保留 LOGO 90px，不改大小，裁切容器上下透明緣 */
    header.site-header .site-branding,
    header.site-header .site-branding .logo-link {
        height: 60px !important;
        /* 保持緊湊但不被裁切 */
        overflow: hidden !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .header-content {
        grid-template-columns: 1fr auto 1fr;
        /* 保持原有的三欄布局 */
        gap: 15px;
        position: relative;
        /* 供漢堡選單垂直置中對齊 */
    }

    /* 強制以 Grid 管理行動端 header，避免其他檔案改為 flex 影響置中 */
    .site-header .header-content {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
    }

    .site-branding {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        grid-column: 2;
        /* 中間欄位 */
        transform: none !important;
        /* 取消位移，讓 Grid 真置中 */
    }

    /* 嚴格保證 Logo 垂直置中 */
    header.site-header .site-branding .logo-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 0 !important;
    }

    .header-tools {
        order: 1;
        gap: 5px;
        justify-content: flex-start;
        align-items: center !important;
        /* 垂直置中工具列內容 */
        grid-column: 1;
        /* 左側欄位 */
        min-width: 54px;
        /* 保留與漢堡相同的寬度作為對稱空間 */
    }

    .site-logo {
        height: 56px;
        /* Logo 比容器略小，避免貼邊被裁切 */
    }

    /* 強制覆蓋其他檔案中的 !important 設定（如 navigation-fix.css） */
    header.site-header .site-branding .logo-link .site-logo {
        height: 56px !important;
        max-height: 56px !important;
        width: auto !important;
    }

    /* 行動裝置端隱藏所有桌面端工具按鍵 */
    .tool-icon,
    .contact-btn {
        display: none !important;
    }

    .main-navigation .container {
        justify-content: flex-start;
    }

    /* 行動裝置端顯示漢堡選單 */
    .menu-toggle {
        display: block !important;
        margin-left: 0;
    }

    /* 行動裝置端：漢堡選單回歸正常文流，置於左欄 */
    .menu-toggle {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        z-index: 1100;
        width: 48px;
        height: 48px;
        padding: 12px;
        display: flex;
        /* 垂直置中漢堡線條 */
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .menu-toggle:hover {
        background-color: rgba(135, 109, 93, 0.1);
        transform: scale(1.05);
    }

    .menu-toggle:active {
        transform: scale(0.95);
    }

    .site-header .main-navigation {
        grid-column: 3;
        justify-content: flex-end;
    }

    /* 視覺平衡：在右欄加入等寬占位，抵銷左側漢堡的視覺重量 */
    .site-header .main-navigation::before {
        content: '';
        display: block;
        width: 54px;
        height: 1px;
        flex: 0 0 54px;
        pointer-events: none;
    }

    /* 行動裝置端漢堡選單線條樣式 */
    .hamburger {
        width: 24px;
        height: 2px;
        background-color: #876d5d;
        border-radius: 1px;
        transition: all 0.3s ease;
        margin: 0 auto;
    }

    .hamburger::before,
    .hamburger::after {
        width: 24px;
        height: 2px;
        background-color: #876d5d;
        border-radius: 1px;
        transition: all 0.3s ease;
        left: 0;
    }

    .hamburger::before {
        top: -8px;
    }

    .hamburger::after {
        top: 8px;
    }

    /* 行動裝置端漢堡選單動畫效果 */
    .menu-toggle[aria-expanded="true"] .hamburger {
        background-color: transparent;
    }

    .menu-toggle[aria-expanded="true"] .hamburger::before {
        transform: rotate(45deg);
        top: 0;
    }

    .menu-toggle[aria-expanded="true"] .hamburger::after {
        transform: rotate(-45deg);
        top: 0;
    }

    .main-navigation ul {
        display: none;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1001;
    }

    .main-navigation ul.active {
        display: flex;
    }

    .main-navigation li {
        width: 100%;
        text-align: center;
    }

    .main-navigation a {
        padding: 15px 20px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 16px !important;
        /* 行動版字體大小，調整為更小 */
        font-weight: 300 !important;
        /* 字體更細緻，非粗體 */
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        transition: color 0.3s ease, background-color 0.3s ease, font-weight 0.3s ease !important;
    }

    /* 行動裝置端禁用選單項目樣式 */
    .main-navigation .menu-item-disabled {
        padding: 15px 20px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 16px !important;
        /* 與正常選單保持一致的字體大小 */
        font-weight: 300 !important;
        /* 與正常選單保持一致的細緻字體 */
        color: #999 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
        transition: none !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    /* 行動裝置端選單hover效果 - 已移除 */
    /* 移除行動端選單 hover/點擊的藍色底線與高亮 */
    .main-navigation .nav-menu a,
    .nav-menu a {
        -webkit-tap-highlight-color: transparent !important;
    }

    .main-navigation .nav-menu a:hover,
    .main-navigation .nav-menu a:active,
    .main-navigation .nav-menu a:focus {
        color: inherit !important;
        background-color: transparent !important;
        transform: none !important;
        font-weight: 600 !important;
        /* hover時字體變粗體 */
    }

    /* 當前頁面選單項目字體加粗 */
    .main-navigation .current-menu-item>a,
    .main-navigation .current_page_item>a,
    .main-navigation a.active,
    .main-navigation a.current-page-active {
        font-weight: 600 !important;
        /* 當前頁面字體加粗 */
    }

    .main-navigation .nav-menu a:hover::after,
    .main-navigation .nav-menu a:active::after,
    .main-navigation .nav-menu a:focus::after {
        width: 0 !important;
        box-shadow: none !important;
        display: none !important;
    }

    /* 行動裝置端漢堡選單hover效果 */
    .menu-toggle:hover {
        background-color: rgba(135, 109, 93, 0.1);
        transform: scale(1.05);
    }

    /* 行動裝置端當前頁面選單項目效果 */
    .main-navigation .current-menu-item>a,
    .main-navigation .current_page_item>a,
    .main-navigation .active>a,
    .main-navigation a.active,
    .main-navigation a.current-page-active {
        color: #007cba;
        display: flex;
        /* 與一般連結保持一致的 flex 置中 */
        align-items: center;
        justify-content: center;
        gap: 4px;
        /* 圖示緊貼文字左側，留最小間距 */
        position: relative;
    }

    /* 行動裝置端：當前選單項目的咖啡豆圖示（緊貼文字左側） */
    .main-navigation .current-menu-item>a::before,
    .main-navigation .current_page_item>a::before,
    .main-navigation .active>a::before,
    .main-navigation a.active::before,
    .main-navigation a.current-page-active::before {
        content: '';
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url('assets/images/咖啡豆.webp');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* 行動端：覆蓋其他檔案的絕對定位，讓圖示貼文字左側並置中 */
    .site-header .main-navigation .current-menu-item>a,
    .site-header .main-navigation .current_page_item>a,
    .site-header .main-navigation a.active,
    .site-header .main-navigation a.current-page-active {
        padding-left: 0 !important;
        /* 取消為圖示預留的左內距 */
    }

    .site-header .main-navigation .current-menu-item>a::before,
    .site-header .main-navigation .current_page_item>a::before,
    .site-header .main-navigation a.active::before,
    .site-header .main-navigation a.current-page-active::before {
        position: static !important;
        /* 取消絕對定位，交給 flex 佈局 */
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin-right: 4px !important;
        /* 與文字最小間距 */
        width: 18px !important;
        height: 18px !important;
        background-image: url('assets/images/咖啡豆.webp') !important;
        display: inline-block !important;
    }

    /* 移除行動裝置端當前頁面選單項目的下底線 */
    .main-navigation .current-menu-item>a::after,
    .main-navigation .current_page_item>a::after,
    .main-navigation .active>a::after,
    .main-navigation a.active::after,
    .main-navigation a.current-page-active::after {
        display: none;
    }


    .site-footer .container {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .footer-content {
        gap: 1.5rem;
    }

    .footer-divider {
        width: 80%;
    }
}

/* 偵測觸控裝置：移除選單 hover/底線（涵蓋大尺寸觸控平板） */
@media (hover: none) and (pointer: coarse) {
    .main-navigation a {
        -webkit-tap-highlight-color: transparent !important;
    }

    .main-navigation a:hover,
    .main-navigation a:active,
    .main-navigation a:focus {
        color: inherit !important;
        background-color: transparent !important;
        transform: none !important;
    }

    .main-navigation a:hover::after,
    .main-navigation a:active::after,
    .main-navigation a:focus::after {
        width: 0 !important;
        box-shadow: none !important;
        display: none !important;
    }
}

/* 平板版優化 */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        padding-top: 0;
        /* 平板端也移除頂部間距，讓HERO圖片緊貼header */
    }

    .footer-logo-img {
        height: 50px;
    }

    .social-media {
        gap: 0.8rem;
    }

    .social-icon {
        width: 35px;
        height: 35px;
    }

    .social-icon .icon-text {
        font-size: 12px;
    }

    .social-icon img {
        width: 100%;
        height: 100%;
    }

    .site-footer .contact-item {
        font-size: 0.8rem;
        background: none;
        padding: 0;
        border-radius: 0;
    }

    .site-footer .contact-info,
    footer#colophon .contact-info,
    #colophon .contact-info {
        flex-direction: column !important;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {

    /* 鎖死小螢幕行動裝置左右滾軸 */
    html,
    body {
        overflow-x: hidden;
        position: relative;
        width: 100%;
        max-width: 100vw;
    }

    .header-tools {
        gap: 4px;
    }

    .tool-icon {
        width: 26px;
        /* 32px * 0.8 = 25.6px */
        height: 26px;
        /* 32px * 0.8 = 25.6px */
    }

    .tool-icon img {
        width: 13px;
        /* 16px * 0.8 = 12.8px */
        height: 13px;
        /* 16px * 0.8 = 12.8px */
    }

    .contact-btn {
        padding: 4px 8px;
        /* 5px * 0.8 = 4px, 10px * 0.8 = 8px */
    }

    .contact-btn img {
        height: 11px;
        /* 14px * 0.8 = 11.2px */
    }
}

/* 感謝頁：移除 thank.webp 與 footer 之間的空白 */
.page-template-page-thank-you .site-main,
.page-template-page-thank-you-php .site-main {
    padding-top: 0;
    padding-bottom: 0;
}

.page-template-page-thank-you .thank-fullscreen,
.page-template-page-thank-you-php .thank-fullscreen {
    margin-bottom: 0 !important;
}

.single-breadcrumb-block {
    margin-top: 20px;
    margin-bottom: 1.5rem;
    padding-left: 50px;
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
}

/* 取消特定機型的位移微調，改以通用 Grid 置中 */
.single-breadcrumb {
    font-size: 1.12rem;
    color: #222;
    margin-top: 2.5rem;
    margin-bottom: 0.2rem;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.single-breadcrumb a {
    color: #222;
    text-decoration: none;
    transition: color 0.2s;
}

.single-breadcrumb a:hover {
    color: #b98c5e;
    text-decoration: underline;
}

.single-back-link {
    font-size: 1rem;
    color: #222;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0.5rem;
    margin-top: 0.2rem;
    font-weight: 500;
    transition: color 0.2s;
}

.single-back-link:hover {
    color: #b98c5e;
    text-decoration: underline;
}

.single-block-align {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.single-block-align-20 {
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
}

@media (max-width: 600px) {

    .single-breadcrumb-block,
    .single-block-align-20 {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 全局標題字型設定 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Noto Sans TC', 'Taipei Sans TC Beta', 'Microsoft JhengHei', 'PingFang TC', 'Helvetica Neue', Arial, sans-serif;
    text-align: left;
    /* 確保對齊為主 */
}

/* 全局按鈕字型設定 */
button,
.btn,
input[type="submit"],
input[type="button"] {
    font-family: 'Noto Sans TC', 'Taipei Sans TC Beta', 'Microsoft JhengHei', 'PingFang TC', 'Helvetica Neue', Arial, sans-serif;
    text-align: center;
    /* 按鈕文字置中 */
    background-color: transparent !important;
    color: white !important;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: transparent !important;
}

/* 全局表單元素字型設定 */
input,
textarea,
select {
    font-family: 'Noto Sans TC', 'Taipei Sans TC Beta', 'Microsoft JhengHei', 'PingFang TC', 'Helvetica Neue', Arial, sans-serif;
    text-align: left;
    /* 確保對齊為主 */
}

/* 頁腳字型設定 */
.site-footer,
.footer-content,
.contact-item,
.copyright {
    font-family: 'Noto Sans TC', 'Taipei Sans TC Beta', 'Microsoft JhengHei', 'PingFang TC', 'Helvetica Neue', Arial, sans-serif;
    text-align: left;
    /* 確保對齊為主 */
}

/* 搜尋和導航字型設定 */
.search-field,
.search-submit,
.search-header,
.search-suggestions,
.nav-links,
.nav-previous,
.nav-next {
    font-family: 'Noto Sans TC', 'Taipei Sans TC Beta', 'Microsoft JhengHei', 'PingFang TC', 'Helvetica Neue', Arial, sans-serif;
    text-align: left;
    /* 確保對齊為主 */
}

/* 強制搜尋按鈕咖啡色背景 */
.search-submit {
    background: #8B4513 !important;
    color: white !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.search-submit:hover {
    background: #6B3410 !important;
}

/* 文章內容字型設定 */
.entry,
.entry-title,
.entry-meta,
.entry-content,
.entry-footer,
.post-navigation {
    font-family: 'Noto Sans TC', 'Taipei Sans TC Beta', 'Microsoft JhengHei', 'PingFang TC', 'Helvetica Neue', Arial, sans-serif;
    text-align: left;
    /* 確保對齊為主 */
}

/* 側邊欄和小工具字型設定 */
.sidebar,
.widget,
.widget-title {
    font-family: 'Noto Sans TC', 'Taipei Sans TC Beta', 'Microsoft JhengHei', 'PingFang TC', 'Helvetica Neue', Arial, sans-serif;
    text-align: left;
    /* 確保對齊為主 */
}

/* WordPress 文章內容標準樣式 */
.entry-content {
    line-height: 1.8;
    font-size: 1.08rem;
    color: #222;
    word-break: break-word;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-weight: bold;
    margin: 2em 0 1em 0;
    line-height: 1.3;
}

.entry-content p {
    margin: 1.2em 0;
}

.entry-content ul,
.entry-content ol {
    margin: 1.2em 0 1.2em 2em;
    padding: 0 0 0 1.2em;
}

.entry-content li {
    margin-bottom: 0.5em;
}

.entry-content img {
    display: block;
    margin: 1.2em auto;
    max-width: 100%;
    height: auto;
}

.entry-content a {
    color: #b98c5e;
    text-decoration: underline;
}

.entry-content a:hover {
    color: #8a6a3f;
}

/* 全局價格樣式 - 移除所有下底線 */
.price,
.product-price,
.catalog-price,
.item-price,
.woocommerce-Price-amount,
.woocommerce-price,
.amount,
.price .amount,
.product-price .amount,
.catalog-price .amount,
.item-price .amount,
.woocommerce div.product .product-price,
.woocommerce div.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .woocommerce-Price-amount,
.woocommerce div.product .woocommerce-price,
.woocommerce div.product .amount,
.woocommerce div.product .price .amount,
.woocommerce div.product .product-price .amount,
.woocommerce div.product .catalog-price .amount,
.woocommerce div.product .item-price .amount,
.woocommerce div.product .woocommerce-Price-amount .amount,
.woocommerce div.product .woocommerce-price .amount,
.woocommerce div.product .price ins,
.woocommerce div.product .product-price ins,
.woocommerce div.product .catalog-price ins,
.woocommerce div.product .item-price ins,
.woocommerce div.product .woocommerce-Price-amount ins,
.woocommerce div.product .woocommerce-price ins,
.woocommerce div.product .amount ins,
.woocommerce div.product .price .amount ins,
.woocommerce div.product .product-price .amount ins,
.woocommerce div.product .catalog-price .amount ins,
.woocommerce div.product .item-price .amount ins,
.woocommerce div.product .woocommerce-Price-amount .amount ins,
.woocommerce div.product .woocommerce-price .amount ins {
    text-decoration: none !important;
}

/* 額外的WooCommerce價格樣式覆蓋 */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .price,
.woocommerce div.product .price .amount,
.woocommerce div.product .price ins,
.woocommerce div.product .price .amount ins,
.woocommerce div.product .price .amount:not(del),
.woocommerce div.product .price ins .amount,
.woocommerce div.product .price .amount:not(del) .amount,
.woocommerce div.product .price .amount:not(del) ins,
.woocommerce div.product .price .amount:not(del) ins .amount,
.woocommerce div.product .price .amount:not(del) .woocommerce-Price-amount,
.woocommerce div.product .price .amount:not(del) .woocommerce-Price-amount .amount,
.woocommerce div.product .price .amount:not(del) .woocommerce-Price-amount ins,
.woocommerce div.product .price .amount:not(del) .woocommerce-Price-amount ins .amount {
    text-decoration: none !important;
}

/* 針對WooCommerce價格結構的額外覆蓋 */
.woocommerce div.product .price ins,
.woocommerce div.product .price ins .amount,
.woocommerce div.product .price ins .woocommerce-Price-amount,
.woocommerce div.product .price ins .woocommerce-Price-amount .amount,
.woocommerce div.product .price .woocommerce-Price-amount ins,
.woocommerce div.product .price .woocommerce-Price-amount ins .amount,
.woocommerce div.product .price .amount ins,
.woocommerce div.product .price .amount ins .amount,
.woocommerce div.product .price .amount ins .woocommerce-Price-amount,
.woocommerce div.product .price .amount ins .woocommerce-Price-amount .amount,
.woocommerce div.product .price .woocommerce-Price-amount .amount ins,
.woocommerce div.product .price .woocommerce-Price-amount .amount ins .amount,
.woocommerce div.product .price .woocommerce-Price-amount .amount ins .woocommerce-Price-amount,
.woocommerce div.product .price .woocommerce-Price-amount .amount ins .woocommerce-Price-amount .amount {
    text-decoration: none !important;
}

/* 最強力的價格樣式覆蓋 - 針對所有可能的WooCommerce價格結構 */
.woocommerce .price,
.woocommerce .price .amount,
.woocommerce .price ins,
.woocommerce .price ins .amount,
.woocommerce .price .woocommerce-Price-amount,
.woocommerce .price .woocommerce-Price-amount .amount,
.woocommerce .price .woocommerce-Price-amount ins,
.woocommerce .price .woocommerce-Price-amount ins .amount,
.woocommerce p.price,
.woocommerce p.price .amount,
.woocommerce p.price ins,
.woocommerce p.price ins .amount,
.woocommerce p.price .woocommerce-Price-amount,
.woocommerce p.price .woocommerce-Price-amount .amount,
.woocommerce p.price .woocommerce-Price-amount ins,
.woocommerce p.price .woocommerce-Price-amount ins .amount,
.woocommerce span.price,
.woocommerce span.price .amount,
.woocommerce span.price ins,
.woocommerce span.price ins .amount,
.woocommerce span.price .woocommerce-Price-amount,
.woocommerce span.price .woocommerce-Price-amount .amount,
.woocommerce span.price .woocommerce-Price-amount ins,
.woocommerce span.price .woocommerce-Price-amount ins .amount,
.woocommerce .woocommerce-Price-amount,
.woocommerce .woocommerce-Price-amount .amount,
.woocommerce .woocommerce-Price-amount ins,
.woocommerce .woocommerce-Price-amount ins .amount,
.woocommerce .amount,
.woocommerce .amount ins,
.woocommerce .amount ins .amount {
    text-decoration: none !important;
}

/* 針對ins標籤的額外覆蓋 - ins通常用於顯示實際價格 */
.woocommerce .price ins,
.woocommerce .price ins .amount,
.woocommerce .price ins .woocommerce-Price-amount,
.woocommerce .price ins .woocommerce-Price-amount .amount,
.woocommerce p.price ins,
.woocommerce p.price ins .amount,
.woocommerce p.price ins .woocommerce-Price-amount,
.woocommerce p.price ins .woocommerce-Price-amount .amount,
.woocommerce span.price ins,
.woocommerce span.price ins .amount,
.woocommerce span.price ins .woocommerce-Price-amount,
.woocommerce span.price ins .woocommerce-Price-amount .amount,
.woocommerce .woocommerce-Price-amount ins,
.woocommerce .woocommerce-Price-amount ins .amount,
.woocommerce .amount ins,
.woocommerce .amount ins .amount,
.woocommerce .amount ins .woocommerce-Price-amount,
.woocommerce .amount ins .woocommerce-Price-amount .amount {
    text-decoration: none !important;
}

/* 最強力的全局價格下底線移除 - 針對所有可能的價格元素 */
*[class*="price"] *,
*[class*="Price"] *,
.woocommerce *[class*="price"] *,
.woocommerce *[class*="Price"] *,
.woocommerce .price *,
.woocommerce .Price *,
.woocommerce p.price *,
.woocommerce span.price *,
.woocommerce .woocommerce-Price-amount *,
.woocommerce .amount *,
.woocommerce .price .amount *,
.woocommerce .price .woocommerce-Price-amount *,
.woocommerce .price ins *,
.woocommerce .price del *,
.woocommerce p.price .amount *,
.woocommerce p.price .woocommerce-Price-amount *,
.woocommerce p.price ins *,
.woocommerce p.price del *,
.woocommerce span.price .amount *,
.woocommerce span.price .woocommerce-Price-amount *,
.woocommerce span.price ins *,
.woocommerce span.price del *,
.woocommerce .woocommerce-Price-amount .amount *,
.woocommerce .woocommerce-Price-amount ins *,
.woocommerce .woocommerce-Price-amount del *,
.woocommerce .amount ins *,
.woocommerce .amount del *,
.catalog-price *,
.product-price *,
.item-price *,
.price *,
.amount *,
.woocommerce-Price-amount * {
    text-decoration: none !important;
}

/* 直接針對所有價格相關的標籤和類別 */
ins,
.ins,
.price ins,
.price .ins,
.product-price ins,
.product-price .ins,
.catalog-price ins,
.catalog-price .ins,
.item-price ins,
.item-price .ins,
.woocommerce .price ins,
.woocommerce .price .ins,
.woocommerce p.price ins,
.woocommerce p.price .ins,
.woocommerce span.price ins,
.woocommerce span.price .ins,
.woocommerce .woocommerce-Price-amount ins,
.woocommerce .woocommerce-Price-amount .ins,
.woocommerce .amount ins,
.woocommerce .amount .ins,
.woocommerce .price .amount ins,
.woocommerce .price .amount .ins,
.woocommerce .price .woocommerce-Price-amount ins,
.woocommerce .price .woocommerce-Price-amount .ins,
.woocommerce p.price .amount ins,
.woocommerce p.price .amount .ins,
.woocommerce p.price .woocommerce-Price-amount ins,
.woocommerce p.price .woocommerce-Price-amount .ins,
.woocommerce span.price .amount ins,
.woocommerce span.price .amount .ins,
.woocommerce span.price .woocommerce-Price-amount ins,
.woocommerce span.price .woocommerce-Price-amount .ins,
.woocommerce .woocommerce-Price-amount .amount ins,
.woocommerce .woocommerce-Price-amount .amount .ins,
.woocommerce .amount ins,
.woocommerce .amount .ins {
    text-decoration: none !important;
}

/* 最直接的方法 - 移除所有價格相關元素的下底線 */
.woocommerce .price,
.woocommerce .price *,
.woocommerce p.price,
.woocommerce p.price *,
.woocommerce span.price,
.woocommerce span.price *,
.woocommerce .woocommerce-Price-amount,
.woocommerce .woocommerce-Price-amount *,
.woocommerce .amount,
.woocommerce .amount *,
.woocommerce .price .amount,
.woocommerce .price .amount *,
.woocommerce .price .woocommerce-Price-amount,
.woocommerce .price .woocommerce-Price-amount *,
.woocommerce .price ins,
.woocommerce .price ins *,
.woocommerce p.price .amount,
.woocommerce p.price .amount *,
.woocommerce p.price .woocommerce-Price-amount,
.woocommerce p.price .woocommerce-Price-amount *,
.woocommerce p.price ins,
.woocommerce p.price ins *,
.woocommerce span.price .amount,
.woocommerce span.price .amount *,
.woocommerce span.price .woocommerce-Price-amount,
.woocommerce span.price .woocommerce-Price-amount *,
.woocommerce span.price ins,
.woocommerce span.price ins *,
.woocommerce .woocommerce-Price-amount .amount,
.woocommerce .woocommerce-Price-amount .amount *,
.woocommerce .woocommerce-Price-amount ins,
.woocommerce .woocommerce-Price-amount ins *,
.woocommerce .amount ins,
.woocommerce .amount ins *,
.catalog-price,
.catalog-price *,
.product-price,
.product-price *,
.item-price,
.item-price *,
.price,
.price *,
.amount,
.amount *,
.woocommerce-Price-amount,
.woocommerce-Price-amount * {
    text-decoration: none !important;
}

/* 最強力的方法 - 使用通配符移除所有價格相關元素的下底線 */
[class*="price"] *,
[class*="Price"] *,
.woocommerce [class*="price"] *,
.woocommerce [class*="Price"] *,
.woocommerce .price *,
.woocommerce .Price *,
.woocommerce p.price *,
.woocommerce span.price *,
.woocommerce .woocommerce-Price-amount *,
.woocommerce .amount *,
.woocommerce .price .amount *,
.woocommerce .price .woocommerce-Price-amount *,
.woocommerce .price ins *,
.woocommerce .price del *,
.woocommerce p.price .amount *,
.woocommerce p.price .woocommerce-Price-amount *,
.woocommerce p.price ins *,
.woocommerce p.price del *,
.woocommerce span.price .amount *,
.woocommerce span.price .woocommerce-Price-amount *,
.woocommerce span.price ins *,
.woocommerce span.price del *,
.woocommerce .woocommerce-Price-amount .amount *,
.woocommerce .woocommerce-Price-amount ins *,
.woocommerce .woocommerce-Price-amount del *,
.woocommerce .amount ins *,
.woocommerce .amount del *,
.catalog-price *,
.product-price *,
.item-price *,
.price *,
.amount *,
.woocommerce-Price-amount * {
    text-decoration: none !important;
}

/* 最強力的方法 - 直接針對所有價格元素 */
.woocommerce .price,
.woocommerce .price *,
.woocommerce p.price,
.woocommerce p.price *,
.woocommerce span.price,
.woocommerce span.price *,
.woocommerce .woocommerce-Price-amount,
.woocommerce .woocommerce-Price-amount *,
.woocommerce .amount,
.woocommerce .amount *,
.woocommerce .price .amount,
.woocommerce .price .amount *,
.woocommerce .price .woocommerce-Price-amount,
.woocommerce .price .woocommerce-Price-amount *,
.woocommerce .price ins,
.woocommerce .price ins *,
.woocommerce p.price .amount,
.woocommerce p.price .amount *,
.woocommerce p.price .woocommerce-Price-amount,
.woocommerce p.price .woocommerce-Price-amount *,
.woocommerce p.price ins,
.woocommerce p.price ins *,
.woocommerce span.price .amount,
.woocommerce span.price .amount *,
.woocommerce span.price .woocommerce-Price-amount,
.woocommerce span.price .woocommerce-Price-amount *,
.woocommerce span.price ins,
.woocommerce span.price ins *,
.woocommerce .woocommerce-Price-amount .amount,
.woocommerce .woocommerce-Price-amount .amount *,
.woocommerce .woocommerce-Price-amount ins,
.woocommerce .woocommerce-Price-amount ins *,
.woocommerce .amount ins,
.woocommerce .amount ins *,
.catalog-price,
.catalog-price *,
.product-price,
.product-price *,
.item-price,
.item-price *,
.price,
.price *,
.amount,
.amount *,
.woocommerce-Price-amount,
.woocommerce-Price-amount * {
    text-decoration: none !important;
}

/* 最強力的方法 - 直接針對所有價格元素 */
.woocommerce .price,
.woocommerce .price *,
.woocommerce p.price,
.woocommerce p.price *,
.woocommerce span.price,
.woocommerce span.price *,
.woocommerce .woocommerce-Price-amount,
.woocommerce .woocommerce-Price-amount *,
.woocommerce .amount,
.woocommerce .amount *,
.woocommerce .price .amount,
.woocommerce .price .amount *,
.woocommerce .price .woocommerce-Price-amount,
.woocommerce .price .woocommerce-Price-amount *,
.woocommerce .price ins,
.woocommerce .price ins *,
.woocommerce p.price .amount,
.woocommerce p.price .amount *,
.woocommerce p.price .woocommerce-Price-amount,
.woocommerce p.price .woocommerce-Price-amount *,
.woocommerce p.price ins,
.woocommerce p.price ins *,
.woocommerce span.price .amount,
.woocommerce span.price .amount *,
.woocommerce span.price .woocommerce-Price-amount,
.woocommerce span.price .woocommerce-Price-amount *,
.woocommerce span.price ins,
.woocommerce span.price ins *,
.woocommerce .woocommerce-Price-amount .amount,
.woocommerce .woocommerce-Price-amount .amount *,
.woocommerce .woocommerce-Price-amount ins,
.woocommerce .woocommerce-Price-amount ins *,
.woocommerce .amount ins,
.woocommerce .amount ins *,
.catalog-price,
.catalog-price *,
.product-price,
.product-price *,
.item-price,
.item-price *,
.price,
.price *,
.amount,
.amount *,
.woocommerce-Price-amount,
.woocommerce-Price-amount * {
    text-decoration: none !important;
}

/* 最強力的方法 - 直接針對所有價格元素 */
.woocommerce .price,
.woocommerce .price *,
.woocommerce p.price,
.woocommerce p.price *,
.woocommerce span.price,
.woocommerce span.price *,
.woocommerce .woocommerce-Price-amount,
.woocommerce .woocommerce-Price-amount *,
.woocommerce .amount,
.woocommerce .amount *,
.woocommerce .price .amount,
.woocommerce .price .amount *,
.woocommerce .price .woocommerce-Price-amount,
.woocommerce .price .woocommerce-Price-amount *,
.woocommerce .price ins,
.woocommerce .price ins *,
.woocommerce p.price .amount,
.woocommerce p.price .amount *,
.woocommerce p.price .woocommerce-Price-amount,
.woocommerce p.price .woocommerce-Price-amount *,
.woocommerce p.price ins,
.woocommerce p.price ins *,
.woocommerce span.price .amount,
.woocommerce span.price .amount *,
.woocommerce span.price .woocommerce-Price-amount,
.woocommerce span.price .woocommerce-Price-amount *,
.woocommerce span.price ins,
.woocommerce span.price ins *,
.woocommerce .woocommerce-Price-amount .amount,
.woocommerce .woocommerce-Price-amount .amount *,
.woocommerce .woocommerce-Price-amount ins,
.woocommerce .woocommerce-Price-amount ins *,
.woocommerce .amount ins,
.woocommerce .amount ins *,
.catalog-price,
.catalog-price *,
.product-price,
.product-price *,
.item-price,
.item-price *,
.price,
.price *,
.amount,
.amount *,
.woocommerce-Price-amount,
.woocommerce-Price-amount * {
    text-decoration: none !important;
}

/* 確保劃掉的價格保持劃線效果 */
.price del,
.product-price del,
.catalog-price del,
.item-price del,
.woocommerce-Price-amount del,
.woocommerce-price del,
.amount del,
.price .amount del,
.product-price .amount del,
.catalog-price .amount del,
.item-price .amount del,
.woocommerce div.product .product-price del,
.woocommerce div.product .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce div.product .woocommerce-Price-amount del,
.woocommerce div.product .woocommerce-price del,
.woocommerce div.product .amount del,
.woocommerce div.product .price .amount del,
.woocommerce div.product .product-price .amount del,
.woocommerce div.product .catalog-price .amount del,
.woocommerce div.product .item-price .amount del,
.woocommerce div.product .woocommerce-Price-amount .amount del,
.woocommerce div.product .woocommerce-price .amount del {
    text-decoration: line-through !important;
}

/* 終極解決方案 - 針對所有可能的WooCommerce價格元素 */
.woocommerce .price *:not(del),
.woocommerce p.price *:not(del),
.woocommerce span.price *:not(del),
.woocommerce .woocommerce-Price-amount *:not(del),
.woocommerce .amount *:not(del),
.woocommerce .price .amount *:not(del),
.woocommerce .price .woocommerce-Price-amount *:not(del),
.woocommerce .price ins *:not(del),
.woocommerce p.price .amount *:not(del),
.woocommerce p.price .woocommerce-Price-amount *:not(del),
.woocommerce p.price ins *:not(del),
.woocommerce span.price .amount *:not(del),
.woocommerce span.price .woocommerce-Price-amount *:not(del),
.woocommerce span.price ins *:not(del),
.woocommerce .woocommerce-Price-amount .amount *:not(del),
.woocommerce .woocommerce-Price-amount ins *:not(del),
.woocommerce .amount ins *:not(del),
.catalog-price *:not(del),
.product-price *:not(del),
.item-price *:not(del),
.price *:not(del),
.amount *:not(del),
.woocommerce-Price-amount *:not(del) {
    text-decoration: none !important;
}

/* 隱藏行動裝置上的咖啡圖002.webp */
@media (max-width: 768px) {
    .shopping-divider-img {
        display: none !important;
    }
}




/* 確保 FAQ 角落裝飾圖不會覆蓋頁腳 */
.site-footer {
    position: relative;
    z-index: 10;
}

.home-faq-section .faq-independent-bg {
    z-index: 0 !important;
}

/* ========================================
   優惠活動卡片統一樣式 (首頁 + 單篇文章 + 咖啡豆學堂)
   ======================================== */

/* 桌機版 (min-width: 769px) */
@media (min-width: 769px) {

    /* 首頁和單篇文章共用容器樣式 */
    .home .related-posts-section .related-posts-cards,
    .single .related-posts-section .related-posts-cards {
        width: 100%;
        max-width: 1550px;
        margin: 12px auto 12px auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        flex-wrap: nowrap;
        gap: 40px;
        align-items: stretch;
        justify-content: center;
        padding: 0;
        min-height: 500px;
    }

    /* 卡片容器 */
    .home .related-post-card.polaroid,
    .single .related-post-card.polaroid {
        width: 100%;
        min-width: 260px;
        padding: 16px 20px 16px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin: 0 8px;
        position: relative;
        transition: none;
        border: 0;
        overflow: hidden;
    }

    /* 卡片hover效果 */
    .home .related-post-card.polaroid:hover,
    .single .related-post-card.polaroid:hover {
        box-shadow: none;
        transform: none;
    }

    /* 圖片縮圖容器 - 統一高度250px */
    .home .related-post-thumb,
    .single .related-post-thumb {
        width: 100%;
        height: 250px;
        margin: 0;
        background: #f2f6fb;
        display: grid;
    }

    /* 圖片本身 */
    .home .related-post-thumb img,
    .single .related-post-thumb img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
    }

    /* 無圖片時的佔位符 */
    .home .no-thumb,
    .single .no-thumb {
        width: 100%;
        height: 100%;
        background: #cfd8e3;
        display: block;
    }

    /* 卡片內容區域 */
    .home .related-post-card.polaroid .related-post-content,
    .single .related-post-card.polaroid .related-post-content {
        background: #FFF;
        border: 2px solid #a67c4e;
        padding: 21px;
    }

    /* 文章標題 */
    .home .related-post-title,
    .single .related-post-title {
        font-size: 1.365rem;
        font-weight: 700;
        margin: 0 0 10px 0;
        color: #222;
        letter-spacing: 0.06em;
    }

    .home .related-post-title::after,
    .single .related-post-title::after {
        display: none;
    }

    /* 文章摘要 */
    .home .related-post-excerpt,
    .single .related-post-excerpt {
        font-size: 0.988rem;
        color: #666;
        margin: 0 0 16px 0;
        line-height: 1.7;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .home .related-post-excerpt::after,
    .single .related-post-excerpt::after {
        display: none !important;
    }

    /* 查看更多按鈕 */
    .home .related-post-more,
    .single .related-post-more {
        position: static;
        align-self: center;
        margin: 21px auto 31px auto;
        font-size: 1.04rem;
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 0.06em;
        background: rgb(166, 140, 100);
        padding: 9.6px 72.8px;
        border-radius: 9999px;
        box-shadow: none;
        transform: translateY(-52px);
    }

    .home .related-post-more:hover,
    .single .related-post-more:hover {
        background: rgb(196, 173, 143);
    }

    /* 卡片偽元素隱藏 */
    .home .related-post-card.polaroid::after,
    .single .related-post-card.polaroid::after {
        display: none !important;
    }

    /* 咖啡豆裝飾 */
    .home .coffee-bean-decoration,
    .single .coffee-bean-decoration {
        position: absolute;
        bottom: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
        opacity: 0.8;
        z-index: 2;
        transform: translate(-18px, -105px);
    }
}

/* 行動版 (max-width: 768px) */
@media (max-width: 768px) {

    /* 隱藏分頁相關元素 */
    .home .pagination-container,
    .home .pagination-dots,
    .single .pagination-container,
    .single .pagination-dots,
    .news-listing-section .pagination-container,
    .news-listing-section .pagination-dots {
        display: none !important;
    }

    /* 區塊容器padding */
    .home .related-posts-section,
    .single .related-posts-section,
    .news-listing-section {
        padding: 28px 0 36px 0 !important;
    }

    /* 卡片容器 */
    .home .related-posts-section .related-posts-cards,
    .single .related-posts-section .related-posts-cards,
    .news-listing-section .news-cards-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 1200px !important;
        padding: 0 !important;
        margin: 6px auto 6px auto !important;
        overflow: visible !important;
        min-height: 0 !important;
    }

    /* 卡片本身 */
    .home .related-post-card.polaroid,
    .single .related-post-card.polaroid,
    .news-listing-section .related-post-card.polaroid {
        width: 300px !important;
        min-width: 260px !important;
        max-width: 300px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin: 0 8px !important;
        transition: none !important;
        border: 0 !important;
        overflow: hidden !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
    }

    /* 卡片hover */
    .home .related-post-card.polaroid:hover,
    .single .related-post-card.polaroid:hover,
    .news-listing-section .related-post-card.polaroid:hover {
        box-shadow: none !important;
        transform: none !important;
        cursor: pointer !important;
    }

    /* 圖片區域 */
    .home .related-post-thumb,
    .single .related-post-thumb,
    .news-listing-section .related-post-thumb {
        width: 100% !important;
        height: 250px !important;
        margin: 0 !important;
        background: #f2f6fb !important;
        display: grid !important;
    }

    /* 圖片本身 */
    .home .related-post-thumb img,
    .single .related-post-thumb img,
    .news-listing-section .related-post-thumb img {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 無圖片佔位符 */
    .home .no-thumb,
    .single .no-thumb,
    .news-listing-section .no-thumb {
        width: 100% !important;
        height: 100% !important;
        background: #cfd8e3 !important;
        display: block !important;
    }

    /* 內容區域 */
    .home .related-post-card.polaroid .related-post-content,
    .single .related-post-card.polaroid .related-post-content,
    .news-listing-section .related-post-card.polaroid .related-post-content {
        border: 2px solid #a67c4e !important;
        padding: 21px !important;
        background: #FFF !important;
    }

    /* 標題 */
    .home .related-post-title,
    .single .related-post-title,
    .news-listing-section .related-post-title {
        font-size: 1.365rem !important;
        font-weight: 700 !important;
        margin: 0 0 10px 0 !important;
        color: #222 !important;
        letter-spacing: 0.06em !important;
    }

    .home .related-post-title::after,
    .single .related-post-title::after,
    .news-listing-section .related-post-title::after {
        display: none !important;
    }

    /* 摘要 */
    .home .related-post-excerpt,
    .single .related-post-excerpt,
    .news-listing-section .related-post-excerpt {
        font-size: 0.988rem !important;
        color: #666 !important;
        margin: 0 0 16px 0 !important;
        line-height: 1.7 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .home .related-post-excerpt::after,
    .single .related-post-excerpt::after,
    .news-listing-section .related-post-excerpt::after {
        display: none !important;
    }

    /* 按鈕 */
    .home .related-post-more,
    .single .related-post-more,
    .news-listing-section .related-post-more {
        position: static !important;
        align-self: center !important;
        margin: 21px auto 0 auto !important;
        font-size: 1.04rem !important;
        color: #fff !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        letter-spacing: 0.06em !important;
        background: rgb(166, 140, 100) !important;
        padding: 9.6px 72.8px !important;
        border-radius: 9999px !important;
        box-shadow: none !important;
        transform: translateY(-52px) !important;
    }

    .home .related-post-more:hover,
    .single .related-post-more:hover,
    .news-listing-section .related-post-more:hover {
        background: rgb(196, 173, 143) !important;
    }

    /* 咖啡豆裝飾 */
    .home .coffee-bean-decoration,
    .single .coffee-bean-decoration,
    .news-listing-section .coffee-bean-decoration {
        position: absolute !important;
        right: 15px !important;
        bottom: 15px !important;
        width: 30px !important;
        height: 30px !important;
        opacity: 0.8 !important;
        pointer-events: none !important;
        z-index: 2 !important;
        transform: translateY(-100px) !important;
    }
}

/* 超小螢幕版本 (max-width: 510px) */
@media (max-width: 510px) {

    .home .related-post-card.polaroid .related-post-excerpt,
    .single .related-post-card.polaroid .related-post-excerpt,
    .news-listing-section .related-post-card.polaroid .related-post-excerpt {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 0 16px 0 !important;
        color: #666 !important;
        line-height: 1.7 !important;
    }
}