/* ==========================================================================
   Ohya2.0 Fluid Interactions  (Apple-style, restrained: 120–280ms)
   01 SPRING press · 03 RIPPLE · 04 BURST · 05 DRAW check · 07 COUNT badge
   10 MORPH hamburger. Everything respects prefers-reduced-motion.
   ========================================================================== */

:root {
  --fluid-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot on release */
  --fluid-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 01 SPRING — quick compress on press, springy overshoot coming back ------- */
.fluid-press {
  position: relative;
  overflow: hidden; /* contain ripple */
  transform: translateZ(0);
  transition: transform 0.22s var(--fluid-spring);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.fluid-press:active {
  transform: scale(0.95);
  transition-duration: 0.07s;
  transition-timing-function: ease-in; /* fast squeeze… */
}
/* links that navigate keep ripple but shouldn't look like buttons squishing oddly is fine */

/* 03 RIPPLE — expands from the exact pointer point ------------------------- */
.fluid-ripple {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  transform: scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
  animation: fluid-ripple 0.62s var(--fluid-ease) forwards;
  z-index: 0;
}
@keyframes fluid-ripple {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}
/* ripple on light/outlined buttons uses a dark wash */
.fluid-press--dark .fluid-ripple,
.fluid-ripple--dark {
  background: radial-gradient(circle, rgba(153, 27, 27, 0.18) 0%, rgba(153, 27, 27, 0) 70%);
}

/* 04 BURST — particles for the key moment (added to cart) ------------------ */
.fluid-burst-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%) scale(1);
  animation: fluid-burst 0.62s var(--fluid-ease) forwards;
}
@keyframes fluid-burst {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0;
           transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(0.3); }
}
/* the button itself gives one celebratory spring */
.fluid-burst-pop {
  animation: fluid-burst-pop 0.5s var(--fluid-spring);
}
@keyframes fluid-burst-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* 05 DRAW — success checkmark strokes itself in ---------------------------- */
.fluid-check {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.fluid-check__circle,
.fluid-check__tick {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.fluid-check--in .fluid-check__circle { animation: fluid-draw 0.32s var(--fluid-ease) forwards; }
.fluid-check--in .fluid-check__tick   { animation: fluid-draw 0.26s var(--fluid-ease) 0.16s forwards; }
@keyframes fluid-draw { to { stroke-dashoffset: 0; } }

/* success toast layout hook */
#mz-toast { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
#mz-toast .fluid-check { width: 18px; height: 18px; }

/* 07 COUNT — cart badge springs + the number eases to a stop ---------------- */
#cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  will-change: transform;
}
.fluid-badge-pop {
  animation: fluid-badge-pop 0.45s var(--fluid-spring);
}
@keyframes fluid-badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* 08 FLY-TO-CART — 圓形縮略圖沿弧線飛入購物車 -------------------------- */
.fluid-fly {
  position: fixed;
  z-index: 10000;
  border-radius: 50%;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  will-change: transform, opacity;
}
.fluid-cart-bounce {
  animation: fluid-cart-bounce 0.5s var(--fluid-spring);
}
@keyframes fluid-cart-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* 10 MORPH — hamburger three lines fold into an X, one continuous element -- */
.mz-burger { transition: transform 0.28s var(--fluid-spring); }
.mz-burger__line {
  transition: transform 0.3s var(--fluid-ease), opacity 0.18s ease, top 0.3s var(--fluid-ease);
  transform-box: fill-box;
  transform-origin: center;
}
.mz-burger.is-open .mz-burger__line--1 {
  transform: translateY(6px) rotate(45deg);
}
.mz-burger.is-open .mz-burger__line--2 {
  opacity: 0;
  transform: scaleX(0.4);
}
.mz-burger.is-open .mz-burger__line--3 {
  transform: translateY(-6px) rotate(-45deg);
}

/* mobile menu panel: spring the drawer + fade the scrim (state via .mz-drawer) */
#mz-mobile-menu-panel.mz-drawer {
  visibility: hidden;
  pointer-events: none;
}
#mz-mobile-menu-panel.mz-drawer .mz-drawer-surface {
  transform: translateX(-100%);
  transition: transform 0.34s var(--fluid-ease);
  will-change: transform;
}
#mz-mobile-menu-panel.mz-drawer .mz-drawer-scrim {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#mz-mobile-menu-panel.mz-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}
#mz-mobile-menu-panel.mz-drawer.is-open .mz-drawer-surface { transform: translateX(0); }
#mz-mobile-menu-panel.mz-drawer.is-open .mz-drawer-scrim { opacity: 1; }

