/* ═══════════════════════════════════════════════════════════════
   🎁 禮盒頁 · 阿興師選禮顧問（2026-08-06）
   前綴 hh-gbai-。**只在手機（<1024）出現**：桌機禮盒是 #dtGiftbox（dgb-*）另一套版型。

   ⚠️⚠️ 圓角／色塊紀律（業主 2026-08-06 打槍初版「圓角膠囊太多、色塊太大」後定案）
   初版加了 9 個 999px 膠囊 ＋ 4 個圓形 ＋ 一塊 206px 深綠色塊，整組都在本頁語彙之外。
   本頁量出來的規範是：
     · 框類一律 **10px**（路徑卡／茶卡／盒款卡／推薦卡／確認卡／作品卡），縮圖 8px
     · 輸入框 **radius 0＝極簡底線**（見 .gb-search-box「搜尋茶款」那格，沒有框）
     · 膠囊 999px **只給角標徽章**（最快／已選 ✓／售罄）
     · 圓形 **只給步驟硬幣** 1・2・3
     · 色塊只有頁尾「企業作品」深墨綠識別帶（收尾，不在首屏）
   ⇒ 本檔全域只剩 **一個** 999px（.hh-gbai-badge／.hh-gbai-combo-tag 角標）、**零圓形**、
     **零深色塊**。新增元素請照這把尺，勿再引進膠囊或整片底色。
   ═══════════════════════════════════════════════════════════════ */

