/* Backend-managed content for the member app (2026-09):
   carousel banners, the open-app popup, and Instagram-style 消息 cards.

   A NEW stylesheet rather than additions to app2.css: static files are
   served live to BOTH dev and prod from the shared custom-addons path,
   so touching app2.css would change prod's look before prod's own -u. */

/* ── Carousel ─────────────────────────────────────────────────────── */
.hh-carousel{position:relative;margin:0 0 14px;border-radius:16px;overflow:hidden;
  background:rgba(0,0,0,.04)}
.hh-carousel-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform}
.hh-slide{flex:0 0 100%;min-width:0}
.hh-slide a,.hh-slide img{display:block;width:100%}
.hh-slide img{height:auto;object-fit:cover}
.hh-carousel-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;
  justify-content:center;gap:6px;pointer-events:none}
.hh-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 0 2px rgba(0,0,0,.35);transition:width .25s,background .25s}
.hh-dot.on{width:16px;border-radius:3px;background:#fff}

/* ── Open-app popup ───────────────────────────────────────────────── */
.hh-popup-mask{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;padding:22px;background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:hhPopIn .22s ease-out}
@keyframes hhPopIn{from{opacity:0}to{opacity:1}}
.hh-popup-box{position:relative;max-width:min(92vw,420px);max-height:82vh;
  border-radius:18px;overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.4)}
.hh-popup-box img{display:block;width:100%;height:auto;max-height:82vh;
  object-fit:contain}
.hh-popup-x{position:absolute;top:8px;right:8px;width:32px;height:32px;
  border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-family:inherit}
.hh-popup-x:hover{background:rgba(0,0,0,.75)}

/* ══ 永遠淺色的卡片，必須自備深色字 ═══════════════════════════════════
   app2.css 在 `@media (prefers-color-scheme: dark)` 下把 --ink 設成
   #F5EEE4，而 body{color:var(--ink)}。所以在深色模式，任何寫死淺色底
   （#fff / 奶油色）而沒有自己指定 color 的卡片，裡面的字都會是近白色
   落在近白色底上 —— 對比度約 1.1:1，等於完全隱形。淺色模式下反而正常，
   所以好容易在開發時漏掉。
   規則：凡是 background 寫死淺色的容器，都要在同一條規則寫 color。
   （2026-09-07 修：/m/news 整頁消息、/m/ 會員贈品、落地頁 banner 副標題
   三處都中過同一個坑。） */

/* ── Instagram-style 消息 cards ───────────────────────────────────── */
/* color 由 inherit 改成寫死深色：inherit 在深色模式取到近白色 --ink，
   令整頁消息（標題／內文／日期）全部隱形。 */
.hh-ig-card{display:block;margin:0 0 16px;border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.07);color:#1E1613;
  text-decoration:none}
a.hh-ig-card:active{transform:scale(.995)}
.hh-ig-media img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;background:rgba(0,0,0,.05)}
.hh-ig-body{padding:13px 15px 15px}
.hh-ig-title{font-weight:800;font-size:16px;line-height:1.35;margin-bottom:5px}
.hh-ig-caption{font-size:14px;line-height:1.6;opacity:.85;white-space:pre-line}
/* opacity .5 令 12px 字在白底只有約 3.6:1，改 .62 到約 4.9:1。 */
.hh-ig-meta{display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;font-size:12px;opacity:.62}
.hh-ig-more{font-weight:800;opacity:.9}
.hh-ig-empty{text-align:center;padding:40px 0;opacity:.5;font-size:14px}

/* ── Social links in the header (2026-09) ─────────────────────────── */
.hh-social-ico{display:inline-flex;align-items:center;gap:10px;margin-left:auto;
  margin-right:10px}
.hh-social-ico a{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;color:inherit;opacity:.75;
  text-decoration:none;transition:opacity .15s,background .15s}
.hh-social-ico a:hover,.hh-social-ico a:focus-visible{opacity:1;
  background:rgba(127,127,127,.16)}
/* The hero band is dark; the plain page headers are light. Both inherit
   currentColor, so the glyphs stay legible on either. */
