:root {
    --brand-deep-green: #4a6741;
    --brand-light-green: #a5c259;
    --brand-red: #e53935;
    --brand-gold: #d4af37; /* Plus系列專用金 */
    --bg-cream: #f3f5e6;
	/* #fdfdfb; */
    --white: #ffffff;
    --text-dark: #2c3e50;
}

* { box-sizing: border-box; scroll-behavior: smooth; }
body {
    font-family: "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", sans-serif;
    margin: 0; color: var(--text-dark); background-color: var(--bg-cream); line-height: 1.8;
}

/* 導覽列 */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 6%; background: rgba(255, 255, 255, 0.98);
    position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.logo-container { display: flex; align-items: center; text-decoration: none; }
.logo-img { height: 90px; margin-right: 12px; }
.logo-text { font-size: 1.8rem; font-weight: 800; color: var(--brand-deep-green); }

.nav-links { display: flex; gap: 12px; }
.nav-links a { text-decoration: none; color: var(--brand-deep-green); font-weight: 600; font-size: 1rem; transition: 0.3s; }
.nav-links a:hover { color: var(--brand-red); }

/* 通用設定 */
.section { padding: 10px 10%; }
.section-title h2 { font-size: 2.2rem; color: var(--brand-deep-green); margin: 0px; }
.section-title { text-align: center; margin-bottom: 0px; }
.line { width: 70px; height: 4px; background: var(--brand-red); margin: 15px auto; }

/* 產品卡片通用樣式 */
        .product-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
            gap: 30px; 
            margin-top: 40px;
        }

        .product-card { 
            background: white; 
            border-radius: 15px; 
            overflow: hidden; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover { transform: translateY(-5px); }

        .p-img { width: 100%; height: 220px; object-fit: cover; background: #f0f0f0; }

        .p-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; text-align: }

        .p-content h4 { margin: 0 0 10px 0; color: var(--brand-deep-green); font-size: 1.2rem; text-align: center; }

        .p-content p { font-size: 1.0rem; color: #666; margin-bottom: 20px; line-height: 1.5; text-align: center; }
		
        .btn-buy { 
            margin-top: auto;
            background: #ffd000; 
            color: #333; 
            text-align: center; 
            padding: 12px; 
            border-radius: 5px; 
            text-decoration: none; 
            font-weight: bold;
            transition: 0.3s;
        }

        .btn-buy:hover { background: #ffbc00; }

        .badge-nature {
            display: inline-block;
            background: #e8f5e9;
            color: #2e7d32;
            padding: 2px 8px;
            font-size: 0.9rem;
            border-radius: 4px;
            margin-bottom: 8px;
            font-weight: bold;
            text-align: center;
        }
		
        .badge-intensive {
            display: inline-block;
            background: #fff3e0;
            color: #e65100;
            padding: 2px 8px;
            font-size: 0.9rem;
            border-radius: 4px;
            margin-bottom: 8px;
            font-weight: bold;
			text-align: center;
        }		
		
	        .badge-cleansing {
            display: inline-block;
            background: #fff3e0;
            color: #e65100;
            padding: 2px 8px;
            font-size: 0.9rem;
            border-radius: 4px;
            margin-bottom: 8px;
            font-weight: bold;
			text-align: center;
        }	
		
	        .badge-plus {
            display: inline-block;
            background: #fff3e0;
            color: #e65100;
            padding: 2px 8px;
            font-size: 0.9rem;
            border-radius: 4px;
            margin-bottom: 8px;
            font-weight: bold;
			text-align: center;
        }			


/* footer通用樣式 */
footer { background: #2c3e2d; color: #adb5bd; text-align: center; padding: 20px 0; margin-top: 50px; }
.footer-logo { height: 60px; margin-bottom: 5px; }

@media (max-width: 768px) {
    .product-card { grid-template-columns: 1fr; }
    .section { padding: 40px 5%; }
}



/* 語言切換與導覽列微調 */
.lang-switch { margin-left: 20px; border-left: 1px solid #ccc; padding-left: 20px; font-size: 0.9rem; }
.lang-switch a { color: var(--text-dark); text-decoration: none; margin: 0 5px; }
.lang-switch a.active { color: var(--brand-deep-green); font-weight: bold; }

/* 產品詳情頁面樣式 */
.product-detail-container { max-width: 1000px; margin: 40px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 20px; background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.pd-image img { width: 100%; border-radius: 15px; object-fit: cover; }
.pd-info h1 { color: var(--brand-deep-green); font-size: 2rem; margin-bottom: 10px; }
.pd-category { color: var(--brand-light-green); font-weight: bold; margin-bottom: 20px; display: inline-block; }
.pd-price { font-size: 1.5rem; color: var(--brand-red); font-weight: bold; margin-bottom: 20px; }
.pd-desc { line-height: 1.8; color: #555; margin-bottom: 30px; }
.btn-back { display: inline-block; margin-top: 20px; color: #888; text-decoration: underline; cursor: pointer; }

/* Wiki 專欄頁面樣式 */
.wiki-container { max-width: 800px; margin: 0 auto; }
.wiki-search { width: 100%; padding: 15px; border-radius: 8px; border: 1px solid #ddd; font-size: 1.1rem; margin-bottom: 30px; }
.wiki-article { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); margin-bottom: 20px; }
.wiki-meta { font-size: 0.85rem; color: #888; margin-bottom: 10px; display: flex; gap: 15px; }
.wiki-tag { background: #e8f5e9; color: #2e7d32; padding: 2px 8px; border-radius: 4px; }