/* accessibility: honour reduced motion — kill all of the above ------------- */
@media (prefers-reduced-motion: reduce) {
  .fluid-press,
  .mz-burger,
  .mz-burger__line,
  #mz-mobile-menu-panel .mz-drawer-surface,
  #mz-mobile-menu-panel .mz-drawer-scrim { transition: none !important; }
  .fluid-press:active { transform: none; }
  .fluid-ripple,
  .fluid-burst-particle { display: none !important; animation: none !important; }
  .fluid-burst-pop,
  .fluid-badge-pop,
  .fluid-cart-bounce,
  .fluid-check--in .fluid-check__circle,
  .fluid-check--in .fluid-check__tick { animation: none !important; }
  .fluid-fly { display: none !important; }
  .fluid-check__circle,
  .fluid-check__tick { stroke-dashoffset: 0 !important; }
  #mz-mobile-menu-panel.mz-drawer .mz-drawer-surface { transform: none; }
  #mz-mobile-menu-panel.mz-drawer { visibility: hidden; }
  #mz-mobile-menu-panel.mz-drawer.is-open { visibility: visible; }
}

/* ==========================================================================
   搜尋自動完成面板（remote search 選擇器）
   ========================================================================== */
.mz-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  border-radius: 1rem;
  border: 1px solid rgba(200, 164, 93, 0.28);
  background: #111116;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  padding: 0.4rem;
  animation: mzSearchIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mzSearchIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mz-search-group {
  padding: 0.55rem 0.75rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 164, 93, 0.85);
}
.mz-search-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 0.7rem;
  font-size: 0.85rem;
  color: #e5e5e8;
  cursor: pointer;
}
.mz-search-item.is-active,
.mz-search-item:hover { background: rgba(160, 30, 61, 0.18); }
.mz-search-item.is-active .mz-search-label,
.mz-search-item:hover .mz-search-label { color: #fff; }
.mz-search-thumb, .mz-search-noimg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #1e1e27;
  font-size: 1.1rem;
}
.mz-search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mz-search-ic { font-size: 1.05rem; width: 24px; text-align: center; flex-shrink: 0; }
.mz-search-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d6d6da;
}
.mz-search-price { flex-shrink: 0; font-size: 0.8rem; font-weight: 800; color: #e0c084; }
.mz-search-all { border-top: 1px solid rgba(255,255,255,0.07); border-radius: 0 0 0.7rem 0.7rem; color: #e0c084; font-weight: 700; }
.mz-search-loading, .mz-search-empty, .mz-search-error {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem;
  font-size: 0.85rem;
  color: #9a9aa2;
}
.mz-search-empty, .mz-search-error { justify-content: center; }
.mz-search-error button {
  border: 0; background: none; color: #e0c084; font-weight: 800; text-decoration: underline; cursor: pointer;
}
.mz-spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(200,164,93,0.3);
  border-top-color: #c8a45d;
  border-radius: 50%;
  animation: mzSpin 0.7s linear infinite;
}
@keyframes mzSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mz-search-panel { animation: none; }
  .mz-spinner { animation-duration: 1.4s; }
}

/* ==========================================================================
   手機底部 Tab bar（mobile pattern）
   ========================================================================== */
