/* ===== 主體 ===== */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #ffffff; /* 奶油裸粉 - 網站主背景 */
  color: #3C3C3C;
}

.logo-area img {
  height: 40px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
}

/* ===== 導覽列與頁尾 ===== */
header, footer {
  background: #EADDD6; /* 奶茶米色 - 導覽列背景 */
  color: #3C3C3C;
}

footer {
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

/* ===== 導覽列內容 ===== */
.main-header {
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #C7A7A3;
  box-sizing: border-box;     /* 新增 */
  min-height: 68px;          /* 新增：給下限，高度自動撐開 */
}

.logo-area {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
}
.logo-area img.logo {
  width: 36px;
  height: 36px;
  margin-right: 10px;
}

.main-nav ul {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  text-decoration: none;
  color: #3C3C3C;
  font-weight: bold;
  padding: 6px 12px;
  line-height: 1.2;
}

.main-nav a:hover {
  color: #CDAFA1;
}

/* ---- Header 中置中的公告跑馬燈 ---- */
.ann-ticker{
  flex: 1;                 /* 佔滿 logo 和選單中間的空間 */
  margin: 0 16px;
  display: flex;
  align-items: center;
  min-width: 240px;
}
.ann-track{
  position: relative;
  width: 100%;
  max-width: 760px;        /* 可依版面調整 */
  height: 28px;            /* 固定高度避免跳動 */
  overflow: hidden;
  line-height: 24px;
  font-weight: 600;
  color: #5a4b45;
  letter-spacing: .2px;
  margin: 0 auto;
  text-align: center;
}
.ann-layer{
  position: absolute;
  inset: 0;                /* top/right/bottom/left 全 0 */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;     /* 呼吸式漸變，如果想讓淡入更慢、更柔和，改成 1500ms 或 1800ms */
  will-change: opacity;
   /* 新增：把內容置中 */
  display: flex;
  align-items: center;
  justify-content: center;  /* 文字水平置中 */
  text-align: center;       /* 保險：內文也是置中 */
  padding: 0 8px;           /* 兩側留點空間避免貼邊 */
}
.ann-layer.on{
  opacity: 1;
}
/* 減少動畫偏好時：直接顯示、不做淡入淡出 */
@media (prefers-reduced-motion: reduce){
  .ann-layer{ transition: none !important; }
}


.ann-text{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  color: #5a4b45;
  opacity: 0;
  transition: opacity .3s ease;
}
.ann-text.show{ opacity: 1; }

/* 小螢幕時隱藏公告，避免擠壓功能選單 */
@media (max-width: 768px){
  .ann-ticker{ display: none; }
}



.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 28px;
  border-radius: 8px;
  background: #c08474;
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: opacity 0.6s ease;
}

/* ===== 商品分類 ===== */
.sub-categories {
  background-color: #F3E5E1;
  padding: 10px 0;
  text-align: center;
  font-size: 1rem;
}
.sub-categories a {
  margin: 0 15px;
  text-decoration: none;
  color: #5A4B45;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s ease, border-bottom 0.3s ease;
}

.sub-categories a:hover {
  color: #E2B6A2;
  text-decoration: underline;
}

/* 目前選中分類的高亮樣式 */
.sub-categories a.active {
  color: #C04848;
  border-bottom: 2px solid #C04848;
}

/* 商品切換效果 */
#product-container.fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#product-container.show {
  opacity: 1;
}

.product-card.hidden {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}


/* 類別效果 */
.category-bar a {
  color: #444;
  font-weight: bold;
  padding: 10px 20px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.category-bar a:hover {
  color: #C04848;
}

.category-bar a.active {
  color: #C04848; /* 紅色高亮 */
  border-bottom: 2px solid #C04848;
}

/* ===== Banner 區塊 ===== */
.banner {
  text-align: center;
  padding: 60px 20px;
  background-color: #ffffff; 
  color: #5A4B45;
}

/* ===== 商品清單 ===== */
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1400px;
  margin: 60px auto;
  padding: 0 40px;
}

