/* ===== 共用色票 ===== */
:root {
  /* 全站 6 色（插畫裝飾除外）：其他顏色一律用這 6 色或加透明度 */
  --c-bg: #f7e999;      /* 背景黃：整頁底色 */
  --c-cream: #fdde8e;   /* 奶油橘：卡片、頁籤底 */
  --c-orange: #f29600;  /* 主橘：框線、按鈕、大標題（不當小字） */
  --c-brown: #9a6a3a;   /* 咖啡：所有內文 */
  --c-red: #e60020;     /* 紅：只給價格／數字 */
  --c-pink: #e64290;    /* 粉紅：點綴（導覽、標籤、Modal 標題、focus） */
  --c-white: #fffaf0;   /* 中性白：相框、膠囊、Modal 底 */
}

/* ===== 載入蓋板 ===== */
/* 內嵌 SVG 圖示（取代 Bootstrap Icons 字型） */
.bi { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; }
/* 蓋過 .card-body svg（2.5rem、半透明）的通用設定，圖示維持字級大小 */
.card-body svg.bi { width: 1em; height: 1em; opacity: 1; }

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  transition: opacity .5s ease, visibility .5s;
}
.page-loader img { width: min(85vw, 420px); height: auto; }
.page-loader.is-done { opacity: 0; visibility: hidden; }
.js body.is-loading { overflow: hidden; }   /* 載入中先不能捲動 */

/* ===== Header ===== */
.site-header {
  --check-a: #f1cadd;
  --check-b: #f7e0ea;
  --cell-w: 44px;
  --cell-h: 41px;
  --scallop: calc(var(--cell-w) / 2);
  --checker: conic-gradient(var(--check-b) 25%, var(--check-a) 0 50%, var(--check-b) 0 75%, var(--check-a) 0);
  --nav-pink: var(--c-pink);
  filter: drop-shadow(0 2px 3px rgba(214, 140, 175, .35));
}

.site-header .demo-block {
  position: relative;
  background: var(--checker) left 0 bottom 0 / calc(var(--cell-w) * 2) calc(var(--cell-h) * 2);
}

/* 下緣圓弧 */
.site-header .demo-block::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: var(--scallop);
  background: var(--checker) left 0 top 0 / calc(var(--cell-w) * 2) calc(var(--cell-h) * 2);
  -webkit-mask: radial-gradient(circle at 50% 0, #000 calc(var(--scallop) - .5px), transparent var(--scallop)) left top / var(--cell-w) var(--scallop) repeat-x;
          mask: radial-gradient(circle at 50% 0, #000 calc(var(--scallop) - .5px), transparent var(--scallop)) left top / var(--cell-w) var(--scallop) repeat-x;
  pointer-events: none;
}

.site-header .navbar {
  --bs-navbar-padding-y: 0;
  min-height: 74px;
}

/* 導覽文字：粉紅＋白邊 */
.site-header .nav-btn {
  --bs-btn-color: var(--nav-pink);
  --bs-btn-hover-color: var(--nav-pink);
  --bs-btn-active-color: var(--nav-pink);
  --bs-btn-font-size: 1.25rem;
  --bs-btn-line-height: 1.2;
  letter-spacing: .05em;
  text-shadow: 0.130em 0.000em 0 #fff, 0.113em 0.065em 0 #fff, 0.065em 0.113em 0 #fff, 0.000em 0.130em 0 #fff, -0.065em 0.113em 0 #fff, -0.113em 0.065em 0 #fff, -0.130em 0.000em 0 #fff, -0.113em -0.065em 0 #fff, -0.065em -0.113em 0 #fff, -0.000em -0.130em 0 #fff, 0.065em -0.113em 0 #fff, 0.113em -0.065em 0 #fff;
}
@supports (paint-order: stroke fill) {
  .site-header .nav-btn {
    -webkit-text-stroke: .26em #fff;
    paint-order: stroke fill;
  }
}

/* 漢堡按鈕 */
.site-header .toggler-a {
  --bs-navbar-toggler-padding-x: 0;
  --bs-navbar-toggler-padding-y: 0;
  --bs-navbar-toggler-border-color: transparent;
  --bs-navbar-toggler-border-radius: 50%;
  --bs-navbar-toggler-focus-width: 0;
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
}
.site-header .toggler-a:focus-visible { outline: 2px dashed var(--nav-pink); outline-offset: 2px; }

.site-header .toggler-a-line,
.site-header .toggler-a-line::before,
.site-header .toggler-a-line::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  width: 28px;
  height: 4px;
  margin-left: -14px;
  border-radius: 4px;
  background: var(--nav-pink);
  box-shadow: 0 0 0 2.5px #fff;
  transition: transform .3s ease, top .3s ease, background-color .2s ease, box-shadow .2s ease;
}
.site-header .toggler-a-line { top: calc(50% - 2px); }
.site-header .toggler-a-line::before { top: -10px; }
.site-header .toggler-a-line::after  { top: 10px; }

/* 展開時變成 X */
.site-header .toggler-a[aria-expanded="true"] .toggler-a-line {
  background: transparent;
  box-shadow: none;
}
.site-header .toggler-a[aria-expanded="true"] .toggler-a-line::before { top: 0; transform: rotate(45deg); }
.site-header .toggler-a[aria-expanded="true"] .toggler-a-line::after  { top: 0; transform: rotate(-45deg); }

/* 平板／手機：漢堡選單版面 */
@media (max-width: 991.98px) {
  .site-header .navbar-brand {
    --bs-navbar-brand-margin-end: 0;
    --bs-navbar-brand-padding-y: 0;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: calc(100% - 68px);
    max-width: 300px;
    height: 74px;
  }
  .site-header .navbar-brand img { display: block; width: 100%; }
  .site-header .navbar > .container { align-content: flex-start; }

  .site-header .navbar-nav {
    align-items: center;
    width: 100%;
    padding: 4px 0 14px;
  }
}

/* 小手機：Logo、header 再縮小 */
@media (max-width: 575.98px) {
  .site-header .navbar-brand { max-width: 220px; height: 64px; }
  .site-header .navbar { min-height: 64px; }
  .site-header .toggler-a { width: 48px; height: 48px; }
}

/* ===== Hero ===== */
#Hero {
  position: relative;
}

/* 補在 header 圓弧後面 */
#Hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 240px;
  background: #c2e4f8 url("../images/bg.webp") center top / 100% 8000px no-repeat;
  pointer-events: none;
}

.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 1077;
  overflow: hidden;
  background: #c2e4f8 url("../images/bg.webp") center / 100% 100% no-repeat;
  --ribbon: #ec7878;
}

.hero-stage img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* 緞帶 */
.hero-ribbon-h,
.hero-ribbon-v {
  position: absolute;
  inset: 0;
  background: var(--ribbon);
  pointer-events: none;
}

.hero-ribbon-h { clip-path: polygon(0 47.43%, 80.6% 46.14%, 80.6% 49.38%, 0 51.63%); }
.hero-ribbon-v { clip-path: polygon(53.9% 0, 56% 0, 56.5% 80.59%, 54.4% 80.59%); }

/* 物件位置（% 相對主視覺） */
.hero-heart { left: 36.9%;  top: 7.99%;  width: 36.4%; }
.hero-title { left: 36.1%;  top: 17.08%; width: 38.02%; }

.hero-cake        { position: absolute; left: -0.5%;  top: 8.45%;  width: 40.6%; }
.hero-stage .hero-cake > img:first-child { position: static; width: 100%; }
.hero-stage .hero-cake .hero-cake-candles { display: none; }
.hero-flower-pink { left: 32.35%; top: 74.47%; width: 9.07%; }

.hero-dino {
  position: absolute;
  left: 2.4%; top: 8.08%; width: 18.11%;
  clip-path: inset(-60% -15% 0 -15%);
}
.hero-stage .hero-dino img { position: static; width: 100%; }
.hero-dino-in,
.hero-dino-loop { position: relative; }

.hero-dino-loop { --dino-up: -5%; transform: translateY(var(--dino-up)); }

.hero-stage .hero-dino .hero-dino-fill {
  position: absolute;
  left: 0; top: 0;
  clip-path: inset(99% 0 0 0);
  transform-origin: 50% 99%;
  transform: scaleY(32);
  pointer-events: none;
}

.hero-blue {
  left: 69%; top: 51.9%; width: 25.31%;
  clip-path: inset(0 0 3.5% 0);
}
.hero-pumpkin { left: 85.55%; top: 62.86%; width: 19.35%; }

.hero-flower-white { left: 75.05%; top: 4.64%;  width: 8.1%; }
.hero-star         { left: 85.95%; top: 4.09%;  width: 8.28%; }

.hero-sparkle-blue-1   { left: 34.05%; top: 8.64%;  width: 2.48%; }
.hero-sparkle-blue-2   { left: 61.95%; top: 66.57%; width: 2.48%; }
.hero-sparkle-yellow-1 { left: 45.3%;  top: 71.4%;  width: 2.4%; }
.hero-sparkle-yellow-2 { left: 75.8%;  top: 29.43%; width: 2.4%; }

