/* 前台（購物／會員頁面）專屬的可愛淺色風格主題
   僅在 partials/head.ejs 傳入 front:true 時載入，不影響後台管理介面 */

:root {
  --bg: #faf4f1;
  --card: #ffffff;
  --text: #4a3a3c;
  --muted: #9c8489;
  --accent: #c98a93;
  --accent-dark: #a8676f;
  --accent-soft: #f3e2e2;
  --border: #ecdcda;
}


body {
  background: linear-gradient(180deg, #faf4f1 0%, #fdfaf7 100%);
  font-size: 17px;
  line-height: 1.7;
  font-family: "Noto Sans TC", -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  /* 頁尾貼底：內容較少、頁面比視窗矮時，讓 main 撐開剩餘空間，頁尾才會貼齊畫面底部，
     不會在內容結束後就直接接著頁尾、下方留出一塊空白背景 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* width:100% 是必要的：main 本身用 margin:0 auto 置中，變成 flex 子項目後，
   有 auto margin 的項目預設不會 stretch、會整個縮成內容自身寬度，導致頁面內容全部被壓窄 */
main { flex: 1 0 auto; width: 100%; }
.site-footer { flex-shrink: 0; }

h1, h2, h3 {
  font-family: "Baloo 2", "Noto Sans TC", sans-serif;
  font-weight: 700;
  color: #5c4249;
}

h1 { font-size: 2em; margin: 0 0 20px; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

main { max-width: 1280px; }

/* 頂部導覽列 */
header.site-header {
  background: var(--card);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 2px 10px rgba(168, 103, 111, 0.08);
}

header.site-header a {
  font-family: "Baloo 2", "Noto Sans TC", sans-serif;
  font-size: 1.35em;
  color: #5c4249;
}

/* 頁首品牌字「Ruby」單獨放大，「日韓代購」維持原本大小（不設定，直接沿用上面 1.35em） */
.site-header-brand .brand-name-en { font-size: 1.25em; }

header.site-header nav ul.nav-menu > li > a {
  font-size: 1em;
  font-weight: 700;
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}

header.site-header nav ul.nav-menu > li > a:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.submenu li a,
.submenu li button {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 500;
}

/* 按鈕：圓潤糖果感（硬邊立體陰影），上下 padding 故意不對稱，
   用來補償 Baloo 2 / Noto Sans TC 這組字體 ascent 遠大於 descent 造成的文字視覺偏移 */
button, input[type="submit"], .btn {
  background: var(--accent);
  color: #fff;
  font-family: "Baloo 2", "Noto Sans TC", sans-serif;
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.4;
  padding: 15px 22px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--accent-dark);
  transition: transform 0.1s, box-shadow 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button:hover, input[type="submit"]:hover, .btn:hover {
  background: var(--accent);
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--accent-dark);
}

.btn-secondary { background: #f0dfdb; color: #6b4c50; box-shadow: 0 4px 0 #d9bfba; }
.btn-secondary:hover { background: #f0dfdb; box-shadow: 0 2px 0 #d9bfba; }
.btn-danger { background: #c97b70; box-shadow: 0 4px 0 #a3594e; }
.btn-danger:hover { background: #c97b70; box-shadow: 0 2px 0 #a3594e; }
.btn-line { background: #06c755; box-shadow: 0 4px 0 #049646; }
.btn-line:hover { background: #06c755; box-shadow: 0 2px 0 #049646; }

button:disabled, input[type="submit"]:disabled, .btn:disabled {
  background: #ede2e0;
  color: #b8a5a8;
  box-shadow: none;
  transform: none;
}

/* 表單欄位 */
label { font-size: 1em; color: #5c4249; }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="password"], input[type="date"], select, textarea {
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 1em;
  background: #fffbfc;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* 卡片通用 */
.card {
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(168, 103, 111, 0.1);
}

.auth-card {
  max-width: 440px;
  margin: 20px auto;
  padding: 32px;
}

.guide-card { max-width: 820px; }

.back-link { font-weight: 700; color: var(--accent-dark); text-decoration: none; }

main a { color: var(--accent-dark); font-weight: 700; }

/* 商品列表 */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

/* 新品上架：固定同一排 5 個，不像一般商品列表自動換行 */
.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 900px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  main { padding-left: 10px; padding-right: 10px; }

  .section-head { padding: 0 10px; }

  .grid,
  .grid-5 { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .product-card-body { padding: 8px; }
  .product-title { font-size: 0.82em; margin: 4px 0; }
  .product-desc { font-size: 0.75em; }
  .category-pill,
  .preorder-pill { font-size: 0.65em; padding: 2px 7px; }
  .favorite-btn { width: 26px; height: 26px; font-size: 0.95em; top: 6px; right: 6px; }
  .product-photo-badges { top: 6px; left: 6px; }
  .product-photo-badges .product-code { font-size: 0.7em; }
  .sold-out-badge { font-size: 0.65em; padding: 3px 8px; }
  .product-card .price { font-size: 1.15em; margin: 4px 0 2px; }

  .add-to-cart-form { gap: 4px; }
  .add-to-cart-form button { font-size: 0.7em; padding: 7px 2px; letter-spacing: -0.02em; }

  /* 手機版隱藏「類別」「專區」文字標籤，省下的寬度讓標籤直接從最左邊開始排 */
  .filter-group-label { display: none; }
}

.product-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(168, 103, 111, 0.18);
}

.product-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* 收藏愛心按鈕：疊在商品照片右上角，蓋掉按鈕預設的糖果感樣式改成小圓形圖示按鈕 */
.favorite-form { margin: 0; }

.favorite-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent-dark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
  font-size: 1.3em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

.favorite-btn:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.favorite-btn.active { color: #d9455a; }

.product-photo {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--accent-soft);
}

.product-photo-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-photo-badges .product-code {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sold-out-badge {
  background: rgba(43, 43, 43, 0.75);
  color: #fff;
  font-weight: 700;
  font-size: 0.8em;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5em;
}

.product-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-title { margin: 6px 0; font-size: 1.1em; }
.product-title a { color: var(--text); text-decoration: none; }
.product-title a:hover { color: var(--accent-dark); }

.product-desc {
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.category-pill {
  display: inline-block;
  background: var(--cat-bg, var(--accent-soft));
  color: var(--cat-fg, var(--accent-dark));
  font-weight: 700;
  font-size: 0.8em;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 4px;
  align-self: flex-start;
}

.badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
  align-self: flex-start;
}

.badge-row .category-pill { margin-bottom: 0; }

.preorder-pill {
  display: inline-block;
  background: #f7ead6;
  color: #c98a5a;
  font-weight: 700;
  font-size: 0.8em;
  padding: 3px 12px;
  border-radius: 999px;
}

/* 商品篩選面板（所有商品頁）：搜尋框＋類別／專區複選，整組收在同一張卡片裡 */
.product-filter-panel {
  padding: 18px 20px;
  margin-bottom: 20px;
}

.search-bar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  width: 100%;
  max-width: 420px;
  transition: border-color 0.15s;
}

.search-bar:focus-within { border-color: var(--accent); }

.search-icon { opacity: 0.55; }

.search-bar input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95em;
  color: var(--text);
  padding: 8px 0;
  max-width: none;
}

.search-bar input[type="search"]::-webkit-search-cancel-button { display: none; }

.search-bar button {
  padding: 8px 20px 6px;
  font-size: 0.9em;
  flex-shrink: 0;
}

.search-clear {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--muted);
}

.search-clear:hover { color: var(--accent-dark); }

/* 每一組篩選（類別／專區）上方加小標籤，跟複選的標籤群組拉出清楚的視覺分組 */
.filter-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-group + .filter-group { margin-top: 12px; }

.filter-group-label {
  flex-shrink: 0;
  width: 3.2em;
  font-size: 1.05em;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.05em;
}

/* 篩選標籤：類別可複選（checkbox 包成 label，視覺仍是圓角標籤），checkbox 本身隱藏但保留可鍵盤操作
   所有類別標籤（含「全部」）統一固定 2px 外框寬度，未選取時外框透明、選取時外框變色，
   避免像舊版「全部」沒有粉彩底色、又用內縮陰影表示選取，跟其他標籤大小/粗細看起來不一致 */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}

.filter-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cat-bg, #ece1d6);
  color: var(--cat-fg, #8f6a4a);
  border: 2px solid transparent;
  padding: 7px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s, border-color 0.15s;
}

.filter-chip:hover { transform: translateY(-1px); }

.filter-chip.active {
  border-color: var(--cat-fg, #8f6a4a);
  font-weight: 800;
}

.filter-chip input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 預購／優惠專區篩選：徽章式圓形圖示＋粉彩底色，跟上方類別標籤同樣是膠囊造型但多一顆圖示圓點做區隔；
   同樣用「外框透明→變色」表示選取，尺寸不會因為選取與否而跳動；可複選 */
.section-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}

.section-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--chip-bg, #fff);
  border: 2px solid transparent;
  color: var(--chip-fg, var(--accent-dark));
  padding: 5px 18px 5px 5px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s, transform 0.1s, border-color 0.15s;
}

.section-chip:hover { transform: translateY(-1px); }

.section-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  font-size: 1.05em;
  transition: background 0.15s;
}

/* emoji 圖示本身的字重心偏低，用相對定位把圖示在白色圓圈裡往上挪一點，看起來才置中 */
.section-chip-icon span {
  position: relative;
  top: -1.5px;
}

.section-chip input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.section-chip.active {
  border-color: var(--chip-fg, var(--accent-dark));
  background: var(--chip-fg, var(--accent-dark));
  color: #fff;
}

.section-chip.active .section-chip-icon {
  background: rgba(255, 255, 255, 0.85);
}

.results-count {
  color: var(--muted);
  font-size: 0.9em;
  margin: 0 0 14px;
}

.product-code {
  background: #e7c4c9;
  color: #6b3f47;
  font-weight: 800;
  border-radius: 8px;
  font-size: 0.85em;
}

.price {
  font-family: "Baloo 2", "Noto Sans TC", sans-serif;
  font-size: 1.5em;
  font-weight: 800;
  color: var(--accent-dark);
  margin: 8px 0 4px;
}

/* 商品詳情頁的金額比列表卡片更醒目一些 */
.detail-price { font-size: 2.3em; margin: 12px 0 8px; }

.price-discount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.price-original {
  font-family: "Baloo 2", "Noto Sans TC", sans-serif;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--muted);
  text-decoration: line-through;
}

.price-now {
  font-family: "Baloo 2", "Noto Sans TC", sans-serif;
  font-size: 1em;
  font-weight: 800;
  color: #c0473a;
}

.discount-badge {
  background: #c0473a;
  color: #fff;
  font-weight: 800;
  font-size: 0.55em;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: "Baloo 2", "Noto Sans TC", sans-serif;
}

.deposit-note {
  color: #96702e;
  background: #f5ecd9;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.85em;
  display: inline-block;
}

/* 「我已匯款」前面帳號後五碼輸入框那一排：手機版也能自動換行、輸入框不會被擠壓 */
.payment-report-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.payment-report-row input[type="text"] {
  flex: 1 1 180px;
  min-width: 0;
}
.payment-report-row button {
  flex-shrink: 0;
}

.required-mark { color: #c0473a; margin-left: 2px; font-weight: 800; }

.stock-note { color: var(--muted); font-size: 0.9em; margin: 8px 0; }

.variant-tag {
  display: inline-block;
  color: var(--muted);
  font-size: 0.85em;
}

/* 購物車頁面：標題跟下面的商品內容／結帳區塊共用同一個寬度並置中對齊，不能各自分開設定寬度 */
.cart-page {
  max-width: 960px;
  margin: 0 auto;
}

.cart-empty {
  max-width: 420px;
  margin: 24px auto;
  padding: 48px 24px;
  text-align: center;
}
.cart-empty-icon { font-size: 3em; margin-bottom: 12px; }
.cart-empty p { color: var(--muted); font-size: 1.05em; margin: 0 0 20px; }

.cart-list {
  margin: 0 0 20px;
  padding: 0;
}

.cart-line {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}
.cart-line + .cart-line { border-top: 1px solid var(--border); }

.cart-line-photo {
  flex-shrink: 0;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent-soft);
}
.cart-line-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cart-line-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
}

.cart-line-info { flex: 1; min-width: 0; }
.cart-line-name { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.cart-line-name a { color: var(--text); text-decoration: none; }
.cart-line-name a:hover { color: var(--accent-dark); }
.cart-line-meta { color: var(--muted); font-size: 0.88em; margin-top: 4px; }

.cart-line-subtotal {
  flex-shrink: 0;
  font-family: "Baloo 2", "Noto Sans TC", sans-serif;
  font-weight: 800;
  font-size: 1.15em;
  color: var(--accent-dark);
  min-width: 5em;
  text-align: right;
}

.cart-line-remove { flex-shrink: 0; margin: 0; }
.cart-line-remove .btn-danger { padding: 6px 14px; font-size: 0.85em; box-shadow: none; }

.cart-summary {
  margin: 0;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.cart-summary-row { display: flex; align-items: baseline; gap: 12px; }
.cart-summary-total { font-size: 1.15em; }
.cart-summary-total strong { font-size: 1.4em; color: var(--accent-dark); font-family: "Baloo 2", "Noto Sans TC", sans-serif; }
.cart-summary .deposit-note { align-self: flex-end; text-align: right; }
.cart-checkout-btn { width: 100%; text-align: center; margin-top: 4px; }

@media (max-width: 600px) {
  .cart-line { flex-wrap: wrap; padding: 14px; gap: 10px 12px; }
  .cart-line-photo { width: 56px; height: 56px; }
  .cart-line-info { flex: 1 1 auto; }
  .cart-line-subtotal { order: 3; text-align: left; min-width: 0; }
  .cart-line-remove { order: 4; }
  .cart-summary { padding: 16px; align-items: stretch; }
  .cart-summary-row { justify-content: space-between; }
  .cart-summary .deposit-note { align-self: stretch; text-align: left; }
}

.add-to-cart-form {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.add-to-cart-form button {
  flex: 1;
  /* flex 子項目預設不會縮小到比文字內容更窄（min-width 預設是 auto），
     版面太窄時按鈕會硬撐出卡片外；改成 0 讓按鈕可以正常縮小，文字改成允許換行避免被裁掉 */
  min-width: 0;
  padding: 12px 8px 8px;
  font-size: 0.95em;
  white-space: normal;
  line-height: 1.2;
}

/* 商品卡「選擇款式」彈窗 */
.product-select-modal {
  position: relative;
  max-width: 420px;
  text-align: left;
}

.product-select-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 6px;
}

.product-select-close:hover { color: var(--accent-dark); background: none; transform: none; }

.product-select-modal-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.product-select-modal-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-select-modal-photo .product-photo-placeholder { font-size: 3em; }

/* 手機版圖片正方形太高，整個彈窗容易超出畫面，改成較矮的比例縮短整體高度 */
@media (max-width: 600px) {
  .product-select-modal-photo { aspect-ratio: 16 / 9; margin-bottom: 10px; }
  .product-select-modal-photo .product-photo-placeholder { font-size: 2.2em; }
  #productSelectForm label { margin: 10px 0 4px; }
}

.product-select-name { margin: 8px 0 4px; }

#productSelectForm label { display: block; font-weight: 700; font-size: 0.9em; margin: 14px 0 6px; }
#productSelectForm select,
#productSelectForm input[type="number"] { width: 100%; box-sizing: border-box; }

.product-select-modal .confirm-modal-actions { justify-content: space-between; margin-top: 18px; }

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.detail-main-photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--accent-soft);
  aspect-ratio: 1 / 1;
}

.detail-main-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.detail-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.detail-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--accent-soft);
  box-shadow: none;
  cursor: pointer;
  flex-shrink: 0;
}

