/* ============================================================
   Ohya2.0 Touch UI — component styles
   手一碰就有反饋；未完成手勢平滑回退；暗色顧客端 / 亮色後台共用。
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .flip-card, .flip-overlay, .hold-ring-c, .slide-thumb,
  .radial-wrap, .radial-item, .ctx-overlay, .ctx-card, .coverflow-slide {
    transition: none !important; animation: none !important;
  }
}

/* ---------------- ① Flip to Detail ---------------- */
.flip-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8, 8, 10, 0);
  backdrop-filter: blur(0);
  transition: background .26s ease, backdrop-filter .26s ease;
  overflow: hidden;
}
.flip-overlay.is-open { background: rgba(8, 8, 10, .62); backdrop-filter: blur(6px); }
.flip-card {
  position: fixed;
  background: #15151b;
  border: 1px solid #2a2a35;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  transform-style: preserve-3d;
  will-change: transform;
}
.flip-card.is-flipped { transform: rotateY(180deg); }
.flip-back {
  transform: rotateY(180deg);
  padding: 1.4rem;
  color: #d1d5db;
  max-height: 80vh; overflow-y: auto;
}
.flip-close {
  position: absolute; top: .5rem; right: .6rem; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.3rem; line-height: 1;
  border: none; cursor: pointer;
}