/* 蛋糕閃光 */
.hero-cake-patch { position: absolute; background: #fff; border-radius: 30%; pointer-events: none; }
.hero-cake-patch-1 { left: 52.57%; top: 46.77%; width: 5.71%; height: 7.62%; }
.hero-cake-patch-2 { left: 6.29%; top: 70.67%; width: 5.71%; height: 7.62%; }
.hero-cake-patch-3 { left: 40.29%; top: 72.87%; width: 5.71%; height: 7.62%; }
.hero-cake-patch-4 { left: 75.86%; top: 73.90%; width: 5.71%; height: 7.48%; }

.hero-sparkle-cake-1 { left: 52.76%; top: 46.79%; width: 5.24%; }
.hero-sparkle-cake-2 { left: 6.47%; top: 70.69%; width: 5.24%; }
.hero-sparkle-cake-3 { left: 40.47%; top: 72.89%; width: 5.24%; }
.hero-sparkle-cake-4 { left: 76.05%; top: 73.92%; width: 5.18%; }

/* 進場動畫：載入完成前先隱藏 */
.js .hero-stage:not(.is-play) > * { opacity: 0; }
.js .hero-stage:not(.is-play) :is(.animate__animated, .hero-dino-loop, .hero-cake .hero-sparkle) { animation-play-state: paused; }

/* 進場時間軸 */
.hero-stage .hero-ribbon-v { animation-delay: .1s;  animation-duration: .5s; }
.hero-stage .hero-ribbon-h { animation-delay: .35s; animation-duration: .5s; }

.hero-stage .hero-cake {
  transform-origin: 30% 100%;
  animation-name: bounceInLeft, hero-cake-jolt;
  animation-duration: .7s, .5s;
  animation-delay: .6s, 1.6s;
  animation-fill-mode: both, none;
}
@keyframes hero-cake-jolt {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.006, .985); }
  65%  { transform: scale(.998, 1.008); }
  100% { transform: scale(1, 1); }
}

.hero-stage .hero-pumpkin {
  transform-origin: 45% 100%;
  animation-delay: 1.2s;
  animation-duration: .5s;
}

.hero-stage .hero-dino-in {
  transform-origin: 50% 100%;
  animation-duration: .7s;
  animation-delay: 1.6s;
}
.hero-stage .hero-dino-loop {
  transform-origin: 50% 100%;
  animation: hero-dino-peek 3.6s linear 3.2s infinite;
}

@keyframes hero-dino-peek {
  0%   { transform: translateY(var(--dino-up)) rotate(0deg) scale(1, 1); animation-timing-function: ease-in-out; }
  20%  { transform: translateY(var(--dino-up)) rotate(-2deg) scale(1, 1); animation-timing-function: ease-in-out; }
  40%  { transform: translateY(var(--dino-up)) rotate(2deg) scale(1, 1); animation-timing-function: ease-in-out; }
  50%  { transform: translateY(calc(var(--dino-up) - 3%)) rotate(0deg) scale(.96, 1.05); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  60%  { transform: translateY(125%) rotate(0deg) scale(.92, 1.1); animation-timing-function: linear; }
  78%  { transform: translateY(125%) rotate(0deg) scale(.92, 1.1); animation-timing-function: cubic-bezier(.1, .8, .3, 1); }
  86%  { transform: translateY(calc(var(--dino-up) - 9%)) rotate(-3deg) scale(.94, 1.08); animation-timing-function: ease-in-out; }
  93%  { transform: translateY(calc(var(--dino-up) + 1.5%)) rotate(2deg) scale(1.06, .94); animation-timing-function: ease-out; }
  100% { transform: translateY(var(--dino-up)) rotate(0deg) scale(1, 1); }
}

/* 恐龍蹦出時的彩紙 */
.hero-confetti {
  --cx: 10.5%;
  --cy: 40.6%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-confetti i {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--s);
  aspect-ratio: 1;
  border-radius: var(--r);
  background: var(--c);
  opacity: 0;
}
.hero-stage.is-play .hero-confetti i {
  animation: hero-confetti 1.1s cubic-bezier(.2, .7, .4, 1) 1.8s both;
}
/* 用 transform 位移，避免重排（cqw/cqh = 主視覺寬高 1%） */
.hero-confetti { container-type: size; }
@keyframes hero-confetti {
  0%   { opacity: 0; transform: translate(0, 0) scale(0) rotate(0); }
  8%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
  40%  { opacity: 1; transform: translate(calc(var(--dx) * .8cqw), calc(var(--up) * -1cqh)) scale(1) rotate(calc(var(--rot) * .5)); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1cqw), calc(var(--fall) * 1cqh)) scale(.8) rotate(var(--rot)); }
}
/* 舊瀏覽器 */
@supports not (container-type: size) {
  @keyframes hero-confetti {
    0%   { opacity: 0; transform: scale(0) rotate(0); }
    8%   { opacity: 1; transform: scale(1) rotate(0); }
    40%  { opacity: 1; left: calc(var(--cx) + var(--dx) * .8%); top: calc(var(--cy) - var(--up) * 1%);
           transform: scale(1) rotate(calc(var(--rot) * .5)); }
    100% { opacity: 0; left: calc(var(--cx) + var(--dx) * 1%); top: calc(var(--cy) + var(--fall) * 1%);
           transform: scale(.8) rotate(var(--rot)); }
  }
}

.hero-stage .hero-blue {
  transform-origin: 50% 100%;
  animation-name: bounceInRight, hero-sway;
  animation-duration: .7s, 3.6s;
  animation-delay: 2s, 2.8s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-timing-function: ease, ease-in-out;
}

@keyframes hero-sway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(-4%) rotate(-2.5deg); }
  75%      { transform: translateX(4%) rotate(2.5deg); }
}

/* 愛心、標題、花、流星 */
.hero-stage .hero-heart        { animation-delay: 1s;   animation-duration: .6s; }
.hero-stage .hero-title        { animation-delay: 1.3s; animation-duration: .7s; }
.hero-stage .hero-flower-pink  { animation-delay: .9s;  animation-duration: .5s; }
.hero-stage .hero-flower-white { animation-delay: 1s;   animation-duration: .5s; }
.hero-stage .hero-star         { animation-delay: 1.1s; animation-duration: .5s; }

/* 閃光（blue-1、yellow-2 持續閃） */
.hero-stage > .hero-sparkle {
  animation-name: zoomIn;
  animation-duration: .4s;
  animation-delay: var(--in);
  animation-fill-mode: both;
}
.hero-stage > .hero-sparkle-blue-1,
.hero-stage > .hero-sparkle-yellow-2 {
  animation-name: zoomIn, hero-twinkle;
  animation-duration: .4s, var(--tw-dur, 3.4s);
  animation-delay: var(--in), calc(var(--in) + .4s + var(--tw-off, 0s));
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-timing-function: ease, ease-in-out;
}
.hero-sparkle-blue-1   { --in: 2.3s; --tw-dur: 3.6s; --tw-off: 0s; }
.hero-sparkle-yellow-1 { --in: 2.4s; }
.hero-sparkle-yellow-2 { --in: 2.5s; --tw-dur: 4s;   --tw-off: 1s; }
.hero-sparkle-blue-2   { --in: 2.6s; }

/* 蛋糕閃光（1、3 持續閃） */
.hero-cake .hero-sparkle-cake-1,
.hero-cake .hero-sparkle-cake-3 { animation: hero-twinkle var(--tw-dur) ease-in-out var(--tw-delay) infinite; }
.hero-sparkle-cake-1 { --tw-dur: 3.4s; --tw-delay: 1.6s; }
.hero-sparkle-cake-3 { --tw-dur: 4s;   --tw-delay: 2.2s; }

@keyframes hero-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg);  opacity: 1; }
  50%      { transform: scale(.55) rotate(18deg); opacity: .4; }
}

/* 減少動態效果 */
@media (prefers-reduced-motion: reduce) {
  .hero-stage .animate__animated { animation-delay: 0s !important; }
  .hero-stage .hero-confetti i,
  .hero-stage .hero-dino-loop,
  .hero-stage .hero-cake .hero-sparkle,
  .hero-stage .hero-cake { animation: none !important; }
}

/* 手機版構圖 */
@media (max-width: 767.98px) {
  .hero-stage { aspect-ratio: 1; }
  .hero-stage, #Hero::before { background-image: url("../images/bgs.webp"); }

  .hero-ribbon-h { clip-path: polygon(0 33.86%, 34.29% 34.21%, 100% 33.57%, 100% 37.5%, 34.29% 38.07%, 0 37.79%); }
  .hero-ribbon-v { clip-path: polygon(65.71% 0, 69.79% 0, 70.71% 86.71%, 66.64% 86.71%); }

  .hero-heart { left: 40.43%; top: 5.71%;  width: 54.79%; }
  .hero-title { left: 39.29%; top: 13.14%; width: 56.57%; }

  .hero-cake         { left: -1.71%; top: 22%;    width: 68%; }
  .hero-dino         { left: 2.14%;  top: 19.57%; width: 32.4%; }
  .hero-flower-pink  { left: 33.43%; top: 82%;    width: 13.71%; }
  .hero-flower-white { left: -3%;    top: 9.43%;  width: 14.1%; }

  .hero-stage .hero-cake > img:first-child { clip-path: inset(44.4% 0 0 0); }
  .hero-stage .hero-cake .hero-cake-candles {
    display: block;
    left: 4.83%; top: -0.65%; width: 101.47%;
    clip-path: polygon(0 0, 69.43% 0, 69.43% 44.5%, 0 44.5%);
  }

  .hero-blue    { left: 59.57%; top: 62%;    width: 38.57%; }
  .hero-pumpkin { left: 82.43%; top: 72.29%; width: 29.64%; }

  .hero-sparkle-blue-1   { left: 35.43%; top: 10.29%; width: 5.08%; }
  .hero-sparkle-yellow-2 { left: 88.71%; top: 4%;     width: 4.71%; }
  .hero-stage .hero-star,
  .hero-stage .hero-sparkle-blue-2,
  .hero-stage .hero-sparkle-yellow-1 { display: none; }

  .hero-confetti { --cx: 18.3%; --cy: 51%; }
  .hero-confetti i { width: calc(var(--s) * 1.8); }
}

