.elementor-11819 .elementor-element.elementor-element-aeffa6b{--display:flex;}.elementor-11819 .elementor-element.elementor-element-ee11ed2{--spacer-size:0.1rem;}.elementor-11819 .elementor-element.elementor-element-c2eb870{--display:flex;}.elementor-11819 .elementor-element.elementor-element-1a5e6b1{column-gap:0px;text-align:center;}.elementor-11819 .elementor-element.elementor-element-8887795{--display:flex;}.elementor-11819 .elementor-element.elementor-element-605361b{--spacer-size:0.1rem;}.elementor-11819 .elementor-element.elementor-element-5371b73{--display:flex;}.elementor-11819 .elementor-element.elementor-element-5371b73:not(.elementor-motion-effects-element-type-background), .elementor-11819 .elementor-element.elementor-element-5371b73 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6A7A7D9;}.elementor-11819 .elementor-element.elementor-element-6f514ed:hover .elementor-widget-container{box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-11819 .elementor-element.elementor-element-6f514ed{text-align:center;}body:not(.rtl) .elementor-11819 .elementor-element.elementor-element-6f514ed .elementor-drop-cap{margin-right:10px;}body.rtl .elementor-11819 .elementor-element.elementor-element-6f514ed .elementor-drop-cap{margin-left:10px;}.elementor-11819 .elementor-element.elementor-element-3a4c8e4{--display:flex;}.elementor-11819 .elementor-element.elementor-element-6b2248e{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11819 .elementor-element.elementor-element-7ad1dbd .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-11819 .elementor-element.elementor-element-7ad1dbd .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-11819 .elementor-element.elementor-element-7ad1dbd{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-11819 .elementor-element.elementor-element-3101bb9{--display:flex;}.elementor-11819 .elementor-element.elementor-element-3101bb9:not(.elementor-motion-effects-element-type-background), .elementor-11819 .elementor-element.elementor-element-3101bb9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2295B6E;}.elementor-11819 .elementor-element.elementor-element-bf6c9ba .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-title-text{color:#556068;}.elementor-11819 .elementor-element.elementor-element-bf6c9ba .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-title-text a{color:#556068;}.elementor-11819 .elementor-element.elementor-element-bf6c9ba .e-tabs-items-wrapper .e-section-title{border-style:solid;}@media(max-width:1024px){.elementor-11819 .elementor-element.elementor-element-6f514ed > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;padding:0rem 0rem 0rem 0rem;}.elementor-11819 .elementor-element.elementor-element-6f514ed.elementor-element{--align-self:center;}.elementor-11819 .elementor-element.elementor-element-6f514ed{text-align:center;font-size:0.1rem;word-spacing:0em;}.elementor-11819 .elementor-element.elementor-element-6b2248e{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-11819 .elementor-element.elementor-element-aeffa6b{--min-height:0.1rem;}.elementor-11819 .elementor-element.elementor-element-ee11ed2{--spacer-size:0.1rem;}.elementor-11819 .elementor-element.elementor-element-605361b{--spacer-size:0.1rem;}.elementor-11819 .elementor-element.elementor-element-6f514ed > .elementor-widget-container{margin:-1rem -1rem -1rem -1rem;padding:0rem 0rem 0rem 0rem;border-radius:0rem 0rem 0rem 0rem;}.elementor-11819 .elementor-element.elementor-element-6f514ed.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-11819 .elementor-element.elementor-element-6f514ed{text-align:center;letter-spacing:0rem;word-spacing:0em;}.elementor-11819 .elementor-element.elementor-element-6f514ed p{margin-bottom:0.1rem;}.elementor-11819 .elementor-element.elementor-element-5a4b439{text-align:left;}.elementor-11819 .elementor-element.elementor-element-6b2248e{--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11819 .elementor-element.elementor-element-7ad1dbd > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;padding:0rem 0rem 0rem 0rem;}.elementor-11819 .elementor-element.elementor-element-7ad1dbd{--content-padding:0.1rem;}}@media(max-width:1024px) and (min-width:768px){.elementor-11819 .elementor-element.elementor-element-8887795{--content-width:500px;}}/* Start custom CSS for text-editor, class: .elementor-element-6f514ed */.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 */
/* Start custom CSS for heading, class: .elementor-element-5a4b439 *//* -------------------------------------------
   「點擊可放大圖片」標題特效 - 溫柔粉嫩版
---------------------------------------------- */
.image-zoom-title-center {
    text-align: center; /* 建議設為 center 以符合附圖居中感 */
    margin: 35px 0 20px 0;
    opacity: 0;
    transform: translateY(30px); 
    animation: autoFadeUpCenter 1s ease-out forwards;
    animation-delay: 0.3s;
    position: relative;
    display: inline-block;
}

.image-zoom-title-center span {
    font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
    /* 使用 clamp 確保手機版不會太大 */
    font-size: clamp(24px, 5vw, 32px) !important; 
    font-weight: 900;
    display: inline-block;
    padding: 0 10px 12px 10px;
    
    /* 粉嫩色系漸層：粉櫻色 (#E68DA3) 搭配 珍珠粉 (#FFF5F7) */
    background: linear-gradient(120deg, #E68DA3 30%, #FFD1DC 50%, #E68DA3 70%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    
    animation: autoTextShine 4s linear infinite !important;
}

/* 前後的橫槓顏色 (針對附圖中的藍灰色橫槓) */
.image-zoom-title-center::before,
.image-zoom-title-center::after {
    /* 這裡處理底線與裝飾，若要完全像附圖，底線改成粉色 */
}

/* 下方漸層裝飾線 - 改為粉嫩色系 */
.image-zoom-title-center::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px; /* 稍微縮細一點顯得優雅 */
    background: linear-gradient(90deg, #FFD1DC, #E68DA3, #FFD1DC) !important;
    animation: autoLineExpand 0.8s ease-out forwards !important;
    animation-delay: 1s;
}

/* -------------------------------------------
   動畫定義 (不變，僅微調)
---------------------------------------------- */
@keyframes autoFadeUpCenter {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes autoLineExpand {
    to { width: 100%; }
}

@keyframes autoTextShine {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* 手機版適配 (RWD) */
@media (max-width: 767px) {
    .image-zoom-title-center span { 
        font-size: 22px !important; 
        letter-spacing: 1px !important;
    }
}/* End custom CSS */