/* ============ Base ============ */
body {
  font-family: 'Noto Sans TC', sans-serif;
  color: var(--color-dark);
}
h1, h2, h3, h4, h5, h6, .brand-name, .hero-title, .section-title {
  font-family: 'Noto Serif TC', serif;
}
a { color: var(--color-primary); }
.btn-brand {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn-brand:hover { background-color: var(--color-secondary); border-color: var(--color-secondary); color:#fff; }
.btn-outline-brand {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}
.btn-outline-brand:hover { background: var(--color-primary); color: #fff; }
.bg-light-tea { background-color: var(--color-light-bg); }




/* .site-header{
  display: none;
} */

/* 捲動後（不論哪個頁面）：一律變回實色白底 + 深色文字 */
/* .has-hero-header .site-header.scrolled {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
} */

/* .site-header.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  z-index: 1050;
  transition: background-color .3s ease, box-shadow .3s ease; 
} */


/* ============ Header  ============ */
:root {
  --header-height: 86px;
}

/* 預設狀態：固定在頂部，並加上流暢的背景與顏色漸變動畫 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; 
}

/* 基礎字體粗細與大小設定（不寫死顏色，顏色由下方首頁與捲動規則絕對分流） */
.brand-name { font-weight: 700; font-size: 1.4rem; transition: color .3s ease; }
.header-icon { transition: color .3s ease; }
.navbar-nav .nav-link { font-weight: 500; transition: color .3s ease; }
.navbar-nav .nav-link:hover { color: var(--color-primary) !important; }

/* 一般頁面（無 Hero）：內容往下留出 header 高度，避免被遮擋 */
main { padding-top: var(--header-height); }


/* ===== 🌟 核心修改：首頁（有 Hero 主視覺）限定功能 🌟 ===== */
.has-hero-header main { padding-top: 0; }
.has-hero-header .hero-section { box-sizing: border-box; }

/* 狀態：【首頁 - 未捲動靜止時】背景透明、文字與 ICON 顯示白色 */
.has-hero-header .site-header:not(.scrolled) {
  background-color: transparent !important;
  box-shadow: none !important;
  pointer-events: auto; /* 確保未捲動時選單連結依然點得到 */
}

/* 讓所有文字、連結、購物車與圖示在未捲動時「強制變白」 */
.has-hero-header .site-header:not(.scrolled) .brand-name,
.has-hero-header .site-header:not(.scrolled) .navbar-nav .nav-link,
.has-hero-header .site-header:not(.scrolled) .header-icon, 
.has-hero-header .site-header:not(.scrolled) .toggle-icon{
  color: #ffffff !important;
}

.has-hero-header .site-header:not(.scrolled) .navbar-toggler-icon {
  filter: invert(1) !important;
}

/* 1. 調整自訂圖示的大小與顏色（可依品牌自行調整） */
.navbar-custom .toggle-icon {
  font-size: 1.5rem; 
  color: currentColor; /* 繼承父層顏色，未捲動時會自動吃首頁的 #ffffff */
  transition: transform 0.2s ease-in-out, color 0.3s ease;
}

.site-header.scrolled .navbar-custom .toggle-icon {
  color:var(--color-primary)  !important; /* 💡 這裡填你網頁捲動後，其他選單文字變成的深色 */
}

/* 2. 關鍵：當按鈕處於展開狀態 (aria-expanded="true") 時，將三條線圖示更換為叉叉 */
.navbar-toggler[aria-expanded="true"] .toggle-icon::before {
  content: "\f659" !important; /* Bootstrap Icons 的 bi-x-lg (叉叉) 程式碼 */
}

/* 3. 當變成叉叉時，加上一點小小的旋轉動畫效果（選填，視覺效果更好） */
.navbar-toggler[aria-expanded="true"] .toggle-icon {
  transform: rotate(90deg);
}

/* 4. 移除點擊時產生的預設黑框與外框線 */
.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}


/* 狀態：【首頁 - 捲動後】以及【其他所有常規分頁】背景白色、文字與 ICON 深色 */
/* 當首頁被加上 .scrolled，或者在一般沒有 Hero 大圖的頁面時 */
.site-header.scrolled,
body:not(.has-hero-header) .site-header {
  background-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* 讓所有文字、連結、購物車在捲動後（或一般頁面）「強制變回深色/品牌色」 */
.site-header.scrolled .brand-name,
body:not(.has-hero-header) .site-header .brand-name,
.site-header.scrolled .navbar-nav .nav-link,
body:not(.has-hero-header) .site-header .navbar-nav .nav-link {
  color: var(--color-dark, #333333) !important;
}

/* 購物車與特色圖示恢復品牌色（或你可以改寫成 var(--color-dark)） */
.site-header.scrolled .header-icon,
body:not(.has-hero-header) .site-header .header-icon {
  color: var(--color-primary, #2c7a7b) !important;
}

/* 漢堡按鈕邊框與三條線恢復原本的深色設定 */
.site-header.scrolled .navbar-toggler,
body:not(.has-hero-header) .site-header .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.15) !important;
}
.site-header.scrolled .navbar-toggler-icon,
body:not(.has-hero-header) .site-header .navbar-toggler-icon {
  filter: none !important;
}


/* ============ 手機版收合選單展開優化 ============ */
@media (max-width: 991.98px) {
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    margin-top: .5rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }
  .navbar-collapse.show .nav-link,
  .navbar-collapse.collapsing .nav-link {
    color: var(--color-dark) !important;
  }
}


/* 確保首頁捲動後的文字與圖示為正確的深色與品牌色 */
.has-hero-header .site-header.scrolled .brand-name,
.has-hero-header .site-header.scrolled .navbar-nav .nav-link {
  color: var(--color-dark) !important;
}
.has-hero-header .site-header.scrolled .header-icon { 
  color: var(--color-primary) !important; 
}
.has-hero-header .site-header.scrolled .navbar-toggler {
  border-color: rgba(0,0,0,.15);
}
.has-hero-header .site-header.scrolled .navbar-toggler-icon {
  filter: none;
}


/* ============ 手機版收合選單設定 ============ */
@media (max-width: 991.98px) {
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    margin-top: .5rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }
  .navbar-collapse.show .nav-link,
  .navbar-collapse.collapsing .nav-link {
    color: var(--color-dark) !important;
  }
}


/* ============ Hero ============ */
.hero-section { margin-top: 0; }
.hero-slide {
  min-height: 650px;
  background-size: cover;
  background-position: 10% 10%;
  color: #fff;
  width: 100%;
}

.hero-overline { letter-spacing: 3px; text-transform: uppercase; color: var(--color-secondary); font-weight: 600; margin-bottom: .5rem; }
.hero-title { font-size: 3rem; font-weight: 700; }
.hero-subtitle {  font-size: 1rem; margin: 1rem 0 1.5rem;  margin:0 90px 10px; }

/* ============ Features ============ */
.feature-item { padding: 1.5rem 1rem; }
.feature-icon i { font-size: 2.5rem; color: var(--color-primary); }
.feature-number { font-size: .85rem; color: var(--color-secondary); font-weight: 700; letter-spacing: 2px; }


/* ============ About ============ */
.about-images { padding: 20px 40px 40px 0; }
.about-img-main { width: 80%; border-radius: 16px; }
.about-img-sub {
  width: 45%;
  position: absolute;
  bottom: -20px;
  right: 0;
  border: 6px solid #fff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
.section-overline { letter-spacing: 3px; text-transform: uppercase; color: var(--color-secondary); font-weight: 600; font-size: 1.5rem; }
.section-title { font-weight: 700; margin-bottom: 1rem;  font-size:2.3rem;}

.sbout-text-content{
  display:flex;
  flex-direction:column;
  margin-top: 220px;
}

.sbout-text-btn{
  justify-content:center;
  align-items:center;
}

/* ============ 關於我們：終極比例（右寬高、左窄矮、底平齊） ============ */

/* 外層圖片總容器：限制最大寬度，確保絕對不會把右邊文字擠下去 */
.about-images-container {
  width: 100%;
  max-width: 520px;       /* 稍微放寬總體上限，讓兩張圖的層次更明顯 */
  aspect-ratio: 1.15 / 1; /* 整個區塊的總長寬比例 */
  margin: 0 auto;
}

/* 兩張圖片盒子的共同基礎設定 */
.about-arch-img {
  overflow: hidden;
  border-radius: 500px 500px 0 0; /* 頂部完美半圓拱門，底部直角 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* 淡淡的質感陰影 */
}

/* 確保裡面的圖片不變形，並各自填滿自己的盒子 */
.about-arch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 📐 核心調整：精準指派兩張圖的「寬度與高度」黃金比例 */

/* 左邊第一張圖：比較窄（寬 43%），也比較矮（高 82%） */
.about-arch-img.arch-left {
  width: 43%;
  height: 82%;            
}

/* 右邊第二張圖：比較寬（寬 54%），而且高開滿（高 100%） */
.about-arch-img.arch-right {
  width: 54%;
  height: 100%;           
}

/* ============ 📱 RWD 行動裝置優化 ============ */
@media (max-width: 991.98px) {
  .about-images-container {
    margin-bottom: 2.5rem; /* 手機版圖文變成上下排列時，下方留出呼吸空間 */
    max-width: 380px;      /* 手機版適度縮小 */
  }
}

/* ============ Product cards ============ */
.product-card-img-wrap { position: relative; overflow: hidden; border-radius: 14px; }
.product-card-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-card-img { transform: scale(1.06); }
.badge-sale {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--color_badge_bg); color: #fff; font-size: .7rem;
  padding: 3px 10px; border-radius: 20px;
}
.add-to-cart-quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  opacity: 0; transform: translateY(10px); transition: all .25s ease;
}
.product-card:hover .add-to-cart-quick { opacity: 1; transform: translateY(0); }
.product-category { letter-spacing: 1px; }