.detail-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.detail-thumb.active { border-color: var(--accent); }
.detail-thumb:hover { transform: none; box-shadow: none; background: var(--accent-soft); }

.detail-info { display: flex; flex-direction: column; }
.detail-info h1 { margin: 8px 0 4px; }

.detail-description { margin-bottom: 40px; }
.detail-html-content img { max-width: 100%; border-radius: 12px; }
.detail-html-content p { margin: 0 0 12px; }

@media (max-width: 700px) {
  .detail-layout { grid-template-columns: 1fr; }
}

/* 表格（購物車／訂單） */
table {
  border: 2px solid var(--border);
  border-radius: 16px;
  font-size: 1em;
}

th, td { padding: 14px 16px; font-size: 1em; }
th { background: var(--accent-soft); color: #6b3f47; }

.status-badge { font-size: 0.9em; }

/* 匯款資訊 */
.bank-info {
  background: #f7f0e4;
  border: 2px solid #e6d5b3;
  border-radius: 16px;
}

.error { font-size: 1em; }

/* 首頁 */
.home-main { max-width: 1280px; }

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 48px 40px;
  margin-bottom: 48px;
  border-radius: 28px;
  background: linear-gradient(135deg, #f3e2e2 0%, #f2e6d8 55%, #e9e3ec 100%);
}

.hero-kicker {
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: 3px;
  margin: 0 0 8px;
  font-size: 0.95em;
}

.hero-text h1 {
  font-size: 2.3em;
  margin: 0 0 16px;
  line-height: 1.3;
}

.hero-sub {
  color: #5c4249;
  max-width: 420px;
  margin: 0 0 24px;
}

.hero-art {
  position: relative;
  width: 260px;
  height: 230px;
  flex-shrink: 0;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(92, 66, 73, 0.15);
}

.hero-blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-blob-1 { width: 190px; height: 190px; font-size: 4em; top: 0; right: 10px; }
.hero-blob-2 { width: 110px; height: 110px; font-size: 2.5em; bottom: 0; left: 0; background: #f2e6d8; }

@media (max-width: 700px) {
  .hero { flex-direction: column; text-align: center; padding: 28px 24px; }
  .hero-sub,
  .hero-art { display: none; }
  .hero-text h1 { font-size: 1.6em; margin: 0 0 12px; }
}

.home-section { margin-bottom: 48px; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.see-all {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--accent-dark);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--accent-dark);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.see-all:hover {
  background: var(--accent-dark);
  color: #fff;
}

.specials-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 700px) {
  .specials-row { grid-template-columns: 1fr; }
}

.specials-col .grid { grid-template-columns: repeat(2, 1fr); }

/* 新品上架／預購／優惠專區共用的白底卡片，改以「頂部色條 + 圖示徽章」區分主題，
   不再用大面積色塊，維持三區塊底色一致、風格更清爽 */
.section-panel,
.specials-col {
  background: var(--card);
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--section-accent, var(--accent));
  box-shadow: 0 6px 20px rgba(168, 103, 111, 0.06);
}