/* ── ① 頂部入口（hero 正下方）＝既有 .gb-path 卡語彙 ── */
.hh-gbai-bar {
  background: #fff;
  padding: 20px 20px 18px;
  border-top: 1px solid #efefef;
}
.hh-gbai-ask {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  position: relative;
  /* 米金 tint＋金線＝同 .gb-path.is-hot（「套用精選組合」那張的既有處理） */
  border: 1px solid rgba(168, 137, 79, 0.4);
  border-radius: 10px;
  background: linear-gradient(135deg, #fffdf6, #fbf6ea);
  padding: 14px 15px;
  margin: 0 0 10px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.hh-gbai-ask:active { transform: scale(0.99); }
.hh-gbai-ask:hover { border-color: rgba(148, 114, 62, 0.6); box-shadow: 0 4px 14px rgba(61, 97, 66, 0.1); }
/* 唯一允許的膠囊：角標徽章（同 .gb-path-badge） */
.hh-gbai-badge {
  position: absolute;
  top: -8px;
  left: 14px;
  background: #8a6a33;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 2px 9px;
}
/* icon 方磚＝同 .gb-path-ic（圓形頭像已退役） */
.hh-gbai-ic {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 10px;
  background: #eef3ea;
  color: #3d6142;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
.hh-gbai-ask-tt { flex: 1; min-width: 0; }
.hh-gbai-bar-title { display: block; font-size: 16px; font-weight: 800; color: #1e2e1c; }
.hh-gbai-bar-note { display: block; font-size: 12.5px; color: #5b6e56; margin-top: 2px; line-height: 1.6; }
.hh-gbai-go { flex: 0 0 auto; color: #8a6a33; font-size: 19px; }

.hh-gbai-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.hh-gbai-chips::-webkit-scrollbar { height: 0; }
.hh-gbai-barchip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #3a4a35;
  background: #fff;
  border: 1px solid rgba(47, 75, 51, 0.2);
  border-radius: 10px;
  padding: 11px 13px;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}
.hh-gbai-barchip:active { background: #f4f6f1; }

/* ── ② 浮動入口（頂部入口捲出視窗才出現）── */
.hh-gbai-fab {
  position: fixed;
  right: 14px;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px)); /* 底部 nav 之上 */
  z-index: 1560; /* > 禮盒面板 --z-member-screen:1550，< overlay 家族 */
  display: flex;
  align-items: center;
  gap: 8px;
  /* 米白底＋金線＋10px：深綠膠囊已退役（業主：色塊太大、膠囊太多） */
  background: #fffdf6;
  color: #2b3f28;
  border: 1px solid rgba(168, 137, 79, 0.5);
  border-radius: 10px;
  padding: 9px 14px 9px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(38, 55, 34, 0.18);
  cursor: pointer;
  min-height: 46px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.94);
  transition: opacity 0.24s, transform 0.24s, visibility 0.24s;
}
.hh-gbai-fab.is-on { opacity: 1; visibility: visible; transform: none; }
.hh-gbai-fab .hh-gbai-ic { width: 26px; height: 26px; flex: 0 0 26px; font-size: 14px; border-radius: 7px; }

/* 面板沒開時不該有浮鈕（fixed 不受祖先隱藏影響，故顯式跟著面板開闔） */
body:not(.hh-giftbox-open) .hh-gbai-fab { display: none; }
/* 桌機走 #dtGiftbox，本套件整組不出現 */
@media (min-width: 1024px) {
  .hh-gbai-bar, .hh-gbai-fab { display: none !important; }
}

/* ── ③ 對話 sheet ── */
/* 霧化＝ variables.css 的 --hh-scrim-blur 單一真相（本檔不自寫 blur 值；
   `.hh-gbai-overlay` 已登記在那份手抄名單裡，由 test-overlay-registry.mjs 擋漏） */
.hh-gbai-overlay {
  position: fixed;
  inset: 0;
  z-index: 10060;
}
/* 可淡化的深色紗：拖曳關閉時與位移耦合（故與根節點分開，根節點淡掉會把面板一起吃掉） */
.hh-gbai-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 19, 0.5);
  opacity: 0;
  transition: opacity 0.28s;
}
.hh-gbai-overlay.is-open .hh-gbai-scrim { opacity: 1; }
.hh-gbai-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  max-height: 88dvh; /* vh 行是舊 Safari fallback，勿刪 */
  background: #f8f6ef;
  border-radius: 20px 20px 0 0; /* 面板級 20px＝全站 sheet 標準（購物車/選單同級） */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.hh-gbai-overlay.is-open .hh-gbai-panel { transform: none; }

/* 標頭：深綠色塊已退役 → 白底＋金髮絲線 */
.hh-gbai-hd {
  flex: 0 0 auto;
  padding: 15px 16px 13px;
  background: #fff;
  border-bottom: 1px solid rgba(168, 137, 79, 0.35);
  display: flex;
  align-items: center;
  gap: 11px;
}
.hh-gbai-hd .hh-gbai-ic { width: 34px; height: 34px; flex: 0 0 34px; font-size: 18px; }
.hh-gbai-tt { flex: 1; min-width: 0; }
.hh-gbai-tt b {
  display: block;
  font-family: var(--font-serif, 'Noto Serif TC'), serif;
  font-size: 16px;
  font-weight: 700;
  color: #1e2e1c;
}
.hh-gbai-tt > span { display: block; font-size: 11.5px; color: #5b6e56; margin-top: 1px; }
/* 關閉＝裸 ✕（圓底已退役）。視覺 19px、觸控 44px 靠 ::after 撐 */
.hh-gbai-x {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: #6b7364;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hh-gbai-x::after { content: ''; position: absolute; inset: -6px; }

.hh-gbai-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 15px 16px 8px;
}

.hh-gbai-ft {
  flex: 0 0 auto;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #f8f6ef;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* 輸入＝極簡底線，同本頁 .gb-search-box「搜尋茶款」那格（膠囊框已退役） */
.hh-gbai-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #d0deca;
  border-radius: 0;
  padding: 4px 0;
  transition: border-color 0.2s;
}
.hh-gbai-input:focus-within { border-color: #3d6142; }
.hh-gbai-input > i { color: #a0b89a; font-size: 15px; flex: 0 0 auto; }
.hh-gbai-input input {
  flex: 1;
  min-width: 0;
  padding: 13px 0; /* 自身就要 ≥44px：只有父層夠高沒用，點在 padding 上不會聚焦 */
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px; /* ⚠️ iOS 聚焦自動放大防線，勿降 */
  color: #2c3a29;
  outline: none;
}
.hh-gbai-input button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 10px;
  background: #2f4b33;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ── 對話泡泡（14px → 10px 框類基準） ── */
.hh-gbai-bub {
  max-width: 84%;
  font-size: 14px;
  line-height: 1.72;
  border-radius: 10px;
  padding: 11px 13px;
  margin: 0 0 10px;
  animation: hhGbaiIn 0.26s ease-out;
}
@keyframes hhGbaiIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.hh-gbai-bub.is-ai {
  background: #fff;
  color: #2c3a29;
  border: 1px solid rgba(47, 75, 51, 0.1);
  border-top-left-radius: 3px;
}
.hh-gbai-bub.is-ai em { font-style: normal; color: #8a6a33; font-weight: 700; }
.hh-gbai-bub.is-me {
  background: #2f4b33;
  color: #f4efe2;
  margin-left: auto;
  border-top-right-radius: 3px;
}

.hh-gbai-chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.hh-gbai-chip {
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #3a4a35;
  background: #fff;
  border: 1px solid rgba(47, 75, 51, 0.2);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}
.hh-gbai-chip:active { background: #f4f6f1; }

/* ── 推薦組合卡（語彙同 .gb-rec-card，多一條「為什麼推薦」） ── */
.hh-gbai-combo {
  background: #fff;
  border: 1px solid rgba(168, 137, 79, 0.4);
  border-radius: 10px;
  padding: 13px;
  margin: 0 0 11px;
  position: relative;
}
.hh-gbai-combo.is-best { background: linear-gradient(135deg, #fffdf6, #fbf6ea); margin-top: 8px; }
.hh-gbai-combo-tag {
  position: absolute;
  top: -8px;
  left: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: #8a6a33;
  border-radius: 999px; /* 角標徽章＝本頁唯一允許的膠囊 */
  padding: 2px 9px;
}
.hh-gbai-combo-nm {
  font-family: var(--font-serif, 'Noto Serif TC'), serif;
  font-size: 17px;
  font-weight: 700;
  color: #1e2e1c;
  margin: 2px 0 8px;
}
.hh-gbai-combo-thumbs { display: flex; gap: 7px; margin: 0 0 9px; }
.hh-gbai-combo-thumbs i {
  flex: 1;
  aspect-ratio: 4 / 3;
  border-radius: 8px; /* 縮圖 8px＝同 .gb-rec-thumbs */
  background: #e8ede4 center / cover no-repeat;
}
.hh-gbai-combo-teas { font-size: 13px; color: #4c5346; margin: 0 0 8px; line-height: 1.6; }
.hh-gbai-why {
  display: flex;
  gap: 7px;
  background: #f4f6f1;
  border-left: 2px solid #8a6a33;
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
  margin: 0 0 10px;
}
.hh-gbai-why i { color: #8a6a33; font-size: 14px; flex: 0 0 auto; margin-top: 1px; }
.hh-gbai-why p { margin: 0; font-size: 12.5px; line-height: 1.65; color: #4c5346; }
.hh-gbai-combo-foot { display: flex; align-items: center; gap: 10px; }
.hh-gbai-combo-price { flex: 1; font-size: 17px; font-weight: 800; color: #2f4b33; }
.hh-gbai-combo-price s { display: block; font-size: 11.5px; font-weight: 400; color: #6b7364; text-decoration: none; }
.hh-gbai-apply {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #2f4b33;
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}

.hh-gbai-actions { margin: 4px 0 14px; }
.hh-gbai-alt {
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #4c5346;
  background: transparent;
  border: 1px dashed rgba(168, 137, 79, 0.5);
  border-radius: 10px;
  padding: 11px 0;
  font-family: inherit;
  margin: 0 0 8px;
  cursor: pointer;
  min-height: 44px;
}
.hh-gbai-restart {
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #5b6e56;
  background: none;
  border: 0;
  padding: 10px 0;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── ④ 落位動效（2026-08-06 業主拍板「動效也加」）──
   目的不是好看，是回答「我按了一鍵套用，我選的兩款茶去哪了」——套用後 sheet 關閉、
   畫面捲到 STEP 3，客人沒親眼看到選擇落地，只看得到一個 toast。
   兩張茶照從卡片飛到確認卡的第一款/第二款那兩列，落下時該列亮一下。
   ⚠️ 全部在 prefers-reduced-motion 時跳過（見檔尾）。 */
.hh-gbai-fly {
  position: fixed;
  z-index: 10070; /* 高於 sheet：sheet 正在關，飛行物要看得見 */
  /* ⚠️ 必須 0 0：預設 50% 50% 會讓縮放繞中心發生，落點視覺上偏移
     (原寬 × (1−縮放) / 2) ≈ 45–64px（實測飛到下一列去了）。
     JS 的 dx/dy 是以左上角為基準算的，兩邊要對齊。 */
  transform-origin: 0 0;
  border-radius: 8px;
  background: #e8ede4 center / cover no-repeat;
  box-shadow: 0 8px 22px rgba(31, 46, 28, 0.3);
  pointer-events: none;
  will-change: transform, opacity;
}
/* 落點提示：確認卡那一列亮一下（金色掃過） */
@keyframes hhGbaiLand {
  0% { background-color: rgba(168, 137, 79, 0.24); }
  100% { background-color: transparent; }
}
.gb-confirm-row.hh-gbai-landed { animation: hhGbaiLand 0.8s ease-out; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .hh-gbai-panel, .hh-gbai-fab, .hh-gbai-ask { transition: none; }
  .hh-gbai-bub, .hh-gbai-scrim { animation: none; opacity: 1; }
  .gb-confirm-row.hh-gbai-landed { animation: none; }
}