/* ===== 區塊共用 ===== */

/* 整頁圓點底紋 */
body {
  --dot-gap: clamp(140px, 11vw, 220px);
  --dot-r: calc(var(--dot-gap) * .1);
  --dot-c: rgba(255, 255, 255, .3);
  --dot: radial-gradient(circle, var(--dot-c) var(--dot-r), transparent calc(var(--dot-r) + .5px));
  background-color: var(--c-bg);
  background-image: var(--dot), var(--dot);   /* 交錯排列 */
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: 0 0, calc(var(--dot-gap) / 2) calc(var(--dot-gap) / 2);
  letter-spacing: 0.8px
}

.text-orange{color: var(--c-orange)}
.text-red{color: var(--c-red)}
.text-bold { font-weight: 700; }  
.text-primary {--bs-text-opacity: 1;color: var(--c-brown) !important;}
.text-gift{color: var(--c-brown)}  
.text-small{font-size: .8rem} 


/* 限量（First、Second 共用）：文字跟著內文色，數字紅色 */
.limit { color: inherit; white-space: nowrap; }
.limit b { font-size: 1.2em; font-weight: 700; color: var(--c-red); }

/* 區塊不設底色 */
#First, #Second, #Third, #Fourth {
  position: relative;
  overflow: hidden;
  padding-bottom: 1rem;
}
/* First 頂端漸層淡入 */
#First::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--dot-gap) * 1.2);
  background: linear-gradient(var(--c-bg), rgba(247, 233, 153, 0));
  pointer-events: none;
}
.title { text-align: center; }
.title img { display: block; margin-inline: auto; }
/* 標題閃光：每 6 秒一道斜光從左掃到右（約 1.2 秒），其餘時間靜止；用圖片當遮罩，透明處不發亮 */
.title-shine { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; }
.title-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%) no-repeat;
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-mask: var(--mask) center / 100% 100% no-repeat;
          mask: var(--mask) center / 100% 100% no-repeat;
}
/* 區塊進場（.is-in）後才閃：等標題淡入（排隊 --q＋淡入 .7 秒）完成再開始 */
.is-in .title-shine.is-shining::after { animation: title-shine 6s ease-in-out calc(var(--q, 0s) + .9s) infinite; }
@keyframes title-shine {
  0%        { background-position: 100% 0; }
  20%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .title-shine.is-shining::after { animation: none; }
}

/* 卡片：First/Third 4:3，Second/Fourth 1:1 */
:is(#First, #Second, #Third, #Fourth) .card {
  --bs-card-border-radius: 1.5rem;
  background-color: var(--c-cream);
  border-color: var(--c-orange);
  aspect-ratio: 4 / 3;
  box-shadow: 0 6px 0 rgba(242, 150, 0, .25);
}
:is(#Second, #Fourth) .card { aspect-ratio: 1; }

.card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--c-brown);
  text-align: center;
}
.card-body svg { width: 2.5rem; height: 2.5rem; opacity: .55; }

.card-body img {   /* 尺寸交給 .img-fluid，這裡只管圓角 */
  border-radius: calc(var(--bs-card-border-radius) - .375rem);
}

/* First：卡片滑過浮起；取消 4:3，高度交給 .h-100（同一排等高） */
#First .card {
  aspect-ratio: auto;
  transition: transform .2s ease, box-shadow .2s ease;
}
#First .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 rgba(242, 150, 0, .25);
}

#First .card-body {
  justify-content: flex-start;
  padding: 1.25rem 1.5rem 1.5rem;
}
#First .card-body > :is(h3, h4, h6, p) { margin: 0; }
/* First：卡片底部補充資訊（效期／限量），推到卡片底部讓同排對齊 */
#First .first-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--c-brown);
}
#First .first-foot > p { margin: 0; }

/* First：超值加碼送門檻卡（白底＋禮券撕線） */
#First .card-bonus { background-color: var(--c-white); }
#First .card-bonus .first-foot {
  width: 100%;
  padding-top: .75rem;
  border-top: 2px dashed rgba(242, 150, 0, .45);
}

/* First：超值加碼送（一張卡片包三個門檻） */
#First .bonus-card { position: relative; overflow: visible; }
#First .bonus-card .card-body { padding: 1.75rem 2rem 1.5rem; }
#First .bonus-card .card-body > h3 { font-size: 2rem; }
#First .bonus-lead { font-size: 1.15rem; line-height: 1.6; }
/* 三個門檻：電腦並排，中間虛線分隔 */
#First .bonus-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin: .75rem 0 .25rem;
}
#First .bonus-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.5rem;
}
#First .bonus-tier > p { margin: 0; }
#First .bonus-tier-name {
  padding: .1em 1em;
  border: 2px solid var(--c-orange);
  border-radius: 999px;
  color: var(--c-orange);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .1em;
}
/* 門檻膠囊＋右側限量 */
#First .bonus-tier-head { display: flex; align-items: center; justify-content: center; gap: .6rem; }
#First .bonus-tier-head > p { margin: 0; }
#First .bonus-tier .limit { font-size: .95rem; }
#First .bonus-tier + .bonus-tier { border-left: 2px dashed rgba(242, 150, 0, .45); }
#First .bonus-card .first-foot { align-items: center; }
@media (max-width: 575.98px) { #First .bonus-card .first-foot { align-items: flex-start; text-align: left; } }

/* 平板以下：三個門檻直排，虛線改在上方 */
@media (max-width: 991.98px) {
  #First .bonus-tiers { grid-template-columns: 1fr; max-width: 440px; }
  #First .bonus-tier { padding: 1.5rem 0 1.25rem; }
  #First .bonus-tier:first-child { padding-top: .5rem; }
  #First .bonus-tier + .bonus-tier { border-left: 0; border-top: 2px dashed rgba(242, 150, 0, .45); }
}
@media (max-width: 575.98px) {
  #First .bonus-card .card-body { padding: 1.5rem 1rem 1.25rem; }
  #First .bonus-card .card-body > h3 { font-size: 1.6rem; }
  #First .bonus-lead { font-size: 1rem; }
}

/* First：類別標題兩側橫線 */
#First .card-body > h3 {
  display: flex;
  align-items: center;
  gap: .75em;
  width: 100%;
  white-space: nowrap;   /* 標題不換行，空間不夠時先縮兩側橫線 */
}
#First .card-body > h3::before,
#First .card-body > h3::after {
  content: "";
  flex: 1 1 0;
  min-width: .5em;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: .55;
}
/* 卡片較窄（電腦 1200~1365）：標題字略縮、間距收窄，讓「化妝品品牌日」維持一行 */
@media (min-width: 1200px) and (max-width: 1365.98px) {
  #First .card-body > h3 { gap: .5em; font-size: 1.6rem; }
}

/* 背景裝飾：--l/--r 左右、--t/--b 上下、--w 寬、--rot 角度
   --size：整組等比倍率（以內容區邊角為基準，排列不變） */
.deco-stage {
  --edge: calc((100% - 100vw) / 2);
  --size: 1;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
}
.deco-stage > * { position: relative; }
.bg-deco {
  --bg-scale: 1;   /* 單一裝飾大小 */
  --k: calc(var(--bg-scale) * var(--boost, 1));   /* --boost：整區額外放大（以中心放大） */
  --shift: calc(var(--w) * (1 - var(--k)) / 2);
  --px: var(--size);   /* 水平位置倍率 */
  --py: var(--size);   /* 垂直位置倍率 */
  position: absolute;
  z-index: -1;
  left: calc((var(--l) + var(--shift)) * var(--px));
  right: calc((var(--r) + var(--shift)) * var(--px));
  top: calc((var(--t) + var(--shift)) * var(--py));
  bottom: calc((var(--b) + var(--shift)) * var(--py));
  width: calc(var(--w) * var(--k) * var(--size));
  height: auto;
  rotate: var(--rot, 0deg);
  pointer-events: none;
  user-select: none;
}
/* 貼螢幕邊的物件：位置不縮放，放大時往螢幕外長 */
.bg-f4, .bg-t4, .bg-t6 { --shift: 0cqw; --px: 1; --py: 1; --grow: max(0cqw, var(--w) * var(--k) * (var(--size) - 1));   /* 只在放大時往外長 */ }