/* ============ Offer & CTA banners ============ */
.offer-banner, .cta-section {
  min-height: 380px;
  background-size: cover;
  background-position: center;
}


/* ============ Testimonials ============ */
.testimonial-quote { font-size: 1.2rem; font-style: italic; max-width: 700px; margin: 0 auto 1.5rem; }
.testimonial-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }


/* ============ Articles ============ */
.article-img { width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: 14px; }
.article-card:hover .article-img { filter: brightness(0.92); }


/* ============ Page banner (shop / articles / flatpage) ============ */
.page-banner { background: var(--color-light-bg); padding: 4rem 0; margin-bottom: 0; }
.page-banner h1 { font-weight: 700; }


/* ============ Shop filter ============ */
.shop-cat-list li a { display: block; padding: .4rem 0; color: var(--color-dark); text-decoration: none; }
.shop-cat-list li a.active, .shop-cat-list li a:hover { color: var(--color-primary); font-weight: 600; }


/* ============ Cart / Checkout ============ */
.checkout-summary { background: var(--color-light-bg); border-radius: 16px; }


/* ============ Footer ============ */
.site-footer { background: var(--color-dark); color: #e8e6df; }
.footer-brand { color: #fff; }
.site-footer a { color: #cfd2c8; text-decoration: none; }
.site-footer a:hover { color: var(--color-secondary); }
.footer-links li { margin-bottom: .5rem; }
.subscribe-strip { background: var(--color-light-bg); }


/* ============ Notification toast ============ */
.site-flash-toast { min-width: 260px; }


/* ============ Responsive (mobile) ============ */
@media (max-width: 991.98px) {
  .hero-slide { min-height: 520px; text-align: center; }
  .hero-title { font-size: 2.1rem; }
  .hero-overline, .hero-subtitle { margin-left: auto; margin-right: auto; }
  .about-images { padding: 0 0 40px 0; margin-bottom: 30px; }
  .about-img-main { width: 100%; }
  .about-img-sub { width: 55%; }
  .navbar-nav { margin: 1rem 0; }
  .offer-banner, .cta-section { min-height: 300px; text-align: center; }

  .site-header {
    position: fixed !important;
  }
}

@media (max-width: 575.98px) {
  .hero-title { font-size: 1.7rem; }
  .feature-item { padding: 1rem .5rem; }
  .hero-subtitle { margin:0 25px 0; }
  .sbout-text-content {
    margin-top: 0;
  }

  .hero-slide {
    min-height: 100dvh;  
    background-size: cover; /* 關鍵：強制圖片等比例縮放並填滿整個區塊 */
    background-position: 10% 10%;
  }


}