@media (max-width: 600px) {
  .section-panel,
  .specials-col { padding: 8px; }
}

.section-panel .section-head { margin-bottom: 20px; }

.section-panel-new { --section-accent: #a8676f; }
.specials-col-preorder { --section-accent: #c98a5a; }
.specials-col-promotion { --section-accent: #d9614a; }

/* 標題文字＋圖示用 flex 排在同一列，靠 align-items 置中，不依賴字型基線對齊 */
.section-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.7em;
  flex-shrink: 0;
  background: var(--section-accent, var(--accent-soft));
}

/* 新品上架圖示不需要底圖圓圈，純圖示即可 */
.section-icon-plain {
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  font-size: 1em;
}

/* 首頁底部跑馬燈公告，全寬顯示，不受 main 的 max-width 限制 */
.marquee-banner {
  overflow: hidden;
  background: var(--accent-soft);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  padding: 14px 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 24s linear infinite;
}

.marquee-content { display: flex; }

.marquee-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 40px;
  font-weight: 700;
  color: var(--accent-dark);
  font-size: 1.05em;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 16px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s;
}

.category-card:hover { transform: translateY(-4px); }

/* 圓形分類圖示：色塊改包在圓圈裡，卡片本身不再是色塊 */
.category-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1em;
  background: var(--cat-bg, var(--accent-soft));
  color: var(--cat-fg, var(--accent-dark));
}

.category-card.cat-more .category-icon {
  background: #fff;
  border: 2px dashed var(--border);
  color: var(--text);
}

.category-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.category-name {
  font-weight: 800;
  font-size: 0.85em;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--cat-bg, var(--accent-soft));
  color: var(--cat-fg, var(--accent-dark));
}
.category-card.cat-more .category-name { background: transparent; color: var(--text); }
.category-count { font-size: 0.78em; color: var(--muted); }

/* 首頁「好玩專區」：跟分類卡的圓形圖示風格區隔開，改用橫式漸層色塊卡片，比較像「活動入口」而不是商品分類；
   之後扭蛋、一番賞上線，直接在 .fun-zone-row 裡多加一張 .fun-zone-card（可用 --fun-from/--fun-to 換色）即可 */
.fun-zone-section { margin-top: -4px; }
.fun-zone-title { margin-bottom: 14px; }

.fun-zone-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* 手機版螢幕較窄時，每張卡會各自獨佔一行，但卡片本身只有 220px 寬，靠左會讓右邊留一大片空白，改成置中 */
@media (max-width: 600px) {
  .fun-zone-row { justify-content: center; }
}

.fun-zone-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
  padding: 18px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--fun-from, var(--accent)) 0%, var(--fun-to, var(--accent-dark)) 100%);
  text-decoration: none;
  color: #fff;
  box-shadow: 0 10px 24px rgba(168, 103, 111, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.fun-zone-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(168, 103, 111, 0.32);
}

.fun-zone-emoji {
  font-size: 2.2em;
  line-height: 1;
  flex-shrink: 0;
}

.fun-zone-icon-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.fun-zone-text { display: flex; flex-direction: column; gap: 2px; }
.fun-zone-name { font-weight: 800; font-size: 1.1em; }
.fun-zone-desc { font-size: 0.82em; opacity: 0.9; }

/* 還沒上線的好玩專區項目：底色一樣配合圖示，稍微降低飽和度做出區隔；點擊會跳出「敬請期待」小視窗 */
.fun-zone-card-soon { filter: saturate(0.7); }

/* 會員中心頂部：招呼語、訂單統計、分頁 */
.member-center { max-width: 1080px; margin: 0 auto 24px; }

.member-hello {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  border-radius: 24px;
  padding: 26px 30px;
  margin-bottom: 14px;
  box-shadow: 0 10px 26px rgba(168, 103, 111, 0.32);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
}
.member-hello::after {
  content: "🎀";
  position: absolute;
  right: -14px;
  bottom: -22px;
  font-size: 5.5em;
  opacity: 0.28;
  transform: rotate(-12deg);
  pointer-events: none;
}
.member-hello-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.member-hello-avatar-icon { width: 36px; height: 36px; }
.member-hello-text { position: relative; z-index: 1; }
.member-hello h1 { margin: 0 0 4px; font-size: 1.35em; color: #fff; }
.member-hello p { margin: 0; font-size: 0.9em; opacity: 0.9; }

@media (max-width: 600px) {
  .member-hello { padding: 20px 22px; gap: 14px; border-radius: 20px; }
  .member-hello-avatar { width: 46px; height: 46px; }
  .member-hello-avatar-icon { width: 30px; height: 30px; }
  .member-hello::after { font-size: 4em; }
}
.member-unpaid {
  margin-top: 14px;
  padding: 14px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.member-unpaid-label { font-size: 0.95em; color: var(--text); }
.member-unpaid-amount { font-size: 1.5em; font-weight: 800; color: var(--accent-dark); }
.member-unpaid-amount small { font-size: 0.55em; font-weight: 500; color: var(--muted); margin-left: 6px; }

.member-type-switch {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.member-type-switch .btn, .member-type-switch .btn-secondary {
  font-size: 0.9em;
  padding: 10px 18px 6px;
}

.member-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(168, 103, 111, 0.1);
  margin-bottom: 14px;
  overflow: hidden;
}
.member-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 4px;
  text-decoration: none;
  border-left: 1px solid var(--border);
  min-width: 0;
}
.member-stat:first-child { border-left: none; }
.member-stat strong { font-size: 1.7em; line-height: 1.1; color: var(--text); }
.member-stat span { font-size: 0.82em; font-weight: 500; color: var(--muted); }
.member-stat .stat-pending { color: #f59e0b; }
.member-stat .stat-shipped { color: #2563eb; }
.member-stat .stat-completed { color: #059669; }
.member-stat { transition: background 0.15s; }
.member-stat:hover { background: #fbf3f1; }
.member-stat.is-active { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }

@media (max-width: 600px) {
  .member-stat { padding: 12px 2px; }
  .member-stat strong { font-size: 1.3em; }
  .member-stat span { font-size: 0.68em; white-space: nowrap; }
}

.member-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--accent-soft);
  border-radius: 14px;
  margin-bottom: 20px;
}
.member-tabs a {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--muted);
}
.member-tabs a { transition: background 0.15s, color 0.15s; font-weight: 700; }
.member-tabs a:hover { color: var(--accent-dark); }
.member-tabs a.is-active { background: var(--card); color: var(--accent-dark); box-shadow: 0 2px 6px rgba(168, 103, 111, 0.18); }

/* 個人資料頁：與會員中心同寬，左右兩欄（窄螢幕自動變單欄） */
.profile-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}
.profile-card { padding: 28px 32px; }
.profile-card h2 { margin: 0 0 14px; }
.profile-info { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 6px; }
.profile-info-label { display: block; font-size: 0.85em; color: var(--muted); }
.profile-hint { color: var(--muted); font-size: 0.9em; margin: 6px 0 18px; }
.profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 8px; }
.profile-field-full { grid-column: 1 / -1; }
.profile-fields input[type="text"], .profile-fields input[type="email"], .profile-fields input[type="number"] { width: 100%; max-width: none; box-sizing: border-box; }
.profile-divider { margin: 20px 0; border: none; border-top: 1px solid var(--border); }
@media (max-width: 800px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-fields { grid-template-columns: 1fr; }
  .profile-card { padding: 22px 18px; }
}