/* First */
.bg-f1 { --bg-scale: .75; --l: -16.1%; --t: -5.4cqw; --w: 14.4cqw; }
.bg-f2 { --bg-scale: .75; --l: -21%;   --t: 10.7cqw; --w: 17.5cqw; }
.bg-f3 { --bg-scale: .85; --r: -17.7%; --b: 26cqw;   --w: 14cqw; }   /* 櫻桃：往上移 */
/* --hide：伸出螢幕外比例 */
.bg-f4 { --bg-scale: .8; --hide: .05; --w: 20cqw; --b: -1.2cqw;
  --r: calc(var(--edge) - var(--w) * var(--k) * var(--hide) - var(--grow)); }

/* Second */
.bg-s1 { --bg-scale: .75; --r: -20%;   --t: -8.4cqw; --w: 13.8cqw; }
.bg-s2 { --r: -12.5%; --t: 1.2cqw;  --w: 7.2cqw; }

/* Third */
.bg-t1 { --bg-scale: .75; --l: -22.7%; --t: 2.6cqw;  --w: 17.5cqw; }
.bg-t2 { --bg-scale: .75; --l: -13.7%; --t: 17cqw;   --w: 15.1cqw; }
.bg-t3 { --bg-scale: .75; --l: -20.8%; --t: 30.5cqw; --w: 12.6cqw; }
.bg-t4 { --bg-scale: .85; --l: calc(var(--edge) - var(--grow)); --t: 62.6%; --w: 29.1cqw; }
.bg-t5 { --bg-scale: .75; --l: -17.1%; --t: calc(62.6% + 28.7cqw * var(--size)); --w: 12.3cqw; --py: 1; }   /* 跟著大愛心 */
.bg-t6 { --bg-scale: .65; --r: calc(var(--edge) + 2.5cqw - var(--grow)); --t: 26.9%; --w: 30.3cqw; }

/* 區塊內容先淡入，--q 由 script 排隊計算 */
.js :is(#First, #Second, #Third, #Fourth):not(.is-in) :is(.title, h4:not(.card h4), .first-grid-wrap, .promo-carousel, .promo-carousel ~ *) { opacity: 0; }
:is(#First, #Second, #Third, #Fourth).is-in :is(.title, h4:not(.card h4), .first-grid-wrap, .promo-carousel, .promo-carousel ~ *) {
  animation: bg-fade-in-up .7s ease var(--q, 0s) both;
}
:is(#First, #Second, #Third, #Fourth).is-in h4:not(.card h4) { animation-delay: calc(var(--q, 0s) + .1s); }
:is(#First, #Second, #Third, #Fourth).is-in :is(.first-grid-wrap, .promo-carousel, .promo-carousel ~ *) { animation-delay: calc(var(--q, 0s) + .2s); }
@keyframes bg-fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* 背景裝飾動畫：進場 + 持續小動作 */
.js .bg-deco:not(.is-in) { opacity: 0; }
.bg-deco.is-in {
  animation: bg-fade-in .8s ease calc(var(--q, 0s) + var(--in, 0s)) both, var(--loop, none);
}
/* 花：飄 */
.bg-f1, .bg-f2, .bg-t1, .bg-t2 { --loop: bg-float 4s ease-in-out calc(var(--q, 0s) + var(--in, 0s) + .8s) infinite; }
/* 曲線：擺動 */
.bg-s1, .bg-t3, .bg-t5 { --loop: bg-swing 3s ease-in-out calc(var(--q, 0s) + var(--in, 0s) + .8s) infinite; }
/* 櫻桃：晃 */
.bg-f3 { transform-origin: 50% 0; --loop: bg-pendulum 3.4s ease-in-out calc(var(--q, 0s) + var(--in, 0s) + .8s) infinite; }
/* 愛心：跳動 */
.bg-s2, .bg-t4 { --loop: bg-beat 3s ease-in-out calc(var(--q, 0s) + var(--in, 0s) + .8s) infinite; }
/* 探頭恐龍：滑進 */
.bg-f4.is-in { animation: bg-slide-in-right 1s cubic-bezier(.2, .8, .3, 1.1) calc(var(--q, 0s) + var(--in, 0s)) both; }
/* 疊疊樂：搖晃 */
.bg-t6 { transform-origin: 50% 100%; --loop: bg-wobble 3.2s ease-in-out calc(var(--q, 0s) + var(--in, 0s) + .8s) infinite; }

/* 出場順序 */
.bg-f1 { --in: 0s; }   .bg-f2 { --in: .15s; }  .bg-f3 { --in: .2s; }   .bg-f4 { --in: .35s; }
.bg-s1 { --in: 0s; }   .bg-s2 { --in: .15s; }
.bg-t1 { --in: 0s; }   .bg-t2 { --in: .15s; }  .bg-t3 { --in: .3s; }
.bg-t4 { --in: 0s; }   .bg-t5 { --in: .2s; }   .bg-t6 { --in: .1s; }

@keyframes bg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bg-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6%); }
}
@keyframes bg-swing {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(-4%) rotate(-6deg); }
  75%      { transform: translateX(4%) rotate(6deg); }
}
@keyframes bg-pendulum {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
@keyframes bg-beat {
  0%, 60%, 100% { transform: scale(1); }
  70%           { transform: scale(1.08); }
  80%           { transform: scale(.98); }
  90%           { transform: scale(1.04); }
}
@keyframes bg-slide-in-right {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bg-wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2.5deg); }
  75%      { transform: rotate(2.5deg); }
}