.product-card {
  width: 340px;
  min-height: 480px; /* 原本是 440，增加高度空間 */
  background-color: #ffffff;
  border: 1px solid #C7A7A3;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  padding: 16px; /* 原本 12px 16px，統一成內縮空間 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 把內容撐開填滿卡片 */
  align-items: center;  /* ✅ 元素垂直居中 */
}

.product-card img {
  width: 100%;
  height: 260px; /* 原本是 200px，圖片放大 */
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 16px;
}

.product-card .btn-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.product-card h2 {
  font-size: 20px;
  margin: 10px 0 5px;
  color: #3C3C3C; /* 商品名稱字色 */
  text-align: center;/* 商品名稱置中 */
}

/* ===== 商品頁TOP按鈕：美化版===== */
:root{
  --top-btn-size: 56px;
  --top-btn-glow: rgba(0,0,0,.18);
  --top-btn-highlight: rgba(255,255,255,.28);
  /* 奶茶米色 → 玫瑰裸棕的柔霧漸層 */
  --brand-grad: linear-gradient(135deg, #EADDD6 0%, #CDAFA1 100%);
  --top-icon: #5A4B45;      /* 深咖字色，與全站字色一致 */
}

.btn-top{
  position: fixed;
  /* 用 inset + safe area，避免在某些手機被當成更寬而產生橫向捲動 */
  inset: auto max(12px, env(safe-area-inset-right, 0))
         max(12px, env(safe-area-inset-bottom, 0)) auto;

  width: var(--top-btn-size);
  height: var(--top-btn-size);
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  z-index: 1000;

  /* 玻璃＋漸層 */
  background: var(--brand-grad);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* 置中 SVG */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 陰影不會影響版面寬度 */
  box-shadow:
    0 10px 22px var(--top-btn-glow),
    inset 0 1px 0 var(--top-btn-highlight);

  /* 初始狀態（隱藏） */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.96);
  transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease, background .22s ease;

  /* 告訴瀏覽器只影響自身繪製，避免把濾鏡/陰影算進全頁寬 */
  contain: layout paint;
  will-change: transform;
}




/* 白邊光暈 */
.btn-top::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset;
  pointer-events: none;
}

/* SVG 箭頭 */
.btn-top .icon{
  width: 26px;
  height: 26px;
  fill: var(--top-icon);
  display: block;
  margin: 0 auto;
  pointer-events: none;     /* 避免吃到點擊 */
}