.hh-hero-band .hh-social-ico a{color:#fff}

/* ── Tappable store address ───────────────────────────────────────── */
a.hh-store-nav{display:block;text-decoration:none;color:inherit;
  border-bottom:1px dashed rgba(127,127,127,.45);padding-bottom:1px}
a.hh-store-nav::after{content:" ↗";font-size:11px;opacity:.55}
a.hh-store-nav:hover{opacity:.75}

/* ── 會員贈品 cards (2026-09) ─────────────────────────────────────── */
.hh-gifts{display:flex;flex-direction:column;gap:8px;margin:0 0 6px}
.hh-gift{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:14px;
  background:#fff;color:#1E1613;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.hh-gift.pend{border-left:3px solid #C98A1E}
.hh-gift.done{opacity:.6}
.hh-gift .ic{font-size:22px;line-height:1;flex:0 0 auto}
.hh-gift .b{flex:1 1 auto;min-width:0}
.hh-gift .nm{font-weight:700;font-size:14px}
.hh-gift .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:3px;font-size:11px}
.hh-gift .tag{padding:1px 7px;border-radius:999px;font-weight:700}
.hh-gift .tag.pend{background:rgba(201,138,30,.15);color:#8a5a00}
.hh-gift .tag.done{background:rgba(0,0,0,.06);color:#666}
.hh-gift .code{font-family:ui-monospace,Menlo,monospace;opacity:.7}
/* .55 在白底只有約 4.4:1，剛好不達標。 */
.hh-gift .exp{opacity:.65}

/* 條碼牌永遠是白色，但 --muted 是為深色背景調的（深色模式 #A99C8D），
   落在白牌上只有 2.68:1。這裡覆寫成適合白底的灰。 */
.hh-plate .pl-label{color:#6E6259}

/* ── Used / expired vouchers (2026-09) ─────────────────────────────── */
.hh-vou.used{opacity:.5;filter:grayscale(.6)}
.hh-vou.used .ex{font-weight:700}

/* ── 加入主畫面 banner (2026-09) ───────────────────────────────────── */
/* ⚠️ 這張 banner 上的 .hh-btn 必須自己重設 width / margin-top / display。
   app2.css 的 `.hh-btn{display:block;width:100%;margin-top:20px}` 是給整頁
   闊度的主 CTA 用的，而 banner 兩個 stylesheet 都會載入。第一版只寫了
   `flex:0 0 auto`，沒有蓋過 width:100% —— flex-basis 取 auto 即等於
   width:100%，加上 flex-shrink:0 收縮唔到，結果按鈕撐爆卡片右邊 36px，
   .bd 被壓成 0 闊，標題「加入主畫面」變成一行一個字直排，卡片高 498px。
   改動任何一條 .hh-btn 規則前，先確認 app2.css 那條會不會漏出來。 */
.hh-a2hs{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 16px 14px;
  padding:12px 38px 12px 14px;
  border-radius:16px;background:linear-gradient(135deg,#fff7e6,#ffe9c7);
  box-shadow:0 2px 10px rgba(0,0,0,.08);position:relative}
.hh-a2hs .ic{font-size:26px;flex:0 0 auto;line-height:1}
/* min-width 不用 0：一旦按鈕文字變長，寧願讓按鈕換行，也不要讓文字被壓到
   直排。flex-wrap 是同一個保險的另一半。 */
.hh-a2hs .bd{flex:1 1 150px;min-width:120px}
.hh-a2hs .bd .t{font-weight:800;font-size:15px;color:#6C0C18}
/* 必須明寫顏色：banner 底色是奶油色，但落地頁是深色主題，.d 不指定就會
   繼承頁面的淺色字（#F5EEE4），在奶油底上對比度只有約 1.05:1，等於隱形。 */
.hh-a2hs .bd .d{font-size:12px;margin-top:2px;color:#7A5B44}
.hh-a2hs .bd .ios{font-size:12px;margin-top:6px;color:#6C0C18}
.hh-a2hs .hh-btn{flex:0 0 auto;width:auto;margin-top:0;padding:9px 16px;font-size:14px;
  border-radius:12px;white-space:nowrap}
/* padding 撐大點擊範圍到 29×36，原本 23×20 太細，而這是唯一的關閉途徑。 */
.hh-a2hs .x{position:absolute;top:2px;right:2px;padding:9px;border:none;
  background:transparent;font-size:18px;line-height:1;color:#8a7f7a;cursor:pointer}
/* 窄機（iPhone SE 等）：按鈕換到第二行並佔滿闊度，卡片左右 padding 回復
   對稱，只由 .bd 讓出右邊空間給關閉鍵。 */
@media (max-width:360px){
  .hh-a2hs{padding-right:14px}
  .hh-a2hs .bd{padding-right:24px}
  .hh-a2hs .hh-btn{flex:1 1 100%;width:100%;margin-top:2px}
}
/* public bottom-nav 「加入」 tab highlight */
.hh-tabbar .hh-tab.join .ic,.hh-tabbar .hh-tab.join .lb{color:#C98A1E;font-weight:800}