/* 輪播物件：左右滑進 */
.js .promo-obj:not(.is-in) { opacity: 0; }
.promo-obj.is-in { animation: var(--slide) 1s cubic-bezier(.2, .8, .3, 1.1) calc(var(--q, 0s) + var(--in, 0s)) both; }
.obj-fourth-r                     { --slide: bg-slide-in-right; --in: 0s; }
.obj-second-l-bg, .obj-fourth-l-bg { --slide: bg-slide-in-left;  --in: 0s; }
.obj-second-l, .obj-fourth-l       { --slide: bg-slide-in-left;  --in: .25s; }
@keyframes bg-slide-in-left {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 減少動態效果 */
@media (prefers-reduced-motion: reduce) {
  .js .bg-deco:not(.is-in), .js .promo-obj:not(.is-in) { opacity: 1; }
  .js :is(#First, #Second, #Third, #Fourth):not(.is-in) :is(.title, h4:not(.card h4), .first-grid-wrap, .promo-carousel, .promo-carousel ~ *) { opacity: 1; }
  :is(#First, #Second, #Third, #Fourth) :is(.title, h4:not(.card h4), .first-grid-wrap, .promo-carousel, .promo-carousel ~ *) { animation: none !important; }
  .bg-deco.is-in, .promo-obj.is-in { animation: none !important; }
}

/* 電腦：內容加寬（兩側固定留 150px 給裝飾，最寬 1320px），First 下方留白給探頭恐龍
   裝飾跟著兩側留白等比縮小，位置比例不變；平板見下方全寬設定 */
@media (min-width: 1200px) {
  .container:has(> .deco-stage) { max-width: clamp(68.75vw, 100vw - 300px, 1320px); }
  #First { padding-bottom: 6vw; }
}
@media (min-width: 1200px) and (max-width: 1365.98px) { .deco-stage { --size: .7; } }
@media (min-width: 1366px) and (max-width: 1535.98px) { .deco-stage { --size: .62; } }
@media (min-width: 1536px) and (max-width: 1679.98px) { .deco-stage { --size: .58; } }
@media (min-width: 1680px) and (max-width: 1919.98px) { .deco-stage { --size: .7; } }
/* 電腦：First、Third 裝飾再大一點（可稍微壓到卡片邊） */
@media (min-width: 1200px) and (max-width: 1919.98px) {
  :is(#First, #Third) .bg-deco { --boost: 1.15; }
  #Third :is(.bg-t1, .bg-t4) { --boost: 1.07; }   /* 靠螢幕左緣：少放一點，避免被切掉 */
  /* 疊疊樂貼右緣：放大量一半往螢幕外，避免壓到卡片太多 */
  #Third .bg-t6 { --r: calc(var(--edge) + 2.5cqw - var(--grow) - var(--w) * var(--bg-scale) * (var(--boost) - 1) / 2); }
}
/* 平板、手機：隱藏背景裝飾 */
@media (max-width: 1199.98px) {
  .bg-deco { display: none; }
}
/* 平板：跟手機一樣全寬 */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .container:has(> .deco-stage) { max-width: 100%; }
}

/* Second、Fourth：輪播 */
:is(#Second,#Fourth) .card { user-select: none; }
:is(#Second,#Fourth) .card-body img { pointer-events: none; }

.promo-swiper { padding: 1.5rem 0; }

/* Second：贈品卡 */
:is(#Second, #Fourth) .swiper-slide { height: auto; }
:is(#Second, #Fourth) .card { aspect-ratio: auto; min-height: calc(var(--card-h) * 1.1); }   /* 等高：HTML 加 .h-100 */
:is(#Second, #Fourth) .card-body {
  justify-content: flex-start;
  gap: 1rem;
  padding: 1rem 1rem 1.25rem;
}
/* 圖片準備中：維持置中 */
:is(#Second, #Fourth) .card-body:not(:has(.gift-info)) { justify-content: center; }
:is(#Second, #Fourth) .gift-photo {
  position: relative;
  width: 100%;
  padding: .25rem;
  background: var(--c-white);
  border-radius: 1rem;
}
:is(#Second, #Fourth) .gift-photo img {
  display: block;
  border-radius: .8rem;
}
:is(#Second, #Fourth) .gift-info {
  flex: 1 1 auto;            /* 佔滿圖片與標籤間的空間 */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* 文字區置頂對齊（同排卡片文字起點一致） */
  align-items: center;
  gap: .35rem;
  text-align: center;
}
:is(#Second, #Fourth) .gift-info > * { margin: 0; }
/* Second：條件文字咖啡色 h3，品名 .text-gift、數字 .text-red */
#Second .gift-info h3 {
  font-size: min(1.75rem, var(--card-h) * .075);   /* 跟著卡片寬縮放，手機不擠成三行 */
  line-height: 1.4;
  color: var(--c-brown);
}
:is(#Second, #Fourth) .gift-info > :is(h3, h4) { text-wrap: pretty; }   /* 避免最後一行只剩一兩個字 */
/* Fourth：h3.text-orange 店名 → h4.text-primary 優惠 → p.text-primary 說明／價格 → p.text-small 備註；數字 .text-red */
#Fourth .gift-info > :is(h3, h4) { line-height: 1.4; }
#Fourth .gift-info > h3 { font-size: min(1.5rem, var(--card-h) * .072); }   /* 店名：最大 1.5rem，卡片窄時跟著縮，樓層＋店名維持一行 */
#Fourth .gift-info > h4 { font-size: 1.25rem; }   /* 優惠：比店名小一級 */
/* 店名較長時：兩側橫線縮短，樓層和店名盡量同一行 */
#Fourth .gift-info > h3.text-orange:first-child { gap: .4em; }   /* 加 .text-orange 提高權重，才蓋得過下方 :is(#Second, #Fourth) 的共用橫線設定 */
#Fourth .gift-info > h3.text-orange:first-child::before,
#Fourth .gift-info > h3.text-orange:first-child::after { min-width: .6em; }
#Fourth .gift-store { flex: 0 1 auto; max-width: 100%; }   /* 放不下時樓層、店名自動換行，不超出卡片 */
#Fourth .gift-store > b { white-space: normal; }
/* 電腦卡片較窄（1200~1439）：店名再縮一點，最長的店名也能和樓層排同一行 */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  #Fourth .gift-info > h3 { font-size: min(1.5rem, var(--card-h) * .064); }
}
@media (max-width: 767.98px) {
  #Fourth .gift-info > h3 { font-size: min(1.5rem, var(--card-h) * .066); }   /* 手機店名小一點，長店名維持一行 */
  #Fourth .gift-info > h3.text-orange:first-child::before,
  #Fourth .gift-info > h3.text-orange:first-child::after { min-width: .4em; }
}
#Fourth .gift-info .text-red { font-weight: 700; }   /* 價格數字 */
/* 日期兩側橫線 */
:is(#Second, #Fourth) .gift-info > :is(h3, h5):first-child {
  display: flex;
  align-items: center;
  gap: .75em;
  width: 100%;
  margin-bottom: .2rem;
}
:is(#Second, #Fourth) .gift-info > :is(h3, h5):first-child::before,
:is(#Second, #Fourth) .gift-info > :is(h3, h5):first-child::after {
  content: "";
  flex: 1 1 0;
  min-width: 1em;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: .45;
}
:is(#Second, #Fourth) .gift-tag {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .15rem .6rem;
  margin: 0;                 /* 位於 card-body 底部，同排對齊 */
  padding: .3rem .9rem;
  font-size: .9rem;
  color: var(--c-brown);
  background: var(--c-white);
  border: 2px solid var(--c-orange);
  border-radius: 999px;
}
:is(#Second, #Fourth) .gift-loc { display: inline-flex; align-items: center; gap: .15rem; }
/* Second：照片左上主題標籤 */
#Second .gift-theme {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1;
  padding: .2rem .75rem;
  font-size: .85rem;
  color: #fff;
  background: var(--c-pink);
  border: 2px solid var(--c-white);
  border-radius: 999px;
}
/* Second：標籤內各段（限量｜地點）用直線分隔 */
#Second .gift-tag > * + * { padding-left: .6rem; border-left: 1px solid rgba(242, 150, 0, .6); }
@media (max-width: 575.98px) {   /* 手機：字和間距縮一級，三段排在同一行 */
  #Second .gift-tag { gap: .15rem .4rem; padding: .3rem .7rem; font-size: .8rem; }
  #Second .gift-tag > * + * { padding-left: .4rem; }
}
/* 規格框：覆蓋在圖片上，淡入顯示 */
:is(#Second, #Fourth) .gift-spec-pop {
  position: absolute;
  inset: .25rem;               /* 對齊相框內的照片 */
  z-index: 2;                  /* 蓋過主題標籤、i */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: 1rem;
  color: var(--c-brown);
  background: rgba(255, 250, 240, .95);
  border-radius: .8rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
:is(#Second, #Fourth) .gift-spec-pop.is-open { opacity: 1; visibility: visible; }
:is(#Second, #Fourth) .gift-spec-pop > p { margin: 0; }
:is(#Second, #Fourth) .gift-spec-title {
  padding-bottom: .3rem;
  font-size: 1rem;
  color: var(--c-brown);
  border-bottom: 2px dashed rgba(242, 150, 0, .5);
}
:is(#Second, #Fourth) .gift-spec-text {
  font-size: .9rem;
  line-height: 1.8;
  text-align: left;
}
:is(#Second, #Fourth) .gift-spec-text small { font-size: .75rem; opacity: .8; }
:is(#Second, #Fourth) .gift-spec-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: #fff;
  background: var(--c-orange);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
:is(#Second, #Fourth) .gift-spec-close svg { width: .8rem; height: .8rem; opacity: 1; }
:is(#Second, #Fourth) .gift-spec-close:focus-visible { outline: 2px solid var(--c-brown); outline-offset: 2px; }

:is(#Second, #Fourth) .gift-loc .bi { color: var(--c-orange); }

/* Fourth：慶生饗宴（沿用 Second 卡片樣式） */
#Fourth .gift-floor {   /* 樓層：店名前的小標 */
  flex: none;
  padding: .05rem .45rem;
  font-size: .72em;
  line-height: 1.5;
  color: #fff;
  background: var(--c-orange);
  border-radius: 999px;
}
/* Fourth：壽星／加碼標籤，左邊粉紅小標 */
#Fourth .gift-tag { gap: .5rem; padding: 0 .8rem 0 0; border-color: var(--c-pink); overflow: hidden; }
#Fourth .gift-key { padding: .2rem .6rem; color: #fff; background: var(--c-pink); }
/* 照片右下「i」按鈕：Second 規格、Fourth 套餐內容，點開蓋在照片上 */
:is(#Second, #Fourth) .gift-menu-btn {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: #fff;
  background: var(--c-orange);
  border: 2px solid var(--c-white);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s;
}
:is(#Second, #Fourth) .gift-menu-btn::after {   /* 加大點擊範圍 */
  content: "";
  position: absolute;
  inset: -.4rem;
}
:is(#Second, #Fourth) .gift-menu-btn:hover,
:is(#Second, #Fourth) .gift-menu-btn[aria-expanded="true"] { background: var(--c-brown); }
:is(#Second, #Fourth) .gift-menu-btn:focus-visible { outline: 2px solid var(--c-brown); outline-offset: 2px; }
/* 菜色較多：框內可捲動，置中但不切到上方 */
#Fourth .gift-spec-pop {
  justify-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#Fourth .gift-spec-text { font-size: .85rem; line-height: 1.75; text-align: center; }
#Fourth .gift-spec-text small { display: inline-block; line-height: 1.5; }
/* Fourth：餐廳名加粗 */
/* 新店標示：店名旁小標（空間不夠時小標自動換到下一行） */
/* 有小標的店名：縮小橫線與間距，讓店名＋小標盡量排在同一行 */
#Fourth .gift-info > h3.text-orange:first-child:has(.gift-new) { gap: .5em; }
#Fourth .gift-info > h3.text-orange:first-child:has(.gift-new)::before,
#Fourth .gift-info > h3.text-orange:first-child:has(.gift-new)::after { min-width: .5em; }
#Fourth .gift-store {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .25rem .4rem;
  min-width: 0;
  white-space: nowrap;
}
#Fourth .gift-new {
  padding: .1rem .45rem;
  font-size: .65rem;
  line-height: 1.5;
  letter-spacing: .03em;
  color: #fff;
  background: var(--c-pink);
  border-radius: 999px;
}
/* 較空的卡片：右下角禮物盒，正放堆疊（放在文字區最後，只佔用剩餘空白） */
#Fourth .gift-deco {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: flex-end;
  width: 46%;
  margin-top: auto;
  pointer-events: none;
}
/* 每一疊（單一禮物或上下疊的一欄）寬度相同，左右稍微重疊 */
#Fourth .gift-deco > * {
  flex: 0 0 34%;
  width: 34%;
  height: auto;
  border-radius: 0;
}
#Fourth .gift-deco > * + * { margin-left: -3%; }
/* 上下疊：上面的禮物壓住下面禮物的蝴蝶結 */
#Fourth .gift-col {
  display: flex;
  flex-direction: column;
}
#Fourth .gift-col img {
  width: 100%;
  height: auto;
  border-radius: 0;
}
#Fourth .gift-col img:not(:last-child) {
  position: relative;
  z-index: 1;
  margin-bottom: -16%;
}
/* 小組：兩個禮物（給空白較少的卡片） */
#Fourth .gift-deco.is-mini { width: 26%; }
#Fourth .gift-deco.is-mini > * { flex-basis: 50%; width: 50%; }
/* 較空的卡片：文字下方空白處放 2～3 朵小花，固定組成「花簇」
   位置：資訊區右下角（左下留給恐龍），貼齊底部
   大小：以卡片寬度換算，每張卡片花簇大小、間距一致
   順序：第 1 朵大（右下）、第 2 朵中（左側）、第 3 朵小（上方） */
#Fourth .gift-flowers {
  position: relative;
  flex: none;
  align-self: flex-end;
  width: 38%;
  aspect-ratio: 1.55;
  margin-top: auto;            /* 推到資訊區底部 */
  margin-right: 2%;
  pointer-events: none;
}
#Fourth .gift-flowers img {
  position: absolute;
  height: auto;
  border-radius: 0;
}
#Fourth .gift-flowers img:nth-child(1) { right: 0;   bottom: 0;   width: 44%; transform: rotate(10deg); }
#Fourth .gift-flowers img:nth-child(2) { left: 4%;   bottom: 12%; width: 32%; transform: rotate(-14deg); }
#Fourth .gift-flowers img:nth-child(3) { left: 34%;  top: 0;      width: 22%; transform: rotate(20deg); }
/* 只有 2 朵時：兩朵靠近一點，不留空洞 */
#Fourth .gift-flowers:not(:has(img:nth-child(3))) { width: 30%; }
#Fourth .gift-flowers:not(:has(img:nth-child(3))) img:nth-child(1) { width: 56%; }
#Fourth .gift-flowers:not(:has(img:nth-child(3))) img:nth-child(2) { left: 0; bottom: 30%; width: 40%; }
/* 備註（p.gift-terms.text-small）：卡片底部，虛線分隔 */
#Fourth .gift-terms {
  align-self: stretch;
  margin: 0;
  padding-top: .5rem;
  line-height: 1.6;
  color: var(--c-brown);
  border-top: 2px dashed rgba(242, 150, 0, .45);
}

/* 輪播物件以卡片高度（--u）換算 */
.promo-carousel {
  position: relative;
  container-type: inline-size;
  --card-ratio: 1;   /* = 卡片高寬比 */
  --card-h: calc((100cqw - 48px) / 3 * var(--card-ratio));
  --deco-scale: 1;    /* 整體大小 */
  --u: calc(var(--card-h) * var(--deco-scale));
  --edge: calc((100% - 100vw) / 2);
}

/* Swiper 啟動前先排好欄數 */
.promo-swiper:not(.swiper-initialized) .swiper-wrapper { justify-content: center; }   /* 手機：先置中，跟 Swiper 啟動後一致 */
.promo-swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 1.2px) / 1.1); flex-shrink: 0; }
@media (min-width: 768px) and (max-width: 1199.98px) {   /* 平板：一次 2 張，置中 */
  .promo-swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 24px) / 2); margin-right: 24px; }
}
@media (min-width: 1200px) {
  .promo-swiper:not(.swiper-initialized) .swiper-wrapper { justify-content: flex-start; }
  .promo-swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 48px) / 3); margin-right: 24px; }
}