/* 修改訂單內容頁 */
.order-edit-header {
  max-width: 1080px;
  margin: 0 auto 16px;
}
.order-edit-header h1 { margin: 10px 0 6px; }
.order-edit-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); flex-wrap: wrap; }

.order-edit-product {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.order-edit-thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75em;
  text-align: center;
}
.order-edit-thumb img { width: 100%; height: 100%; object-fit: cover; }

.order-edit-danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.order-edit-danger form { margin: 0; }

.order-edit-search { display: block; width: 100%; margin-bottom: 8px; box-sizing: border-box; }
.order-edit-add-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.order-edit-add-fields select, .order-edit-add-fields input[type="number"] { width: 100%; box-sizing: border-box; }

@media (max-width: 600px) {
  .order-edit-danger { flex-direction: column; align-items: stretch; }
  .order-edit-danger button { width: 100%; }
}

.member-empty { text-align: center; color: var(--muted); font-size: 1.1em; padding: 40px 0; }

.member-favorites-empty {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 1.05em;
}
.member-favorites-empty p { margin: 0 0 16px; }

.member-favorites-count {
  max-width: 1080px;
  margin: 0 auto 14px;
  font-weight: 700;
  color: #5c4249;
}
.member-favorites-grid { max-width: 1080px; margin: 0 auto; }

.member-closed-section {
  max-width: 1080px;
  margin: 24px auto 0;
}
.member-closed-section summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--muted);
  padding: 10px 16px;
  background: var(--accent-soft);
  border-radius: 12px;
  list-style: none;
}
.member-closed-section summary::-webkit-details-marker { display: none; }
.member-closed-section[open] summary { margin-bottom: 14px; }
.member-closed-section .member-item-table-wrap { opacity: 0.85; }

/* 會員中心商品清單：表格形式，上方表頭、下方逐筆商品列。狀態／商品／數量／金額，
   商品名稱故意不換行（.order-item-name white-space:nowrap），名稱太長時表格內容會比容器寬；
   但 table-layout:auto 的表格寬度是 auto 時，瀏覽器不會因為裡面有撐不下的 nowrap 內容就自動長寬，
   只會在格子裡悄悄裁掉——要撐開讓 overflow:auto 的外層能左右滑動看完整內容，
   得靠 orders.ejs 裡的 script 量出表格實際需要的寬度、直接設成 min-width（見該檔案註解） */
/* 「待匯款（訂金）」這類區塊標題：跟底下的商品清單／付款區塊用同一個寬度置中，
   不然 main 本身比較寬（1280px），標題沒特別設定寬度的話會比下面的內容區塊還要寬、貼齊最左邊 */
.member-section-title {
  max-width: 1080px;
  margin: 0 auto 12px;
}
.member-item-table-wrap {
  max-width: 1080px;
  margin: 0 auto 18px;
  padding: 0;
  overflow: auto;
}
.member-item-table { width: 100%; border: none; border-radius: 0; margin: 0; }
.member-item-table th, .member-item-table td { vertical-align: middle; }
.member-item-table td:first-child, .member-item-table th:first-child { text-align: center; }
.member-item-table td:nth-child(2) { vertical-align: top; }
.member-item-table tbody tr + tr td { border-top: 1px solid var(--border); }
.member-item-table td:nth-child(3), .member-item-table th:nth-child(3),
.member-item-table td:nth-child(4), .member-item-table th:nth-child(4) { white-space: nowrap; }

/* 表格下方常駐的捲軸提示（手機瀏覽器原生捲軸預設隱藏，不容易被發現能滑動）；
   寬度／位置由 orders.ejs 裡的 script 依實際滑動進度即時計算，這裡只定義外觀 */
.table-scroll-indicator {
  display: none;
  height: 4px;
  max-width: 1080px;
  margin: 6px auto 18px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.table-scroll-indicator.is-visible { display: block; }
.table-scroll-indicator-thumb {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}

.order-item-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.02em; color: #5c4249; white-space: nowrap; }
.order-item-name .product-code { padding: 2px 9px; flex-shrink: 0; }
.order-meta { font-size: 0.82em; color: var(--muted); margin-top: 4px; }
.order-status { font-size: 0.85em; padding: 4px 12px; white-space: nowrap; }
.order-edit-link { font-size: 0.85em; font-weight: 700; color: var(--muted); text-decoration: underline; white-space: nowrap; }
.order-edit-link:hover { color: var(--accent-dark); }

/* 「待匯款」分頁最下方的合併付款區塊：一次為所有待匯款商品付款，不用逐筆商品各自處理 */
.member-payment-panel {
  max-width: 1080px;
  margin: 0 auto 18px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.member-payment-block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.member-payment-block h3 { margin: 0; font-size: 1.05em; }
.member-payment-block .bank-info { margin: 0; padding: 12px 16px; width: 100%; box-sizing: border-box; }
.member-payment-block .bank-info p { margin: 3px 0; }
.member-payment-block form { margin: 0; }
.member-payment-block + .member-payment-block { border-top: 1px solid var(--border); padding-top: 20px; }

/* 會員中心「購物金」頁：餘額卡片＋異動紀錄表格，寬度對齊上方 member-center 頭部 */
.member-credit-balance-card {
  max-width: 1080px;
  margin: 0 auto 18px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.member-credit-balance-card .member-credit-balance-label { font-size: 1.5em; font-weight: 800; color: var(--text); }
.member-credit-balance-card .member-credit-balance-amount { font-size: 2.2em; font-weight: 800; color: var(--accent-dark); }

.member-credit-log-card { max-width: 1080px; margin: 0 auto 18px; padding: 24px 28px; }
.member-credit-log-card h2 { margin: 0 0 16px; }
.member-credit-log-card table { width: 100%; }
.member-credit-log-card .credit-log-amount { font-weight: 700; white-space: nowrap; }
.member-credit-log-card .credit-log-empty { text-align: center; color: var(--muted); padding: 24px 0; }

@media (max-width: 600px) {
  .member-credit-balance-card { padding: 16px 18px; }
  .member-credit-balance-card .member-credit-balance-label { font-size: 1.25em; }
  .member-credit-balance-card .member-credit-balance-amount { font-size: 1.7em; }
  .member-credit-log-card { padding: 16px; border-radius: 12px; }
  .member-credit-log-card th, .member-credit-log-card td { padding: 10px; font-size: 0.92em; }
}

/* 選完付款方式後跳出的結果視窗 */
.payment-result-box { position: relative; max-width: 400px; padding: 24px; }
.payment-result-box h3 { margin: 0 0 14px; }
.payment-result-box p { margin: 4px 0; }

.payment-result-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 6px;
  background: none;
  box-shadow: none;
  text-decoration: none;
}
.payment-result-close:hover { color: var(--accent-dark); background: none; transform: none; }

.payment-result-amounts { margin-bottom: 14px; }
.payment-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  color: var(--muted);
}
.payment-result-row span small { display: block; font-size: 0.78em; color: var(--muted); margin-top: 2px; }
.payment-result-row strong { color: var(--text); }
.payment-result-row-highlight { border-bottom: none; padding-top: 10px; }
.payment-result-row-highlight strong { font-size: 1.35em; color: var(--accent-dark); }

.payment-result-box .bank-info { margin: 0 0 14px; padding: 12px 16px; }
.payment-result-box .bank-info p { margin: 3px 0; }
.payment-result-box .deposit-note { margin: 0 0 16px; }

.payment-result-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.payment-result-actions .btn, .payment-result-actions .btn-secondary { width: 100%; box-sizing: border-box; }
.payment-result-actions form { margin: 0; }

@media (max-width: 600px) {
  .member-item-table-wrap { border-radius: 12px; }
  .member-item-table th, .member-item-table td { padding: 10px; font-size: 0.92em; }
  .member-payment-panel { padding: 16px; }
}

/* 右下角跟隨捲動的浮動購物車與 LINE 連結圖示 */
.floating-line-links {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.floating-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 手機版收合用的小箭頭，桌機版不顯示 */
.floating-toggle { display: none; }

@media (max-width: 768px) {
  .floating-line-links {
    right: 0;
    align-items: flex-end;
  }

  .floating-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(168, 103, 111, 0.25);
    border-right: none;
    border-radius: 24px 0 0 24px;
    background: #fff;
    color: var(--accent-dark);
    font-size: 1.4em;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(168, 103, 111, 0.3);
    cursor: pointer;
  }

  .floating-toggle-badge {
    position: absolute;
    top: -8px;
    left: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-dark);
    color: #fff;
    font-size: 0.5em;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans TC", sans-serif;
  }

  /* 箭頭固定在最下方，按鈕往上方展開；按鈕收起時仍佔著空間（只是透明），所以展開前後箭頭高度不變 */
  .floating-line-links { pointer-events: none; }
  .floating-toggle { pointer-events: auto; }

  .floating-items { margin-right: 12px; }

  .floating-line-item {
    opacity: 0;
    transform: translateX(48px) scale(0.4);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .floating-toggle-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
  }

  .floating-toggle-badge { transition: opacity 0.2s ease; }

  .floating-line-links.open .floating-line-item {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* 依序彈出：最靠近箭頭的先出來，往上逐個跟著彈出 */
  .floating-line-links.open .floating-line-item:nth-child(3) { transition-delay: 0s; }
  .floating-line-links.open .floating-line-item:nth-child(2) { transition-delay: 0.08s; }
  .floating-line-links.open .floating-line-item:nth-child(1) { transition-delay: 0.16s; }

  .floating-line-links.open .floating-toggle-badge { opacity: 0; }
  .floating-line-links.open .floating-toggle-arrow { transform: rotate(180deg); }
}

.floating-cart {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(168, 103, 111, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6em;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(168, 103, 111, 0.35);
  transition: transform 0.15s;
}

.floating-cart:hover { transform: translateY(-2px); }

/* 加入購物車動畫：按鈕本身不變，浮動購物車按鈕閃動一下（見 cartAnimation.js） */
@keyframes cartBump {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(168, 103, 111, 0.35); }
  50% { transform: scale(1.35); box-shadow: 0 0 20px 6px rgba(217, 119, 87, 0.75); }
}

.cart-bump { animation: cartBump 0.4s ease; }

.floating-line-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.floating-line-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #06c755;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 16px rgba(6, 199, 85, 0.35);
  transition: transform 0.15s;
}

