/* ── Mobile App Shell ── */
body.app-mode { overflow: hidden; background: #f2f2f6; }
body.app-mode > *:not(#app-shell):not(.app-override) { display: none !important; }

#app-shell { display: none; flex-direction: column; height: 100dvh; background: #f2f2f6; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; letter-spacing: -0.01em; }
body.app-mode #app-shell { display: flex; }

.app-status { height: env(safe-area-inset-top, 0px); background: var(--ink); flex-shrink: 0; }

/* ── Top Nav ── */
.app-topnav { display: flex; align-items: center; padding: 8px 16px; min-height: 52px; background: var(--ink); color: #fff; flex-shrink: 0; gap: 8px; }
.app-topnav .back { width: 36px; height: 36px; border: none; background: transparent; color: var(--gold-2); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-left: -6px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.app-topnav .back:active { background: rgba(255,255,255,.1); }
.app-topnav h1 { flex: 1; font-size: 17px; font-weight: 700; margin: 0; line-height: 1.2; }
.app-topnav .top-action { width: 36px; height: 36px; border: none; background: transparent; color: var(--gold-2); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.app-topnav .top-action:active { background: rgba(255,255,255,.1); }

/* ── Content ── */
.app-content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: none; background: #f2f2f6; padding-bottom: 12px; }
.app-page { display: none; min-height: 100%; }
.app-page.active { display: block; }

/* ── Bottom Tab Bar ── */
.app-tabbar { display: flex; background: rgba(249,249,249,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-shrink: 0; margin: 0 12px 12px; border-radius: 24px; padding: 4px 0; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.08); }
.app-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 4px; border: none; background: transparent; font-size: 10px; color: #8a8a8e; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color .15s; border-radius: 20px; margin: 0 4px; }
.app-tabbar button .tab-icon { position: relative; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.tab-badge { position: absolute; top: -3px; right: -6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--rose); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; }
.app-tabbar button.active { color: #fff; background: var(--gold); }
.app-tabbar button.active .tab-icon { font-weight: 700; }
.app-tabbar button:active { opacity: .5; }

/* ── iOS Cards ── */
.ios-card { background: #fff; border-radius: 12px; margin: 8px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden; }
.ios-card-header { padding: 16px 16px 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a8a8e; }
.ios-card-header:empty { display: none; }

/* ── Product Row ── */
.prod-row { display: flex; gap: 12px; padding: 12px 16px; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.prod-row:active { background: rgba(0,0,0,.03); }
.prod-row + .prod-row { border-top: .5px solid rgba(0,0,0,.06); }
.prod-row img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #e8e8ed; flex-shrink: 0; }
.prod-row .info { flex: 1; min-width: 0; }
.prod-row .info h4 { font-size: 15px; font-weight: 600; margin: 0 0 2px; line-height: 1.3; }
.prod-row .info .meta { font-size: 12px; color: #8a8a8e; }
.prod-row .info .price { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.prod-row .wish-btn { width: 32px; height: 32px; border: none; background: transparent; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; color: #c7c7cc; }
.prod-row .wish-btn.saved { color: var(--rose); }
.prod-row .wish-btn:active { transform: scale(1.2); }

/* ── Horizontal Scroll ── */
.hscroll { display: flex; gap: 10px; padding: 0 16px 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll-card { scroll-snap-align: start; flex-shrink: 0; width: 140px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hscroll-card img { width: 140px; height: 140px; border-radius: 10px; object-fit: cover; background: #e8e8ed; }
.hscroll-card h5 { font-size: 13px; font-weight: 600; margin: 6px 0 2px; line-height: 1.2; }
.hscroll-card .meta { font-size: 11px; color: #8a8a8e; }

/* ── Featured Banner ── */
.feat-banner { position: relative; margin: 8px 16px; border-radius: 14px; overflow: hidden; aspect-ratio: 2.8/1; background: var(--linen); }
.feat-banner img { width: 100%; height: 100%; object-fit: cover; }
.feat-banner .overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, transparent 70%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
.feat-banner .overlay h2 { color: #fff; font-size: 22px; font-weight: 800; margin: 0; line-height: 1.1; }
.feat-banner .overlay p { color: rgba(255,255,255,.8); font-size: 13px; margin: 4px 0 0; }

/* ── Section Headers ── */
.section-h { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 16px 8px; }
.section-h h3 { font-size: 20px; font-weight: 800; margin: 0; }
.section-h .more { font-size: 13px; color: var(--gold); font-weight: 600; cursor: pointer; border: none; background: transparent; padding: 0; -webkit-tap-highlight-color: transparent; }

/* ── Filter Chips ── */
.filter-scroll { display: flex; gap: 8px; padding: 0 16px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.filter-scroll::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; padding: 8px 16px; border-radius: 20px; border: .5px solid rgba(0,0,0,.1); background: #fff; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: all .2s; }
.chip.active { background: var(--gold); color: #fff; border-color: var(--gold); font-weight: 600; }
.chip:active { opacity: .6; }
.chip.note { background: transparent; border: none; color: #8a8a8e; font-size: 13px; cursor: default; }

/* ── Bottom Sheet ── */
#app-sheet { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; pointer-events: none; }
#app-sheet.open { display: flex; pointer-events: auto; }
#app-sheet .sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#app-sheet.open .sheet-backdrop { opacity: 1; }
#app-sheet .sheet-panel { position: relative; margin-top: auto; background: #fff; border-radius: 14px 14px 0 0; max-height: 90vh; overflow-y: auto; transform: translateY(100%); transition: transform .35s cubic-bezier(0.175, 0.885, 0.32, 1.275); padding-bottom: env(safe-area-inset-bottom, 0px); }
#app-sheet.open .sheet-panel { transform: translateY(0); }
.sheet-handle { width: 36px; height: 5px; border-radius: 3px; background: #c7c7cc; margin: 8px auto; flex-shrink: 0; }
.sheet-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #e8e8ed; }
.sheet-body { padding: 0 16px 16px; }
.sheet-body h2 { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.sheet-body .price { font-size: 18px; font-weight: 700; color: var(--ink); }
.sheet-body .desc { font-size: 14px; color: #636366; margin: 8px 0; line-height: 1.5; }
.sheet-total { display: flex; justify-content: space-between; padding: 12px 0; font-size: 17px; font-weight: 700; border-top: .5px solid rgba(0,0,0,.06); margin-top: 8px; }
.sheet-options { display: grid; gap: 8px; margin: 12px 0; }
.sheet-options label { font-size: 13px; font-weight: 700; color: #636366; display: block; margin-bottom: 4px; }
.sheet-options label .required { color: var(--rose); }
.sheet-options select, .sheet-options .size-selector { width: 100%; }
.sheet-options .form-row { flex-direction: column; gap: 12px; }
.sheet-options .form-group { margin: 0; }
.sheet-options .quantity-selector { justify-content: center; }
.sheet-options .quantity-selector input { font-size: 16px; }
.sheet-actions { display: flex; gap: 10px; padding: 12px 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.sheet-actions .btn { flex: 1; min-height: 50px; font-size: 16px; }
.sheet-wish { width: 50px; height: 50px; border: 1px solid var(--line); background: transparent; border-radius: 10px; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; color: #c7c7cc; }
.sheet-wish.saved { color: var(--rose); border-color: rgba(126,63,72,.3); background: rgba(126,63,72,.06); }

/* ── Cart Page ── */
.cart-item-row { display: flex; gap: 12px; padding: 14px 16px; align-items: center; cursor: default; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cart-item-row + .cart-item-row { border-top: .5px solid rgba(0,0,0,.06); }
.cart-item-row img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #e8e8ed; flex-shrink: 0; }
.cart-item-row .info { flex: 1; min-width: 0; }
.cart-item-row .info h4 { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.cart-item-row .info .meta { font-size: 12px; color: #8a8a8e; }
.cart-item-row .info .price { font-size: 13px; font-weight: 700; margin-top: 2px; }
.cart-qty { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cart-qty button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; color: var(--ink); font-weight: 600; }
.cart-qty button:active { background: var(--linen); }
.cart-qty span { font-size: 14px; font-weight: 700; min-width: 20px; text-align: center; }
.cart-empty { text-align: center; padding: 60px 20px; color: #8a8a8e; font-size: 14px; }

/* ── Account Page ── */
.acct-card { background: #fff; border-radius: 12px; margin: 8px 16px; overflow: hidden; }
.acct-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.acct-row:active { background: rgba(0,0,0,.03); }
.acct-row + .acct-row { border-top: .5px solid rgba(0,0,0,.06); }
.acct-row .acct-icon { width: 28px; font-size: 18px; text-align: center; color: #8a8a8e; }
.acct-row .acct-label { flex: 1; font-size: 15px; }
.acct-row .acct-arrow { color: #c7c7cc; font-size: 14px; }
.acct-profile { display: flex; align-items: center; gap: 14px; padding: 20px 16px; }
.acct-profile .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--linen); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--muted); overflow: hidden; }
.acct-profile .avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-profile .info h3 { font-size: 17px; font-weight: 700; margin: 0; }
.acct-profile .info p { font-size: 13px; color: #8a8a8e; margin: 2px 0 0; }
.acct-badge { font-size: 11px; font-weight: 700; color: var(--gold); background: rgba(184,137,54,.1); padding: 2px 8px; border-radius: 4px; }

/* ── Saved Page ── */
.saved-empty { text-align: center; padding: 60px 20px; color: #8a8a8e; font-size: 14px; }

/* ── Cleaners ── */
.service-row { display: flex; gap: 12px; padding: 14px 16px; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.service-row:active { background: rgba(0,0,0,.03); }
.service-row + .service-row { border-top: .5px solid rgba(0,0,0,.06); }
.service-row .srv-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--ink); color: var(--gold-2); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; flex-shrink: 0; }
.service-row .info { flex: 1; }
.service-row .info h4 { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.service-row .info .meta { font-size: 12px; color: #8a8a8e; }
.service-row .add-btn { min-width: 70px; min-height: 36px; font-size: 12px; padding: 0 12px; border-radius: 8px; }

/* ── Toast ── */
.app-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.82); color: #fff; padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; z-index: 200; opacity: 0; transition: opacity .2s; pointer-events: none; }
.app-toast.show { opacity: 1; }

/* ── Loading Skeleton ── */
.skel { background: linear-gradient(90deg, #e8e8ed 25%, #f0f0f5 50%, #e8e8ed 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Pull-to-refresh indicator ── */
.ptr-indicator { text-align: center; padding: 12px; font-size: 12px; color: #8a8a8e; display: none; }

/* ── Responsive: ensure app only activates below 768px ── */
@media (min-width: 768px) {
  body.app-mode #app-shell { display: none !important; }
  body.app-mode > *:not(#app-shell):not(.app-override) { display: revert !important; }
  body.app-mode { overflow: auto !important; }
}