.promo-obj {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* Second 巫師恐龍：縮小並往外移（可稍微伸出螢幕），貼近卡片但不擋底部標籤 */
.obj-second-l {
  width: calc(var(--u) * .62);
  left: max(calc(var(--u) * -.48), calc(var(--edge) - var(--u) * .06));
  bottom: calc(1.5rem - var(--u) * .1);
}
/* Second 禮物（背景） */
.obj-second-l-bg {
  z-index: 1;
  width: calc(var(--u) * .88);
  left: var(--edge);
  bottom: 1.5rem;
}
/* Fourth 恐龍、禮物（背景） */
.obj-fourth-l-bg {
  z-index: 1;
  width: calc(var(--u) * .55);
  left: var(--edge);
  bottom: calc(1.5rem - var(--u) * .03);
}
.obj-fourth-l {
  width: calc(var(--u) * .65);
  left: max(calc(var(--u) * -.45), var(--edge));
  bottom: calc(1.5rem - var(--u) * .13);
}
.obj-fourth-r {   /* 與左側恐龍同高、底部對齊（依圖片實際可見範圍換算） */
  z-index: 1;
  /* 往內移：1440px 以下貼齊畫面邊緣，越寬越往內，最多 48px（兩側空間夠才內縮，小筆電不擋卡片） */
  --in-x: clamp(0px, (100vw - 1440px) * .09, 48px);
  width: calc(var(--u) * .68);
  right: calc(var(--edge) + var(--in-x));
  bottom: calc(1.5rem - var(--u) * .095);
}

/* 圓點 */
.promo-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 0 0 1rem;
  --swiper-pagination-bullet-size: 20px;
  --swiper-pagination-bullet-horizontal-gap: 0;
}
.promo-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  background: var(--c-cream);
  border: 4px solid var(--c-orange);
  opacity: 1;
  transition: background-color .2s ease;
}
.promo-pagination .swiper-pagination-bullet-active { background: var(--c-orange); }
.promo-pagination .swiper-pagination-bullet:focus-visible { outline: 2px dashed var(--c-pink); outline-offset: 3px; }

/* 平板、手機：跟手機一樣目前這張置中、左右露出前後張，只留恐龍（站在左側露出的前一張上） */
@media (max-width: 1199.98px) {
  /* 輪播左右延伸到螢幕邊，露出的卡片由螢幕邊緣切掉；padding 抵銷，卡片大小不變 */
  .promo-swiper {
    margin-inline: calc((100% - 100vw) / 2);
    padding-inline: calc((100vw - 100%) / 2);
  }
  /* 左右露出的卡片蓋一層背景色，退到後面（不擋點擊） */
  .promo-swiper .card::after {
    content: "";
    position: absolute;
    inset: calc(var(--bs-card-border-width) * -1);
    z-index: 3;
    border-radius: var(--bs-card-border-radius);
    background: rgba(247, 233, 153, .55);   /* = --c-bg */
    pointer-events: none;
    transition: opacity .3s;
  }
  .promo-swiper .swiper-slide-active .card::after { opacity: 0; }
  .obj-second-l-bg, .obj-fourth-l-bg, .obj-fourth-r { display: none; }
  /* --w 大小、--out 伸出螢幕外比例 */
  .obj-second-l    { --w: .9;  --out: .17; width: calc(var(--u) * var(--w)); left: calc(var(--edge) - var(--u) * var(--w) * var(--out)); bottom: calc(1.5rem - var(--u) * .08); }
  .obj-fourth-l    { --w: .75; --out: .12; width: calc(var(--u) * var(--w)); left: calc(var(--edge) - var(--u) * var(--w) * var(--out)); }
}

/* 平板：一次 2 張（中間一張完整，左右各露出半張）；恐龍大小維持不變 */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .promo-carousel {
    --card-h: calc((100cqw - 24px) / 2 * var(--card-ratio));
    --deco-scale: .53;
  }
  /* 恐龍往內移，整隻站在左側淡化的卡片上（不伸出螢幕） */
  :is(.obj-second-l, .obj-fourth-l) { left: calc(var(--edge) + 1.5rem); }
}

/* 手機 */
@media (max-width: 767.98px) {
  .promo-carousel {
    --card-h: calc((100cqw - 1.2px) / 1.1 * var(--card-ratio));   /* 一次 1.1 張 */
    --deco-scale: .42;   /* 恐龍比原本(.47)小一點 */
    --u: calc(100cqw * var(--card-ratio) * var(--deco-scale));   /* 恐龍不跟著卡片縮 */
  }
  .obj-second-l { --out: .22; }   /* 伸出螢幕外比例：越大越往外 */
  .obj-fourth-l { --out: .18; }
  .promo-pagination { --swiper-pagination-bullet-size: 16px; gap: .4rem; }
  .promo-pagination .swiper-pagination-bullet { border-width: 3px; }
}

