.elementor-11720 .elementor-element.elementor-element-aeffa6b{--display:flex;}.elementor-11720 .elementor-element.elementor-element-ee11ed2{--spacer-size:0.1rem;}.elementor-11720 .elementor-element.elementor-element-c59a63f{--display:flex;}.elementor-11720 .elementor-element.elementor-element-8f7d565{column-gap:0px;text-align:center;}.elementor-11720 .elementor-element.elementor-element-8887795{--display:flex;}.elementor-11720 .elementor-element.elementor-element-605361b{--spacer-size:0.1rem;}.elementor-11720 .elementor-element.elementor-element-8bfcc0b{--display:flex;}.elementor-11720 .elementor-element.elementor-element-8bfcc0b:not(.elementor-motion-effects-element-type-background), .elementor-11720 .elementor-element.elementor-element-8bfcc0b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6A7A7D9;}.elementor-11720 .elementor-element.elementor-element-5afa922:hover .elementor-widget-container{box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-11720 .elementor-element.elementor-element-5afa922{text-align:center;}body:not(.rtl) .elementor-11720 .elementor-element.elementor-element-5afa922 .elementor-drop-cap{margin-right:10px;}body.rtl .elementor-11720 .elementor-element.elementor-element-5afa922 .elementor-drop-cap{margin-left:10px;}.elementor-11720 .elementor-element.elementor-element-f6894ea{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;}@media(min-width:768px){.elementor-11720 .elementor-element.elementor-element-f6894ea{--content-width:1320px;}}@media(max-width:1024px) and (min-width:768px){.elementor-11720 .elementor-element.elementor-element-8887795{--content-width:500px;}}@media(max-width:1024px){.elementor-11720 .elementor-element.elementor-element-5afa922 > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;padding:0rem 0rem 0rem 0rem;}.elementor-11720 .elementor-element.elementor-element-5afa922.elementor-element{--align-self:center;}.elementor-11720 .elementor-element.elementor-element-5afa922{text-align:center;font-size:0.1rem;word-spacing:0em;}}@media(max-width:767px){.elementor-11720 .elementor-element.elementor-element-aeffa6b{--min-height:0.1rem;}.elementor-11720 .elementor-element.elementor-element-ee11ed2{--spacer-size:0.1rem;}.elementor-11720 .elementor-element.elementor-element-605361b{--spacer-size:0.1rem;}.elementor-11720 .elementor-element.elementor-element-5afa922 > .elementor-widget-container{margin:-1rem -1rem -1rem -1rem;padding:0rem 0rem 0rem 0rem;border-radius:0rem 0rem 0rem 0rem;}.elementor-11720 .elementor-element.elementor-element-5afa922.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-11720 .elementor-element.elementor-element-5afa922{text-align:center;letter-spacing:0rem;word-spacing:0em;}.elementor-11720 .elementor-element.elementor-element-5afa922 p{margin-bottom:0.1rem;}}/* Start custom CSS for text-editor, class: .elementor-element-5afa922 */.colorful-btn {
  display: inline-block;
  
  /* ❗ 新增：標準化盒模型計算 */
  box-sizing: content-box; /* 確保 padding 確實被加到內容之外 */

  /* ❗ 再次增加內邊距：左右增大到 40px，上下保持 10px，增加緩衝空間 */
  padding: 10px 40px; 
  
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap; 
  
  /* 確保沒有隱藏的行高問題 */
  line-height: 1.2; 
  
  /* ... 其他漸層和顏色設置保持不變 ... */
  background: linear-gradient(90deg, 
    #FFD1D1, 
    #FFE4B2, 
    #FFFFCC, 
    #D1F2A5, 
    #B2E0FF, 
    #C1B3E6, 
    #E6CCFF  
  ) !important; 
  
  color: #333 !important;
  
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.3s, color 0.3s;
  text-shadow:
    1px 1px 1px rgba(255, 255, 255, 0.8),
    0 0 5px rgba(0, 0, 0, 0.2);
}