/* 顯示時機 */
.btn-top.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Hover/Active 動態 */
.btn-top:hover{
  background: linear-gradient(135deg, #E9D6CF 0%, #B88D75 100%);
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 16px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-top:active{
  transform: translateY(0) scale(.98);
}

/* 深色模式微調（可選） */
@media (prefers-color-scheme: dark){
  :root{
    --brand-grad: linear-gradient(135deg, #DCCBC2 0%, #B98F80 100%);
    --top-icon: #3C3C3C;  /* 深色模式下改更深，仍保有對比 */
  }
}

/* 手機尺寸 */
@media (max-width: 768px){
  :root{ --top-btn-size: 52px; }
  .btn-top{
    inset: auto max(12px, env(safe-area-inset-right, 0))
           max(12px, env(safe-area-inset-bottom, 0)) auto;
  }
}

/* 鍵盤聚焦可視 */
.btn-top:focus-visible{
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 3px;
}

/* 觸控短按的視覺回饋（比 :active 更顯著） */
@media (hover: none){
  .btn-top:active{
    transform: translateY(1px) scale(.98);
  }
}
/*顯示動畫（更有質感，遵守減少動態偏好）*/
@keyframes topBtnPop {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
.btn-top.show{
  animation: topBtnPop .18s ease-out;
}
@media (prefers-reduced-motion: reduce){
  .btn-top, .btn-top:hover, .btn-top.show{
    transition: none;
    animation: none;
  }
}


/* ===== 商品價格樣式 ===== */

.price-discount, .price-regular {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.price-discount .amount {
  font-size: 28px;
  font-weight: 800;
  color: #C04848; /* ✅ 折扣價紅色 */
  font-family: 'DM Sans', sans-serif;
}

.price-regular .amount {
  font-size: 28px;
  font-weight: 800;
  color: #333;    /* ✅ 原價維持黑色或深灰 */
  font-family: 'DM Sans', sans-serif;
}


.price-discount .currency,
.price-regular .currency {
  font-size: 14px;         /* ✅ NT 小字 */
  font-weight: 500;
  line-height: 1;
}

.price-box:has(.price-regular) {
  justify-content: center;
}
.price-box {
  min-height: 38px;  /* ⭐️ 根據你想要的空間微調，38px 可以容納兩行價格 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

.price-original {
  font-size: 16px;
  font-family: 'Noto Sans TC', sans-serif;
  text-decoration: line-through;
  color: #999;
}

.price-discount {
  font-size: 28px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: #C04848;
  letter-spacing: 0.5px;
}

.discount-tag {
  background: #C04848;
  font-family: 'Rubik', sans-serif;
  color: white;
  font-size: 12px;         /* ✅ 折扣小一點 */
  font-weight: bold;
  padding: 3px 8px;        /* ✅ 空間縮小 */
  border-radius: 20px;
  display: inline-block;
}


/* ===== 按鈕樣式 ===== */
.btn-group button,
.btn-group .view-btn {
  width: 120px;
  height: 40px;
  font-size: 15px;
  background-color: #CDAFA1; /* 玫瑰裸棕 */
  color: #3C3C3C;             /* 深灰字色 */
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.btn-group button:hover,
.btn-group .view-btn:hover {
  background-color: #E2B6A2; /* 陶土裸橘 */
}

/* ===== 購物車數量圓點 ===== */
.cart-count {
  background-color: #CDAFA1;
  color: white;
  font-size: 12px;
  border-radius: 50%;
  padding: 2px 6px;
  
  top: -5px;
  right: -10px;
}
.cart-btn {
  position: relative;
}

/* ===== 加入購物車成功提示 ===== */
.add-success {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #CDAFA1;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  display: none;
  z-index: 999;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


@keyframes fadeOut {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; display: none; }
}
/* 下拉選單外層 */
.main-nav li.dropdown {
  position: relative;
}

/* 下拉選單本體，預設隱藏 */
.main-nav li .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #EADDD6;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  list-style: none;
  padding: 10px 0;
  margin: 0;
  border-radius: 6px;
  z-index: 100;
}

/* 顯示下拉 */
.main-nav li.dropdown:hover .dropdown-menu {
  display: block;
}

/* 下拉選單中的連結 */
.dropdown-menu li a {
  display: block;
  padding: 8px 20px;
  color: #3C3C3C;
  text-decoration: none;
  font-weight: normal;
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background-color: #CDAFA1;
  color: white;
}
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 30px;
  border: 1px solid #888;
  width: 400px;
  border-radius: 8px;
  text-align: center;
}

.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
/* 會員資料填寫表單開始 */
.profile-form {
  width: 400px;
  padding: 30px;
  font-size: 16px;
}

.profile-form .form-group {
  margin-bottom: 20px;
}

.profile-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #3C3C3C;
}

.profile-form input,
.profile-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
}

.profile-form input:focus,
.profile-form textarea:focus {
  border-color: #E2B6A2;
  outline: none;
  box-shadow: 0 0 0 2px rgba(226, 182, 162, 0.3);
}

.save-btn {
  background-color: #CDAFA1;
  color: white;
  padding: 12px 26px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  transition: background-color 0.3s ease;
}

.save-btn:hover {
  background-color: #B88D75;
}

.save-success {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #CDAFA1;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  display: none;
  z-index: 999;
  font-weight: bold;
}

.modal-content.profile-form {
  background: #fff;
  border-radius: 12px;
  padding: 30px 40px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
  margin: auto;
  position: relative;
  font-family: "Segoe UI", sans-serif;
}
.modal-content.profile-form h2 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 25px;
  color: #3b3b3b;
  letter-spacing: 1px;
}

.modal-content.profile-form .close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #aaa;
  transition: color 0.3s ease;
}