/* ===== Third ===== */
/* 銀行卡片（js/banks-render.js 產生）：白底配合 LOGO；內容長短不一，取消 4:3，同排等高靠 .h-100 */
#Third .card { aspect-ratio: auto; background-color: #fff; }
#Third .card-body {
  align-items: stretch;
  justify-content: flex-start;
  gap: .75rem;
  padding: 1.25rem 1.25rem 1.5rem;
  text-align: left;
  color: var(--c-brown);
}
/* LOGO 區（含兌換地點）：固定高度，同排對齊 */
#Third .bank-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 4.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px dashed rgba(242, 150, 0, .4);
}
#Third .bank-logo { display: flex; align-items: center; min-width: 0; height: 3.5rem; }
#Third .bank-logo img { width: auto; height: auto; max-height: 100%; border-radius: 0; }   /* LOGO 不要圓角；width/height:auto 讓 HTML 的長寬只當比例參考，不會被拉伸 */
/* 有兌換地點：LOGO 限寬，和標籤左右平衡 */
#Third .bank-head:has(.bank-place) .bank-logo { max-width: 60%; }
#Third .bank-head > .bank-place { flex: none; }
/* 尚未放 LOGO：顯示銀行名稱 */
#Third .bank-logo.is-missing img { display: none; }
#Third .bank-logo.is-missing::after {
  content: attr(data-name);
  font-size: 1.35rem;
  color: var(--c-brown);
}
/* 兌換地點 */
#Third .bank-place {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .05rem .6rem;
  font-size: .8rem;
  color: var(--c-brown);
  background: var(--c-white);
  border: 1.5px solid var(--c-orange);
  border-radius: 999px;
  vertical-align: .1em;
}
#Third .bank-group-title .bank-place { margin-left: .4rem; }
#Third .bank-place svg { width: 1em; height: 1em; opacity: 1; color: var(--c-orange); }
/* 禮別（滿額禮／分期禮／加碼） */
#Third .bank-group-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  color: var(--c-brown);
}
#Third .bank-group-title small { font-size: .75rem; color: var(--c-brown); }
#Third .bank-group.is-bonus {
  padding: .5rem .75rem;
  background: rgba(253, 222, 142, .4);
  border-radius: .75rem;
}
/* 級距：每行依序排列，不強制欄位對齊 */
#Third .bank-tiers {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#Third .bank-tiers li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .25rem;   /* 數字前後不留太多空 */
  line-height: 1.35;
}
#Third .bank-gift { white-space: nowrap; }
/* 贈送＋限量綁成一組：放不下時整組換到下一行，限量不會單獨掉一行 */
#Third .bank-gl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .25rem; }
#Third .bank-amt { margin-left: .1em; font-size: 1.2em; font-weight: 700; color: var(--c-red); white-space: nowrap; }
#Third .bank-item { margin-left: .1em; color: var(--c-red); white-space: normal; }
/* 加碼區：左右內距收窄，讓長一點的級距盡量排成一行 */
#Third .bank-group.is-bonus { padding-left: .55rem; padding-right: .55rem; }
#Third .bank-limit {
  padding: .05rem .3rem;
  font-size: .66rem;
  letter-spacing: 0;
  color: #fff;
  background: var(--c-pink);
  border-radius: 999px;
  white-space: nowrap;
}
#Third .bank-empty { margin: 2rem 0; text-align: center; color: var(--c-brown); }
/* 卡片較窄的寬度（電腦 1200~1365、平板 768~991）：級距字縮一級，減少換行 */
@media (min-width: 1200px) and (max-width: 1365.98px), (min-width: 768px) and (max-width: 991.98px) {
  #Third .bank-tiers { font-size: .9rem; }
}
@media (max-width: 575.98px) {
  #Third .card-body { padding: 1rem 1rem 1.25rem; }
  #Third .bank-tiers { font-size: .9rem; }
  #Third .bank-group.is-bonus { padding: .5rem .6rem; }
  #Third .bank-limit { padding: .05rem .3rem; font-size: .62rem; }
}

/* 門檻頁籤 */
#Third .third-tabs {
  --bs-nav-pills-border-radius: 50rem;
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: var(--c-orange);
  --bs-nav-link-color: var(--c-orange);
  --bs-nav-link-hover-color: var(--c-brown);
  --bs-nav-link-font-size: 1.25rem;
  --bs-nav-link-padding-x: 1.75rem;
  --bs-nav-link-padding-y: .4rem;
  flex-wrap: nowrap;
  gap: .75rem;
  overflow-x: auto;
  padding: 4px 4px 10px;
  scrollbar-width: none;
}
#Third .third-tabs::-webkit-scrollbar { display: none; }
/* 置中，超出可捲 */
#Third .third-tabs > :first-child { margin-left: auto; }
#Third .third-tabs > :last-child  { margin-right: auto; }

#Third .third-tabs .nav-link {
  white-space: nowrap;
  letter-spacing: .05em;
  background: var(--c-cream);
  border: 3px solid var(--c-orange);
  box-shadow: 0 4px 0 rgba(242, 150, 0, .35);
}
#Third .third-tabs .nav-link.active {
  background: var(--bs-nav-pills-link-active-bg);
  box-shadow: 0 4px 0 #c9860a;   /* 同 .btn-primary 的立體陰影 */
}
#Third .third-tabs .nav-link:focus-visible { outline: 2px dashed var(--c-pink); outline-offset: 3px; }

/* 手機 */
@media (max-width: 767.98px) {
  #Third .third-tabs {
    --bs-nav-link-font-size: 1rem;
    --bs-nav-link-padding-x: 1rem;
    gap: .5rem;
  }
}

/* 銀行警語 */
.bank-notice {
  margin: 0 auto 2.5rem;
  text-align: center;
}
.bank-notice p { margin: 0; }
.bank-notice .bank-notice-slogan {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .2rem 1.5rem;
  border: 1.5px solid currentColor;
}

/* ===== Modal ===== */
.modal {
  --bs-modal-width: 560px;
  --bs-modal-padding: 1.25rem 1.5rem;
  --bs-modal-color: var(--c-brown);
  --bs-modal-bg: var(--c-white);
  --bs-modal-border-color: var(--c-orange);
  --bs-modal-border-width: 4px;
  --bs-modal-border-radius: 1.5rem;
  --bs-modal-inner-border-radius: calc(1.5rem - 4px);
  --bs-modal-box-shadow: 0 8px 0 rgba(242, 150, 0, .35);
  --bs-modal-header-padding: 1rem 1.25rem 1rem 1.5rem;
  --bs-modal-header-border-color: var(--c-orange);
  --bs-modal-header-border-width: 0;
  --bs-modal-footer-border-width: 0;
}
.modal-backdrop { --bs-backdrop-bg: var(--c-brown); --bs-backdrop-opacity: .55; }
.modal-content { overflow: hidden; box-shadow: var(--bs-modal-box-shadow); }

.modal-header { justify-content: center; background: var(--c-cream); }   /* 無關閉鈕，標題置中 */
.modal-title {
  color: var(--c-pink);
  font-size: 1.85rem;   /* Modal 標題要比底下「閱讀完畢」按鈕大 */
  line-height: 1.3;
  letter-spacing: .12em;
}

/* 關閉鈕：同漢堡選單的 X */
.modal .btn-close {
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
}
.modal .btn-close::before,
.modal .btn-close::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 28px;
  height: 4px;
  margin-left: -14px;
  border-radius: 4px;
  background: var(--c-pink);
  box-shadow: 0 0 0 2.5px #fff;
  transition: transform .3s ease;
}
.modal .btn-close::before { transform: rotate(45deg); }
.modal .btn-close::after  { transform: rotate(-45deg); }
.modal .btn-close:hover::before { transform: rotate(135deg); }
.modal .btn-close:hover::after  { transform: rotate(45deg); }
.modal .btn-close:focus-visible { outline: 2px dashed var(--c-pink); outline-offset: 2px; }

.modal-body { line-height: 1.75; font-size: .95rem; letter-spacing: .02em; overflow-wrap: anywhere; }
.modal-body > :last-child { margin-bottom: 0; }

/* 注意事項清單 */
.modal-notes { margin: 0; padding-left: 1.4em; }
.modal-notes > li + li { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed rgba(154, 106, 58, .25); }
.modal-notes > li::marker { color: var(--c-orange); font-weight: 700; }
.modal-notes > li > strong { margin-bottom: .25rem; color: var(--c-orange); font-size: 1.05em; }
/* 條列小點（例：10在好運 1～7） */
.modal-notes .note-sub { margin: .25rem 0 0; padding-left: 1.5em; }
.modal-notes .note-sub > li { margin: 0; padding: 0; border: 0; }
.modal-notes .note-sub > li + li { margin-top: .35rem; }
.modal-notes .note-sub > li::marker { color: var(--c-brown); font-weight: 400; }
/* 注意事項：櫃位清單 */
.modal-notes .counter-box { margin-top: .75rem; padding: .75rem 1rem; border-radius: .75rem; }
.modal-notes .counter-box--ok { background: rgba(154, 202, 101, .15); }
.modal-notes .counter-box--no { background: rgba(234, 174, 201, .2); }
.modal-notes .counter-list { list-style: none; margin: 0; padding: 0; }
.modal-notes .counter-list > li { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: .5rem 0; border-top: 1px dashed rgba(0, 0, 0, .12); }
.modal-notes .counter-list > li:first-child { border-top: 0; }
.modal-notes .counter-tag { display: inline-block; min-width: 4.5em; padding: 0 .6em; border: 1px solid rgba(0, 0, 0, .15); border-radius: 999px; background: #fff; font-size: .8em; line-height: 1.7; text-align: center; flex-shrink: 0; white-space: nowrap; margin-top: .2em; }
.modal-notes .counter-name { flex: 1; min-width: 0; }
.modal-notes .counter-name .nw { white-space: nowrap; }   /* 日期區間不拆行 */

@media (max-width: 575.98px) {
  .modal-body { font-size: .9rem; }
  .modal-notes { padding-left: 1.2em; }
  .modal-notes .counter-box { padding: .65rem .75rem; }
  /* 手機：標籤放上面、櫃位放下面，避免文字被擠出框 */
  .modal-notes .counter-list > li { flex-direction: column; gap: .2rem; }
  .modal-notes .counter-tag { min-width: 0; margin-top: 0; }
}

.modal-footer { justify-content: center; padding-top: .5rem; padding-bottom: 1.5rem; }

/* 捲軸：主橘＋淡橘軌道（Chrome/Edge/Firefox 用標準屬性，Safari 用 webkit） */
html { scrollbar-color: var(--c-orange) var(--c-bg); }
.modal-body { scrollbar-width: thin; scrollbar-color: var(--c-orange) rgba(242, 150, 0, .15); }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: var(--c-bg); }
  ::-webkit-scrollbar-thumb { background: var(--c-orange); border: 3px solid var(--c-bg); border-radius: 999px; }
  .modal-body::-webkit-scrollbar { width: 8px; }
  .modal-body::-webkit-scrollbar-track { background: rgba(242, 150, 0, .15); border-radius: 999px; }
  .modal-body::-webkit-scrollbar-thumb { border: 0; }
}