.colorful-btn:hover {
  /* ... 懸停設置保持不變 ... */
  background: linear-gradient(90deg,
    #FFE5B4, 
    #FFF9C4, 
    #D0F0C0, 
    #B3E5FC, 
    #C5CAE9, 
    #E1BEE7, 
    #F8BBD0  
  ) !important;
  
  color: #222 !important;
  
  text-shadow:
    1px 1px 2px rgba(255, 255, 255, 0.9),
    0 0 7px rgba(0, 0, 0, 0.3);
}


/* 全局粉金色變量 */
:root {
  --pink-gold: #e5b8a0;      /* 按鈕靜態時的粉金色 */
  --dark-text: #4a3833;      /* 按鈕靜態時的文字色 */
  --hover-gold: #f3e0b8;     /* 按鈕懸停時貓耳朵使用的顏色，與漸變中的主色調相符 */
  /* 新增一個變量來控制貓耳朵的靜態顏色 */
  --ear-color-static: var(--pink-gold); 
}

.product-poster {
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-poster li {
  margin-bottom: 8px; 
}

.product-poster li a {
  display: block;
  padding: 8px 14px;
  text-decoration: none;
  color: #444;
  background: #ffffff;
  transition: background 0.25s ease, color 0.25s ease;
}

/* 滑鼠移上去：淺金色漸層 (適用於所有按鈕) */
.product-poster li a:hover {
  background: linear-gradient(135deg, #fff7d1, #f3e0b8);
  color: #5a4100;
}

/* 1. 【通用化】當前頁面按鈕 (.active) 的粉金色主體樣式 */
/* 這裡使用 .active 選擇器，它會覆蓋 li a 的樣式 */
.product-poster li a.active { 
  /* 按鈕主體樣式 */
  background-color: var(--pink-gold) !important; 
  color: var(--dark-text) !important;
  text-decoration: none;
  /* 移除 position: relative; 和 z-index: 1; 讓它只在 cat-ear-button 上出現 */
  border-radius: 8px;
  padding: 10px 20px;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: inline-block; 
  transition: background 0.25s ease, color 0.25s ease;
}

/* 2. 【通用化】貓耳朵結構和靜態樣式 (只應用於 cat-ear-button) */
.cat-ear-button {
  position: relative; /* 啟用偽元素的定位 */
  z-index: 1; /* 確保按鈕在耳朵之上 */
}

.cat-ear-button::before,
.cat-ear-button::after {
  content: '';
  position: absolute;
  top: -12px; 
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 0; 
  transition: border-color 0.25s ease; 
}

/* 左耳的三角形形狀和定位 (通用化) */
.cat-ear-button::before {
  left: 8px;
  border-width: 0 12px 15px 12px; 
  /* 注意：這裡的顏色暫時設置為靜態粉金色，但它會被 .active 的樣式覆蓋 */
  border-color: transparent transparent var(--ear-color-static) transparent; 
  transform: rotate(-15deg); 
}

/* 右耳的三角形形狀和定位 (通用化) */
.cat-ear-button::after {
  right: 8px; 
  border-width: 0 12px 15px 12px; 
  border-color: transparent transparent var(--ear-color-static) transparent; 
  transform: rotate(15deg); 
}

/* 3. 【通用化】確保只有當前按鈕 (active) 才顯示粉金色的耳朵 */
.active.cat-ear-button::before,
.active.cat-ear-button::after {
    /* 靜態狀態下，耳朵顏色使用粉金色 */
    border-color: transparent transparent var(--pink-gold) transparent; 
}

/* 4. 【通用化】當前按鈕懸停效果：按鈕變色與貓耳朵變色！ */
.active.cat-ear-button:hover {
  /* 按鈕主體保持您現有的 hover 樣式 */
  background: linear-gradient(135deg, #fff7d1, #f3e0b8) !important; 
  color: #5a4100 !important;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); 
}

/* 貓耳朵懸停時的顏色變化 */
.active.cat-ear-button:hover::before,
.active.cat-ear-button:hover::after {
  /* 改變底部的邊框顏色，使其與按鈕的 hover 金色 (var(--hover-gold)) 一致 */
  border-color: transparent transparent var(--hover-gold) transparent; 
}/* End custom CSS */