/* ---------------- ② Hold to Confirm ---------------- */
.hold-btn { position: relative; overflow: visible; }
.hold-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; transform: rotate(-90deg);
}
.hold-ring-c {
  fill: none; stroke: #fff; stroke-width: 3;
  transition: stroke-dashoffset 180ms ease;
}
.admin-btn-secondary .hold-ring-c { stroke: #d72c0d; }
.hold-btn.is-holding { /* 按住時嘅視覺收緊 */ filter: brightness(.96); }

/* ---------------- ⑥ Slide to Confirm ---------------- */
.slide-track {
  position: relative;
  height: 56px;
  border-radius: 14px;
  background: #1c1c24;
  border: 1px solid #2a2a35;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
.slide-track::before {
  content: attr(data-hint);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .9rem; color: #9ca3af;
  /* 流光掃過 */
  background: linear-gradient(100deg, transparent 20%, rgba(224,192,132,.55) 50%, transparent 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: slide-shine 2.2s linear infinite;
}
@keyframes slide-shine { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
.slide-fill {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--slide-p,0) * 100%);
  background: rgba(0,128,96,.18);
}
.slide-thumb {
  position: absolute; top: 4px; left: 2px;
  width: 48px; height: calc(100% - 8px);
  border-radius: 11px;
  background: #008060; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; cursor: grab; touch-action: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.slide-thumb:active { cursor: grabbing; }
.slide-track.is-confirmed { border-color: #008060; }
.slide-track.is-confirmed::before { color: #8fe0c6; -webkit-text-fill-color: #8fe0c6; animation: none; }

/* ---------------- ⑤ Radial Menu ---------------- */
.radial-wrap {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8,8,10,0);
  transition: background .24s ease;
}
.radial-wrap.is-open { background: rgba(8,8,10,.5); backdrop-filter: blur(3px); }
.radial-arc { position: absolute; right: 1.2rem; bottom: 6.5rem; width: 0; height: 0; }
.radial-item {
  position: absolute; left: 0; top: 0;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; border: 1px solid #2a2a35;
  background: #1d1d25; color: #e0c084;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transform: scale(.2); opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease, background .15s ease;
}
.radial-item-icon { font-size: 1.25rem; line-height: 1; }
.radial-item-label {
  position: absolute; right: 60px; white-space: nowrap;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: .72rem; padding: .2rem .5rem; border-radius: 6px;
  opacity: 0; transition: opacity .15s ease;
}
.is-open .radial-item {
  /* 展開到左上弧形：角度由 160°→70° */
  transform: scale(1); opacity: 1; pointer-events: auto;
  transition-delay: calc(var(--i) * 45ms);
  --ang: calc(160deg - (var(--i) / var(--n)) * 90deg);
  translate: calc(cos(var(--ang)) * -92px) calc(sin(var(--ang)) * -92px);
}
.is-open .radial-item:hover { transform: scale(1.18); background: #2a2a35; z-index: 2; }
.is-open .radial-item:hover .radial-item-label { opacity: 1; }

/* ---------------- ⑦ Context Menu Preview ---------------- */
.ctx-overlay {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(8,8,10,0); backdrop-filter: blur(0);
  display: flex; align-items: center; justify-content: center;
  transition: background .24s ease, backdrop-filter .24s ease;
}
.ctx-overlay.is-open { background: rgba(8,8,10,.5); backdrop-filter: blur(8px); }
.ctx-card {
  width: min(86vw, 340px);
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transform: scale(.85) translateY(10px); opacity: 0;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.is-open .ctx-card { transform: scale(1) translateY(0); opacity: 1; }
.ctx-action {
  width: 100%; display: flex; align-items: center; gap: .8rem;
  padding: .95rem 1.1rem; background: none; border: none;
  font-size: .95rem; color: #202223; cursor: pointer;
  border-bottom: 1px solid #f1f2f3; min-height: 48px; text-align: left;
}
.ctx-action:last-child { border-bottom: none; }
.ctx-action:hover { background: #f6f6f7; }
.ctx-action.is-danger { color: #d72c0d; }
.ctx-action-icon { width: 1.3rem; text-align: center; }

/* ---------------- ⑩ Cover Flow ---------------- */
.coverflow {
  position: relative;
  perspective: 1100px;
  overflow: hidden;
  padding: 1rem 0;
  touch-action: pan-y;
}
.coverflow-track {
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
  min-height: 240px;
}
.coverflow-slide {
  position: absolute;
  width: min(64vw, 280px);
  border-radius: 16px; overflow: hidden;
  border: 1px solid #2a2a35; background: #15151b;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  cursor: pointer;
  transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .42s ease;
  --rel: 0;
  transform:
    translateX(calc(var(--rel) * 58%))
    rotateY(calc(var(--rel) * -34deg))
    scale(calc(1 - min(abs(var(--rel)),3) * .12));
  opacity: calc(1 - min(abs(var(--rel)),3) * .28);
  z-index: calc(10 - abs(var(--rel)));
}
.coverflow-slide.is-active { z-index: 12; }
.coverflow-slide img { width: 100%; height: 220px; object-fit: cover; display: block; }

/* ---------------- ⑪ Focus Group：選中一張，其他後退 ---------------- */
[data-focus-group] [data-focus-item] {
  transition: transform .38s cubic-bezier(.22,1,.36,1),
              filter .38s ease,
              opacity .38s ease,
              box-shadow .38s ease,
              border-color .38s ease;
  will-change: transform, filter;
}
[data-focus-group] [data-focus-item].is-dim {
  transform: scale(.955);
  filter: saturate(.55) blur(1px);
  opacity: .7;
}
[data-focus-group] [data-focus-item].is-spotlit {
  transform: scale(1.035);
  filter: brightness(1.06);
  z-index: 5;
}
@media (hover: hover) {
  [data-focus-group]:hover [data-focus-item].is-spotlit {
    box-shadow: 0 14px 36px rgba(0,0,0,.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-focus-group] [data-focus-item] { transition: none; }
  [data-focus-group] [data-focus-item].is-dim { transform: none; filter: none; opacity: .65; }
  [data-focus-group] [data-focus-item].is-spotlit { transform: none; filter: none; }
}

/* ---------------- ⑫ Density Switch：三檔密度 ---------------- */
[data-density-control] { display: inline-flex; gap: 2px; }
[data-density-set] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 38px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--ad-line, #dfe3e8);
  background: var(--ad-surface, #fff); color: var(--ad-muted, #6d7175);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .2s ease;
}
[data-density-set].is-active {
  background: #008060; border-color: #008060; color: #fff;
}

/* 商品網格：由 data-density 接管列數 */
[data-focus-group][data-density] { display: grid; gap: 14px; }
[data-focus-group][data-density="cozy"]     { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
[data-focus-group][data-density="standard"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) {
  [data-focus-group][data-density="cozy"]     { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-focus-group][data-density="standard"] { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  [data-focus-group][data-density="cozy"]     { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1280px) {
  [data-focus-group][data-density="cozy"]     { grid-template-columns: repeat(3, minmax(0,1fr)); }
  [data-focus-group][data-density="standard"] { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* 大圖模式：圖片更大、字更鬆 */
[data-focus-group][data-density="cozy"] [data-focus-item] img { min-height: 100%; }
[data-focus-group][data-density="cozy"] [data-focus-item] .aspect-square { aspect-ratio: 4 / 3.4; }

/* 文字行模式：單列、每行一項、圖細 + 橫排資訊 */
[data-focus-group][data-density="compact"] {
  grid-template-columns: minmax(0,1fr); gap: 8px;
}
[data-focus-group][data-density="compact"] [data-focus-item] {
  flex-direction: row; align-items: stretch;
}
[data-focus-group][data-density="compact"] [data-focus-item] a[href^="/product/"][class*="aspect-square"],
[data-focus-group][data-density="compact"] [data-focus-item] .aspect-square {
  width: 92px; min-width: 92px; aspect-ratio: 1 / 1; height: auto;
}
[data-focus-group][data-density="compact"] [data-focus-item] { position: relative; }
[data-focus-group][data-density="compact"] [data-focus-item] > a:first-child {
  width: 92px; min-width: 92px; height: auto;
}
[data-focus-group][data-density="compact"] [data-focus-item] > :last-child {
  flex: 1; padding: 10px 12px; gap: 4px;
}
[data-focus-group][data-density="compact"] [data-focus-item] h3 {
  height: auto; margin: 2px 0; font-size: 13px;
}
[data-focus-group][data-density="compact"] [data-focus-item] h3 a { color: #fff; }
/* 隱藏文字行模式下嘅累贅元素：分類章、積分行 */
[data-focus-group][data-density="compact"] [data-focus-item] > :last-child > span:first-child,
[data-focus-group][data-density="compact"] [data-focus-item] .text-gold:has(.font-bold) { display: none; }
[data-focus-group][data-density="compact"] [data-focus-item] [data-add-to-cart] { display: none; }
[data-focus-group][data-density="compact"] [data-focus-item] > :last-child > .mt-auto {
  margin-top: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
}
[data-focus-group][data-density="compact"] [data-focus-item] > :last-child > .mt-auto > a { flex: 0 0 auto; padding: 0 16px; min-height: 38px; }

@media (prefers-reduced-motion: reduce) {
  [data-focus-group], [data-focus-item] { transition: none !important; }
}

/* ---------------- ⑬ Pull Zoom：下拉拉大頂圖 ---------------- */
[data-pullzoom] [data-pullzoom-media] {
  transform-origin: center top;
  will-change: transform;
  backface-visibility: hidden;
}
[data-pullzoom] { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) {
  [data-pullzoom] [data-pullzoom-media] { transition: none !important; }
}

/* ---------------- ⑭ Adaptive Invert：跟背景換黑白 ---------------- */
[data-adaptive] {
  color: var(--adaptive-fg, #fff);
  transition: color .28s ease, background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
[data-adaptive].on-dark {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
}
[data-adaptive].on-light {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.14);
}

/* 浮動客服 FAB */
.mz-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  display: flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 0 18px;
  border-radius: 999px; border-width: 1px; border-style: solid;
  font-size: 14px; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}
.mz-fab svg { width: 20px; height: 20px; }
/* 手機有底部 tabbar：FAB 提高到 tabbar 上面，唔好遮右下角（lg 以上 tabbar 隱藏，還原 16px）*/
@media (max-width: 1023px) {
  .mz-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  [data-adaptive] { transition: none; }
}

/* ---------------- ⑮ Motion Blur：甩起来嘅拖影 ---------------- */
[data-motion-blur] { will-change: filter; }
@media (prefers-reduced-motion: reduce) {
  [data-motion-blur] { filter: none !important; }
}

/* ---------------- ⑯ Scroll Drive：滚动带着进度走 ---------------- */
[data-scroll-drive] { will-change: contents; }

/* 整頁閱讀進度條 */
.mz-readprogress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 90;
  background: transparent;
  pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
}
.mz-readprogress > span { display: block; height: 100%; width: 100%; }