/* ─────────────────────────────────────────────────────────────
   马来通 · Shared Theme
   tone classes (.tone-liquor / companion / fleet / bills / exchange / mart)
   + structural utility classes consumed by all 6 SKU pages
   Zero build step — link as plain CSS from CDN HTML.
   ──────────────────────────────────────────────────────────── */

/* ── Google Fonts (all 6 tones combined, deduped) ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Noto+Serif+SC:wght@500;700;900&family=Playfair+Display:ital,wght@1,700;1,900&family=Noto+Sans+SC:wght@400;500;700;800&family=JetBrains+Mono:wght@400;600;700;800&family=Inter:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

/* ════════════════════════════════════════════════════════════
   1. TONE DEFINITIONS  — each sets CSS custom properties
   ════════════════════════════════════════════════════════════ */

/* ── 01 Liquor · gold-on-black, Cormorant serif ─────────── */
.tone-liquor {
  --bg-start:         #0A0A0A;
  --bg-end:           #141414;
  --bg-gradient:      linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
  --accent:           #C8A04F;
  --accent-soft:      #9E7F3F;
  --accent-hover:     #D4B060;
  --on-accent:        #0A0A0A;
  --text:             #F2E8D0;   /* raised from #E8DCC4 → 13.8:1 暗光下更清晰 */
  --text-muted:       #B89860;   /* raised from #8C7550 → 5.2:1 暗光中文 body 4.5:1+ 標準 */
  --text-sub:         #C8A04F;   /* raised from #9E7F3F → match accent gold · 6.8:1 對比 */
  --border-soft:      rgba(200,160,79,0.15);
  --border-med:       rgba(200,160,79,0.25);
  --border-strong:    rgba(200,160,79,0.45);
  --card-bg:          linear-gradient(180deg, rgba(200,160,79,0.04) 0%, rgba(10,10,10,0.20) 100%);
  --card-shadow:      0 12px 32px -8px rgba(200,160,79,0.25);
  --trust-bg:         linear-gradient(90deg, rgba(200,160,79,0.06), rgba(200,160,79,0.02));
  --ink-line:         linear-gradient(90deg, transparent, #C8A04F, transparent);
  --search-bg:        rgba(10,10,10,0.6);
  --search-bg-focus:  rgba(10,10,10,0.9);
  --banner-bg:        linear-gradient(135deg, #1a0f0a 0%, #2a1810 50%, #1a0f0a 100%);
  --header-bg:        rgba(0,0,0,0.80);
  --cart-bg:          #0F0F0F;
  --font-heading:     'Cormorant Garamond', 'Noto Serif SC', 'PingFang SC', 'PingFang TC', serif;
  --font-body:        'Inter', 'Noto Sans SC', 'PingFang SC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --chip-bg:          rgba(200,160,79,0.08);
  --chip-border:      rgba(200,160,79,0.30);
}

/* ── 01 Liquor · 暗光中文最佳化 type adjustments (2026-05-05) ─────── */
.tone-liquor.sku-body {
  /* CJK 比例間距 + readability 暗光優化 */
  font-feature-settings: "palt" 1, "kern" 1;
  letter-spacing: 0;
  line-height: 1.7;          /* 中文方塊字 1.45 太緊 → 1.7 暗光下舒服 */
  font-weight: 500;          /* dark bg + 細字會糊 → medium 起跳 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 中文混排數字 / 英文時保持等寬數字 + 不加 letter-spacing */
.tone-liquor .num,
.tone-liquor [class*="font-mono"],
.tone-liquor [style*="JetBrains"] { font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* 中文字最小 size 強制（防 text-[9px]/[10px] 暗光糊） */
.tone-liquor.sku-body :is(p, span, div, button, a, li, td, th):lang(zh),
.tone-liquor.sku-body :is(p, span, div, button, a, li, td, th) {
  /* CJK 字元的最小視覺單位 — 用 font-size-adjust 確保中文字大小不會比英文小 */
  font-size-adjust: 0.5;
}
/* 大標題（heading）字距：中文用負 letter-spacing 避免飄、英文 / 大寫保持 0.05em */
.tone-liquor .sku-heading {
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;    /* 從原 0.05em 收緊、中文不飄 */
  font-weight: 700;
}
/* 暗光增強：當系統偏好 prefers-contrast: more 時、進一步加粗 + boost 對比 */
@media (prefers-contrast: more) {
  .tone-liquor.sku-body {
    --text: #FFF8E8;
    --text-muted: #D4B068;
    font-weight: 600;
  }
}

/* ── 02 Companion · pink-on-blush, Playfair italic ─────── */
.tone-companion {
  --bg-start:         #FEF6F4;
  --bg-end:           #FDE8EE;
  --bg-gradient:      linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 50%, var(--bg-start) 100%);
  --accent:           #D87093;
  --accent-soft:      #E89BB0;
  --accent-hover:     #C45878;
  --on-accent:        #FFFFFF;
  --text:             #2D1B2E;
  --text-muted:       #9B7D8A;
  --text-sub:         #C9A961;
  --border-soft:      rgba(244,182,200,0.40);
  --border-med:       rgba(216,112,147,0.30);
  --border-strong:    rgba(216,112,147,0.60);
  --card-bg:          rgba(255,255,255,0.70);
  --card-shadow:      0 16px 48px -4px rgba(216,112,147,0.20);
  --trust-bg:         rgba(244,182,200,0.12);
  --ink-line:         linear-gradient(90deg, transparent, #D87093, transparent);
  --search-bg:        rgba(255,255,255,0.80);
  --search-bg-focus:  rgba(255,255,255,1.00);
  --banner-bg:        linear-gradient(135deg, #FDE8EE 0%, #F4B6C8 50%, #FDE8EE 100%);
  --header-bg:        rgba(255,255,255,0.50);
  --cart-bg:          #FFF6F9;
  --font-heading:     'Playfair Display', serif;
  --font-body:        'Noto Sans SC', 'PingFang SC', sans-serif;
  --chip-bg:          rgba(216,112,147,0.08);
  --chip-border:      rgba(216,112,147,0.30);
}

/* ── 03 Fleet · orange-on-white, JetBrains Mono ──────────── */
.tone-fleet {
  --bg-start:         #FFFFFF;
  --bg-end:           #F5F5F5;
  --bg-gradient:      #FFFFFF;
  --accent:           #FF6B35;
  --accent-soft:      #FF9366;
  --accent-hover:     #E05A28;
  --on-accent:        #FFFFFF;
  --text:             #0F0F0F;
  --text-muted:       #6B6B6B;
  --text-sub:         #FF6B35;
  --border-soft:      rgba(15,15,15,0.12);
  --border-med:       rgba(15,15,15,0.30);
  --border-strong:    #0F0F0F;
  --card-bg:          #F5F5F5;
  --card-shadow:      0 4px 12px -2px rgba(255,107,53,0.15);
  --trust-bg:         #FFF8F0;
  --ink-line:         linear-gradient(90deg, transparent, #FF6B35, transparent);
  --search-bg:        #F5F5F5;
  --search-bg-focus:  #FFFFFF;
  --banner-bg:        #FFF8F0;
  --header-bg:        #FFFFFF;
  --cart-bg:          #FFFFFF;
  --font-heading:     'JetBrains Mono', monospace;
  --font-body:        'Noto Sans SC', 'PingFang SC', sans-serif;
  --chip-bg:          rgba(255,107,53,0.08);
  --chip-border:      rgba(255,107,53,0.30);
}

/* ── 04 Bills · blue-on-lightgrey, Noto Sans SC official ─── */
.tone-bills {
  --bg-start:         #F4F7FA;
  --bg-end:           #EAF0F7;
  --bg-gradient:      #F4F7FA;
  --accent:           #1E5A99;
  --accent-soft:      #3A7ABF;
  --accent-hover:     #164880;
  --on-accent:        #FFFFFF;
  --text:             #1A2B4A;
  --text-muted:       #6B7A8E;
  --text-sub:         #3A7ABF;
  --border-soft:      #D4E0EC;
  --border-med:       #C4D5E6;
  --border-strong:    #1E5A99;
  --card-bg:          #FFFFFF;
  --card-shadow:      0 2px 8px -2px rgba(30,90,153,0.08);
  --trust-bg:         #E8F0F8;
  --ink-line:         linear-gradient(90deg, transparent, #1E5A99, transparent);
  --search-bg:        #FFFFFF;
  --search-bg-focus:  #FFFFFF;
  --banner-bg:        #E8F0F8;
  --header-bg:        #FFFFFF;
  --cart-bg:          #FFFFFF;
  --font-heading:     'Noto Sans SC', 'PingFang SC', sans-serif;
  --font-body:        'Noto Sans SC', 'PingFang SC', sans-serif;
  --chip-bg:          rgba(30,90,153,0.08);
  --chip-border:      rgba(30,90,153,0.30);
}

/* ── 05 Exchange · steel/white, Inter + JetBrains Mono ───── */
.tone-exchange {
  --bg-start:         #FFFFFF;
  --bg-end:           #FAFAFA;
  --bg-gradient:      #FFFFFF;
  --accent:           #2C3E50;
  --accent-soft:      #3D5166;
  --accent-hover:     #1E2D3D;
  --on-accent:        #FFFFFF;
  --accent-buy:       #27AE60;
  --accent-sell:      #E74C3C;
  --text:             #1A1A1A;
  --text-muted:       #8C8C8C;
  --text-sub:         #2C3E50;
  --border-soft:      #E4E4E4;
  --border-med:       #CFDDEB;
  --border-strong:    #2C3E50;
  --card-bg:          linear-gradient(180deg, #FAFAFA 0%, #F0F0F0 100%);
  --card-shadow:      0 2px 8px -2px rgba(44,62,80,0.10);
  --trust-bg:         #EEF4F9;
  --ink-line:         linear-gradient(90deg, transparent, #2C3E50, transparent);
  --search-bg:        #FFFFFF;
  --search-bg-focus:  #FFFFFF;
  --banner-bg:        #EEF4F9;
  --header-bg:        #FFFFFF;
  --cart-bg:          #FFFFFF;
  --font-heading:     'Inter', 'PingFang SC', sans-serif;
  --font-body:        'Inter', 'PingFang SC', sans-serif;
  --font-mono:        'JetBrains Mono', monospace;
  --chip-bg:          rgba(44,62,80,0.06);
  --chip-border:      rgba(44,62,80,0.25);
}

/* ── 06 Mart · red/yellow/rounded, Nunito friendly ─────── */
.tone-mart {
  --bg-start:         #FFF9E6;
  --bg-end:           #FFF3CC;
  --bg-gradient:      #FFF9E6;
  --accent:           #E63946;
  --accent-soft:      #EC6470;
  --accent-hover:     #CC2833;
  --accent-alt:       #F4A300;
  --on-accent:        #FFFFFF;
  --text:             #3A2817;
  --text-muted:       #8C6E50;
  --text-sub:         #F4A300;
  --border-soft:      #FFE4B5;
  --border-med:       rgba(230,57,70,0.20);
  --border-strong:    #E63946;
  --card-bg:          #FFFFFF;
  --card-shadow:      0 8px 24px -4px rgba(244,163,0,0.25);
  --trust-bg:         rgba(244,163,0,0.08);
  --ink-line:         linear-gradient(90deg, transparent, #E63946, transparent);
  --search-bg:        #FFFFFF;
  --search-bg-focus:  #FFFFFF;
  --banner-bg:        rgba(230,57,70,0.06);
  --header-bg:        #FFFFFF;
  --cart-bg:          #FFFFFF;
  --font-heading:     'Nunito', 'Noto Sans SC', sans-serif;
  --font-body:        'Nunito', 'Noto Sans SC', 'PingFang SC', sans-serif;
  --chip-bg:          rgba(230,57,70,0.08);
  --chip-border:      rgba(230,57,70,0.30);
}

/* ════════════════════════════════════════════════════════════
   2. STRUCTURAL UTILITIES  — tone-agnostic, use CSS vars
   ════════════════════════════════════════════════════════════ */

/* Body shell */
.sku-body {
  font-family: var(--font-body);
  background: var(--bg-gradient);
  color: var(--text);
  min-height: 100vh;
}

/* Accent shortcuts */
.sku-accent        { color: var(--accent); }
.sku-accent-soft   { color: var(--accent-soft); }
.sku-accent-bg     { background: var(--accent); color: var(--on-accent); }

/* Heading font */
.sku-heading { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.05em; }

/* Ink rule (decorative gradient line) */
.sku-ink-line {
  background: var(--ink-line);
  height: 1px;
}

/* Card surface */
.sku-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  transition: all .25s ease;
  position: relative;
}
.sku-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
}

/* Category / filter chips */
.sku-chip {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--text);
}
.sku-chip.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.sku-chip-count { color: var(--accent-soft); font-size: 10px; }

/* Trust bar */
.sku-trust-bar {
  background: var(--trust-bg);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.sku-trust-item { border-right: 1px solid var(--border-soft); }
.sku-trust-item:last-child { border-right: none; }

/* Search input */
.sku-search {
  background: var(--search-bg);
  border: 1px solid var(--border-med);
  color: var(--text);
}
.sku-search:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--search-bg-focus);
}
.sku-search::placeholder { color: var(--text-muted); }

/* Header backdrop */
.sku-header {
  background: var(--header-bg);
  backdrop-filter: blur(12px);
}

/* Banner carousel slide */
.sku-banner-slide {
  background: var(--banner-bg);
  border: 1px solid var(--border-soft);
}

/* Banner dots */
.sku-banner-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  transition: all .2s ease;
}
.sku-banner-dot.active {
  background: var(--accent);
  width: 18px;
  border-radius: 3px;
}

/* VIP progress */
.sku-vip-bar { background: color-mix(in srgb, var(--accent) 15%, transparent); height: 3px; border-radius: 2px; overflow: hidden; }
.sku-vip-fill { background: linear-gradient(90deg, var(--accent-soft) 0%, var(--accent) 100%); height: 100%; }

/* Product badge */
.sku-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; z-index: 2;
  backdrop-filter: blur(4px);
}
.badge-hot   { background: rgba(200,40,40,0.90);  color: #FFF; }
.badge-new   { background: rgba(60,180,120,0.90);  color: #0A0A0A; }
.badge-limit { background: rgba(200,160,79,0.95); color: #0A0A0A; }
.badge-low   { background: rgba(255,180,74,0.90);  color: #0A0A0A; }
.badge-case  { background: rgba(100,100,100,0.70); color: #FFF; }

/* Cart drawer */
.sku-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 400px;
  background: var(--cart-bg);
  border-left: 1px solid var(--border-med);
  z-index: 100;
  overflow: auto;
}

/* Floating CTA button */
.sku-float-cta {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 50;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 18px;
  border-radius: 40px;
  box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--accent) 40%, transparent);
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  transition: background .2s ease;
}
.sku-float-cta:hover { background: var(--accent-hover); }

/* Horizontal scroll snap strip */
.sku-scroll-x {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.sku-scroll-x::-webkit-scrollbar { display: none; }
.sku-scroll-x > * { scroll-snap-align: start; }

/* Mockup dev banner */
.sku-mockup-bar {
  background: var(--banner-bg);
  border-bottom: 1px solid var(--border-med);
  color: var(--accent);
}

/* Alpine cloak guard */
[x-cloak] { display: none !important; }

/* ════════════════════════════════════════════════════════════
   3. DARK-BG TYPOGRAPHY SYSTEM  — WCAG AA on dark surfaces
   Used by tone-liquor product cards, modal, home.html hero
   All values verified ≥ 4.5:1 (primary) or ≥ 3:1 (secondary)
   against backgrounds ranging from #050403 to rgba(20,15,10,0.95)
   ════════════════════════════════════════════════════════════ */
:root {
  /* 暗光中文最佳化（2026-05-05 升級）· 全 token 提升 ≥4.5:1 (body) / ≥6.5:1 (key)
     原則：中文方塊字暗光下對比度需更高、瞳孔放大會吃掉細節 */

  /* Primary text — cream/warm-white — contrast ~13.8:1 on #0A0807 (raised from 12:1) */
  --dk-txt-primary:   #F2E8D0;

  /* Price hero (RM XX) — bright warm gold — contrast ≥7:1 (raised) */
  --dk-txt-price:     #D8BC70;

  /* Product name on dark card strip — near-white — contrast ~12:1 */
  --dk-txt-name:      #EDE3D0;

  /* Brand / sub-label — warm sand — contrast ~5.2:1 (raised from 4.5) */
  --dk-txt-brand:     #B89860;

  /* Meta / USDT / secondary info — contrast ~5:1 (raised from 3:1, body 標準) */
  --dk-txt-meta:      #9C8868;

  /* Qty label / low-priority — contrast ~5:1 (raised from 3:1) */
  --dk-txt-label:     #A89270;

  /* Footer secondary — contrast ~4.7:1 (raised from 3:1) */
  --dk-txt-footer:    #A09280;

  /* Footer tertiary (disclaimer) — contrast ~3.8:1 (raised from 2.8:1) */
  --dk-txt-footnote:  #8A8278;

  /* Category nav inactive — contrast ~5:1 (raised from 3:1, key for low-light readability) */
  --dk-txt-nav:       #A89270;

  /* Category nav active — bright, clearly selected — unchanged */
  --dk-txt-nav-active:#E8D4A8;

  /* Stock warning states */
  --dk-txt-stock-low:  #E8B850;   /* amber — boosted from #D4A030 ~4.5→5.5:1 */
  --dk-txt-stock-out:  #E66060;   /* red — boosted from #D45050 ~4.5→5.5:1 */
}

/* 暗光增強：當系統偏好 prefers-contrast: more 進一步加成 */
@media (prefers-contrast: more) {
  :root {
    --dk-txt-primary:   #FFF8E8;
    --dk-txt-name:      #FFFAEC;
    --dk-txt-brand:     #D4B068;
    --dk-txt-meta:      #C8A858;
    --dk-txt-nav:       #C8A858;
    --dk-txt-footer:    #B8A488;
  }
}

/* ════════════════════════════════════════════════════════════
   SKU Bottom Nav · 6 SKU 共用導航 (2026-05-05 ship)
   5 main items (主頁/菸酒/女孩/超市/⋯) + drawer for tools
   每個 SKU page 加 .sku-bottom-nav-item.active 標識當前位置
   ════════════════════════════════════════════════════════════ */
.sku-bottom-nav{
  position: fixed !important;
  left: env(safe-area-inset-left, 0) !important;
  right: env(safe-area-inset-right, 0) !important;
  bottom: 0 !important;
  z-index: 50 !important;
  height: calc(64px + max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px))) !important;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  background: rgba(10,8,6,0.92) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(200,160,79,0.18);
  margin: 0 !important;
}
.sku-bottom-nav-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding-top: 6px;
  color: #7E6E58;
  transition: color .15s;
  text-decoration: none;
  position: relative;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.sku-bottom-nav-item:hover{ color: var(--dk-txt-name); }
.sku-bottom-nav-item.active{ color: var(--dk-txt-nav-active); }
.sku-bottom-nav-item.active::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--dk-txt-nav-active);
  border-radius: 1px;
}
.sku-bottom-nav-item svg{ width: 22px; height: 22px; }
.sku-bottom-nav-item .nav-label{ font-size: 11px; letter-spacing: 0.05em; font-weight: 500; }

/* Nav drawer (shared) */
.nav-drawer-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.nav-drawer-sheet{
  width: 100%; max-width: 480px;
  background: linear-gradient(180deg, #161008 0%, #0F0A06 100%);
  border-top: 1px solid rgba(200,160,79,0.25);
  border-radius: 20px 20px 0 0;
  padding: 12px 16px max(28px, env(safe-area-inset-bottom, 16px));
  box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
}
.nav-drag-handle{
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(200,160,79,0.35); margin: 0 auto 16px;
}
.nav-drawer-item{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(200,160,79,0.08);
  color: var(--dk-txt-name);
  text-decoration: none;
  transition: background .15s;
}
.nav-drawer-item:last-of-type{ border-bottom: 0; }
.nav-drawer-item:hover{ background: rgba(200,160,79,0.06); }
.nav-drawer-item svg{ width: 22px; height: 22px; color: var(--dk-txt-brand); flex-shrink: 0; }
.nav-drawer-item .label-zh{ font-size: 16px; font-weight: 500; }
.nav-drawer-item .label-en{ font-size: 12px; color: var(--dk-txt-meta); margin-top: 2px; letter-spacing: 0.04em; }

/* SKU page body padding · 預留 64px nav 空間 */
.sku-body[class*="tone-"]{
  padding-bottom: calc(72px + max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px))) !important;
}

/* Utility classes for dark surfaces */
.dk-name    { color: var(--dk-txt-name); }
.dk-brand   { color: var(--dk-txt-brand); }
.dk-price   { color: var(--dk-txt-price); }
.dk-meta    { color: var(--dk-txt-meta); }
.dk-label   { color: var(--dk-txt-label); }
.dk-nav     { color: var(--dk-txt-nav); }
.dk-nav-active { color: var(--dk-txt-nav-active); }

/* ─── Desktop phone-frame cap (6/2 Tiger: PC 95% mobile · 桌機跑版修正) ─── */
/* 桌機 ≥ 768px 把整個 body 限制成手機寬度居中 · 模擬 phone preview */
@media (min-width: 768px) {
  html {
    background: #000;
  }
  body {
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 100vh;
    box-shadow: 0 0 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    position: relative;
    overflow-x: hidden;
  }
  /* sticky bottom-nav 也跟著 cap · 不跨到 phone-frame 外 */
  .sku-bottom-nav {
    max-width: 480px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
  /* fixed overlays (modals, drawers, wallet badge) 跟著 cap */
  .modal-overlay-girls,
  .cart-drawer-overlay,
  .checkout-overlay,
  .nav-drawer-overlay,
  .top-wallet-badge {
    max-width: 480px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
  /* wallet badge 已用 translateX(-50%) · cap 後重設讓它正中 */
  .top-wallet-badge {
    transform: translateX(-50%) !important;
  }
}