.floating-line-item:hover .floating-line-circle { transform: translateY(-2px); }

.floating-line-label {
  font-size: 0.68em;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  padding: 1px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}

.floating-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-dark);
  color: #fff;
  font-size: 0.5em;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans TC", sans-serif;
}

/* 全站頁尾：滿版顯示，不受 main 寬度限制 */
.site-footer {
  margin-top: 48px;
  background: var(--card);
  border-top: 2px solid var(--border);
  padding: 40px 40px 24px;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .site-footer { padding: 24px 20px 16px; }
  .footer-inner { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { max-width: none; }
  .footer-col h3 { font-size: 0.9em; margin-bottom: 8px; }
  .footer-col ul { gap: 6px; }
  .footer-col a, .footer-muted { font-size: 0.8em; }
  .footer-bottom { margin-top: 20px; padding-top: 14px; }
}

.footer-brand { display: flex; gap: 12px; }

.footer-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6em;
  flex-shrink: 0;
}

.footer-brand-name {
  font-family: "Baloo 2", "Noto Sans TC", sans-serif;
  font-weight: 800;
  font-size: 1.15em;
  color: #5c4249;
}

.footer-tagline { color: var(--muted); font-size: 0.9em; margin: 6px 0 0; max-width: 320px; }

.footer-col h3 { font-size: 1em; margin: 0 0 12px; color: #5c4249; }

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a, .footer-muted {
  font-size: 0.9em;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.footer-col a:hover { color: var(--accent-dark); }
.footer-muted { color: var(--muted); }

.footer-bottom {
  max-width: 1280px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.footer-credit { color: var(--muted); }

/* 許願樹 */
.wish-tree-page { max-width: 1100px; }
.wish-tree-intro { color: var(--muted); margin-top: -8px; }

.wish-tree-stage {
  position: relative;
  max-width: 820px;
  margin: 24px auto 0;
  container-type: inline-size;
}

.wish-tree-img { width: 100%; height: auto; display: block; }

.wish-tree-tags { position: absolute; inset: 0; }

/* 樹上的吊牌用許願掛牌圖檔呈現，木牌上疊一個圓形商品縮圖，不顯示商品名稱，點擊才放大查看詳細內容 */
.wish-tag {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 8.8cqw;
  height: 11.5cqw;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.15s ease;
}
.wish-tag:hover { transform: translate(-50%, -50%) scale(1.25); background: none; box-shadow: none; }
.wish-tag-plaque { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* 圓形商品縮圖疊在木牌中間偏下的位置（木牌圖片頂端的繩結留空） */
.wish-tag-photo {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  width: 56%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.wish-tag-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wish-tag-photo-placeholder { font-size: 1em; }

/* 願望數量不足時的禮物掛牌：稍微淡化表示還沒被許願，點擊可前往下方表單填寫 */
.wish-tag-placeholder { opacity: 0.85; }

/* 固定散佈在樹冠範圍內的 10 個吊牌位置，最新的願望依序輪流顯示在這些位置上 */
.wish-tag-slot-0 { top: 16%; left: 45%; }
.wish-tag-slot-1 { top: 30%; left: 20%; }
.wish-tag-slot-2 { top: 26%; left: 76%; }
.wish-tag-slot-3 { top: 42%; left: 14%; }
.wish-tag-slot-4 { top: 44%; left: 68%; }
.wish-tag-slot-5 { top: 58%; left: 38%; }
.wish-tag-slot-6 { top: 16%; left: 33%; }
.wish-tag-slot-7 { top: 36%; left: 89%; }
.wish-tag-slot-8 { top: 60%; left: 80%; }
.wish-tag-slot-9 { top: 56%; left: 8%; }

/* 點樹上吊牌彈出的放大詳情視窗：用 scale+opacity 做放大動畫，開啟瞬間先設回初始狀態，
   下一輪畫面再加上 .zoomed 觸發 transition，才會真的播放出「放大」的效果 */
.wish-detail-box {
  position: relative;
  background: var(--card);
  border-radius: 20px;
  padding: 28px 24px 24px;
  max-width: 360px;
  max-height: 85vh;
  width: 100%;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.wish-detail-box.zoomed { transform: scale(1); opacity: 1; }

/* 願望內容預覽視窗：商品名稱放大強調，各區塊間距拉開，底部愛心列加上明確的分隔與間距 */
.wish-detail-box #wishDetailName { font-size: 1.2em; font-weight: 700; }
.wish-detail-box #wishDetailNote { margin-top: 6px; }
.wish-detail-box .wish-card-footer { margin-top: 16px; padding-top: 12px; }

/* 按愛心的人清單直接往下接在小視窗裡，筆數多時自己捲動，不會把整個視窗撐爆 */
.wish-detail-likes {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* .wish-detail-photo 也是 position:relative（給商品連結疊字用），跟關閉按鈕一樣變成定位元素後
   會照 DOM順序疊層、蓋過前面的關閉按鈕，這裡明確把關閉按鈕的 z-index 墊高，確保永遠在最上層 */
#wishDetailClose { z-index: 2; }

.wish-detail-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.wish-detail-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wish-detail-photo .product-photo-placeholder { font-size: 3em; }

/* 按愛心前的留言小視窗 */
.wish-like-msg-box {
  position: relative;
  background: var(--card);
  border-radius: 20px;
  padding: 28px 24px 24px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.wish-like-msg-box.zoomed { transform: scale(1); opacity: 1; }
.wish-like-msg-title { font-weight: 700; margin: 0 0 12px; padding-right: 20px; }
.wish-like-msg-box textarea {
  width: 100%;
  resize: none;
  font-family: inherit;
  font-size: 0.95em;
  border-radius: 12px;
}
.wish-like-msg-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.wish-like-msg-actions button { width: 100%; margin: 0; }

/* 「按愛心的人」清單視窗 */
.wish-likes-box { max-width: 380px; max-height: 80vh; display: flex; flex-direction: column; }
.wish-likes-title { font-size: 1.1em; margin: 0 0 14px; padding-right: 20px; }
.wish-likes-list { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.wish-likes-row {
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 10px 14px;
}
.wish-likes-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wish-likes-row-name { font-weight: 700; color: var(--accent-dark); }
.wish-likes-row-time { font-size: 0.78em; color: var(--muted); white-space: nowrap; }
.wish-likes-row-msg { margin: 4px 0 0; font-size: 0.9em; color: #6b4c50; font-style: italic; }
.wish-likes-empty, .wish-likes-loading { color: var(--muted); text-align: center; margin: 12px 0; }

.wish-form-plaque {
  max-width: 420px;
  margin: 8px auto 32px;
  background: #fffaf3;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 24px 24px 20px;
  position: relative;
}
.wish-form-plaque::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 14px;
  background: var(--muted);
}
.wish-form-plaque button[type="submit"] { width: 100%; margin-top: 12px; }
.wish-login-hint { text-align: center; color: var(--muted); margin: 0; }

.wish-wall-intro { color: var(--muted); margin-top: -8px; }
.wish-wall-grid { margin-top: 16px; gap: 20px; }
.wish-wall-empty { grid-column: 1 / -1; white-space: nowrap; }

/* 願望牆卡片：照片貼齊卡片邊緣撐到最大，底下文字區塊才留內距，視覺上跟商品卡片一致 */
.wish-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.wish-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(168, 103, 111, 0.18);
}
.wish-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 圖片用絕對定位脫離排版，避免長寬比極端的照片撐開容器，導致框架跑掉不是正方形 */
.wish-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.wish-card-photo-placeholder { font-size: 2.6em; }
.wish-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.wish-card-name { font-weight: 700; font-size: 1.05em; }
/* 商品連結疊在照片右下角：純文字加底線，不做成按鈕，白字＋陰影確保在任何照片上都看得清楚 */
.wish-card-link {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 0.82em;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.wish-card-link:hover { color: var(--accent-soft); }
.wish-card-note { color: var(--muted); font-size: 0.88em; margin: 0; font-style: italic; }
.wish-card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wish-card-member { color: var(--muted); font-size: 0.85em; }
.wish-like-form { margin: 0; }
.wish-like-btn {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 1.05em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.wish-like-btn:hover { background: var(--accent); color: #fff; }
.wish-like-btn.active { background: #f6c3cb; border-color: var(--accent); color: #d9455a; }
/* 愛心符號本身在這個字型裡偏高，往下挪一點跟旁邊的數字對齊 */
.wish-like-icon { position: relative; top: 2px; font-size: 1.15em; }

/* 發送願望的飛向樹上特效：固定定位覆蓋層，掛牌從送出按鈕飛向樹，沿路有星光尾巴，落地後綻放光點 */
.wish-fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: visible; }

.wish-fly-tag { position: fixed; left: 0; top: 0; width: 80px; height: 106px; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(168, 103, 111, 0.45)); }
.wish-fly-plaque { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.wish-fly-photo {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  width: 56%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  font-size: 1.3em;
}
.wish-fly-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wish-fly-spark, .wish-burst-particle {
  position: fixed;
  left: 0;
  top: 0;
  font-size: 28px;
  line-height: 1;
  pointer-events: none;
}

.wish-tree-img.wish-tree-glow {
  animation: wishTreeGlowPulse 0.9s ease;
}
@keyframes wishTreeGlowPulse {
  0% { filter: drop-shadow(0 0 0 rgba(255, 214, 153, 0)); }
  35% { filter: drop-shadow(0 0 30px rgba(255, 214, 153, 0.95)); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 214, 153, 0)); }
}

/* 樹中央固定保留一個「我要許願」位置：預設是灰底虛線邀請文字，點擊捲動到下方表單；
   送出願望後只有本人這次瀏覽會看到自己剛許下的願望掛牌（放大顯示），重新整理頁面會恢復成預留狀態 */
.wish-tag-center {
  position: absolute;
  top: 40%;
  left: 49%;
  transform: translate(-50%, -50%);
  width: 15.9cqw;
  height: 20.7cqw;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.15s ease;
  z-index: 5;
}
.wish-tag-center:hover { transform: translate(-50%, -50%) scale(1.08); background: none; box-shadow: none; }

/* 預留掛牌的外框直接用掛牌圖檔本身的形狀當遮罩，填上斜紋灰底，輪廓跟真的掛牌一致，不用另外準備圖檔 */
.wish-center-placeholder-shape {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url(/images/wish-plaque.png);
  mask-image: url(/images/wish-plaque.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: repeating-linear-gradient(135deg, #f9d9ae 0 6px, #fdf3e7 6px 12px);
  opacity: 0.9;
}
.wish-center-placeholder-label {
  position: absolute;
  left: 50%;
  top: 74%;
  transform: translate(-50%, -50%);
  width: 70%;
  text-align: center;
  color: #7a4d44;
  font-weight: 700;
  font-size: 2.8cqw;
  line-height: 1.3;
}

.wish-tag-center .wish-tag-plaque,
.wish-tag-center .wish-tag-photo { display: none; }

.wish-tag-center.is-filled .wish-center-placeholder-shape,
.wish-tag-center.is-filled .wish-center-placeholder-label { display: none; }
.wish-tag-center.is-filled .wish-tag-plaque { display: block; }
.wish-tag-center.is-filled .wish-tag-photo { display: flex; }

/* 扭蛋機頁面 */
.gacha-page { max-width: 1100px; }
.gacha-intro { color: var(--muted); margin-top: -8px; }

/* 機台＋按鈕的展示舞台卡片：用淺粉漸層背景跟星星點綴把機台襯托出來，不會直接浮在頁面空白背景上 */
.gacha-showcase {
  position: relative;
  background: radial-gradient(circle at 50% 0%, #fdf2f6 0%, #fbe7ee 55%, #f7dde6 100%);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 36px 20px 28px;
  margin: 20px 0 32px;
  box-shadow: 0 16px 32px rgba(168, 103, 111, 0.14);
  overflow: hidden;
}
.gacha-showcase-sparkle {
  position: absolute;
  color: #f0bdd0;
  pointer-events: none;
  animation: gacha-sparkle-twinkle 2.4s ease-in-out infinite;
}
.gacha-showcase-sparkle-1 { top: 16%; left: 12%; font-size: 1.2em; animation-delay: 0s; }
.gacha-showcase-sparkle-2 { top: 60%; left: 8%; font-size: 0.8em; animation-delay: 0.8s; }
.gacha-showcase-sparkle-3 { top: 22%; right: 10%; font-size: 1em; animation-delay: 1.5s; }
@keyframes gacha-sparkle-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1.15); }
}

.gacha-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.gacha-machine { width: 220px; margin: 0 auto; position: relative; }
/* 機台腳下的淡影子，讓機台看起來是「站」在舞台上，不是懸空貼在背景上 */
.gacha-floor-shadow {
  width: 130px;
  height: 14px;
  margin: 4px auto 0;
  background: radial-gradient(ellipse at center, rgba(168, 103, 111, 0.28) 0%, rgba(168, 103, 111, 0) 72%);
  border-radius: 50%;
}
@keyframes gacha-shake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-5deg); }
  30% { transform: rotate(5deg); }
  45% { transform: rotate(-4deg); }
  60% { transform: rotate(4deg); }
  75% { transform: rotate(-2deg); }
  90% { transform: rotate(2deg); }
}

/* 透明罩是正圓形：寬高相等 + border-radius:50%，裡面的扭蛋用座標分散避免被圓形邊緣裁掉；
   故意比機身寬，是經典扭蛋機「上面大圓罩、下面窄機身」的造型 */
.gacha-dome {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #f5fcff 0%, #cdeaf4 45%, #9fd0e4 85%);
  border: 7px solid #fff;
  box-shadow: 0 10px 20px rgba(168, 103, 111, 0.2), inset 0 -14px 20px rgba(120, 165, 188, 0.35), inset 0 10px 14px rgba(255, 255, 255, 0.6);
  overflow: hidden;
  z-index: 1;
}
/* 玻璃罩左上角的反光亮斑，讓透明罩看起來更有質感 */
.gacha-dome-shine {
  position: absolute;
  top: 12%;
  left: 18%;
  width: 46%;
  height: 26%;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  transform: rotate(-25deg);
  filter: blur(1px);
  pointer-events: none;
}
.gacha-capsule-dot {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* top/left 原本定位的是扭蛋的左上角，不是圓心，這會讓「堆疊不重疊/不留空隙」的座標算起來很不直覺，
     而且越偏離罩子中心、誤差越大；用 translate(-50%,-50%) 把 top/left 的基準點改成圓心，後面所有座標
     才能直接當作「這顆扭蛋圓心要在罩子的這個百分比位置」來算，不用再換算 */
  transform: translate(-50%, -50%);
  /* 跟掉出來的 .gacha-capsule 用同一套上白下彩色的漸層，樣式才會一致，不用額外的光澤或陰影 */
  background: linear-gradient(180deg, #fff 0%, #fff 50%, var(--dot-color) 50%, var(--dot-color) 100%);
  /* 平常彈動是用 transform（keyframe），不會動到 top/left；只有「排列堆疊」換位置時才會改 top/left，
     這裡的 transition 只對那個換位置的瞬間生效 */
  transition: top 0.5s cubic-bezier(0.3, 0.6, 0.3, 1.2), left 0.5s cubic-bezier(0.3, 0.6, 0.3, 1.2);
}
/* 這裡的 top/left 只是 JS 還沒執行前的備援預設值（一開始就是堆在罩子底部的樣子），
   實際位置由 JS 的 settleCapsulePile() 隨機計算後蓋成 inline style，每次晃動完都會重新算一次，
   讓每次堆疊的長相都不一樣；transition-delay 讓晃動停止、掉回去時陸續落地，不是同時停住 */
.gacha-capsule-dot:nth-child(2) { top: 84%; left: 28.3%; --dot-color: #f5b6c2; transition-delay: 0.05s; }
.gacha-capsule-dot:nth-child(3) { top: 84%; left: 42.8%; --dot-color: #ffe08a; transition-delay: 0.14s; }
.gacha-capsule-dot:nth-child(4) { top: 84%; left: 57.2%; --dot-color: #c9b6f0; transition-delay: 0s; }
.gacha-capsule-dot:nth-child(5) { top: 84%; left: 71.7%; --dot-color: #b6e8c9; transition-delay: 0.2s; }
.gacha-capsule-dot:nth-child(6) { top: 71.5%; left: 35.5%; --dot-color: #f5b6c2; transition-delay: 0.26s; }
.gacha-capsule-dot:nth-child(7) { top: 71.5%; left: 50%; --dot-color: #ffe08a; transition-delay: 0.1s; }
.gacha-capsule-dot:nth-child(8) { top: 71.5%; left: 64.5%; --dot-color: #bfe3f0; transition-delay: 0.32s; }
.gacha-capsule-dot:nth-child(9) { top: 58.9%; left: 42.8%; --dot-color: #c9b6f0; transition-delay: 0.38s; }
.gacha-capsule-dot:nth-child(10) { top: 58.9%; left: 57.2%; --dot-color: #b6e8c9; transition-delay: 0.44s; }
.gacha-capsule-dot:nth-child(11) { top: 46.4%; left: 50%; --dot-color: #f5b6c2; transition-delay: 0.5s; }
.gacha-capsule-dot:nth-child(12) { top: 40%; left: 30%; --dot-color: #ffe08a; transition-delay: 0.08s; }
.gacha-capsule-dot:nth-child(13) { top: 40%; left: 70%; --dot-color: #bfe3f0; transition-delay: 0.18s; }
.gacha-capsule-dot:nth-child(14) { top: 55%; left: 20%; --dot-color: #c9b6f0; transition-delay: 0.28s; }
.gacha-capsule-dot:nth-child(15) { top: 55%; left: 80%; --dot-color: #b6e8c9; transition-delay: 0.36s; }
.gacha-capsule-dot:nth-child(16) { top: 33%; left: 50%; --dot-color: #f5b6c2; transition-delay: 0.46s; }
.gacha-capsule-dot:nth-child(17) { top: 65%; left: 50%; --dot-color: #ffe08a; transition-delay: 0.22s; }

/* 玻璃罩跟機身之間的收口：往上拉一點疊在玻璃罩下緣，讓粉色機身壓在透明罩上面，銜接更自然 */
.gacha-collar {
  width: 86px;
  height: 14px;
  margin: -16px auto 0;
  background: linear-gradient(180deg, #e8a9bd 0%, #e287a5 100%);
  border-radius: 4px;
  position: relative;
  z-index: 2;
}

.gacha-body {
  position: relative;
  z-index: 2;
  width: 190px;
  height: 120px;
  margin: 0 auto;
  border-radius: 10px 10px 22px 22px;
  background: linear-gradient(180deg, #f0a8c0 0%, #dd7f9e 100%);
  box-shadow: 0 10px 18px rgba(168, 103, 111, 0.22);
  overflow: hidden;
}
/* 機身上緣的光澤條，呼應玻璃罩的反光質感 */
.gacha-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}
.gacha-coin-slot {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 7px;
  border-radius: 4px;
  background: #4a3a3c;
  opacity: 0.3;
}
.gacha-knob {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  /* 轉柄加大、顏色加深加粗、外圈再疊一圈深色描邊，跟機身的粉色拉開對比，一眼就看得出這是可以轉動的旋鈕 */
  box-shadow: 0 0 0 2px rgba(74, 58, 60, 0.35), inset 0 0 0 8px #d9547e, 0 3px 6px rgba(0, 0, 0, 0.3);
}
/* 搖晃結束後，轉柄轉一圈再掉扭蛋，像真的扭了一下才出貨；.gacha-knob-grip 是轉柄子元素，會跟著父層一起轉 */
.gacha-knob.is-turning { animation: gacha-knob-turn 0.55s ease-in-out; }
@keyframes gacha-knob-turn {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}
.gacha-knob-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 16px;
  background: #d9547e;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(74, 58, 60, 0.25);
}
/* 全螢幕特效裡的扭蛋機可以點擊：點機台晃動、點轉柄才真正抽獎，所以滑鼠移上去要有手指游標 */
#gachaSpinMachine .gacha-machine { cursor: pointer; }
/* 轉柄旁邊的箭頭提示，用 JS 動態加在轉柄旁邊，提示玩家要點轉柄才會抽獎；點下轉柄後就會被移除 */
.gacha-knob-hint {
  position: absolute;
  top: 34px;
  left: 117px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: gacha-hint-pulse 1s ease-in-out infinite;
}
.gacha-window {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
}
.gacha-window-chute {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 16px;
  border-radius: 5px;
  background: #4a3a3c;
  opacity: 0.3;
}

.gacha-legs {
  width: 150px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.gacha-legs span {
  width: 16px;
  height: 10px;
  border-radius: 0 0 4px 4px;
  background: #c76f8c;
}

.gacha-capsule {
  --capsule-color: #f5b6c2;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #fff 50%, var(--capsule-color) 50%, var(--capsule-color) 100%);
  cursor: default;
}
.gacha-capsule.is-ready {
  cursor: pointer;
  /* 上下浮動 + 光暈脈動兩個動畫疊加，提示玩家這顆可以點擊開啟 */
  animation: gacha-capsule-bob 1.2s ease-in-out infinite, gacha-capsule-glow 1.4s ease-in-out infinite;
}
@keyframes gacha-capsule-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes gacha-capsule-glow {
  0%, 100% { box-shadow: 0 6px 14px rgba(168, 103, 111, 0.25), 0 0 0 0 rgba(255, 224, 138, 0.55); }
  60% { box-shadow: 0 6px 14px rgba(168, 103, 111, 0.25), 0 0 0 16px rgba(255, 224, 138, 0); }
}

/* 抽獎全螢幕特效：灰色遮罩 + 放大版扭蛋機（JS 複製一份塞進 #gachaSpinMachine，不影響頁面上原本那台） */
.gacha-spin-overlay {
  position: fixed;
  inset: 0;
  /* 用不透明的純色，不要半透明：半透明的話底下頁面上那台沒放大的扭蛋機會隱約透出來，
     看起來像跟掉出來的扭蛋疊在一起 */
  background: #1f1316;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  z-index: 55;
  opacity: 0;
  transition: opacity 0.25s ease;
  padding: 40px 20px;
}
.gacha-spin-overlay.open { display: flex; opacity: 1; }
.gacha-spin-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* 放大跟搖晃故意分開放在兩層元素：外層 #gachaSpinMachine 負責放大（transition 讓它「逐漸放大」），
   內層 .gacha-machine 負責搖晃（keyframe 動畫）。兩個都是改 transform，疊在同一個元素上動畫會蓋過
   transition 的值，放大跟搖晃只會剩下一個生效，所以拆成兩層各自管各自的 transform 才不會互相蓋掉；
   transform-origin 設成頂部，放大時只會往下撐開，不會往上超出螢幕範圍 */
#gachaSpinMachine {
  transform: scale(1);
  transform-origin: top center;
  transition: transform 1.3s cubic-bezier(0.3, 0.8, 0.4, 1.15);
}
.gacha-spin-overlay.is-zoomed #gachaSpinMachine { transform: scale(2.1); }
#gachaSpinMachine .gacha-machine.is-shaking { animation: gacha-shake 0.5s ease-in-out infinite; }

/* 搖晃特效進行時，透明罩裡的扭蛋各自在罩內隨機亂彈；位置改由 JS 每隔一小段時間就重新隨機算一次
   （見 gacha.ejs 的 startCapsuleJitter），不是固定來回跑同一組座標的 keyframe 迴圈，看起來才不會
   每次晃動都是一模一樣的路徑、顯得死板。這裡只負責讓每次隨機換位置時的過渡夠快、夠俐落 */
#gachaSpinMachine .gacha-machine.is-shaking .gacha-capsule-dot {
  transition: top 0.1s ease-out, left 0.1s ease-out, transform 0.1s ease-out;
}

/* 扭蛋落地瞬間的 Q 彈擠壓：先橫向壓扁、再反彈拉長一點點才停住，球體落地的彈性感 */
/* 擠壓動畫期間要保留扭蛋原本的旋轉角度（--dot-rot，JS 觸發動畫時會設定），不然 transform
   被這個 animation 整個蓋過去，扭蛋會在播放的瞬間先「跳回」沒有旋轉的角度，動畫結束後
   又跳回原本的角度，看起來就像定位後又額外轉了一下 */
@keyframes gacha-dot-land {
  0% { transform: translate(-50%, -50%) rotate(var(--dot-rot, 0deg)) scale(1, 1); }
  40% { transform: translate(-50%, -50%) rotate(var(--dot-rot, 0deg)) scale(1.25, 0.72); }
  70% { transform: translate(-50%, -50%) rotate(var(--dot-rot, 0deg)) scale(0.92, 1.08); }
  100% { transform: translate(-50%, -50%) rotate(var(--dot-rot, 0deg)) scale(1, 1); }
}
.gacha-capsule-dot.is-landing { animation: gacha-dot-land 0.32s ease-out; }

.gacha-spin-output {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  transition: margin-top 1.3s cubic-bezier(0.3, 0.8, 0.4, 1.15);
}
/* 扭蛋機放大後，視覺上的機身範圍比它原本排版佔的空間大很多（transform:scale 不會撐開排版），
   這裡額外往下推一段距離，讓掉出來的扭蛋落在放大後機身的下方，而不是卡在機身中間 */
.gacha-spin-overlay.is-zoomed .gacha-spin-output { margin-top: 380px; }
.gacha-spin-hint {
  color: #fff;
  font-weight: 700;
  font-size: 1.05em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  animation: gacha-hint-pulse 1s ease-in-out infinite;
}
@keyframes gacha-hint-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.gacha-action { text-align: center; margin: 22px 0 0; position: relative; z-index: 1; }
.gacha-action button { font-size: 1.15em; padding: 15px 40px 9px; }
.gacha-action button:disabled { opacity: 0.5; cursor: not-allowed; }

.gacha-section-title { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }

/* 獎品清單改成跟願望牆／商品卡片一致的網格卡片，照片用正方形比例撐滿卡片上緣 */
.gacha-prize-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.gacha-prize-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gacha-prize-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(168, 103, 111, 0.16);
}
.gacha-prize-row.is-empty { opacity: 0.55; }
.gacha-prize-row.is-empty:hover { transform: none; box-shadow: none; }
.gacha-prize-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gacha-prize-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gacha-prize-icon { font-size: 2.2em; }
.gacha-prize-sold-out {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 58, 60, 0.45);
  color: #fff;
  font-weight: 700;
  font-size: 0.9em;
}
.gacha-prize-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.gacha-prize-name { font-weight: 700; }
.gacha-prize-remaining { color: var(--muted); font-size: 0.85em; }
.gacha-prize-empty { color: var(--muted); grid-column: 1 / -1; }

.gacha-mydraws-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.gacha-mydraws-arrow { display: inline-block; transition: transform 0.15s; }
.gacha-mydraws-toggle.is-open .gacha-mydraws-arrow { transform: rotate(180deg); }
.gacha-mydraws-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.gacha-mydraw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  transition: box-shadow 0.15s;
}
.gacha-mydraw-row:hover { box-shadow: 0 6px 14px rgba(168, 103, 111, 0.12); }
.gacha-mydraw-photo {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 8px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gacha-mydraw-photo img { width: 100%; height: 100%; object-fit: contain; }
.gacha-mydraw-name { flex: 1; font-weight: 700; }
.gacha-mydraw-status { color: var(--muted); font-size: 0.85em; }
.gacha-mydraw-time { color: var(--muted); font-size: 0.8em; white-space: nowrap; }
.gacha-mydraws-empty { color: var(--muted); }

.gacha-reveal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 58, 60, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.gacha-reveal-overlay.open { display: flex; }
.gacha-reveal-box {
  background: var(--card);
  border-radius: 20px;
  padding: 28px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}
.gacha-reveal-title { font-size: 1.3em; font-weight: 700; color: var(--accent-dark); margin-bottom: 14px; }
.gacha-reveal-overlay.is-miss .gacha-reveal-title { color: var(--muted); }
.gacha-reveal-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.gacha-reveal-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gacha-reveal-icon { font-size: 3.2em; }
.gacha-reveal-name { font-weight: 700; font-size: 1.1em; margin-bottom: 18px; }
.gacha-reveal-close { width: 100%; }

.gacha-burst-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.gacha-burst-particle { position: absolute; font-size: 1.4em; }

/* 手機版：預留掛牌放大到桌面版的 5 倍，周圍掛牌數量減少並改成不規則、零散但不集中的分布；
   這個區塊必須放在所有 .wish-tag / .wish-tag-center 基本樣式「之後」，
   否則同樣權重下會被後面的桌面版規則蓋過，手機版覆寫會失效 */
@media (max-width: 600px) {
  .wish-tag { width: 11cqw; height: 14.5cqw; }
  /* 預留掛牌太大，周圍掛牌疊放在上面才不會被蓋住看不見 */
  /* .wish-tree-tags 本身是鋪滿整個舞台的透明容器，疊在預留掛牌上面時要讓點擊穿透它，
     只有真正的掛牌按鈕才接收點擊，不然會擋住底下「我要許願」按鈕的點擊 */
  .wish-tree-tags { z-index: 6; pointer-events: none; }
  .wish-tree-tags .wish-tag { pointer-events: auto; }
  .wish-tag-center { width: 23.85cqw; height: 31.05cqw; z-index: 5; }
  .wish-center-placeholder-label { font-size: 4.2cqw; }
  .wish-tag-slot-7,
  .wish-tag-slot-8,
  .wish-tag-slot-9 { display: none; }

  .wish-tag-slot-0 { top: 14%; left: 40%; }
  .wish-tag-slot-1 { top: 18%; left: 64%; }
  .wish-tag-slot-2 { top: 28%; left: 22%; }
  .wish-tag-slot-3 { top: 26%; left: 76%; }
  .wish-tag-slot-4 { top: 50%; left: 13%; }
  .wish-tag-slot-5 { top: 48%; left: 86%; }
  .wish-tag-slot-6 { top: 68%; left: 32%; }
}

/* 手機版「所有願望掛牌」：改成兩欄小卡片，縮小內距與字級，整體更緊湊好瀏覽 */
@media (max-width: 600px) {
  .wish-wall-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
  .wish-card { border-radius: 14px; }
  .wish-card-photo-placeholder { font-size: 2em; }
  .wish-card-body { padding: 10px; gap: 4px; }
  .wish-card-name { font-size: 0.92em; }
  .wish-card-note { font-size: 0.78em; }
  .wish-card-footer { padding-top: 8px; gap: 4px; flex-wrap: wrap; }
  .wish-card-member { font-size: 0.75em; }
  .wish-like-btn { padding: 5px 12px; font-size: 0.9em; }
  .wish-card-link { font-size: 0.75em; right: 6px; bottom: 6px; }
}

/* 手機版扭蛋機：這個區塊必須放在檔案最後面，確保覆寫得了前面的桌面版樣式 */
@media (max-width: 600px) {
  .gacha-machine { width: 170px; }
  .gacha-dome { width: 170px; height: 170px; }
  .gacha-capsule-dot { width: 23px; height: 23px; }
  .gacha-collar { width: 68px; }
  .gacha-body { width: 150px; height: 100px; }
  .gacha-legs { width: 118px; }
  /* 機身變矮，轉柄維持桌機尺寸的話會壓到下方的透明出貨口，縮小並往上移、留出安全距離 */
  .gacha-knob {
    top: 23px;
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 1px rgba(74, 58, 60, 0.35), inset 0 0 0 5px #d9547e, 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  .gacha-knob-grip { width: 4px; height: 9px; }
  /* 機身變窄，提示文字空間跟著變少，縮小字級才不會被機身的 overflow:hidden 裁掉 */
  .gacha-knob-hint { left: 89px; font-size: 11px; }
  /* 手機螢幕較窄，放大倍數縮小一點避免超出畫面 */
  .gacha-spin-overlay.is-zoomed #gachaSpinMachine { transform: scale(1.5); }
  /* 放大倍數比桌機小，機身往外撐開的範圍也比較小，扭蛋掉落位置的往下推移量跟著縮小 */
  .gacha-spin-overlay.is-zoomed .gacha-spin-output { margin-top: 130px; }
  .gacha-capsule { width: 80px; height: 80px; }
}