.mz-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
  background: rgba(12, 12, 16, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(200, 164, 93, 0.22);
}
.mz-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 52px;
  font-size: 0.66rem;
  font-weight: 600;
  color: #8a8a94;
  border-radius: 0.7rem;
}
.mz-tabbar__item svg { width: 22px; height: 22px; }
.mz-tabbar__item.is-active { color: #e0c084; }
.mz-tabbar__item:active { transform: scale(0.94); }
.mz-tabbar__badgewrap { position: relative; display: inline-flex; }
.mz-tabbar__badge {
  position: absolute;
  top: -6px; right: -9px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #a01e3d;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
/* 有 tabbar 嘅手機：內容唔好被遮。lg 以上 tabbar display:none，padding 自動失效 */
@media (max-width: 1023px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   手機 Action sheet（排序用；mobile pattern）
   ========================================================================== */
.mz-sheet { position: fixed; inset: 0; z-index: 80; }
.mz-sheet[hidden] { display: none; }
.mz-sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  animation: mzSheetFade 0.2s ease;
}
.mz-sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.5rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom));
  background: #14141a;
  border-radius: 1.4rem 1.4rem 0 0;
  border-top: 1px solid rgba(200, 164, 93, 0.3);
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.8);
  animation: mzSheetUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mzSheetFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mzSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.mz-sheet__grip {
  width: 42px; height: 4px;
  margin: 0.5rem auto 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.mz-sheet__title {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #8a8a94;
  margin-bottom: 0.6rem;
}
.mz-sheet__options {
  overflow: hidden;
  border-radius: 0.9rem;
  background: #1c1c24;
}
.mz-sheet__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e5e5e8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mz-sheet__option:last-child { border-bottom: 0; }
.mz-sheet__option:active { background: rgba(160, 30, 61, 0.2); }
.mz-sheet__option.is-current { color: #e0c084; }
.mz-sheet__tick { color: #e0c084; font-weight: 900; }
.mz-sheet__cancel {
  width: 100%;
  min-height: 52px;
  margin-top: 0.6rem;
  border-radius: 0.9rem;
  background: #1c1c24;
  font-size: 0.95rem;
  font-weight: 700;
  color: #e0c084;
}
.mz-sheet__cancel:active { background: rgba(160, 30, 61, 0.2); }
@media (prefers-reduced-motion: reduce) {
  .mz-sheet__scrim, .mz-sheet__panel { animation: none; }
}

/* ==========================================================================
   分段控件（segmented control pattern；訂單狀態用）
   ========================================================================== */
.mz-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2rem;
  padding: 0.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #1a1a21;
}
.mz-segmented__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #9a9aa2;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.mz-segmented__item:hover { color: #e0c084; }
.mz-segmented__item.is-active {
  background: linear-gradient(135deg, #a01e3d, #8a1833);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(160, 30, 61, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .mz-segmented__item { transition: none; }
}

/* ==========================================================================
   撤銷條（undo snackbar；刪除購物車商品後 5 秒反悔）
   ========================================================================== */
.mz-undo {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 75;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: min(92vw, 420px);
  padding: 0.8rem 1.1rem 1rem;
  border-radius: 1rem;
  background: #1b1b22;
  border: 1px solid rgba(200, 164, 93, 0.32);
  box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.85);
  animation: mzUndoIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  flex-wrap: wrap;
}
.mz-undo[hidden] { display: none; }
@keyframes mzUndoIn {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.mz-undo__text { flex: 1; font-size: 0.88rem; font-weight: 600; color: #e5e5e8; }
.mz-undo__btn {
  flex-shrink: 0;
  border: 0;
  background: none;
  font-size: 0.88rem;
  font-weight: 900;
  color: #e0c084;
  min-height: 36px;
  padding: 0 6px;
}
.mz-undo__btn:active { transform: scale(0.92); }
.mz-undo__progress {
  flex-basis: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.mz-undo__progress span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d4af37, #f5d76e);
  transform-origin: left center;
  animation: mzUndoCountdown linear forwards;
}
@keyframes mzUndoCountdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (min-width: 1024px) {
  .mz-undo { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-undo { animation: none; }
  .mz-undo__progress span { animation-duration: 10s; }
}

/* ==========================================================================
   商品卡交錯彈入（spring cascade stagger）
   每張卡按 --stagger-i 延遲，從下方帶微彈向上彈入。
   只喺載入播一次；hover/transition 由原有 class 處理，唔會互相干擾。
   ========================================================================== */
.mz-card-enter {
  animation: mzCardEnter 0.55s cubic-bezier(0.22, 1.2, 0.36, 1) both;
  animation-delay: calc(var(--stagger-i, 0) * 45ms);
}
@keyframes mzCardEnter {
  0%   { opacity: 0; transform: translateY(22px) scale(0.97); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mz-card-enter {
    animation: mzCardFade 0.3s ease both;
    animation-delay: calc(var(--stagger-i, 0) * 20ms);
  }
  @keyframes mzCardFade { from { opacity: 0; } to { opacity: 1; } }
}

/* ==========================================================================
   跨頁共享元素轉場（商品卡圖 → 詳情主圖）— 通用 FLIP 版
   舊版用跨文件 View Transitions，但手機 QQ／微信內置、iOS17、舊 Chrome 唔支援。
   而家改用 public/js/product-transition.js（sessionStorage + WAAPI overlay），
   所有瀏覽器都行；呢度唔再開原生 @view-transition，避免兩個動畫一齊觸發。
   ========================================================================== */
@view-transition {
  navigation: none;
}

/* ==========================================================================
   邊框流光 Border Beam（pattern 04）
   一道光沿卡邊環繞流動，循環播放。深色 ink 底配金光 beam 夾品牌。
   - 兩條 mask layer 相互反向旋轉，圓角內部被遮罩只露邊。
   - reduced-motion 時靜止，唔影響閱讀。
   ========================================================================== */
.mz-beam {
  position: relative;
  border-radius: inherit;
  isolation: isolate;
}
.mz-beam::before,
.mz-beam::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from calc(var(--mz-beam-angle, 0deg)),
    transparent 0%,
    rgba(200, 164, 93, 0) 55%,
    rgba(232, 196, 132, 0.85) 70%,
    rgba(200, 164, 93, 0) 85%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}
.mz-beam::before { animation: mzBeamSpin 3.4s linear infinite; }
.mz-beam::after  { animation: mzBeamSpin 3.4s linear infinite reverse; opacity: 0.55; }
@keyframes mzBeamSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mz-beam::before,
  .mz-beam::after { animation: none; opacity: 0.35; }
}

/* ==========================================================================
   訂單狀態時間軸 Timeline
   4 節點：已下單 → 已付款 → 已出貨 → 已送達；橫向（桌面）/縱向（手機）。
   - 已完成節點實心金色，當前節點脈衝。
   ========================================================================== */
.mz-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mz-timeline-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.75rem;
  align-items: flex-start;
  position: relative;
}
.mz-timeline-dot {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #1f1f25;
  border: 2px solid #3a3a44;
  margin-top: 4px;
  margin-left: 5px;
  transition: background 0.3s, border-color 0.3s;
}
.mz-timeline-step:not(:last-child) .mz-timeline-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  bottom: -18px;
  width: 2px;
  margin-left: -1px;
  background: #2d2d35;
}
.mz-timeline-step.is-done .mz-timeline-dot {
  background: #c8a45d;
  border-color: #e0c084;
  box-shadow: 0 0 0 4px rgba(200,164,93,0.12);
}
.mz-timeline-step.is-done .mz-timeline-dot::after { background: rgba(200,164,93,0.55); }
.mz-timeline-step.is-current .mz-timeline-dot {
  background: #e0c084;
  border-color: #f0d59e;
  box-shadow: 0 0 0 4px rgba(232,196,132,0.18);
}
.mz-timeline-step.is-cancelled .mz-timeline-dot {
  background: #4b1d27;
  border-color: #7c152e;
}
.mz-timeline-meta {
  min-width: 0;
  padding-bottom: 1rem;
}
.mz-timeline-meta-title { font-size: 0.875rem; font-weight: 700; color: #ececed; }
.mz-timeline-meta-time { font-size: 0.75rem; color: #8a8a93; margin-top: 2px; }
.mz-timeline-meta.is-pending .mz-timeline-meta-title { color: #6b6b75; }
.mz-timeline-meta.is-pending .mz-timeline-meta-time  { color: #4b4b54; }
.mz-timeline-dot.is-current { animation: mzTimelinePulse 1.6s ease-in-out infinite; }
@keyframes mzTimelinePulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.2);  opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-timeline-dot.is-current { animation: none; }
}

/* ==========================================================================
   長按商品卡快速預覽：壓制 iOS 原生「儲存圖片」callout
   -webkit-touch-callout:none 係 iOS 專用；user-select:none 防長按選文字。
   只限商品卡，唔影響其他頁面嘅正常長按行為。
   ========================================================================== */
[data-focus-item],
[data-focus-item] img {
  -webkit-touch-callout: none;
}
[data-focus-item] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}