/* ============================================================
   特效層：疊在 Stitch 設計稿上面
   1. 版面響應式（設計稿是固定 1440×900）
   2. 燈光加強：石紋被燈照亮、開燈閃爍、商品頂光、霧氣、底片顆粒
   3. 手機版（照 Stitch 手機稿：兩欄壁龕）
   ============================================================ */
:root {
  /* 火山岩紋理：原本是 SVG 即時算，太吃效能，已先烤成圖檔 */
  --rock: url("images/rock.webp");
  --rock-lit: url("images/rock_lit.webp");
  --dim: cubic-bezier(.25, .1, .2, 1);           /* 調光器的曲線：慢慢亮、慢慢暗 */
  /* 壁龕尺寸：跟著視窗高度與寬度縮放，比例照設計稿 228×480 */
  --nh0: clamp(300px, calc(100vh - 420px), 480px);
  --nw: min(calc(var(--nh0) * .475), calc((100vw - 232px) / 5));
  --nh: calc(var(--nw) / .475);
  --gap: 28px;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- 1. 版面 ---------- */
.hall { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.hall .hall-head { z-index: 70; }
.m-intro, .m-foot { display: none; }
.cat-list .category-tab sup { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12.5px; margin-left: 4px; color: #f3dcbd; letter-spacing: 0; opacity: 0; transition: opacity .4s; }
.cat-list .category-tab.active sup { opacity: 1; }
.cat-dot { color: rgba(239, 233, 225, .2); font-family: 'Noto Sans TC', sans-serif; }

.wall-torch { position: fixed; left: -520px; top: -520px; width: 1040px; height: 1040px; z-index: 0; will-change: transform;
  background: radial-gradient(closest-side, rgba(243, 220, 189, .045), transparent); }

/* 壁龕列：一次看 5 個，左右捲動 */
.niche-rail { display: flex; gap: var(--gap); width: calc(var(--nw) * 5 + var(--gap) * 4); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; z-index: 10; }
.niche-rail::-webkit-scrollbar { display: none; }
.hall-main .niche-container { flex: none; width: var(--nw); display: flex; flex-direction: column; align-items: center; scroll-snap-align: start; text-align: center; }
.hall-main .niche-box { width: 100%; height: var(--nh); overflow: hidden;
}
.niche-refl { display: block; width: 86%; height: 60px; margin-top: 30px; pointer-events: none;
  background: radial-gradient(ellipse 50% 45% at 50% 0%, rgba(var(--tint), .10), rgba(243, 220, 189, .07) 40%, transparent 75%);
  opacity: calc(.3 + var(--lamp) * .7); transition: opacity 1.2s var(--dim); }
.niche-label { margin-top: 16px; }
.hall-main .niche-title { font-family: 'Noto Serif TC', serif; font-size: 15px; letter-spacing: .28em; font-weight: 300; color: rgba(239, 233, 225, .85); transition: color 1.2s var(--dim), text-shadow 1.2s var(--dim); }
.hall-main .niche-subtitle { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12.5px; letter-spacing: .14em; color: rgba(239, 233, 225, .45); margin-top: 2px; transition: color 1.2s var(--dim); }

.hall-foot { min-height: 150px; z-index: 20;
  background: linear-gradient(180deg, rgba(13, 12, 12, .5) 0%, rgba(8, 7, 7, .78) 35%, #050404 100%); }
.pg-bar { left: 0; width: 33.4%; transition: left .6s var(--dim), width .6s var(--dim); }
.nav-arrow[disabled] { opacity: .25; pointer-events: none; }

/* ---------- 2. 壁龕裡的燈 ----------
   --lamp：0 關燈、.62 一般、1 被點亮（滑過或正中間那個） */
.hall-main .niche-container { --lamp: 0; }
.hall-main .niche-container.on { --lamp: .62; }
.hall-main .niche-container.on.is-lit { --lamp: 1; }
.niche-box > * { position: absolute; pointer-events: none; }
.hall-main .niche-stone-interior { inset: 0; opacity: .45; }

/* 石牆本身：暗暗的岩石紋理 */
.niche-rock { inset: 0; background: var(--rock) center / 380px 380px; opacity: .12; }
/* 被燈照到的那一塊：同一張岩石紋理調亮調暖，用橢圓形遮罩只留燈照到的扇形（scallop） */
.niche-rock-lit { inset: 0; background: var(--rock-lit) center / 380px 380px; will-change: opacity;
  -webkit-mask: radial-gradient(ellipse 62% 58% at 50% -2%, #000 0%, rgba(0, 0, 0, .75) 28%, rgba(0, 0, 0, .25) 58%, transparent 80%);
          mask: radial-gradient(ellipse 62% 58% at 50% -2%, #000 0%, rgba(0, 0, 0, .75) 28%, rgba(0, 0, 0, .25) 58%, transparent 80%);
  opacity: calc(var(--lamp) * .55); transition: opacity 1.2s var(--dim); }
.hall-main .scallop-light { width: 100%; height: 72%; opacity: calc(.15 + var(--lamp) * .85); transition: opacity 1.2s var(--dim), background 1.2s var(--dim); }
/* 光柱裡的一點點霧（很淡，看得出來就太俗） */
.haze { top: 8px; left: 50%; width: 92%; height: 82%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 228, 190, .13), rgba(255, 228, 190, .03) 60%, transparent 85%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); filter: blur(12px);
  opacity: calc(var(--lamp) * .9); transition: opacity 1.4s var(--dim); will-change: opacity; }

/* 嵌燈：深色燈框＋發光燈面，開燈時會先閃一下 */
.hall-main .ceiling-downlight { top: 10px; left: 50%; transform: translateX(-50%); z-index: 6; transition: box-shadow 1.2s var(--dim), background 1.2s var(--dim); }
/* 燈框用陰影環畫：深色一圈＋一條細細的金屬邊，再往外才是光暈 */
.hall .hall-main .niche-container .ceiling-downlight { box-shadow: 0 0 0 2px #090807, 0 0 0 3px rgba(243, 220, 189, .16), 0 0 10px 2px rgba(243, 220, 189, .45), 0 3px 10px rgba(243, 220, 189, .3); }
.hall .hall-main .niche-container.is-lit .ceiling-downlight { box-shadow: 0 0 0 2px #090807, 0 0 0 3px rgba(243, 220, 189, .22), 0 0 16px 4px rgba(243, 220, 189, .8), 0 3px 14px rgba(255, 240, 220, .6); }
.hall .hall-main .niche-container:not(.on) .ceiling-downlight { background: #2a2622; box-shadow: 0 0 0 2px #090807, 0 0 0 3px rgba(243, 220, 189, .1); }
.hall-main .niche-container.on .ceiling-downlight { animation: lampOn .9s steps(1, end) both; }
@keyframes lampOn { 0% { opacity: .2; } 12% { opacity: 1; } 18% { opacity: .35; } 30% { opacity: 1; } 100% { opacity: 1; } }

/* 商品：站在石台上，頂光＋接觸陰影 */
.niche-obj { left: 20%; right: 20%; bottom: 42px; top: var(--objTop, 30%); z-index: 4; transition: transform 1.2s var(--dim); }
.niche-obj img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
/* 濾鏡固定不變（做動畫很吃效能）；明暗改用同形狀的黑色遮罩 .obj-dim 淡入淡出 */
.hall .hall-main .niche-container .product-watch,
.hall .hall-main .niche-container:hover .product-watch,
.hall .hall-main .niche-container.is-lit .product-watch,
.hall .hall-main .niche-container:not(.is-lit) .product-watch { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .9)); transform: none; transition: none; }
.obj-dim { position: absolute; inset: 0; pointer-events: none; background: #050404; will-change: opacity;
  -webkit-mask: var(--img) 50% 100% / contain no-repeat; mask: var(--img) 50% 100% / contain no-repeat;
  opacity: calc((1 - var(--lamp)) * .8); transition: opacity 1.2s var(--dim); }
/* 頂光：用商品自己的形狀當遮罩，上亮下暗，只打在商品身上 */
.obj-shade { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--img) 50% 100% / contain no-repeat; mask: var(--img) 50% 100% / contain no-repeat;
  background: linear-gradient(180deg, rgba(255, 236, 205, .55) 0%, rgba(255, 236, 205, .08) 38%, rgba(0, 0, 0, .1) 62%, rgba(0, 0, 0, .7) 100%);
  mix-blend-mode: soft-light; opacity: var(--lamp); transition: opacity 1.2s var(--dim); will-change: opacity; }
.hall-main .contact-shadow { bottom: 38px; width: 50%; height: 10px; z-index: 5; opacity: calc(.4 + var(--lamp) * .6); transition: opacity 1.2s var(--dim); }
.hall-main .plinth-light-pool { bottom: 34px; width: 64%; height: 14px; z-index: 3;
  background: radial-gradient(ellipse at 50% 50%, rgba(var(--tint), .35) 0%, rgba(243, 220, 189, .35) 30%, transparent 80%);
  opacity: var(--lamp); transition: opacity 1.2s var(--dim), width 1.2s var(--dim); }
.hall-main .niche-container.is-lit .plinth-light-pool { width: 72%;
  background: radial-gradient(ellipse at 50% 50%, rgba(var(--tint), .45) 0%, rgba(243, 220, 189, .6) 30%, transparent 85%); }
.hall-main .stone-plinth { z-index: 2; transition: border-color 1.2s var(--dim); }
.hall-main .niche-container:not(.on) .stone-plinth { border-top-color: rgba(243, 220, 189, .08); }
/* 商品顏色反射到石台前緣（例如綠面盤的錶，石台邊緣帶一點綠） */
.hall-main .stone-plinth::after { content: ''; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--tint), .7), transparent); opacity: calc(var(--lamp) * .8); transition: opacity 1.2s var(--dim); }
.hall-main .niche-container.is-lit .niche-obj { transform: translateY(-3px); }

/* 圖還沒做好的壁龕 */
.niche-wip { left: 0; right: 0; top: 50%; text-align: center; font-size: 11.5px; letter-spacing: .4em; color: rgba(239, 233, 225, .28); }
.hall-main .niche-container.wip { cursor: default; }

/* 每一類的商品擺多高（麵包矮、酒瓶高） */
[data-cat="tea"] { --objTop: 42%; --dObjH: .40; }
[data-cat="bread"] { --objTop: 56%; --dObjH: .28; }
[data-cat="watch"] { --objTop: 30%; --dObjH: .50; }
[data-cat="whisky"] { --objTop: 24%; --dObjH: .56; }
[data-cat="vase"] { --objTop: 32%; --dObjH: .48; }

/* 切換類別：整排先熄燈再換 */
.niche-rail.swap .niche-container { opacity: 0 !important; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.niche-rail .niche-container { transition: opacity .7s ease, transform .7s ease; }

/* 底片顆粒：整頁一層很淡的雜訊，讓暗部不會像塑膠 */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- 特寫頁 ---------- */
.detail { position: fixed; inset: 0; z-index: 60; overflow: hidden; opacity: 0; visibility: hidden;
  background: radial-gradient(circle at 50% 45%, #181615 0%, #11100f 55%, #080707 100%);
  transition: opacity .8s var(--dim), visibility 0s .8s; }
body.is-detail .detail { opacity: 1; visibility: visible; transition: opacity .8s var(--dim), visibility 0s; }
.detail { --dh: min(700px, calc(100vh - 170px)); --lamp: 1; }
.detail .museum-niche { height: var(--dh); width: calc(var(--dh) * .629); }
.detail .wall-wash { width: 91%; height: 83%; }
.detail .niche-rock, .detail .niche-rock-lit, .detail .haze { position: absolute; pointer-events: none; }
.detail .niche-rock { opacity: .3; }
.detail .niche-rock-lit { opacity: .6; }
.detail .haze { z-index: 11; }
.detail .watch-image-wrap { width: 56%; height: calc(var(--dh) * var(--dObjH, .5)); transition: opacity .35s ease, transform .6s var(--dim); }
.detail .watch-image-wrap .obj-shade { opacity: .9; }
.detail .watch-img { position: absolute; inset: 0; }   /* 寬的商品（茶罐、麵包）不要把外框撐歪 */
.detail .plinth-light-pool { background: radial-gradient(ellipse 65% 50% at 50% 50%, rgba(var(--tint, 243, 220, 189), .4) 0%, rgba(243, 220, 189, .32) 35%, transparent 80%); }
.detail .plinth-bevel-light { width: 72%; }
.detail .museum-niche.swap .watch-image-wrap { opacity: 0; transform: translateY(8px); }
.detail .museum-niche.swap .wall-wash, .detail .museum-niche.swap .niche-rock-lit { opacity: .25; }
.detail .wall-wash, .detail .niche-rock-lit { transition: opacity .35s ease; }

@keyframes lens { from { box-shadow: 0 0 10px #ffe7ca, 0 0 20px rgba(243, 220, 189, .9), 0 0 35px rgba(243, 220, 189, .6); } to { box-shadow: 0 0 12px #ffe7ca, 0 0 26px rgba(243, 220, 189, .95), 0 0 46px rgba(243, 220, 189, .65); } }
.detail .product-details > * { transition: opacity .35s ease, transform .5s var(--dim); }
.detail.swap .product-details > * { opacity: 0; transform: translateY(6px); }

/* 購物袋提示 */
.toast { position: fixed; left: 50%; bottom: 34px; z-index: 95; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 11px 22px; border-radius: 999px; font-size: 14.5px; letter-spacing: .12em; color: #efe9e1;
  background: rgba(21, 19, 18, .8); border: 1px solid rgba(243, 220, 189, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .4s ease, transform .4s var(--dim); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
#bagCount.bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.45); } }

/* 高度很矮的螢幕（筆電 768） */
@media (max-height: 800px) and (min-width: 721px) {
  .hall-head { padding-top: 20px; }
  .hall-foot { min-height: 128px; padding-bottom: 20px; }
  .detail .stage { top: 78px; bottom: 40px; }
}

/* ---------- 3. 手機版 ---------- */
@media (max-width: 720px) {
  .hall { height: auto; overflow: visible; display: block; min-height: 100vh; }
  .hide-m { display: none !important; }
  .hall .hall-head { position: sticky; top: 0; padding: 12px 20px; align-items: center; background: rgba(11, 10, 10, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(77, 70, 61, .3); }
  .hall .hall-head > div { padding: 8px 14px; white-space: nowrap; }
  .hall .hall-head > a span:first-child { letter-spacing: .2em; white-space: nowrap; }
  .m-intro { display: block; padding: 22px 20px 20px; }
  .m-intro__meta { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 11.5px; letter-spacing: .25em; color: rgba(239, 233, 225, .6); font-weight: 300; }
  .m-intro__meta i { width: 4px; height: 4px; border-radius: 50%; background: rgba(243, 220, 189, .6); }
  .m-intro__title { margin: 0; font-family: 'Noto Serif TC', serif; font-weight: 300; font-size: 26.5px; line-height: 39px; letter-spacing: .14em; }
  .m-intro__title em { font-style: normal; color: #f3dcbd; text-shadow: 0 0 12px rgba(243, 220, 189, .35); }
  .hall .cat-nav { justify-content: flex-start; margin: 0; padding: 0 0 18px; border-bottom: 1px solid rgba(239, 233, 225, .06); }
  .cat-list { overflow-x: auto; padding: 4px 20px 8px; font-size: 16px !important; letter-spacing: .2em !important; scrollbar-width: none; }
  .cat-list::-webkit-scrollbar { display: none; }
  .cat-dot { display: none; }
  .category-tab { white-space: nowrap; }
  .hall .hall-main { padding: 26px 20px 8px; margin: 0; }
  .nav-arrow { display: none; }
  .niche-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; width: 100%; overflow: visible; padding: 0; margin: 0; }
  .hall-main .niche-container { width: auto; align-items: stretch; text-align: left; opacity: 1 !important; }
  .hall-main .niche-box { height: 255px; border: 1px solid rgba(239, 233, 225, .1); }
  .hall-main .stone-plinth { left: 12px; right: 12px; bottom: 18px; height: 12px; }
  .niche-obj { left: 12%; right: 12%; bottom: 30px; }
  .hall-main .contact-shadow { bottom: 27px; }
  .hall-main .plinth-light-pool { bottom: 24px; }
  .niche-label { margin-top: 10px; }
  .niche-refl { display: none; }
  .hall-main .niche-title { font-size: 15px; letter-spacing: .16em; }
  .hall .hall-foot { min-height: 0; padding: 0; background: none; }
  .pager { display: none !important; }
  .m-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 0 44px; border-top: 1px solid rgba(239, 233, 225, .05); }
  .m-foot p { margin: 0; font-family: 'Noto Serif TC', serif; font-size: 14px; letter-spacing: .3em; color: rgba(239, 233, 225, .6); font-weight: 300; }
  .m-foot span { font-size: 12.5px; letter-spacing: .25em; color: rgba(239, 233, 225, .4); }
  /* 手機特寫：壁龕在上、文字在下，可以往下捲 */
  .detail { overflow-y: auto; --dh: min(62vh, 520px); }
  .detail .stage { position: relative; inset: auto; display: flex; flex-direction: column; gap: 22px; padding: 80px 20px 90px; }
  .detail .niche-container { order: 1; height: auto; width: 100%; }
  .detail .museum-niche { width: 100%; max-width: 360px; }
  .detail .vertical-gallery-nav { order: 2; align-items: center; padding: 0; }
  .detail .nav-pager { margin: 0; }
  .detail .thumbnail-niche-strip { display: none; }
  .detail .product-details { order: 3; max-width: none; padding: 0; }
  .detail .product-title { font-size: 32px; }
  .detail .bottom-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* Stitch 的壁龕外框原本 transition: all（連陰影一起做動畫），改成只動透明度 */
.hall .hall-main .niche-box { transition: none; }

/* ============================================================
   對焦：第一次點壁龕，鏡頭從遠推到近，其他壁龕熄掉，右邊滑出簡介卡
   整排用一個 transform 推近（只動 transform／opacity，GPU 處理不卡）
   ============================================================ */
.hall-stage { transform-origin: 0 0; transition: transform 1.25s cubic-bezier(.22, .8, .16, 1); will-change: transform; }
.hall-head, .cat-nav, .hall-foot, .nav-arrow { transition: opacity .8s var(--dim); }
body.is-focus .cat-nav, body.is-focus .hall-foot, body.is-focus .nav-arrow { opacity: 0; pointer-events: none; }
/* 載入後先在背景畫一次簡介卡，第一次點擊才不會頓 */
.quick.prewarm { visibility: visible; opacity: .001; transition: none; }
.quick.prewarm > * { opacity: 1; transform: none; transition: none; }
body.is-focus .hall-head { opacity: .55; }
body.is-focus .niche-rail { scroll-snap-type: none; }
/* 其他壁龕：燈關到很暗 */
.hall .hall-main .niche-rail.focusing .niche-container:not(.focused) { opacity: .1; transition: opacity .9s var(--dim); }
/* 被對焦的那一個：燈再亮一點、商品往前浮 */
.hall-main .niche-container.focused { --lamp: 1; }
.hall-main .niche-container.focused .niche-rock-lit { opacity: .75; }
.hall-main .niche-container.focused .niche-obj { transform: translateY(-6px) scale(1.06); transition: transform 1.4s cubic-bezier(.22, .8, .16, 1) .25s; }
.hall-main .niche-container.focused .niche-label { opacity: 0; transition: opacity .5s; }
.hall-main .niche-container.focused .niche-box { box-shadow: inset 0 12px 28px rgba(0,0,0,.9), inset 0 -15px 30px rgba(0,0,0,.92), inset 8px 0 20px rgba(0,0,0,.85), inset -8px 0 20px rgba(0,0,0,.85), 0 0 60px rgba(243, 220, 189, .10), 0 1px 0 rgba(243, 220, 189, .4); }
/* 對焦時四周壓暗（暗角） */
.focus-veil { position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: 0; transition: opacity 1s var(--dim);
  background: radial-gradient(ellipse 40% 60% at 34% 50%, transparent 30%, rgba(4, 3, 3, .75) 100%); }
body.is-focus .focus-veil { opacity: 1; }

/* ---------- 簡介卡 ---------- */
.quick { position: fixed; z-index: 50; top: 50%; left: 57%; width: min(400px, 36vw); max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: none;
  padding: 30px 30px 24px; border-radius: 4px; color: #efe9e1;
  background: linear-gradient(180deg, rgba(24, 21, 20, .92), rgba(14, 12, 12, .94));
  border: 1px solid rgba(243, 220, 189, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translate(40px, -50%);
  transition: opacity .6s var(--dim), transform .9s cubic-bezier(.22, .8, .16, 1), visibility 0s .9s; }
body.is-focus .quick { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: .45s, .45s, 0s; }
.quick::-webkit-scrollbar { display: none; }
.quick > * { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s var(--dim); }
body.is-focus .quick > * { opacity: 1; transform: none; }
body.is-focus .quick > :nth-child(2) { transition-delay: .55s; }
body.is-focus .quick > :nth-child(3) { transition-delay: .6s; }
body.is-focus .quick > :nth-child(4) { transition-delay: .65s; }
body.is-focus .quick > :nth-child(5) { transition-delay: .7s; }
body.is-focus .quick > :nth-child(6) { transition-delay: .75s; }
body.is-focus .quick > :nth-child(7) { transition-delay: .8s; }
body.is-focus .quick > :nth-child(8) { transition-delay: .85s; }
body.is-focus .quick > :nth-child(n+9) { transition-delay: .9s; }
body.is-focus .quick.swap > * { opacity: 0; transition-delay: 0s; }
.quick__close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: rgba(239, 233, 225, .55); border: 1px solid rgba(239, 233, 225, .12); transition: color .3s, border-color .3s; }
.quick__close:hover { color: #f3dcbd; border-color: rgba(243, 220, 189, .5); }
.quick__meta { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 12px; letter-spacing: .32em; color: rgba(239, 233, 225, .45); }
.quick__meta i { width: 3px; height: 3px; border-radius: 50%; background: rgba(239, 233, 225, .3); }
.quick__name { margin: 0; font-family: 'Noto Serif TC', serif; font-weight: 300; font-size: 30px; letter-spacing: .16em; line-height: 1.3; }
.quick__en { margin: 4px 0 18px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; letter-spacing: .1em; color: #f3dcbd; }
.quick__priceRow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(239, 233, 225, .1); }
.quick__price { font-family: 'Cormorant Garamond', serif; font-size: 30px; letter-spacing: .06em; color: #f3dcbd; }
.quick__stock { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; letter-spacing: .12em; color: rgba(239, 233, 225, .6); }
.quick__stock i { width: 6px; height: 6px; border-radius: 50%; background: #9fc59a; box-shadow: 0 0 8px rgba(159, 197, 154, .7); }
.quick__lead { margin: 16px 0; font-size: 15px; line-height: 1.95; letter-spacing: .06em; color: rgba(239, 233, 225, .68); font-weight: 300; }
.quick__specs { margin: 0 0 20px; display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 14px; letter-spacing: .06em; }
.quick__specs dt { color: rgba(239, 233, 225, .42); font-weight: 300; }
.quick__specs dd { margin: 0; text-align: right; color: #efe9e1; }
.quick__buy { display: flex; gap: 10px; align-items: stretch; }
.qty { display: flex; align-items: center; border: 1px solid rgba(239, 233, 225, .18); border-radius: 999px; }
.qty button { width: 34px; height: 42px; color: rgba(239, 233, 225, .7); font-size: 16px; transition: color .25s; }
.qty button:hover { color: #f3dcbd; }
.qty span { min-width: 18px; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 19.5px; }
.quick__add { flex: 1; border-radius: 999px; background: #f3dcbd; color: #1a1512; font-size: 15px; letter-spacing: .2em; font-weight: 500; transition: box-shadow .4s, transform .3s, background .3s; }
.quick__add:hover { background: #fbe8cf; box-shadow: 0 0 24px rgba(243, 220, 189, .35); transform: translateY(-1px); }
.quick__fav { width: 44px; border-radius: 50%; border: 1px solid rgba(239, 233, 225, .18); display: grid; place-items: center; color: rgba(239, 233, 225, .7); transition: color .3s, border-color .3s; }
.quick__fav:hover, .quick__fav[aria-pressed="true"] { color: #f3dcbd; border-color: rgba(243, 220, 189, .55); }
.quick__fav[aria-pressed="true"] svg { fill: #f3dcbd; }
.quick__more { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 12px; padding: 13px 4px; font-size: 14.5px; letter-spacing: .2em; color: rgba(239, 233, 225, .8); border-bottom: 1px solid rgba(239, 233, 225, .14); transition: color .3s, border-color .3s; }
.quick__more span { font-family: 'Cormorant Garamond', serif; font-size: 18.5px; transition: transform .3s; }
.quick__more:hover { color: #f3dcbd; border-color: rgba(243, 220, 189, .5); }
.quick__more:hover span { transform: translateX(4px); }
.quick__perks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; letter-spacing: .1em; color: rgba(239, 233, 225, .5); }
.quick__perks li { display: flex; align-items: center; gap: 9px; }
.quick__perks svg { color: rgba(243, 220, 189, .7); flex: none; }
.quick__hint { margin: 16px 0 0; font-size: 11.5px; letter-spacing: .24em; color: rgba(239, 233, 225, .3); }

@media (max-width: 720px) {
  /* 手機：不推鏡頭，選中的壁龕亮起、其他變暗，簡介卡從下面滑上來 */
  .hall-stage { transform: none !important; }
  .focus-veil { background: rgba(4, 3, 3, .55); }
  .quick { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 62vh; background: #141211; border-radius: 16px 16px 0 0; padding: 26px 20px 22px; transform: translateY(100%); }
  body.is-focus .quick { transform: translateY(0); transition-delay: .1s, .1s, 0s; }
  .quick__hint { display: none; }
}

/* ============================================================
   2026-10-31 改版：一行 5 個、共 3 行，整頁往下滑（不再左右捲）
   ============================================================ */
html { scrollbar-gutter: stable; }
html.no-scroll { overflow: hidden; }
/* 背景牆、暗角固定在畫面上，不跟著頁面變長 */
.hall > .absolute.inset-0, .hall > .absolute.top-0, .hall > .wall-torch { position: fixed; }
.pager, .nav-arrow { display: none !important; }
@media (min-width: 721px) {
  :root {
    --gap: 30px;
    --nw: calc((min(1240px, 100vw - 112px) - var(--gap) * 4) / 5);
    --nh: calc(var(--nw) / .52);
  }
  .hall { height: auto; min-height: 100vh; overflow: visible; display: block; }
  .hall .hall-head { position: sticky; top: 0; padding-top: 22px; padding-bottom: 14px;
    background: linear-gradient(180deg, rgba(11, 10, 10, .92) 0%, rgba(11, 10, 10, .75) 70%, transparent 100%); }
  .hall .cat-nav { position: sticky; top: 72px; z-index: 65; margin-top: -54px; pointer-events: none; }
  .hall .cat-nav .cat-list { pointer-events: auto; }
  .hall .hall-main { margin-top: 44px; }
  .niche-rail { display: grid; grid-template-columns: repeat(5, var(--nw)); gap: 46px var(--gap); width: auto; overflow: visible; scroll-snap-type: none; justify-content: center; padding-bottom: 20px; }
  .niche-refl { height: 36px; margin-top: 12px; }
  .hall .hall-foot { min-height: 0; margin-top: 30px; padding-top: 56px; padding-bottom: 56px; background: linear-gradient(180deg, transparent, rgba(5, 4, 4, .9) 40%, #050404); }
  /* 推鏡頭時：簡介卡在畫面右側，不受頁面捲動影響 */
  .focus-veil { background: radial-gradient(ellipse 40% 60% at 34% 50%, transparent 30%, rgba(4, 3, 3, .8) 100%); }
}

/* ============================================================
   2026-10-31 照 Stitch 三張新稿對齊（_stitch/grid、focus、msheet）
   ============================================================ */
/* 頁尾：置中三行字（grid 稿） */
.foot-copy { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; }
.foot-copy::before { content: ""; position: absolute; top: -78px; left: 50%; width: 720px; max-width: 90vw; height: 1px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(243, 220, 189, .35) 0%, transparent 80%); }
.foot-copy__eyebrow { font-family: 'Cormorant Garamond', serif; text-transform: uppercase; font-size: 14px; letter-spacing: .38em; color: rgba(239, 233, 225, .45); margin-bottom: 18px; }
.foot-copy__title { margin: 0; display: flex; align-items: center; font-family: 'Noto Serif TC', serif; font-weight: 300; font-size: 32px; letter-spacing: .34em; color: #efe9e1; }
.foot-copy__title em { font-style: normal; font-weight: 400; color: #f3dcbd; margin: 0 14px; text-shadow: 0 0 16px rgba(243, 220, 189, .55); }
.foot-copy__hint { margin: 26px 0 0; font-size: 14px; font-weight: 300; letter-spacing: .26em; color: rgba(239, 233, 225, .35); }

@media (min-width: 721px) {
  /* 頁首：grid 稿是左右兩端、上深下透明的漸層；分類列在頁首下面，跟著頁面捲走 */
  .hall .hall-head { padding: 0 88px; height: 92px; align-items: center; background: linear-gradient(180deg, #0b0a0a 0%, rgba(11, 10, 10, .92) 58%, rgba(11, 10, 10, 0) 100%); }
  .hall .cat-nav { position: relative; top: auto; margin-top: 0; padding: 18px 0 44px; pointer-events: auto; }
  .hall .cat-nav .cat-list { font-size: 16px !important; letter-spacing: .24em !important; }
  .hall .hall-main { margin-top: 4px; }
  .hall .hall-foot { margin-top: 110px; padding: 78px 0 100px; border-top: 1px solid rgba(239, 233, 225, .07); background: linear-gradient(180deg, #0b0a0a 0%, #080808 35%, #040404 100%); }

  /* 對焦：壁龕推到左邊約 27%，簡介卡從畫面一半開始（focus 稿） */
  body.is-focus .hall-head { opacity: .4; }
  .hall .hall-main .niche-rail.focusing .niche-container:not(.focused) { opacity: .22; }
  .focus-veil { background: radial-gradient(circle at 27% 52%, rgba(20, 19, 19, .2) 0%, rgba(11, 10, 10, .85) 65%, rgba(7, 6, 6, .98) 100%); }
  .quick { left: 50%; width: 410px; padding: 28px; border-radius: 16px; background: rgba(24, 21, 20, .95);
    border: 1px solid rgba(243, 220, 189, .25); box-shadow: 0 25px 70px rgba(0, 0, 0, .85); }
  .quick__close { top: 24px; right: 24px; width: 32px; height: 32px; border-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); }
  .quick__perks svg { display: none; }
}

/* 簡介卡內容（桌機 focus 稿、手機 msheet 稿共用） */
.quick__grab { display: none; }
.quick__meta { margin: 0; font-size: 14px; letter-spacing: .25em; color: rgba(243, 220, 189, .7); }
.quick__meta i { background: rgba(243, 220, 189, .5); }
.quick__name { margin-top: 6px; font-size: 32px; font-weight: 400; letter-spacing: .1em; }
.quick__en { margin: 0; font-size: 20.5px; letter-spacing: .06em; color: rgba(243, 220, 189, .9); }
.quick__priceRow { margin-top: 16px; padding-bottom: 16px; border-bottom-color: rgba(243, 220, 189, .15); align-items: center; }
.quick__price { font-family: 'Noto Serif TC', serif; font-weight: 300; font-size: 32px; letter-spacing: .05em; }
.quick__stock { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); font-size: 14px; letter-spacing: .04em; color: rgba(255, 255, 255, .75); }
.quick__stock i { background: #34d399; box-shadow: 0 0 6px #34d399; animation: stockPulse 2s ease-in-out infinite; }
@keyframes stockPulse { 50% { opacity: .45; } }
.quick__lead { margin: 16px 0; font-size: 16px; line-height: 1.75; color: rgba(239, 233, 225, .85); }
.quick__specs { margin: 0; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .05); gap: 8px 18px; }
.quick__specs dt { color: rgba(255, 255, 255, .4); letter-spacing: .1em; }
.quick__specs dd { color: rgba(239, 233, 225, .9); font-weight: 300; }
.quick__buy { margin-top: 20px; gap: 12px; align-items: center; }
.qty { height: 40px; border-color: rgba(243, 220, 189, .2); padding: 0 6px; }
.qty button { height: 38px; width: 28px; color: rgba(255, 255, 255, .4); }
.qty button:hover { color: #fff; }
.qty span { font-size: 17px; }
.quick__add { height: 42px; font-size: 16px; letter-spacing: .12em; color: #141313; box-shadow: 0 4px 16px rgba(243, 220, 189, .2); }
.quick__add:hover { background: #faebd7; }
.quick__fav { width: 40px; height: 40px; flex: none; border-color: rgba(243, 220, 189, .25); color: #f3dcbd; }
.quick__fav:hover { border-color: #f3dcbd; }
.quick__more { display: table; width: auto; margin: 16px auto 0; padding: 0 0 2px; font-size: 14px; letter-spacing: .2em; color: rgba(243, 220, 189, .9); border-bottom: 1px solid rgba(243, 220, 189, .3); }
.quick__more span { font-family: inherit; font-size: 14px; margin-left: 6px; display: inline-block; }
.quick__more:hover { color: #efe9e1; }
.quick__perks { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .05); display: flex; justify-content: space-between; gap: 0; font-size: 12.5px; letter-spacing: .06em; color: rgba(255, 255, 255, .5); }
.quick__perks li { gap: 4px; white-space: nowrap; }
.quick__perks li + li::before { content: "|"; color: rgba(255, 255, 255, .2); margin-right: 10px; }
.quick__hint { margin-top: 12px; text-align: center; letter-spacing: .2em; }

@media (max-width: 720px) {
  /* 手機底部抽屜（msheet 稿） */
  .focus-veil { background: rgba(0, 0, 0, .75); }
  .quick { padding: 12px 20px 18px; border-top: 1px solid rgba(243, 220, 189, .2); box-shadow: 0 -10px 40px rgba(0, 0, 0, .85), 0 -1px 0 rgba(243, 220, 189, .12); }
  .quick__grab { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 99px; background: rgba(237, 232, 227, .2); }
  .quick__close { top: 22px; right: 18px; width: 28px; height: 28px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
  .quick__meta { font-size: 12.5px; color: #9c9489; }
  .quick__name { font-size: 27.5px; font-weight: 300; letter-spacing: .08em; margin-top: 8px; }
  .quick__en { font-size: 16px; color: #f3dcbd; }
  .quick__priceRow { margin-top: 10px; padding: 4px 0; border-bottom-color: rgba(255, 255, 255, .06); }
  .quick__price { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 23px; color: #ede8e3; }
  .quick__stock { padding: 2px 10px; background: rgba(27, 43, 32, .6); border-color: rgba(64, 104, 74, .4); font-size: 12.5px; color: #a9d9b6; }
  .quick__stock i { background: #52b76e; box-shadow: none; }
  .quick__lead { margin: 10px 0; font-size: 14px; line-height: 1.7; color: #b8b0a5; }
  .quick__specs { grid-template-columns: auto 1fr auto 1fr; gap: 8px 12px; margin: 8px 0; padding: 12px; border-radius: 8px; background: rgba(14, 13, 12, .7); border: 1px solid rgba(255, 255, 255, .05); }
  .quick__specs dt { font-size: 12.5px; color: #857d74; }
  .quick__specs dd { color: #ede8e3; }
  .quick__buy { margin-top: 4px; gap: 10px; }
  .qty { width: 96px; justify-content: space-between; border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
  .quick__add { height: 40px; font-size: 14px; letter-spacing: .2em; }
  .quick__fav { border-color: rgba(255, 255, 255, .15); color: #ede8e3; background: rgba(255, 255, 255, .03); }
  .quick__more { border-bottom: 0; margin-top: 12px; color: #f3dcbd; letter-spacing: .16em; }
  .quick__perks { margin-top: 10px; padding-top: 10px; border-top-color: rgba(255, 255, 255, .06); font-size: 11.5px; color: #9c9489; }
  .quick__perks svg { width: 13px; height: 13px; color: rgba(243, 220, 189, .8); }
  .quick__perks li + li::before { margin-right: 6px; color: rgba(255, 255, 255, .1); }
}

/* ============================================================
   2026-10-31 沉浸感 50 項改善（只動 transform／opacity，不加模糊濾鏡）
   ============================================================ */
/* 品牌字：放大、加亮 */
.brand { display: flex; flex-direction: column; gap: 7px; }
.brand__en { font-family: 'Noto Serif TC', serif; font-size: 21px; font-weight: 300; letter-spacing: .32em; color: #efe9e1; transition: color .3s; }
.brand__tw { font-size: 14px; font-weight: 400; letter-spacing: .6em; color: rgba(239, 233, 225, .72); padding-left: 2px; transition: color .3s; }
.brand:hover .brand__en { color: #fff; }
.brand:hover .brand__tw { color: #f3dcbd; }
.hall-head .brand, .hall-head > div { transition: transform .5s var(--dim), opacity .6s var(--dim); transform-origin: left center; }
.hall-head > div { transform-origin: right center; }
body.scrolled .hall-head .brand { transform: scale(.88); }
body.scrolled .hall-head > div { transform: scale(.94); }

/* 進場黑幕 */
.curtain { position: fixed; inset: 0; z-index: 200; background: #050404; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer;
  transition: opacity 1.4s var(--dim), visibility 0s 1.4s; }
.curtain__en, .curtain__tw { opacity: 0; transform: translateY(8px); transition: opacity 1s var(--dim), transform 1.2s var(--dim); }
.curtain__en { font-family: 'Noto Serif TC', serif; font-weight: 300; font-size: 26px; letter-spacing: .5em; color: #efe9e1; }
.curtain__tw { font-size: 15px; letter-spacing: .9em; color: rgba(243, 220, 189, .75); transition-delay: .25s; }
.curtain.in .curtain__en, .curtain.in .curtain__tw { opacity: 1; transform: none; }
.curtain.go { opacity: 0; visibility: hidden; pointer-events: none; }
.curtain.go .curtain__en, .curtain.go .curtain__tw { opacity: 0; transform: translateY(-6px); transition-delay: 0s; }

/* 每一類的牆面色溫 */
body { --amb: 243, 220, 189; }
body[data-amb="tea"] { --amb: 214, 200, 150; }
body[data-amb="bread"] { --amb: 240, 200, 140; }
body[data-amb="watch"] { --amb: 243, 220, 189; }
body[data-amb="whisky"] { --amb: 235, 160, 90; }
body[data-amb="vase"] { --amb: 210, 222, 236; }
.wall-torch { left: -650px; top: -650px; width: 1300px; height: 1300px; background: radial-gradient(closest-side, rgba(var(--amb), .06), transparent); }
.hall .basalt-wall { bottom: auto; height: 125vh; will-change: transform; }
.basalt-wall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(var(--amb), .05), transparent 70%); }

/* 細的深色捲軸 */
html { scrollbar-width: thin; scrollbar-color: rgba(243, 220, 189, .22) #0b0a0a; }

/* 視線所在那一排最亮，上下離開視線的稍微暗下來 */
.hall .hall-main .niche-container .niche-box, .hall-main .niche-label { transition: opacity .9s var(--dim); }
.hall .hall-main .niche-container.far .niche-box { opacity: .6; }
.hall-main .niche-container.far .niche-label { opacity: .5; }

/* 頁尾：「光」字慢慢呼吸、光線捲到才拉開 */
.foot-copy__title em { animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .62; } }
.foot-copy::before { transform: translateX(-50%) scaleX(0); transition: transform 1.8s var(--dim); }
.foot-copy.seen::before { transform: translateX(-50%) scaleX(1); }
.to-top { display: inline-flex; align-items: center; gap: 8px; margin-top: 34px; padding-bottom: 3px; font-size: 13px; letter-spacing: .24em; color: rgba(239, 233, 225, .45); border-bottom: 1px solid rgba(239, 233, 225, .15); transition: color .3s, border-color .3s; }
.to-top:hover { color: #f3dcbd; border-color: rgba(243, 220, 189, .5); }
.to-top svg { transition: transform .3s; }
.to-top:hover svg { transform: translateY(-3px); }

/* 商品圖載入完才淡入，不會一格一格跳出來 */
.hall .hall-main .niche-container .niche-obj .product-watch { opacity: 0; transition: opacity .9s ease; }
.hall .hall-main .niche-container .niche-obj .product-watch.ok { opacity: 1; }

/* 商品跟著滑鼠微微轉向 */
.hall-main .niche-box { perspective: 700px; }
.niche-obj { transition: transform 1.2s var(--dim), rotate .6s cubic-bezier(.2, .7, .2, 1); }

/* 名稱下面的細線：燈亮時從中間拉開 */
.hall-main .niche-title { position: relative; display: inline-block; padding-bottom: 5px; }
.hall-main .niche-title::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(243, 220, 189, .7), transparent);
  transform: scaleX(0); transition: transform .7s var(--dim); }
.hall-main .niche-container.is-lit .niche-title::after { transform: scaleX(1); }

/* 鍵盤焦點：香檳色細框 */
.hall-main .niche-container:focus { outline: none; }
.hall-main .niche-container:focus-visible .niche-box { outline: 1px solid rgba(243, 220, 189, .7); outline-offset: 5px; }
.hall button:focus-visible, .hall a:focus-visible { outline: 1px solid rgba(243, 220, 189, .7); outline-offset: 3px; }

/* 展品準備中：熄燈的暗龕 */
.niche-wip { display: flex; flex-direction: column; align-items: center; gap: 14px; transform: translateY(-50%); font-size: 13px; letter-spacing: .35em; color: rgba(239, 233, 225, .4); }
.niche-wip i { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(243, 220, 189, .4), transparent); }

/* 從特寫頁回來：剛看的那一件燈閃一下 */
.hall-main .niche-container.flash .niche-box::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 15%, rgba(var(--amb), .28), transparent 70%); animation: nFlash 1.6s ease-out both; }
@keyframes nFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* 換類別：燈從左上一盞盞熄、再一盞盞亮 */
.hall .hall-main .niche-rail.stagger .niche-container { transition: opacity .5s ease, transform .5s ease; transition-delay: calc((var(--c, 0) + var(--r, 0)) * 55ms); }

/* 推鏡頭：先微微後退再推近；退出時柔和拉遠 */
body.is-focus .hall-stage { transition: transform 1.4s cubic-bezier(.55, -0.14, .2, 1); }
body:not(.is-focus) .hall-stage { transition: transform 1.1s cubic-bezier(.3, .7, .2, 1); }
/* 其他壁龕依距離先後熄燈、離開時依距離亮回 */
.hall .hall-main .niche-rail.focusing .niche-container:not(.focused) { transition: opacity .9s var(--dim) calc(var(--d, 0) * 70ms); }
.hall .hall-main .niche-rail.relight .niche-container { transition: opacity .9s var(--dim) calc(var(--d, 0) * 60ms); }

/* 對焦時：品牌字變淡，購物袋保持清楚可點 */
body.is-focus .hall-head { opacity: 1; }
body.is-focus .hall-head .brand { opacity: .35; }

/* 對焦中壁龕下方的提示 */
.hall-main .niche-container { position: relative; }
.niche-tip { position: absolute; left: -20%; right: -20%; top: calc(var(--nh) + 18px); text-align: center; pointer-events: none; white-space: nowrap;
  font-size: 11.5px; letter-spacing: .32em; color: rgba(243, 220, 189, .8); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.hall-main .niche-container.focused .niche-tip { opacity: 1; transform: none; transition: opacity .8s 1.4s, transform .8s 1.4s; }

/* 簡介卡：頂端帶一點商品本身的顏色 */
.quick::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 170px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(var(--qt, 243, 220, 189), .13), transparent 70%); }
.quick > * { position: relative; }
.quick > .quick__close { position: absolute; }
/* 上一件／下一件 */
.quick__step { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.quick__step button { display: inline-flex; align-items: center; gap: 6px; max-width: 48%; font-size: 13px; letter-spacing: .12em; color: rgba(239, 233, 225, .5); transition: color .3s; }
.quick__step button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick__step button:hover { color: #f3dcbd; }
.quick__step svg { flex: none; transition: transform .3s; }
#qPrev:hover svg { transform: translateX(-3px); }
#qNext:hover svg { transform: translateX(3px); }
/* 數量到 1 或 9 時按鈕變暗 */
.qty button:disabled { opacity: .25; cursor: default; }
/* 收藏：心形彈一下 */
.quick__fav.pop svg { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 40% { transform: scale(1.35); } }
/* 數字等寬，換商品時價格不會左右跳 */
.quick__price, #qQty, .price-value, .nav-counter, #bagCount { font-variant-numeric: tabular-nums; }
/* 加入購物袋：滑過有光澤掃過、按下變「已放入」 */
.quick__add { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.quick__add::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-160%) skewX(-15deg); }
.quick__add:hover::after { transform: translateX(360%) skewX(-15deg); transition: transform .9s var(--dim); }
.quick__add.done { background: #efe2cc; }
.fly { position: fixed; z-index: 120; pointer-events: none; object-fit: contain; }
/* 鍵帽樣式的快捷鍵提示 */
.quick__hint kbd { display: inline-block; min-width: 22px; margin: 0 2px; padding: 1px 6px; border: 1px solid rgba(239, 233, 225, .2); border-bottom-width: 2px; border-radius: 4px;
  font-family: inherit; font-size: 11.5px; letter-spacing: 0; text-align: center; color: rgba(239, 233, 225, .65); }
/* 提示泡泡帶勾勾 */
.toast { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.toast svg { color: #f3dcbd; flex: none; }

/* 第一次來的小提示 */
.first-hint { position: fixed; left: 50%; bottom: 40px; z-index: 80; display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; pointer-events: none;
  font-size: 14px; letter-spacing: .2em; color: #efe9e1; background: rgba(21, 19, 18, .88); border: 1px solid rgba(243, 220, 189, .3);
  opacity: 0; transform: translate(-50%, 14px); transition: opacity .8s var(--dim), transform .8s var(--dim); }
.first-hint svg { color: #f3dcbd; }
.first-hint svg path { animation: wheelDot 1.6s ease-in-out infinite; }
@keyframes wheelDot { 50% { transform: translateY(3px); } }
.first-hint.show { opacity: 1; transform: translate(-50%, 0); }

/* 特寫頁：進場燈先暗後亮、商品慢慢浮起；滑鼠移動有微微視差 */
.detail.lampon .wall-wash { animation: dLamp 1.6s ease-out backwards; }
@keyframes dLamp { 0% { opacity: 0; } 20% { opacity: .5; } 28% { opacity: .1; } 45% { opacity: .9; } }
.detail.lampon .watch-image-wrap { animation: dRise 1.3s .35s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes dRise { from { opacity: 0; transform: translateY(14px); } }
.detail .watch-image-wrap { transition: opacity .35s ease, transform .6s var(--dim), translate .6s cubic-bezier(.2, .7, .2, 1); }
.detail .wall-wash { transition: opacity .35s ease, translate .8s cubic-bezier(.2, .7, .2, 1); }

/* 圓形游標：只有滑鼠才出現；壁龕上顯示「走近看」，對焦中的那個顯示「看介紹」 */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 110; width: 0; height: 0; pointer-events: none; }
  .cursor::before { content: ""; position: absolute; width: 78px; height: 78px; margin: -39px 0 0 -39px; left: 0; top: 0; border-radius: 50%;
    border: 1px solid rgba(243, 220, 189, .55); background: rgba(11, 10, 10, .35); opacity: 0; transform: scale(.4); transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
  .cursor span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; font-size: 12.5px; letter-spacing: .2em; padding-left: .2em; color: #f3dcbd; opacity: 0; transition: opacity .3s; }
  .cursor[data-mode="look"]::before, .cursor[data-mode="read"]::before { opacity: 1; transform: none; }
  .cursor[data-mode="read"]::before { background: rgba(243, 220, 189, .14); }
  .cursor[data-mode="look"] span, .cursor[data-mode="read"] span { opacity: 1; }
  .hall-main .niche-container:not(.wip) { cursor: none; }
  body.is-detail .cursor { display: none; }
}
/* 觸控裝置：不要游標圈和牆上光暈 */
@media (hover: none) {
  .wall-torch, .cursor { display: none; }
}

@media (max-width: 720px) {
  .brand { gap: 4px; }
  .brand__en { font-size: 16px; letter-spacing: .2em; white-space: nowrap; }
  .brand__tw { font-size: 12px; letter-spacing: .5em; }
  body.scrolled .hall-head .brand, body.scrolled .hall-head > div { transform: none; }
  .niche-tip { display: none; }
  .quick__step { margin-top: 10px; }
  .quick__step button { font-size: 12px; }
  .first-hint { bottom: 24px; font-size: 13px; }
  .curtain__en { font-size: 19px; letter-spacing: .36em; }
}
@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
}
/* 頁首購物袋字放大 */
.hall .hall-head > div > div { font-size: 14px; }
.hall #bagCount { width: 20px; height: 20px; font-size: 12px; }
/* 筆電矮螢幕：簡介卡收緊，不用在卡片裡捲 */
@media (max-height: 820px) and (min-width: 721px) {
  .quick { padding: 22px 24px; }
  .quick__lead { margin: 10px 0; }
  .quick__priceRow { margin-top: 10px; padding-bottom: 10px; }
  .quick__buy { margin-top: 14px; }
  .quick__hint { display: none; }
}
/* 字放大後，簡介卡底部三項服務擠不下：縮字距、必要時換行 */
.quick__perks { flex-wrap: wrap; row-gap: 6px; letter-spacing: .02em; }
.quick__perks li + li::before { margin-right: 8px; }
/* X 關閉鈕要在最上層（不然會被上方類別編號那行蓋住、點不到） */
.quick > .quick__close { z-index: 5; }
/* 出貨小標固定一行 */
.quick__stock { white-space: nowrap; flex: none; }

/* ============================================================
   2026-10-31 改名「光 LUMEN」：拱形壁龕＋嵌燈標誌
   ============================================================ */
.brand { flex-direction: row; align-items: center; gap: 14px; }
.brand__mark { width: 40px; height: 40px; flex: none; transition: transform .5s var(--dim); }
.brand__tw { font-family: 'Noto Serif TC', serif; font-size: 30px; font-weight: 300; letter-spacing: 0; padding: 0; color: #efe9e1; line-height: 1; }
.brand__en { position: relative; padding-left: 16px; font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 400; letter-spacing: .5em; color: rgba(243, 220, 189, .85); }
.brand__en::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: rgba(239, 233, 225, .25); }
.brand:hover .brand__tw { color: #fff; }
.brand:hover .brand__en { color: #f3dcbd; }
.brand:hover .brand__mark { transform: translateY(-2px); }
.curtain { gap: 18px; }
.curtain__mark { width: 84px; height: 84px; opacity: 0; transform: translateY(8px); transition: opacity 1s var(--dim), transform 1.2s var(--dim); }
.curtain.in .curtain__mark { opacity: 1; transform: none; }
.curtain.go .curtain__mark { opacity: 0; }
.curtain__tw { font-family: 'Noto Serif TC', serif; font-size: 46px; font-weight: 300; letter-spacing: 0; color: #efe9e1; }
.curtain__en { font-family: 'Cormorant Garamond', serif; font-size: 18px; letter-spacing: .7em; padding-left: .7em; color: rgba(243, 220, 189, .8); transition-delay: .35s; }
@media (max-width: 720px) {
  .brand { gap: 10px; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__tw { font-size: 22px; }
  .brand__en { font-size: 13px; letter-spacing: .4em; padding-left: 12px; }
  .curtain__tw { font-size: 36px; }
}