/* 可捲動提示（main.js 產生） */
.modal-scroll-hint {
  position: relative;
  height: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-scroll-hint::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3rem;
  background: linear-gradient(rgba(255, 250, 240, 0), var(--bs-modal-bg));
}
.modal-scroll-hint svg {
  position: absolute;
  left: 50%;
  bottom: .25rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -.75rem;
  stroke: var(--c-orange);
  animation: modal-hint-bob 1.2s ease-in-out infinite;
}
.modal-scroll-hint.is-hidden { opacity: 0; }
@keyframes modal-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@media (max-width: 575.98px) {
  .modal { --bs-modal-padding: 1rem 1.25rem; }
  .modal-title { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-scroll-hint svg { animation: none; }
  .modal .btn-close::before, .modal .btn-close::after { transition: none; }
}

/* ===== Footer ===== */
.site-footer {
  padding: 2.25rem 0;
  background: #ee89b5;
  color: #fff;
  text-align: center;
}
.site-footer h5 {
  margin: 0;
  font-size: clamp(.85rem, 1.1vw, 1.25rem);
  letter-spacing: .03em;
  line-height: 1.6;
}

/* ===== Go Top ===== */
.go-top {
  --size: 84px;
  position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: var(--size);
  height: var(--size);
  padding-top: calc(var(--size) * .14);
  overflow: hidden;
  border: 4px solid var(--c-cream);
  border-radius: 50%;
  background: var(--c-orange);
  box-shadow: 0 5px 0 #c9860a;   /* 同 .btn-primary 的立體陰影 */
  color: #fff;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, box-shadow .15s ease;
}
.go-top.is-show { opacity: 1; visibility: visible; transform: none; }
.go-top-text {
  font-size: calc(var(--size) * .2);
  line-height: 1;
  letter-spacing: .05em;
  font-weight:bold;
}
.go-top-dino {
  width: 78%;
  height: auto;
  margin-top: calc(var(--size) * .06);
  pointer-events: none;
}
/* hover 恐龍跳 */
.go-top:hover .go-top-dino,
.go-top:focus-visible .go-top-dino { animation: go-top-hop .6s ease; }
@keyframes go-top-hop {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-14%); }
  70%      { transform: translateY(3%); }
}
/* 按下 */
.go-top:active { transform: translateY(3px); box-shadow: 0 2px 0 #c9860a; }
.go-top:focus-visible { outline: 2px dashed var(--c-pink); outline-offset: 4px; }

@media (max-width: 767.98px) {
  .go-top { --size: 64px; right: .75rem; bottom: .75rem; border-width: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .go-top { transition: none; }
  .go-top:hover .go-top-dino, .go-top:focus-visible .go-top-dino { animation: none; }
}

/* =========================================================
   Second：成對卡片（魔法卡任務 → 任務加碼抽）
   .is-pair-1 魔法卡、.is-pair-2 加碼抽
   ========================================================= */
/* 兩張改粉紅框，和其他橘框卡片區隔成一組 */
#Second .is-pair .card {
  border-color: var(--c-pink);
  box-shadow: 0 6px 0 rgba(230, 66, 144, .25);
}
/* 標籤前的步驟數字 ①② */
#Second .pair-step {
  display: inline-grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  margin-right: .3em;
  font-size: .9em;
  line-height: 1;
  color: var(--c-pink);
  background: var(--c-white);
  border-radius: 50%;
}
/* 魔法卡內：「還能加碼抽大禮包 ›」 */
#Second .gift-bonus-link {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-top: .35rem;
  padding: .3rem .6rem .3rem 1rem;
  font-size: .95rem;
  color: #fff;
  background: var(--c-pink);
  border: 2px solid var(--c-white);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(230, 66, 144, .3);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
#Second .gift-bonus-link b { font-weight: 700; color: #fff36b; }
#Second .gift-bonus-link .bi { animation: pair-nudge 1.2s ease-in-out infinite; }
#Second .gift-bonus-link:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(230, 66, 144, .3); }
#Second .gift-bonus-link:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(230, 66, 144, .3); }
#Second .gift-bonus-link:focus-visible { outline: 2px solid var(--c-brown); outline-offset: 2px; }
@keyframes pair-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
/* 兩張之間的「＋」：放在加碼抽卡片左側間距中央 */
#Second .is-pair-2 { --pair-gap: 24px; }
#Second .pair-plus {
  position: absolute;
  top: 50%;                              /* 垂直：卡片高度中央 */
  left: calc(var(--pair-gap) / -2);      /* 水平：兩卡間距中央 */
  z-index: 5;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 0;                          /* 隱藏文字「+」，改用線條畫，避免字型基線造成偏移 */
  background: var(--c-pink);
  border: 3px solid var(--c-white);
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(230, 66, 144, .3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#Second .pair-plus::before,
#Second .pair-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 4px;
  background: #fff;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
#Second .pair-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
/* 桌機：加碼抽在最左（魔法卡在畫面外）時不顯示＋ */
@media (min-width: 1200px) {
  #Second .is-pair-2.swiper-slide-active .pair-plus { display: none; }
}
/* 手機：間距 12px，＋縮小 */
@media (max-width: 767.98px) {
  #Second .is-pair-2 { --pair-gap: 12px; }
  #Second .pair-plus { width: 2.1rem; height: 2.1rem; }
  #Second .pair-plus::before, #Second .pair-plus::after { height: 3px; }
  #Second .gift-bonus-link { font-size: .85rem; }
}
/* 點連結後，加碼抽卡片閃一下 */
#Second .is-pair-2.is-flash .card { animation: pair-flash .9s ease 2; }
@keyframes pair-flash {
  0%, 100% { transform: none; box-shadow: 0 6px 0 rgba(230, 66, 144, .25); }
  40%      { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(230, 66, 144, .35); }
}
@media (prefers-reduced-motion: reduce) {
  #Second .gift-bonus-link .bi, #Second .is-pair-2.is-flash .card { animation: none; }
}
#Second .swiper-slide.is-pair-2 { z-index: 2; }

/* =========================================================
   Second：已兌畢（.swiper-slide 加 .is-soldout，照片內放 .soldout-stamp）
   ========================================================= */
#Second .is-soldout .card {
  border-color: rgba(154, 106, 58, .35);
  box-shadow: 0 6px 0 rgba(154, 106, 58, .15);
}
#Second .is-soldout .gift-photo img { filter: grayscale(.9); opacity: .55; }
#Second .is-soldout .gift-theme { background: rgba(154, 106, 58, .55); }
#Second .is-soldout .gift-info { opacity: .5; }
#Second .is-soldout .gift-info .text-red { color: inherit; }
#Second .is-soldout .gift-tag { border-color: rgba(154, 106, 58, .35); }
#Second .is-soldout .gift-tag .limit { opacity: .5; text-decoration: line-through; }
#Second .is-soldout .gift-tag .limit b { color: inherit; }
#Second .soldout-text { font-weight: 700; color: var(--c-red); }

/* 印章：雙圈、斜蓋在照片中央；字級跟著卡片寬縮放 */
#Second .soldout-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em;
  width: 48%;
  aspect-ratio: 1;
  font-size: min(1.6rem, var(--card-h) * .07);
  color: var(--c-red);
  background: rgba(255, 250, 240, .88);
  border: .18em solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  pointer-events: none;
}
#Second .soldout-stamp::before {   /* 內圈虛線 */
  content: "";
  position: absolute;
  inset: .3em;
  border: .08em dashed currentColor;
  border-radius: 50%;
}
#Second .soldout-stamp b { font-weight: 700; letter-spacing: .12em; line-height: 1.2; }
#Second .soldout-stamp small {
  padding-top: .2em;
  font-size: .5em;
  letter-spacing: .1em;
  border-top: .12em solid currentColor;
}
/* 區塊進場後，印章「蓋」下去 */
#Second.is-in .soldout-stamp { animation: stamp-in .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--q, 0s) + .8s) both; }
@keyframes stamp-in {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(1.8); }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #Second.is-in .soldout-stamp { animation: none; }
}

/* ---------- 字型切換 ---------- */
html.font-ready { --bs-body-font-family: "SogoFont", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
html:is(.font-swap, .font-fade) :is(h1, h2, h3, h4, h5, h6, p, li, small, .btn, .bank-cond, .bank-gl) { transition: opacity .2s ease; }
html.font-swap :is(h1, h2, h3, h4, h5, h6, p, li, small, .btn, .bank-cond, .bank-gl) { opacity: 0; }