.modal-content.profile-form .close-btn:hover {
  color: #333;
}
/* 會員資料填寫表單結束 */

/* 會員資料修改的警告視窗 */
#unsaved-warning.modal {
  display: none;
  position: fixed;
  z-index: 10050 !important; /* ✅ 提高層級，確保蓋住其他 modal */
  left: 0; top: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.5);
}


#unsaved-warning .modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  margin: 100px auto;
  width: 300px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 99999; /* 加上這行 */
  position: relative; /* 加上這行 */
}

#unsaved-warning button {
  margin: 0 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}





/* 後台會員資料 */
.member-card {
  background: #fff;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* 首頁照片輪播相關 */
.carousel-container {
  width: 100%;
  position: relative;
  margin: 0 auto 20px;   /* 或視覺上再調整 */
  padding-bottom: 10px;  /* 改小或設為 0 */
  overflow: hidden;
}


/* 保險：確保輪播區塊是正常的層級與定位 */
.carousel-container{ position: relative; z-index: 1; }
/* header 本來就有較高 z-index，這裡僅明確化 */
.main-header{ position: relative; z-index: 10; }

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-img {
  width: 100%;
  height: 400px;
  object-fit: cover;       /* ← 正確值 */
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  border-radius: 0;
}


.carousel-img.active {
  opacity: 1;
  position: relative;
  z-index: 1;
}
/* 首頁照片輪播相關結束 */

/* 我的歷史訂單文字 */
.center-title {
  text-align: center;
  margin-top: -10px;
  margin-bottom: 30px;
  font-size: 24px;
}
/*請進入商品頁選擇規格提示訊息*/
.spec-warning {
  display: none;
  position: fixed;
  top: 40px; /* 頂部距離 */
  left: 50%;  /* 水平居中 */
  transform: translateX(-50%);  /* 往左移一半寬度達到正中 */
  background-color: #C6456C;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  z-index: 1001;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/*商品為0時按下加入購物車的提示訊息*/
.stock-warning {
  display: none;
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #C6456C;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  z-index: 1001;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  }

/*輪播圖下方顯示點點指示器*/
.carousel-dots {
  text-align: center;
  margin-top: 16px;
}

.carousel-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 6px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-dot.active {
  background-color: #C6456C;
}

/* 商品標籤樣式 - 漸層 + 陰影 + 光澤 */
.label-badge {
  position: relative;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  border-radius: 24px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.2),
    inset 0 1px 1px rgba(255,255,255,0.15),
    0 3px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  animation: popIn 0.3s ease;
  letter-spacing: 0.5px;
}

/* 標籤容器群組 */
.label-group {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 10;
}

/* 各類標籤漸層背景 */
.badge-sale {
  background: linear-gradient(to bottom, #f75a5a, #c62828);
}

.badge-hot {
  background: linear-gradient(to bottom, #f7a547, #e07c00);
}

.badge-recommend {
  background: linear-gradient(to bottom, #00bfa5, #00796b);
}

.badge-natural {
  background: linear-gradient(to bottom, #aed581, #689f38);
}

.badge-limited {
  background: linear-gradient(to bottom, #ba68c8, #8e24aa);
}

/* 彈出動畫 */
@keyframes popIn {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}






/* 首頁下方的關於我文字 */
footer ul li a {
  text-decoration: none;       /* 移除底線 */
  color: #000;                  /* 黑色字體 */
  font-weight: bold;           /* 粗體 */
}

footer ul li a:hover {
  text-decoration: underline;  /* 滑鼠移過時加底線，可改成變色也行 */
  color: #c47c6e;               /* 滑鼠移過時顏色（自訂） */
}

footer ul li a:visited {
  color: #000;                 /* 已點過的也維持黑色，不要紫色 */
}
/* 首頁下方的FB，IG圖示 */
.social-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 50%;
  background: white;
  padding: 4px;
}

/*-- 新增：購物金徽章樣式 */

/* 導覽列右側保持靠右（你若已有可略過） */
/* 只影響最上層主選單，不波及下層 dropdown-menu */
.main-header .main-nav > ul{
  display:flex; align-items:center; gap:18px; justify-content:flex-end;
  list-style:none; margin:0; padding:0;
}


/* 膠囊徽章（縮小版） */
.wallet-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; text-decoration:none;
  background:linear-gradient(180deg,#FFF7FB 0%,#FDE8EF 100%);
  border:1px solid #F4C9D6;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 6px 14px rgba(198,69,108,.10);
  color:#5C2543; font-weight:700; font-size:13px; line-height:1; letter-spacing:.2px;
  font-variant-numeric:tabular-nums;
}
.wallet-chip .chip-icon{ width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.wallet-chip .chip-text{ opacity:.9; font-size:12px; }
.wallet-chip .chip-amount{ font-size:14px; margin-left:2px; }
.wallet-chip .chip-unit{ opacity:.8; font-size:12px; }

.wallet-chip:hover,
.wallet-chip:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 18px rgba(198,69,108,.18);
  outline:none;
}
.wallet-chip:active{
  transform:translateY(0);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 5px 10px rgba(198,69,108,.16);
}

/* 0 元時變淡 */
.wallet-chip.is-zero{
  background:linear-gradient(180deg,#FBFBFB 0%,#F4F4F4 100%);
  color:#6B6B6B; border-color:#E6E6E6;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 4px 10px rgba(0,0,0,.06);
}
.wallet-chip.is-zero .chip-icon { opacity: .7; }
.wallet-chip.is-zero .chip-text,
.wallet-chip.is-zero .chip-unit { opacity: .7; }

/* 手機更精簡：只留圖示＋金額 */
@media (max-width: 900px){
  .wallet-chip{ padding:5px 8px; gap:6px; font-size:12px; }
  .wallet-chip .chip-icon{ width:14px; height:14px; }
  .wallet-chip .chip-text,
  .wallet-chip .chip-unit{ display:none !important; }
  .wallet-chip .chip-amount{ font-size:13px; }
}



/* 下拉容器定位 */
.main-header .main-nav .dropdown{ position:relative; }

/* 下拉選單初始隱藏，絕對定位到主選單下方 */
.main-header .main-nav .dropdown-menu{
  display:none;
  position:absolute;
  right:0;
  top:100%;           /* ← 原本是 calc(100% + 8px) */
  margin:0;           /* ← 確保沒有 margin-top */
  padding:8px 0;
  background:#fff;
  border:1px solid #eadad6;
  border-radius:12px;
  list-style:none;
  white-space:nowrap;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  z-index:1000;
}

/* 2) 透明「橋接層」：避免快速移動時仍有中斷 */
.main-header .main-nav .dropdown-menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-8px;           /* ↑ 往上延伸 8px，填平原本的縫 */
  height:8px;
}

/* 3) 保證選單不被其他區塊蓋掉（有些輪播會有高 z-index） */
.main-header{ position:relative; z-index:2000; }

/* hover 顯示下拉（若有點擊切換的 JS 也相容） */
.main-header .main-nav .dropdown:hover .dropdown-menu{ display:block; }

/* 下拉項目樣式 */
.main-header .main-nav .dropdown-menu li{ display:block; }
.main-header .main-nav .dropdown-menu a{
  display:block; padding:8px 14px; color:#5a4b45; text-decoration:none;
}
.main-header .main-nav .dropdown-menu a:hover{ background:#f7f2f1; }

/* ⛑ 強制保險：無論其他檔案是否還有 max-height，這裡都移除 */
.main-header { max-height: none !important; }