:root {
    --red: #E8001C;
    --red-dark: #c0001a;
    --blue: #0033A0;
    --blue-dark: #002280;
    --blue-light: #e8edf8;
    --orange: #F26522;

    /* ── THEME TOKENS (light defaults) ── */
    --bg:           #ffffff;
    --bg-soft:      #f5f5f5;
    --bg-input:     #f5f5f5;
    --bg-card:      #ffffff;
    --bg-elev:      #ffffff;
    --bg-overlay:   rgba(0,0,0,.5);
    --text:         #0a0a0a;
    --text-soft:    #555;
    --text-muted:   #888;
    --border-soft:  #f0f0f0;

    /* ── LEGACY ALIASES ── */
    --dark: #111111;
    --grey: var(--bg-soft);
    --mid:  var(--text-muted);
    --white: var(--bg);
    --border: #e8e8e8;
  }

  /* ── DARK THEME ── */
  html[data-theme="dark"] {
    --bg:           #0a0a0a;
    --bg-soft:      #141414;
    --bg-input:     #1f1f1f;
    --bg-card:      #161616;
    --bg-elev:      #1c1c1c;
    --bg-overlay:   rgba(0,0,0,.7);
    --text:         #f0f0f0;
    --text-soft:    #c0c0c0;
    --text-muted:   #888;
    --border:       #2a2a2a;
    --border-soft:  #1f1f1f;
    --grey:  var(--bg-soft);
    --white: var(--bg);
    color-scheme: dark;
  }
  html:not([data-theme="dark"]) { color-scheme: light; }

  /* ════════════════════════════════════════════════════════════ */
  /* ── UI THEMES (admin-controlled launcher themes) ── */
  /* ════════════════════════════════════════════════════════════ */

  /* Particle overlay — covers the whole screen, no clicks */
  #theme-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
    display: none;
  }
  #theme-particles.active { display: block; }
  .tparticle {
    position: absolute;
    top: 0; left: 0;
    will-change: transform, opacity;
    user-select: none;
    pointer-events: none;
  }
  @keyframes tp-twinkle {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
  }
  .tparticle.twinkle { animation: tp-twinkle 1.6s ease-in-out infinite; }

  /* Theme banner — sits right above the call banner */
  #theme-banner {
    display: none;
    padding: 8px 14px;
    text-align: center;
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
    line-height: 1.3;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1500;
  }
  #theme-banner.active { display: block; }
  #theme-banner .tb-emoji { font-size: 14px; margin-right: 4px; vertical-align: -1px; }

  /* When banner is shown, push the page content down so it isn't hidden */
  body[data-ui-theme]:not([data-ui-theme="default"]) #main-content {
    padding-top: 32px !important;
  }

  /* ── Per-theme color overrides ── */
  /* Christmas — red & green */
  body[data-ui-theme="christmas"] #theme-banner { background: linear-gradient(135deg, #c41e3a 0%, #0f5132 100%); }
  body[data-ui-theme="christmas"] .topbar,
  body[data-ui-theme="christmas"] .navbar,
  body[data-ui-theme="christmas"] .home-header { border-bottom-color: #c41e3a; }

  /* New Year — gold/black */
  body[data-ui-theme="newyear"] #theme-banner { background: linear-gradient(135deg, #1a1a2e 0%, #d4af37 100%); }

  /* Valentine's — pink */
  body[data-ui-theme="valentine"] #theme-banner { background: linear-gradient(135deg, #ff4d6d 0%, #ff8fa3 100%); }

  /* Easter — pastels */
  body[data-ui-theme="easter"] #theme-banner { background: linear-gradient(135deg, #ffb4d6 0%, #ffd166 100%); color: #6a1b6a; }

  /* Eid — emerald + gold */
  body[data-ui-theme="eid"] #theme-banner { background: linear-gradient(135deg, #00695c 0%, #ffd54f 100%); }

  /* Independence — Nigerian flag */
  body[data-ui-theme="independence"] #theme-banner {
    background: linear-gradient(90deg, #008751 0%, #008751 33%, #ffffff 33%, #ffffff 66%, #008751 66%, #008751 100%);
    color: #008751;
    text-shadow: 0 1px 2px rgba(255,255,255,.6);
  }

  /* Black Friday — dark gold */
  body[data-ui-theme="blackfriday"] #theme-banner { background: linear-gradient(135deg, #000 0%, #ffd60a 100%); color: #fff; }

  /* Birthday — pink/gold */
  body[data-ui-theme="birthday"] #theme-banner { background: linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #ffd166 100%); }

  /* Halloween — orange/dark */
  body[data-ui-theme="halloween"] #theme-banner { background: linear-gradient(135deg, #1a1a2e 0%, #ff8c00 100%); }

  /* ════════════════════════════════════════════════════════════════ */
  /* ── FULL ATMOSPHERIC THEMING (background + text + cards) ──     */
  /* IMPORTANT: themes are applied on `html` AND `body` so legacy   */
  /* aliases like --white (defined on :root) re-resolve correctly.  */
  /* ════════════════════════════════════════════════════════════════ */

  /* Christmas — soft mint green wash */
  html:has(body[data-ui-theme="christmas"]),
  body[data-ui-theme="christmas"] {
    --bg:        #f0f7f1;
    --bg-soft:   #e6f0e8;
    --bg-card:   #e6f0e8;
    --text:      #14352a;
    --text-soft: #335c4a;
    --border-soft: #cfe2d3;
    --white:     #e6f0e8;
    --grey:      #d8e8db;
  }

  /* New Year — midnight blue with gold trim */
  html:has(body[data-ui-theme="newyear"]),
  body[data-ui-theme="newyear"] {
    --bg:        #1a1a2e;
    --bg-soft:   #16213e;
    --bg-card:   #232342;
    --text:      #fff8d9;
    --text-soft: #d4af37;
    --border-soft: #2c2c52;
    --white:     #232342;
    --grey:      #16213e;
    color-scheme: dark;
  }

  /* Valentine's — soft pink wash */
  html:has(body[data-ui-theme="valentine"]),
  body[data-ui-theme="valentine"] {
    --bg:        #fff0f3;
    --bg-soft:   #ffe0e6;
    --bg-card:   #ffe0e6;
    --text:      #5e1b2c;
    --text-soft: #8a3a4f;
    --border-soft: #ffc9d4;
    --white:     #ffe0e6;
    --grey:      #ffd4dc;
  }

  /* Easter — pastel cream */
  html:has(body[data-ui-theme="easter"]),
  body[data-ui-theme="easter"] {
    --bg:        #fff8e8;
    --bg-soft:   #fff0d4;
    --bg-card:   #fff0d4;
    --text:      #5d3b00;
    --text-soft: #8a6a2f;
    --border-soft: #ffe4b8;
    --white:     #fff0d4;
    --grey:      #ffe9c4;
  }

  /* Eid — soft emerald cream */
  html:has(body[data-ui-theme="eid"]),
  body[data-ui-theme="eid"] {
    --bg:        #f0f8f5;
    --bg-soft:   #e0f0ea;
    --bg-card:   #e0f0ea;
    --text:      #003d33;
    --text-soft: #1a5e52;
    --border-soft: #c5e0d6;
    --white:     #e0f0ea;
    --grey:      #d2e6db;
  }

  /* Independence — clean white with green accents */
  html:has(body[data-ui-theme="independence"]),
  body[data-ui-theme="independence"] {
    --bg:        #ffffff;
    --bg-soft:   #f0f7f2;
    --bg-card:   #f0f7f2;
    --text:      #003a1f;
    --text-soft: #1a5e3a;
    --border-soft: #c5e0cd;
    --white:     #f0f7f2;
    --grey:      #e2eee5;
  }

  /* Black Friday — soft warm dark with gold accents (not stark black) */
  html:has(body[data-ui-theme="blackfriday"]),
  body[data-ui-theme="blackfriday"] {
    --bg:        #1a1610;
    --bg-soft:   #221d14;
    --bg-card:   #2a2418;
    --text:      #ffd60a;
    --text-soft: #d4af37;
    --border-soft: #3a3220;
    --white:     #2a2418;
    --grey:      #221d14;
    color-scheme: dark;
  }

  /* Birthday — bubblegum pink with cream cards */
  html:has(body[data-ui-theme="birthday"]),
  body[data-ui-theme="birthday"] {
    --bg:        #fff0f5;
    --bg-soft:   #ffe0ec;
    --bg-card:   #ffe0ec;
    --text:      #6e1d4a;
    --text-soft: #a5447a;
    --border-soft: #ffc9dc;
    --white:     #ffe0ec;
    --grey:      #ffd4e1;
  }

  /* Halloween — dark spooky orange */
  html:has(body[data-ui-theme="halloween"]),
  body[data-ui-theme="halloween"] {
    --bg:        #1a1410;
    --bg-soft:   #2a1f15;
    --bg-card:   #332514;
    --text:      #ffd9a3;
    --text-soft: #ffae5c;
    --border-soft: #4a3520;
    --white:     #332514;
    --grey:      #2a1f15;
    color-scheme: dark;
  }

  /* ── Force key section backgrounds (in case --white isn't picked up) ── */
  body[data-ui-theme]:not([data-ui-theme="default"]) {
    background: var(--bg) !important;
    color: var(--text);
  }
  body[data-ui-theme]:not([data-ui-theme="default"]) #main-content {
    background: var(--bg) !important;
  }
  body[data-ui-theme]:not([data-ui-theme="default"]) .hero-wrapper,
  body[data-ui-theme]:not([data-ui-theme="default"]) .recommended-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .products-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .cat-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .pd-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .sp-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .cat-section-block,
  body[data-ui-theme]:not([data-ui-theme="default"]) .coupons-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .profile-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .account-menu,
  body[data-ui-theme]:not([data-ui-theme="default"]) .settings-card,
  body[data-ui-theme]:not([data-ui-theme="default"]) .product-card,
  body[data-ui-theme]:not([data-ui-theme="default"]) .home-header,
  body[data-ui-theme]:not([data-ui-theme="default"]) .topbar,
  body[data-ui-theme]:not([data-ui-theme="default"]) .bottom-nav,
  body[data-ui-theme]:not([data-ui-theme="default"]) .navbar,
  body[data-ui-theme]:not([data-ui-theme="default"]) #sidebar-nav,
  body[data-ui-theme]:not([data-ui-theme="default"]) .cart-item,
  body[data-ui-theme]:not([data-ui-theme="default"]) .order-summary,
  body[data-ui-theme]:not([data-ui-theme="default"]) .checkout-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .pd-content,
  body[data-ui-theme]:not([data-ui-theme="default"]) .sp-content,
  body[data-ui-theme]:not([data-ui-theme="default"]) .home-content,
  body[data-ui-theme]:not([data-ui-theme="default"]) .order-card,
  body[data-ui-theme]:not([data-ui-theme="default"]) .inbox-msg,
  body[data-ui-theme]:not([data-ui-theme="default"]) .address-card,
  body[data-ui-theme]:not([data-ui-theme="default"]) .review-card,
  body[data-ui-theme]:not([data-ui-theme="default"]) .menu-item,
  body[data-ui-theme]:not([data-ui-theme="default"]) .account-menu-item,
  body[data-ui-theme]:not([data-ui-theme="default"]) .modal-content,
  body[data-ui-theme]:not([data-ui-theme="default"]) .sheet,
  body[data-ui-theme]:not([data-ui-theme="default"]) .bottom-sheet,
  body[data-ui-theme]:not([data-ui-theme="default"]) .pickup-card,
  body[data-ui-theme]:not([data-ui-theme="default"]) .featured-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .new-arrivals-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .deals-section,
  body[data-ui-theme]:not([data-ui-theme="default"]) .dynamic-section {
    background: var(--bg-card) !important;
    color: var(--text);
  }

  /* Section labels (NEED ASSISTANCE?, MY SAMMY ACCOUNT) — soft */
  body[data-ui-theme]:not([data-ui-theme="default"]) .account-section-label,
  body[data-ui-theme]:not([data-ui-theme="default"]) .settings-section-label,
  body[data-ui-theme]:not([data-ui-theme="default"]) .co-section-label,
  body[data-ui-theme]:not([data-ui-theme="default"]) .section-label {
    background: var(--bg-soft) !important;
    color: var(--text-soft) !important;
  }

  /* Order summary in cart — was white before */
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="order-summary"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="cart-summary"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="totals"] {
    background: var(--bg-card) !important;
    color: var(--text);
  }

  /* Borders soften to theme tones */
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="border:1px solid #f0f0f0"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="border: 1px solid #f0f0f0"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="border-top:1px solid #f0f0f0"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="border-bottom:1px solid #f0f0f0"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="border:1px solid #eee"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="border: 1px solid #eee"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="border:1px solid #e8e8e8"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="border: 1px solid #e8e8e8"] {
    border-color: var(--border-soft) !important;
  }

  /* Soften titles/labels inside themed sections so contrast is right */
  body[data-ui-theme]:not([data-ui-theme="default"]) .recommended-title,
  body[data-ui-theme]:not([data-ui-theme="default"]) .pd-section-title,
  body[data-ui-theme]:not([data-ui-theme="default"]) .sp-section-title,
  body[data-ui-theme]:not([data-ui-theme="default"]) .coupons-section-title,
  body[data-ui-theme]:not([data-ui-theme="default"]) .profile-section-title,
  body[data-ui-theme]:not([data-ui-theme="default"]) .section-head,
  body[data-ui-theme]:not([data-ui-theme="default"]) .menu-label > div:first-child,
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color:#000"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color: #000"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color:#111"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color: #111"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color:#222"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color: #222"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color:#333"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color: #333"] {
    color: var(--text) !important;
  }
  body[data-ui-theme]:not([data-ui-theme="default"]) .recommended-subtitle,
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color:#666"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color: #666"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color:#888"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color: #888"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color:#777"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color: #777"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color:#555"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="color: #555"] {
    color: var(--text-soft) !important;
  }

  /* Inline white backgrounds (cards, modals) flip to themed card bg */
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background:#fff"]:not([style*="background:#fff8"]):not([style*="background:#ffe"]):not([style*="background:#fff0"]),
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background: #fff"]:not([style*="background: #fff8"]):not([style*="background: #ffe"]):not([style*="background: #fff0"]),
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background:#FFFFFF"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background: #FFFFFF"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background:white"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background: white"] {
    background: var(--bg-card) !important;
  }
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background:#f5f5f5"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background: #f5f5f5"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background:#f8f8f8"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background: #f8f8f8"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background:#fafafa"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background: #fafafa"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background:#f0f0f0"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background: #f0f0f0"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background:#eee"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [style*="background: #eee"] {
    background: var(--bg-soft) !important;
  }

  /* Inputs / textarea / select adapt to theme */
  body[data-ui-theme]:not([data-ui-theme="default"]) input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  body[data-ui-theme]:not([data-ui-theme="default"]) textarea,
  body[data-ui-theme]:not([data-ui-theme="default"]) select {
    background: var(--bg-soft);
    color: var(--text);
    border-color: var(--border-soft);
  }
  body[data-ui-theme]:not([data-ui-theme="default"]) input::placeholder,
  body[data-ui-theme]:not([data-ui-theme="default"]) textarea::placeholder { color: var(--text-soft); opacity: .7; }

  /* ── NUCLEAR SWEEP — broad-pattern selectors so we don't miss anything ── */
  /* Every section-like wrapper and every "card"-suffix class flips */
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="-section"]:not(#theme-banner):not(.ui-theme-banner),
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="-card"]:not(.referral-hero-content),
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="-block"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="-container"]:not(body),
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="-wrap"]:not(.referral-hero):not(.hero-deco):not(.hero-deco2),
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="-sheet"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="-modal"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="-row"]:not([class*="cart-row"]),
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="-tile"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [class*="-list"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [id^="page-"],
  body[data-ui-theme]:not([data-ui-theme="default"]) [id$="-overlay"]:not(#stars-overlay):not(#ui-theme-particles) {
    background-color: var(--bg-card);
    color: var(--text);
  }

  /* Buttons retain their primary color but get a themed default state */
  body[data-ui-theme]:not([data-ui-theme="default"]) button:not([class*="primary"]):not([class*="-pay-btn"]):not([class*="-decline"]):not(.action-btn):not([class*="cta"]):not([style*="background:"]):not([style*="background-color:"]) {
    background-color: var(--bg-soft);
    color: var(--text);
  }

  /* DARK theme tweaks — text-soft for dim hints */
  body[data-ui-theme="newyear"] *,
  body[data-ui-theme="blackfriday"] *,
  body[data-ui-theme="halloween"] * {
    border-color: var(--border-soft) !important;
  }

  /* Alphabet section dividers (B, C, ...) — blend into theme bg, not stark */
  body[data-ui-theme]:not([data-ui-theme="default"]) .cat-alpha-header {
    background: var(--bg) !important;
    color: var(--text-soft) !important;
  }
  body[data-ui-theme]:not([data-ui-theme="default"]) .cat-alpha-group {
    background: var(--bg-card) !important;
    border-color: var(--border-soft) !important;
  }
  body[data-ui-theme]:not([data-ui-theme="default"]) .cat-list-row {
    border-bottom-color: var(--border-soft) !important;
    color: var(--text);
  }
  body[data-ui-theme]:not([data-ui-theme="default"]) .cat-list-row:active {
    background: var(--bg-soft) !important;
  }
  body[data-ui-theme]:not([data-ui-theme="default"]) .cat-list-name {
    color: var(--text) !important;
  }

  /* Section labels (NEED ASSISTANCE?, MY SAMMY ACCOUNT, etc.) — blend in */
  body[data-ui-theme]:not([data-ui-theme="default"]) .account-section-label,
  body[data-ui-theme]:not([data-ui-theme="default"]) .settings-section-label,
  body[data-ui-theme]:not([data-ui-theme="default"]) .co-section-label,
  body[data-ui-theme]:not([data-ui-theme="default"]) .section-label {
    background: var(--bg) !important;
    color: var(--text-soft) !important;
  }

  /* Smooth theme transitions on common elements */
  body, .product-card, .cart-item, input, textarea, select,
  .account-menu, .settings-card,
  .topbar, .bottom-nav, .recommended-section, .products-section, .cat-section,
  .hero-wrapper, .home-header, .pd-section, .sp-section, .coupons-section, .profile-section,
  #main-content {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
  }

  /* ════════════════════════════════════════════════════════════════ */
  /* ── APP TAB STYLE PRESETS (customer bottom nav) ──               */
  /* Activated via html[data-tabstyle="..."] — all preset CSS below. */
  /* The default Sammy floating-pill style is preserved if no theme. */
  /* ════════════════════════════════════════════════════════════════ */

  /* When tab style is enabled, hide the default Sammy active pill */
  html[data-tabstyle]:not([data-tabstyle="sammy"]) #nav-active-pill { display: none !important; }

  /* For all non-floating presets, flush the dock to the very bottom (no gap on sides or below) */
  html[data-tabstyle]:not([data-tabstyle="sammy"]):not([data-tabstyle="iphone17"]) #sidebar-nav {
    bottom: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  html[data-tabstyle]:not([data-tabstyle="sammy"]):not([data-tabstyle="iphone17"]) #sidebar-tabs {
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Bump bottom padding so content doesn't hide behind the flush dock */
  html[data-tabstyle]:not([data-tabstyle="sammy"]):not([data-tabstyle="iphone17"]) #main-content {
    padding-bottom: 78px !important;
  }

  /* ─── PRESET 2: WhatsApp ─── */
  html[data-tabstyle="whatsapp"] #sidebar-tabs {
    background: #fff !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
  }
  html[data-tabstyle="whatsapp"] .nav-tab { color: #999 !important; }
  html[data-tabstyle="whatsapp"] .nav-tab.active { color: #25D366 !important; }
  html[data-tabstyle="whatsapp"] .nav-tab.active::before {
    content: '';
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    background: #25D366;
    border-radius: 50%;
  }

  /* ─── PRESET 3: Facebook ─── */
  html[data-tabstyle="facebook"] #sidebar-tabs {
    background: #fff !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #dadde1 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  html[data-tabstyle="facebook"] .nav-tab { color: #65676b !important; }
  html[data-tabstyle="facebook"] .nav-tab.active { color: #1877F2 !important; }
  html[data-tabstyle="facebook"] .nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    right: 25%;
    height: 3px;
    background: #1877F2;
    border-radius: 3px 3px 0 0;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ─── PRESET 4: Instagram ─── */
  html[data-tabstyle="instagram"] #sidebar-tabs {
    background: #fff !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #dbdbdb !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
  }
  html[data-tabstyle="instagram"] .nav-tab { color: #262626 !important; }
  html[data-tabstyle="instagram"] .nav-tab.active { color: #000 !important; }
  html[data-tabstyle="instagram"] .nav-tab.active svg { stroke-width: 2.5 !important; transform: scale(1.05) !important; }

  /* ─── PRESET 5: iPhone Classic ─── */
  html[data-tabstyle="iphone"] #sidebar-tabs {
    background: rgba(249,249,249,.85) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(0,0,0,.1) !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
  }
  html[data-tabstyle="iphone"] .nav-tab { color: #8e8e93 !important; }
  html[data-tabstyle="iphone"] .nav-tab.active { color: #007AFF !important; }

  /* ─── PRESET 6: iPhone 17 Bubble (liquid glass — stays floating) ─── */
  html[data-tabstyle="iphone17"] #sidebar-nav {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    bottom: 12px !important;
    padding: 0 12px !important;
  }
  html[data-tabstyle="iphone17"] #sidebar-tabs {
    background: rgba(255,255,255,.55) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7) !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    max-width: 440px !important;
    padding: 4px !important;
    overflow: visible !important;
  }
  html[data-tabstyle="iphone17"] .nav-tab { color: #1c1c1e !important; }
  html[data-tabstyle="iphone17"] .nav-tab.active { color: #007AFF !important; }
  html[data-tabstyle="iphone17"] .nav-tab.active::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 44px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
    z-index: -1;
  }

  /* ─── PRESET 7: Material You ─── */
  html[data-tabstyle="material"] #sidebar-tabs {
    background: #fff !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 8px 0 !important;
  }
  html[data-tabstyle="material"] .nav-tab { color: #49454F !important; }
  html[data-tabstyle="material"] .nav-tab.active { color: #1D192B !important; }
  html[data-tabstyle="material"] .nav-tab.active svg {
    background: #E8DEF8;
    border-radius: 999px;
    padding: 4px 14px;
    box-sizing: content-box;
  }

  /* ─── PRESET 8: TikTok ─── */
  html[data-tabstyle="tiktok"] #sidebar-tabs {
    background: #000 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
  }
  html[data-tabstyle="tiktok"] .nav-tab { color: #aaa !important; }
  html[data-tabstyle="tiktok"] .nav-tab.active { color: #fff !important; }

  /* ─── PRESET 9: Twitter / X ─── */
  html[data-tabstyle="twitter"] #sidebar-tabs {
    background: #fff !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #eff3f4 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
  }
  html[data-tabstyle="twitter"] .nav-tab { color: #536471 !important; }
  html[data-tabstyle="twitter"] .nav-tab.active { color: #000 !important; }
  html[data-tabstyle="twitter"] .nav-tab.active svg { stroke-width: 2.5 !important; fill: currentColor !important; }

  /* ─── PRESET 10: Discord ─── */
  html[data-tabstyle="discord"] #sidebar-tabs {
    background: #2b2d31 !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #1e1f22 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
  }
  html[data-tabstyle="discord"] .nav-tab { color: #b5bac1 !important; }
  html[data-tabstyle="discord"] .nav-tab.active { color: #fff !important; }
  html[data-tabstyle="discord"] .nav-tab.active::after {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 24px;
    background: #5865F2;
    border-radius: 0 4px 4px 0;
    opacity: 1 !important;
  }

  /* ── EMOJI ICON SET ── */
  html[data-iconset="emoji"] .nav-tab svg { display: none; }
  html[data-iconset="emoji"] .nav-tab .ts-emoji {
    font-size: 22px;
    line-height: 1;
  }
  html[data-iconset]:not([data-iconset="emoji"]) .nav-tab .ts-emoji { display: none; }

  /* Logo accent — small badge in the corner of #sidebar-logo */
  .theme-logo-accent {
    position: absolute;
    top: -4px; right: -4px;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    animation: tp-twinkle 2s ease-in-out infinite;
  }


  /* Dark-mode mass overrides for inline-styled elements */
  html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text); }
  html[data-theme="dark"] [style*="background:#fff"]:not([style*="background:#fff8"]):not([style*="background:#ffe"]):not([style*="background:#fff0"]):not([style*="background:#fffae"]),
  html[data-theme="dark"] [style*="background: #fff"]:not([style*="background: #fff8"]):not([style*="background: #ffe"]):not([style*="background: #fff0"]):not([style*="background: #fffae"]) {
    background: var(--bg-card) !important;
  }
  html[data-theme="dark"] [style*="background:#f5f5f5"],
  html[data-theme="dark"] [style*="background: #f5f5f5"],
  html[data-theme="dark"] [style*="background:#fafafa"],
  html[data-theme="dark"] [style*="background: #fafafa"],
  html[data-theme="dark"] [style*="background:#f8f8f8"],
  html[data-theme="dark"] [style*="background: #f8f8f8"],
  html[data-theme="dark"] [style*="background:#f0f0f0"],
  html[data-theme="dark"] [style*="background: #f0f0f0"],
  html[data-theme="dark"] [style*="background:#eee"],
  html[data-theme="dark"] [style*="background: #eee"] { background: var(--bg-soft) !important; }
  html[data-theme="dark"] [style*="color:#333"],
  html[data-theme="dark"] [style*="color: #333"],
  html[data-theme="dark"] [style*="color:#222"],
  html[data-theme="dark"] [style*="color: #222"],
  html[data-theme="dark"] [style*="color:#111"],
  html[data-theme="dark"] [style*="color: #111"] { color: var(--text) !important; }
  html[data-theme="dark"] [style*="color:#666"],
  html[data-theme="dark"] [style*="color: #666"],
  html[data-theme="dark"] [style*="color:#555"],
  html[data-theme="dark"] [style*="color: #555"] { color: var(--text-soft) !important; }
  html[data-theme="dark"] [style*="border:1px solid #eee"],
  html[data-theme="dark"] [style*="border: 1px solid #eee"],
  html[data-theme="dark"] [style*="border:1px solid #f0f0f0"],
  html[data-theme="dark"] [style*="border: 1px solid #f0f0f0"],
  html[data-theme="dark"] [style*="border:1px solid #ddd"],
  html[data-theme="dark"] [style*="border: 1px solid #ddd"],
  html[data-theme="dark"] [style*="border:1px solid #e5e5e5"],
  html[data-theme="dark"] [style*="border: 1px solid #e5e5e5"] { border-color: var(--border) !important; }
  html[data-theme="dark"] input,
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] select { background: var(--bg-input); color: var(--text); border-color: var(--border); }
  html[data-theme="dark"] input::placeholder,
  html[data-theme="dark"] textarea::placeholder { color: var(--text-muted); }

  /* ── THEME PAGE (full-screen) ── */
  #page-themes {
    position: fixed; inset: 0;
    background: var(--bg-soft);
    z-index: 600;
    display: none; flex-direction: column;
    max-width: 480px; margin: 0 auto;
    overflow-y: auto;
  }
  #page-themes.active { display: flex; }
  .themes-header {
    background: var(--bg-card);
    color: var(--text);
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 5;
    border-bottom: 1px solid var(--border);
  }
  .themes-back {
    width: 36px; height: 36px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .themes-title-wrap { flex: 1; min-width: 0; }
  .themes-title { font-family:'Inter',sans-serif; font-size: 17px; font-weight: 800; }
  .themes-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
  .themes-body { flex: 1; padding: 18px 14px 30px; }
  .themes-section-title {
    font-family:'Inter',sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 4px 4px 10px;
  }
  .theme-opt-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 14px;
    cursor: pointer;
    transition: all .2s;
  }
  .theme-opt-card:active { transform: scale(.98); }
  .theme-opt-card.active {
    border-color: var(--red);
    background: rgba(232,0,28,.04);
  }
  .theme-opt-preview {
    width: 56px; height: 56px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border);
  }
  .theme-opt-preview.light { background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%); color: #0a0a0a; }
  .theme-opt-preview.dark  { background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); color: #ffffff; border-color: #2a2a2a; }
  .theme-opt-preview.auto  { background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #0a0a0a 50%, #0a0a0a 100%); color: var(--red); }
  .theme-opt-info { flex: 1; min-width: 0; }
  .theme-opt-name {
    font-family:'Inter',sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
  }
  .theme-opt-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
  }
  .theme-opt-radio {
    width: 22px; height: 22px;
    border: 2px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
  }
  .theme-opt-card.active .theme-opt-radio { border-color: var(--red); }
  .theme-opt-card.active .theme-opt-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--red);
    border-radius: 50%;
  }
  .themes-info {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
  }

  /* Smooth theme-switch transitions */
  body, .product-card, .cart-item, input, textarea, select,
  .account-menu, .settings-card, #page-themes, .theme-opt-card,
  .topbar, .bottom-nav { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

  /* ── RESPONSIVE ── */
  @media (max-width: 360px) {
    .theme-opt-name { font-size: 14px; }
    .theme-opt-preview { width: 48px; height: 48px; }
  }

  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; }
  input, textarea { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }

  /* All videos get a black background to prevent gray placeholder flash */
  video {
    background: #000;
  }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-soft);
    color: var(--text);
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    padding-bottom: 0;
  }

  /* ═══════════════════════════════════════════
     MOBILE  (default — <768px)
  ═══════════════════════════════════════════ */

  /* Bottom floating nav */
  #sidebar-nav {
    position: fixed;
    bottom: 14px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 700;
    padding: 0 20px;
    box-sizing: border-box;
  }

  #sidebar-logo { display: none; }
  #sidebar-logo-text { display: none; }

  /* Floating pill */
  #sidebar-tabs {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 4px;
    background: #fff;
    border-radius: 40px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 6px rgba(0,0,0,0.06);
    position: relative;
    width: 100%;
    max-width: 440px;
  }
  #sidebar-tabs::before { display: none; }

  /* Sliding indicator */
  #nav-active-pill {
    position: absolute;
    top: 4px; bottom: 4px;
    background: rgba(0,0,0,0.09);
    border-radius: 32px;
    transition: left .38s cubic-bezier(.34,1.56,.64,1), width .38s cubic-bezier(.34,1.56,.64,1);
    z-index: 1;
    pointer-events: none;
  }
  #nav-active-pill::after { display: none; }

  /* Each tab — mobile */
  .nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 11px 0;
    cursor: pointer;
    text-decoration: none;
    color: rgba(0,0,0,0.35);
    position: relative;
    z-index: 2;
    border-radius: 32px;
    -webkit-tap-highlight-color: transparent;
    flex: 1;
    transition: color .25s;
  }
  .nav-tab svg { width: 21px; height: 21px; flex-shrink: 0; transition: transform .38s cubic-bezier(.34,1.56,.64,1); }
  .nav-tab.active { color: rgba(0,0,0,0.85); }
  .nav-tab.active svg { transform: scale(1.15) translateY(-1px); }
  .nav-tab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background: rgba(0,0,0,0.05);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s, transform .3s;
    pointer-events: none;
  }
  .nav-tab:active::after { opacity: 1; transform: scale(1); }

  /* Main content — mobile: pad enough to clear pill (14px bottom + ~56px pill + 14px gap = 84px) */
  #main-content {
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    padding-bottom: 90px;
    position: relative;
  }

  /* Overlays — mobile */
  #product-detail-overlay, #search-overlay, #signup-overlay,
  #checkout-overlay, #orders-overlay, #seller-profile-overlay,
  #cart-sheet, #settings-sheet, #review-sheet, #report-sheet,
  #pickup-map-sheet, .bottom-sheet {
    left: 0 !important;
    max-width: 480px !important;
  }
  #intro-splash { left: 0 !important; max-width: 100% !important; }
  #sp-pic-lightbox.active { display: flex !important; }


  /* ═══════════════════════════════════════════
     DESKTOP  (≥768px)
  ═══════════════════════════════════════════ */
  @media (min-width: 768px) {
    body {
      background: var(--bg-soft);
      justify-content: flex-start;
      align-items: flex-start;
    }

    /* Desktop shell: sidebar + app frame */
    #desktop-shell {
      display: flex;
      width: 100%;
      max-width: 100%;
      min-height: 100vh;
      position: relative;
    }

    /* Left sidebar nav */
    #sidebar-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 72px;
      height: 100vh;
      bottom: auto;
      right: auto;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      background: #fff;
      border-right: 1px solid #e5e5e5;
      box-shadow: 2px 0 12px rgba(0,0,0,.06);
      z-index: 400;
      transform: none;
    }

    #sidebar-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
      border-bottom: 1px solid #f0f0f0;
    }
    #sidebar-logo svg { width: 26px; height: 26px; color: var(--red); }
    #sidebar-logo-text { display: none; }

    #sidebar-tabs {
      flex-direction: column;
      gap: 4px;
      padding: 12px 8px;
      background: transparent;
      border: none;
      box-shadow: none;
      border-radius: 0;
      width: auto;
      max-width: none;
      flex: 1;
    }

    #nav-active-pill {
      display: none;
    }

    .nav-tab {
      flex: none;
      flex-direction: column;
      padding: 12px 8px;
      border-radius: 12px;
      color: #999;
      min-width: 0;
      width: 100%;
    }
    .nav-tab svg { width: 22px; height: 22px; transition: none; }
    .nav-tab.active {
      color: var(--red);
      background: rgba(232,0,28,0.08);
    }
    .nav-tab.active svg { transform: none; filter: none; }
    .nav-tab:hover { background: rgba(0,0,0,.04); color: #444; }
    .nav-tab.active:hover { background: rgba(232,0,28,0.12); color: var(--red); }

    /* App content frame — fills all space after sidebar */
    #main-content {
      margin-left: 72px;
      width: calc(100% - 72px);
      max-width: none;
      min-height: 100vh;
      padding-bottom: 30px;
      background: var(--bg-soft);
      position: relative;
      box-shadow: none;
      flex: 1;
    }

    /* Right panel hidden — content fills full width */
    #desktop-right-panel {
      display: none;
    }

    /* Overlays fill the content area */
    #product-detail-overlay, #search-overlay, #signup-overlay,
    #checkout-overlay, #orders-overlay, #seller-profile-overlay,
    #cart-sheet, #settings-sheet, #review-sheet, #report-sheet,
    #pickup-map-sheet, .bottom-sheet {
      left: 72px !important;
      right: 0 !important;
      max-width: none !important;
      width: calc(100% - 72px) !important;
    }
    #intro-splash { left: 0 !important; max-width: 100% !important; }

    /* Category page height fix */
    #page-category { height: 100vh; }
  }

  @media (min-width: 1024px) {
    #sidebar-nav {
      left: 0;
      width: 80px;
    }
    #main-content {
      margin-left: 80px;
      width: calc(100% - 80px);
      max-width: none;
    }
    #product-detail-overlay, #search-overlay, #signup-overlay,
    #checkout-overlay, #orders-overlay, #seller-profile-overlay,
    #cart-sheet, #settings-sheet, #review-sheet, #report-sheet,
    #pickup-map-sheet, .bottom-sheet {
      left: 80px !important;
      right: 0 !important;
      max-width: none !important;
      width: calc(100% - 80px) !important;
    }
  }

  /* ═══════════════════════════════════════════
     DESKTOP WIDE ENHANCEMENTS (≥900px)
     Spreads content across the screen like Jumia/Amazon.
     Mobile (<900px) is completely unaffected.
  ═══════════════════════════════════════════ */
  @media (min-width: 900px) {
    /* On desktop, hide the horizontal scrolling ticker and show the full GRID instead */
    #products-ticker { display: none !important; }
    #products-all-wrap { display: block !important; }
    #view-all-btn { display: none !important; }

    /* Center the home content in a comfortable wide column */
    #main-content > .header,
    .hero-wrapper,
    .home-header,
    #products-grid,
    .home-section,
    .giveaway-banner,
    #flash-sales-section,
    .top-cat-strip,
    .call-banner {
      max-width: 1200px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Product grids → 4 columns on desktop */
    #products-grid,
    #cat-page-grid,
    #cat-page-related-grid,
    #giveaway-products-grid,
    #flash-sales-grid {
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 14px !important;
      background: transparent !important;
      max-width: 1200px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding: 14px !important;
    }

    .rec-grid {
      grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Make product cards look good in the grid */
    #products-grid .rec-card,
    #products-grid .product-card {
      border-radius: 12px !important;
      overflow: hidden !important;
    }
  }

  /* Extra-wide screens (≥1400px) → 5 columns */
  @media (min-width: 1400px) {
    #products-grid,
    #cat-page-grid,
    #cat-page-related-grid,
    #giveaway-products-grid,
    #flash-sales-grid,
    .rec-grid {
      grid-template-columns: repeat(5, 1fr) !important;
      max-width: 1400px !important;
    }
    #main-content > .header,
    .hero-wrapper,
    .home-header,
    .top-cat-strip,
    .call-banner {
      max-width: 1400px !important;
    }
  }

  /* When admin has pickup stations turned OFF, hide everything tagged .pickup-field */
  body.no-pickup .pickup-field { display: none !important; }

  /* ── CALL TICKER ── */
  @keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* ── HEADER ── */
  .header {
    background: var(--white);
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
  }

  .search-bar {
    display: flex;
    align-items: center;
    background: #f2f2f2;
    border-radius: 8px;
    padding: 10px 14px;
    gap: 10px;
  }

  .search-bar svg { color: #888; flex-shrink: 0; }

  .search-bar span {
    color: #aaa;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    flex: 1;
  }

  .header-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .header-row .search-bar {
    flex: 1;
  }

  .cart-btn {
    position: relative;
    width: 42px;
    height: 42px;
    background: #f2f2f2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    color: #333;
  }

  .cart-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
  }

  /* ── CALL TO ORDER ── */
  .call-banner {
    background: var(--red);
    text-align: center;
    padding: 9px 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: hidden;
    line-height: 1.3;
  }
  .call-banner-track {
    display: flex;
    width: max-content;
    animation: ticker 18s linear infinite;
    will-change: transform;
  }
  .call-banner-track > span {
    white-space: nowrap;
    padding-right: 80px;
    display: inline-block;
  }

  /* ── Help & Support FAQ ── */
  .faq-item {
    padding: 13px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
  }
  .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
  }
  .faq-a {
    display: none;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #eee;
  }
  .faq-item.open .faq-a { display: block; }
  .faq-item.open .faq-q svg { transform: rotate(180deg); }
  .top-cat-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid #eee;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    position: sticky;
    top: 36px;       /* sits right below the call-banner */
    z-index: 99;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
  }
  .top-cat-strip::-webkit-scrollbar { display: none; }
  .top-cat-strip .tcs-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 16px;
    background: #f5f5f5;
    border: 1px solid #ececec;
    color: #333;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
    white-space: nowrap;
  }
  .top-cat-strip .tcs-chip:hover {
    background: #ffece6;
    border-color: #ffbfb3;
    color: #c0001a;
  }
  .top-cat-strip .tcs-chip:active {
    transform: scale(0.95);
  }
  .top-cat-strip .tcs-emoji {
    font-size: 14px;
    line-height: 1;
  }
  .top-cat-strip .top-cat-skeleton {
    color: #aaa;
  }

  /* ── HERO SLIDER ── */
  .hero-wrapper {
    background: var(--white);
    overflow: hidden;
  }

  .hero-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .hero-slider::-webkit-scrollbar { display: none; }

  .hero-slide {
    min-width: 100%;
    scroll-snap-align: start;
    height: 220px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 24px 20px;
  }

  .hero-slide.slide-1 { background: linear-gradient(135deg, #002280 0%, #0033A0 50%, #1a5fd4 100%); }
  .hero-slide.slide-2 { background: linear-gradient(135deg, #8B0000 0%, #E8001C 60%, #ff4d4d 100%); }
  .hero-slide.slide-3 { background: linear-gradient(135deg, #1a1a2e 0%, #0033A0 100%); }

  .slide-content { position: relative; z-index: 1; }

  .slide-tag {
    background: rgba(255,255,255,.25);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 8px;
  }

  .slide-content h2 {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 8px;
  }

  .slide-content h2 span { color: #FFD700; }
  .slide-content p { color: rgba(255,255,255,.8); font-size: 12px; margin-bottom: 14px; }

  .slide-btn {
    background: var(--white);
    color: var(--blue);
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
  }

  .slide-2 .slide-btn { color: var(--red); }
  .slide-3 .slide-btn { color: var(--blue); }

  .hero-deco {
    position: absolute;
    right: -20px; top: -20px;
    width: 160px; height: 160px;
    background: rgba(255,255,255,.07);
    border-radius: 50%;
  }
  .hero-deco2 {
    position: absolute;
    right: 50px; bottom: -50px;
    width: 100px; height: 100px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
  }

  /* Slider dots */
  .slider-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 10px 0;
    background: var(--white);
  }

  .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all .3s;
  }
  .dot.active { background: var(--red); width: 18px; border-radius: 4px; }

  /* ── CATEGORY SCROLL ── */
  .cat-section {
    background: var(--white);
    margin-top: 8px;
    padding: 14px 0 14px 14px;
  }

  .cat-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 14px;
  }
  .cat-scroll::-webkit-scrollbar { display: none; }

  .cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
    width: 72px;
  }

  .cat-thumb {
    width: 72px; height: 72px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: transform .2s;
  }
  .cat-item:hover .cat-thumb { transform: scale(1.05); }

  .cat-thumb.c1 { background: linear-gradient(135deg, #fff3e0, #ffe0b2); }
  .cat-thumb.c2 { background: linear-gradient(135deg, #e8edf8, #c5d5f5); }
  .cat-thumb.c3 { background: linear-gradient(135deg, #fce4ec, #f8bbd0); }
  .cat-thumb.c4 { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }
  .cat-thumb.c5 { background: linear-gradient(135deg, #f3e5f5, #e1bee7); }
  .cat-thumb.c6 { background: linear-gradient(135deg, #e0f2f1, #b2dfdb); }
  .cat-thumb.c7 { background: linear-gradient(135deg, #fff9c4, #fff176); }
  .cat-thumb.c8 { background: linear-gradient(135deg, #fbe9e7, #ffccbc); }

  .cat-label {
    font-size: 11px;
    font-weight: 500;
    color: #333;
    text-align: center;
    line-height: 1.3;
  }

  /* ── FLASH SALES BANNER ── */
  .flash-banner {
    background: var(--red);
    margin-top: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }

  .flash-left { display: flex; align-items: center; gap: 10px; }

  .flash-icon {
    background: rgba(255,255,255,.2);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .flash-text h3 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 3px;
  }

  .flash-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,.9);
    font-size: 11px;
    font-weight: 500;
  }

  .flash-timer strong {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
  }

  .flash-right {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255,255,255,.2);
    padding: 6px 12px;
    border-radius: 5px;
  }

  /* ── PRODUCTS GRID ── */
  .products-section {
    background: var(--white);
  }

  .products-scroll {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #e8e8e8;
  }

  .product-card {
    background: var(--white);
    cursor: pointer;
    padding: 10px;
    transition: background .2s;
    position: relative;
  }

  .product-card:active { background: #fafafa; }

  .product-img {
    width: 100%;
    aspect-ratio: 1;
    background: #f7f7f7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
  }

  /* ── Price row with inline cart button ── */
  .price-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 2px 0 !important;
  }

  /* ── Rating + sold count row (between name & price) ── */
  .rating-sold-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #777;
    margin: 4px 0;
    min-height: 14px;
    line-height: 1;
  }
  .rating-stars {
    position: relative;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.5px;
    line-height: 1;
    color: #d4d4d4;     /* empty star color */
    white-space: nowrap;
    height: 14px;
  }
  .rating-stars .star-empty {
    color: #d9d9d9;
    display: inline-block;
  }
  .rating-stars .star-fill {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 0%;             /* set dynamically */
    color: #ffb800;
    transition: width .15s linear;
    white-space: nowrap;
    display: inline-block;
  }
  .rating-stars .star-fill::before {
    content: '★★★★★';
  }
  .rating-num {
    font-weight: 700;
    color: #555;
    font-size: 11px;
  }
  .rating-dot {
    color: #ccc;
    margin: 0 2px;
  }
  .sold-count {
    font-weight: 700;
    color: #333;
    font-size: 11px;
  }
  .sold-label {
    color: #888;
    font-size: 11px;
  }

  /* ── Shop/Description rotator (between rating row and price) ── */
  .shop-desc-rotator {
    position: relative;
    height: 22px;
    overflow: hidden;
    margin: 3px 0 5px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #555;
    line-height: 22px;
  }
  .shop-desc-rotator .sdr-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transition: transform .35s cubic-bezier(.5, 0, .2, 1), opacity .35s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(100%);
    opacity: 0;
    height: 22px;
    line-height: 22px;
    display: flex;
    align-items: center;
  }
  .shop-desc-rotator .sdr-line.active {
    transform: translateY(0);
    opacity: 1;
  }
  .shop-desc-rotator .sdr-line.leaving {
    transform: translateY(-100%);
    opacity: 0;
  }

  /* Shop name — TikTok VIP "gifter" rainbow shimmer text */
  .shop-desc-rotator .sdr-line-shop {
    padding: 0;
  }
  .shop-desc-rotator .sdr-shop-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: transparent;
    font-weight: 800;
    font-size: 11.5px;
    line-height: 14px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shop-desc-rotator .sdr-shop-pill svg {
    flex-shrink: 0;
    /* Hide the storefront icon for the VIP look */
    display: none;
  }
  .shop-desc-rotator .sdr-shop-text {
    overflow: hidden;
    text-overflow: ellipsis;
    /* TikTok-style VIP gradient text */
    background: linear-gradient(
      90deg,
      #ff3b8d 0%,
      #ff8c00 14%,
      #ffd60a 28%,
      #34d399 42%,
      #22d3ee 56%,
      #818cf8 70%,
      #c084fc 84%,
      #ff3b8d 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: vipShimmer 3s linear infinite;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
    letter-spacing: 0.2px;
    position: relative;
  }
  /* Sparkle dot prefix */
  .shop-desc-rotator .sdr-shop-text::before {
    content: '✦ ';
    background: inherit;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    margin-right: 1px;
  }

  @keyframes vipShimmer {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
  }

  /* ══════════ 3D HOLOGRAPHIC GIFT BOX ══════════ */
  .holo-3d-scene {
    width: 110px;
    height: 110px;
    perspective: 600px;
    transform-style: preserve-3d;
  }
  .holo-3d-box {
    position: relative;
    width: 110px;
    height: 110px;
    transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(0deg);
    animation: holo3dSpin 9s ease-in-out infinite;
  }
  @keyframes holo3dSpin {
    0%   { transform: rotateX(-22deg) rotateY(0deg)   rotateZ(0deg); }
    20%  { transform: rotateX(15deg)  rotateY(140deg) rotateZ(-8deg); }
    40%  { transform: rotateX(-35deg) rotateY(220deg) rotateZ(6deg); }
    60%  { transform: rotateX(20deg)  rotateY(300deg) rotateZ(-4deg); }
    80%  { transform: rotateX(-10deg) rotateY(420deg) rotateZ(10deg); }
    100% { transform: rotateX(-22deg) rotateY(720deg) rotateZ(0deg); }
  }
  .holo-face {
    position: absolute;
    width: 110px;
    height: 110px;
    background: linear-gradient(135deg, #ff1a2e 0%, #e8001c 45%, #b00014 100%);
    border: 3px solid #8a0010;
    box-shadow:
      inset 0 0 30px rgba(0,0,0,0.35),
      inset 0 4px 10px rgba(255,255,255,0.25);
    backface-visibility: visible;
    overflow: hidden;
  }
  /* Glittering star dots scattered on the face */
  .holo-face::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 60%),
      radial-gradient(circle, rgba(255,255,255,0.9)  0%, rgba(255,255,255,0) 60%),
      radial-gradient(circle, rgba(255,240,200,0.85) 0%, rgba(255,240,200,0) 60%),
      radial-gradient(circle, rgba(255,255,255,0.8)  0%, rgba(255,255,255,0) 60%),
      radial-gradient(circle, rgba(255,255,255,0.9)  0%, rgba(255,255,255,0) 60%),
      radial-gradient(circle, rgba(255,250,230,0.8)  0%, rgba(255,250,230,0) 60%),
      radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 60%);
    background-size:
      4px 4px, 3px 3px, 5px 5px, 3px 3px, 4px 4px, 3px 3px, 4px 4px;
    background-position:
      12px 18px, 38px 9px, 70px 30px, 22px 60px, 90px 70px, 55px 85px, 80px 50px;
    background-repeat: no-repeat;
    animation: holoStarTwinkle 1.8s ease-in-out infinite;
    z-index: 2;
  }
  /* Gloss highlight */
  .holo-face::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg,
      rgba(255,255,255,0.35) 0%,
      rgba(255,255,255,0.05) 35%,
      rgba(255,255,255,0) 60%);
    mix-blend-mode: screen;
    z-index: 1;
  }
  @keyframes holoStarTwinkle {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
  }

  /* Subtle rising-sun glow behind the gift box */
  .holo-sunrise-glow {
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 320px;
    height: 320px;
    margin-left: -160px;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(255,210,140,0.40) 0%,
      rgba(255,160,80,0.22) 32%,
      rgba(255,120,60,0.08) 55%,
      rgba(255,120,60,0) 72%);
    pointer-events: none;
    z-index: 0;
    filter: blur(6px);
    animation: holoSunrise 5s ease-in-out infinite;
  }
  @keyframes holoSunrise {
    0%, 100% {
      transform: scale(0.92) translateY(10px);
      opacity: 0.75;
    }
    50% {
      transform: scale(1.05) translateY(-6px);
      opacity: 1;
    }
  }
  /* iridescent sheen per face */
  .holo-face::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(60deg,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,0.6) 50%,
      rgba(255,255,255,0) 65%);
    background-size: 250% 250%;
    animation: holoSheen 3.2s ease-in-out infinite;
    mix-blend-mode: overlay;
  }
  .holo-face-front  { transform: rotateY(0deg)   translateZ(55px); }
  .holo-face-back   { transform: rotateY(180deg) translateZ(55px); }
  .holo-face-right  { transform: rotateY(90deg)  translateZ(55px); }
  .holo-face-left   { transform: rotateY(-90deg) translateZ(55px); }
  .holo-face-top    { transform: rotateX(90deg)  translateZ(55px); filter: brightness(1.15); }
  .holo-face-bottom { transform: rotateX(-90deg) translateZ(55px); filter: brightness(0.7); }

  /* Ribbons on front face */
  .holo-3d-ribbon-v-front {
    position: absolute; top: 0; left: 50%; width: 24px; height: 110px;
    margin-left: -12px; transform: rotateY(0deg) translateZ(56px);
    background: linear-gradient(90deg, #fff, #ffe9a8, #fff);
    box-shadow: 0 0 12px rgba(255,255,255,.9), inset 0 0 6px rgba(0,0,0,.15);
  }
  .holo-3d-ribbon-h-front {
    position: absolute; top: 50%; left: 0; width: 110px; height: 24px;
    margin-top: -12px; transform: rotateY(0deg) translateZ(56px);
    background: linear-gradient(0deg, #fff, #ffe9a8, #fff);
    box-shadow: 0 0 12px rgba(255,255,255,.9), inset 0 0 6px rgba(0,0,0,.15);
  }
  /* Ribbons on top face */
  .holo-3d-ribbon-v-top {
    position: absolute; top: 0; left: 50%; width: 24px; height: 110px;
    margin-left: -12px; transform: rotateX(90deg) translateZ(56px);
    background: linear-gradient(90deg, #fff, #ffe9a8, #fff);
    box-shadow: inset 0 0 6px rgba(0,0,0,.15);
  }
  .holo-3d-ribbon-h-top {
    position: absolute; top: 50%; left: 0; width: 110px; height: 24px;
    margin-top: -12px; transform: rotateX(90deg) translateZ(56px);
    background: linear-gradient(0deg, #fff, #ffe9a8, #fff);
    box-shadow: inset 0 0 6px rgba(0,0,0,.15);
  }
  /* Bow floats above the top face */
  .holo-3d-bow {
    position: absolute; top: 50%; left: 50%;
    font-size: 38px;
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(72px);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
    z-index: 2;
  }

  /* Foil holographic wrapping paper */
  .holo-foil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      115deg,
      #ff0080, #ff8c00, #ffe600, #00ff8c,
      #00e5ff, #4d4dff, #b300ff, #ff0080
    );
    background-size: 300% 300%;
    animation: holoShift 4s linear infinite;
    z-index: 1;
  }
  /* Iridescent sheen sweep on top of the foil */
  .holo-foil::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      60deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,0.55) 48%,
      rgba(255,255,255,0.85) 50%,
      rgba(255,255,255,0.55) 52%,
      rgba(255,255,255,0) 70%
    );
    background-size: 250% 250%;
    animation: holoSheen 3.2s ease-in-out infinite;
    mix-blend-mode: overlay;
    z-index: 2;
  }
  @keyframes holoShift {
    0%   { background-position:   0% 50%; }
    100% { background-position: 300% 50%; }
  }
  @keyframes holoSheen {
    0%   { background-position: 200% 0%; }
    100% { background-position: -100% 0%; }
  }

  /* Gift ribbon (cross) */
  .holo-ribbon-v {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 26px;
    margin-left: -13px;
    background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.85), rgba(255,255,255,.35));
    box-shadow: 0 0 12px rgba(255,255,255,.6);
    z-index: 3;
  }
  .holo-ribbon-h {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 26px;
    margin-top: -13px;
    background: linear-gradient(0deg, rgba(255,255,255,.35), rgba(255,255,255,.85), rgba(255,255,255,.35));
    box-shadow: 0 0 12px rgba(255,255,255,.6);
    z-index: 3;
  }
  .holo-bow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    z-index: 4;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
    animation: holoBowPulse 2s ease-in-out infinite;
  }
  @keyframes holoBowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.12); }
  }
  .holo-tap-label {
    display: inline-block;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    animation: holoLabelBob 1.8s ease-in-out infinite;
  }
  @keyframes holoLabelBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }

  /* Holographic sheen overlay on the revealed ad image */
  .holo-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      rgba(255,0,128,0.0) 20%,
      rgba(0,229,255,0.18) 38%,
      rgba(255,255,255,0.30) 50%,
      rgba(179,0,255,0.18) 62%,
      rgba(255,140,0,0.0) 80%
    );
    background-size: 250% 250%;
    animation: holoSheen 4.5s ease-in-out infinite;
    mix-blend-mode: screen;
    z-index: 4;
  }

  /* Unwrap (open) animation */
  .holo-unwrapping {
    animation: holoUnwrap .55s cubic-bezier(.5,-.3,.3,1) forwards;
  }
  @keyframes holoUnwrap {
    0%   { transform: scale(1) rotate(0deg);   opacity: 1; }
    40%  { transform: scale(1.08) rotate(-2deg); opacity: 1; }
    100% { transform: scale(.4) rotate(8deg);  opacity: 0; }
  }
  /* 3D box burst-open on unwrap */
  .holo-3d-box.holo-3d-opening {
    animation: holo3dOpen .6s cubic-bezier(.4,-.4,.3,1.2) forwards !important;
  }
  @keyframes holo3dOpen {
    0%   { transform: rotateX(-22deg) rotateY(0deg) scale(1); opacity: 1; }
    45%  { transform: rotateX(-30deg) rotateY(180deg) scale(1.25); opacity: 1; }
    100% { transform: rotateX(-60deg) rotateY(360deg) scale(.2) translateY(-40px); opacity: 0; }
  }
  .holo-revealing {
    animation: holoReveal .5s cubic-bezier(.3,.8,.3,1) both;
  }
  @keyframes holoReveal {
    0%   { transform: scale(.6); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
  }

  .shop-desc-rotator .sdr-desc-text {
    color: #1976d2;
    font-style: normal;
    font-weight: 600;
    text-shadow: none;
  }

  /* ══════════ INDEPENDENT SELLER PAY PANEL (Paystack-style) ══════════ */
  #indie-pay-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.55);
    display: flex; align-items: flex-end; justify-content: center;
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: popupFadeIn .2s ease-out;
  }
  .indie-pay-sheet {
    background: #fff;
    width: 100%; max-width: 480px;
    border-radius: 20px 20px 0 0;
    max-height: 90vh; overflow-y: auto;
    padding: 0 16px 28px;
    animation: indieSheetUp .35s cubic-bezier(.34,1.2,.64,1) both;
  }
  @keyframes indieSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .indie-pay-topbar {
    position: sticky; top: 0; background: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0 10px; z-index: 2;
  }
  .indie-pay-title { font-size: 17px; font-weight: 800; color: #0a7a40; }
  .indie-pay-x {
    width: 30px; height: 30px; border-radius: 50%;
    background: #f3f3f3; border: none; font-size: 15px; cursor: pointer; color: #555;
  }
  .indie-pay-note {
    font-size: 12px; color: #555; line-height: 1.5;
    background: #f0fdf6; border: 1px solid #c8f0d8; border-radius: 10px;
    padding: 10px 12px; margin-bottom: 14px;
  }
  .indie-pay-card {
    border: 1.5px solid #c8f0d8; border-radius: 14px;
    overflow: hidden; margin-bottom: 14px;
  }
  .indie-pay-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: #0fa958; color: #fff;
  }
  .indie-pay-logo { font-size: 22px; }
  .indie-pay-shop { font-size: 14px; font-weight: 800; }
  .indie-pay-sub { font-size: 10.5px; opacity: .9; }
  .indie-pay-amount { margin-left: auto; font-size: 15px; font-weight: 800; }
  .indie-pay-items { padding: 10px 14px; border-bottom: 1px dashed #e0e0e0; }
  .indie-pay-item {
    display: flex; justify-content: space-between;
    font-size: 12px; color: #444; padding: 2px 0;
  }
  .indie-pay-bank { padding: 12px 14px; }
  .indie-pay-bank-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: #666; padding: 5px 0;
  }
  .indie-pay-bank-row b { color: #111; font-size: 14px; font-weight: 800; letter-spacing: .3px; }
  .indie-pay-copy {
    display: block; width: calc(100% - 28px); margin: 0 14px 14px;
    padding: 10px; background: #0fa958; color: #fff;
    border: none; border-radius: 9px; font-family: inherit;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
  }
  .indie-pay-copy:active { background: #0c8f48; }
  .indie-pay-actions { margin-top: 6px; }
  .indie-pay-done {
    display: block; width: 100%; padding: 14px;
    background: #0a7a40; color: #fff; border: none; border-radius: 12px;
    font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
    margin-bottom: 8px;
  }
  .indie-pay-done:active { background: #086633; }
  .indie-pay-cancel {
    display: block; width: 100%; padding: 11px;
    background: #f3f3f3; color: #555; border: none; border-radius: 12px;
    font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .price-row .price,
  .price-row .rec-card-price {
    flex: 1;
    min-width: 0;
  }

  /* ── Quick add-to-cart button (plain black icon, no background) ── */
  .quick-cart-btn {
    flex-shrink: 0 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    padding: 0 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    outline: none !important;
    position: relative;
  }
  .quick-cart-btn svg {
    display: block;
    width: 22px !important;
    height: 22px !important;
    stroke: #000 !important;
    fill: none !important;
    pointer-events: none !important;
  }
  .quick-cart-btn::before { display: none !important; }
  .quick-cart-btn:active {
    transform: scale(0.85) !important;
    transition: transform .1s ease;
  }
  .quick-cart-btn.quick-cart-pulse svg {
    stroke: #00a846 !important;
  }

  .discount-tag {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
  }

  /* ── PROMO BADGES (Temu-style) ── */
  .promo-off-pill {
    position: absolute;
    top: 8px; left: 8px;
    background: linear-gradient(135deg, #ff3b30, #c0001a);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(192,0,26,.3);
    z-index: 2;
    letter-spacing: .3px;
  }
  .promo-flash-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: linear-gradient(135deg, #ff9500, #ff3b30);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 4px;
    z-index: 2;
    letter-spacing: .5px;
    animation: flashPulse 1.4s ease-in-out infinite;
    box-shadow: 0 2px 6px rgba(255,69,58,.4);
  }
  @keyframes flashPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
  }
  .promo-sponsored-badge {
    position: absolute;
    bottom: 8px; left: 8px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: .3px;
  }

  /* ▶ Video indicator — shown on product cards when product has a video */
  .video-play-indicator {
    position: absolute;
    bottom: 8px; right: 8px;
    width: 28px; height: 28px;
    background: rgba(0,0,0,.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
  }
  .video-play-indicator::before {
    content: '';
    width: 0; height: 0;
    border-left: 9px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-left: 2px;
  }
  .promo-flash-countdown {
    font-size: 10px;
    font-weight: 700;
    color: #ff3b30;
    margin-top: 2px;
    letter-spacing: .3px;
  }

  /* Hot Deals home section */
  #hot-deals-section {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    margin: 8px 0;
    padding: 14px 0 12px;
    position: relative;
  }
  body[data-theme="dark"] #hot-deals-section,
  body[data-ui-theme="newyear"] #hot-deals-section,
  body[data-ui-theme="blackfriday"] #hot-deals-section,
  body[data-ui-theme="halloween"] #hot-deals-section {
    background: linear-gradient(135deg, #2a1010 0%, #3a1818 100%);
  }
  .hot-deals-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px 10px;
  }
  .hot-deals-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #c0001a;
    display: flex; align-items: center; gap: 6px;
  }
  .hot-deals-subtitle {
    font-size: 10px;
    color: #888;
  }
  .hot-deals-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 14px 6px;
  }
  .hot-deals-scroll::-webkit-scrollbar { display: none; }
  .hot-deal-card {
    flex: 0 0 140px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    position: relative;
  }
  .hot-deal-card img,
  .hot-deal-card video {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
  }
  .hot-deal-info {
    padding: 6px 8px 8px;
  }
  .hot-deal-name {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
    height: 28px;
  }
  .hot-deal-price {
    font-size: 13px;
    font-weight: 800;
    color: #c0001a;
  }
  .hot-deal-old {
    font-size: 10px;
    color: #888;
    text-decoration: line-through;
    margin-left: 4px;
  }

  .brand-tag {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--red);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 2px;
    letter-spacing: 0.3px;
  }

  .product-name {
    font-size: 12px;
    font-weight: 400;
    color: #333;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
  }

  .price {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 2px;
  }

  .price .symbol { font-size: 13px; }

  .old-price {
    font-size: 11px;
    color: #aaa;
    text-decoration: line-through;
    margin-bottom: 6px;
  }

  .stock-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
  }

  .stock-bar {
    flex: 1; height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
  }

  .stock-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--red);
  }

  .stock-text {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
  }

  /* ── PROMO STRIP ── */
  .promo-strip {
    background: var(--blue);
    margin-top: 8px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }

  .promo-strip h3 {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
  }

  .promo-strip p { color: rgba(255,255,255,.75); font-size: 11px; margin-top: 2px; }

  .promo-strip .arrow {
    background: rgba(255,255,255,.2);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
  }

  /* ── SECTION HEADER ── */
  .section-head {
    background: var(--white);
    margin-top: 8px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }

  .section-head h2 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
  }

  .section-head a {
    color: var(--red);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }

  /* ── BOTTOM NAV (now left sidebar tabs) ── */
  .bottom-nav {
    display: none; /* hidden — replaced by #sidebar-nav */
  }

  .nav-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px;
    cursor: pointer;
    gap: 0;
    text-decoration: none;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: color .2s, background .2s;
    position: relative;
    border-radius: 10px;
  }

  .nav-tab:hover { background: rgba(232,0,28,.06); color: var(--red); }
  .nav-tab.active {
    color: var(--red);
    background: rgba(232,0,28,.09);
  }
  .nav-tab.active::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    background: var(--red);
    border-radius: 0 3px 3px 0;
    margin-left: -8px;
  }
  .nav-tab svg { width: 22px; height: 22px; flex-shrink: 0; }

  /* ── PAGES ── */
  .page { display: none; }
  .page.active { display: block; }

  /* ── ACCOUNT PAGE ── */
  .account-header {
    background: var(--white);
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--border);
  }

  .account-welcome {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 2px;
  }

  .account-email {
    font-size: 13px;
    color: var(--orange);
    font-weight: 500;
  }

  .store-credit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    background: var(--blue-light);
    border-radius: 8px;
    padding: 10px 14px;
  }

  .store-credit-icon {
    width: 36px; height: 36px;
    background: var(--blue);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .store-credit-icon svg { color: #fff; }

  .store-credit-text {
    font-size: 13px;
    color: var(--blue);
    font-weight: 600;
  }

  .account-actions {
    display: flex;
    gap: 10px;
    padding: 14px;
    background: var(--white);
    border-bottom: 8px solid #f0f0f0;
  }

  .btn-livechat {
    flex: 1;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .btn-whatsapp {
    flex: 1;
    background: var(--white);
    color: #25D366;
    border: 2px solid #25D366;
    border-radius: 8px;
    padding: 12px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .account-section-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px 6px;
    background: #f0f0f0;
  }

  .account-menu {
    background: var(--white);
  }

  .account-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .15s;
  }

  .account-menu-item:active { background: #fafafa; }

  .account-menu-item:last-child { border-bottom: none; }

  .menu-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #555;
  }

  .menu-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
  }

  .menu-arrow {
    color: #bbb;
  }

  /* ── ADMIN PANEL ── */
  #admin-panel {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: #f0f0f0;
    display: none;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
  }
  #admin-panel.active { display: flex; }

  .admin-header {
    background: var(--dark);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .admin-header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }
  .admin-close {
    width: 32px; height: 32px;
    background: rgba(255,255,255,.1);
    border-radius: 8px;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }

  .admin-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .admin-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }
  .admin-tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: #e0e0e0;
    color: #555;
    transition: all .2s;
  }
  .admin-tab-btn.active {
    background: var(--dark);
    color: #fff;
  }

  /* Add Product Form */
  .admin-form { display: none; }
  .admin-form.active { display: block; }

  .afield {
    margin-bottom: 13px;
  }
  .afield label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
  }
  .afield input, .afield select, .afield textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--dark);
    background: #fff;
    outline: none;
    transition: border-color .2s;
  }
  .afield input:focus, .afield select:focus { border-color: var(--dark); }

  .afield-row { display: flex; gap: 10px; }
  .afield-row .afield { flex: 1; }

  /* Image upload area */
  .img-upload-area {
    width: 100%;
    height: 130px;
    border: 2px dashed #ccc;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    background: #fafafa;
    transition: border-color .2s;
    position: relative;
    overflow: hidden;
  }
  .img-upload-area:active { border-color: var(--dark); }
  .img-upload-area img, .img-upload-area video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
  .img-upload-area .upload-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    text-align: center;
    pointer-events: none;
  }
  .img-upload-area svg { color: #bbb; pointer-events: none; }

  .admin-save-btn {
    width: 100%;
    padding: 14px;
    background: var(--dark);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    letter-spacing: 0.2px;
  }
  .admin-save-btn:active { opacity: 0.85; }

  /* Product list in admin */
  .admin-product-list { display: none; }
  .admin-product-list.active { display: block; }

  .admin-prod-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .admin-prod-thumb {
    width: 56px; height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: #f0f0f0;
    flex-shrink: 0;
  }
  .admin-prod-info { flex: 1; min-width: 0; }
  .admin-prod-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
  }
  .admin-prod-price {
    font-size: 12px;
    color: var(--red);
    font-weight: 700;
  }
  .admin-prod-del {
    width: 32px; height: 32px;
    background: #ffeaea;
    border: none;
    border-radius: 8px;
    color: var(--red);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }

  /* ── MEDIA GALLERY UPLOAD ── */
  .media-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }
  .media-thumb {
    width: 72px; height: 72px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
  }
  .media-thumb img, .media-thumb video {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
  }
  .media-thumb .rm-btn {
    position: absolute;
    top: 3px; right: 3px;
    width: 18px; height: 18px;
    background: rgba(0,0,0,.65);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .media-add-btn {
    width: 72px; height: 72px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    background: #fafafa;
    color: #aaa;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
    transition: border-color .2s, color .2s;
  }
  .media-add-btn:active { border-color: var(--dark); color: var(--dark); }
  .media-add-btn.hidden { display: none; }
  .media-uploading {
    width: 72px; height: 72px;
    border-radius: 8px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #888;
    flex-shrink: 0;
  }
  /* ── END MEDIA GALLERY ── */

  /* Dynamic products in home */
  #products-section {
    background: var(--white);
    margin-top: 8px;
  }
  #products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #e8e8e8;
  }
  .empty-products {
    padding: 40px 20px;
    text-align: center;
    color: #aaa;
    font-size: 13px;
    background: #fff;
  }
  .empty-products svg { margin-bottom: 10px; color: #ddd; }
  /* ── RECOMMENDED ── */
  .recommended-section { background:#fff; padding:14px 0 8px; margin-top:8px; }
  .recommended-header { display:flex; align-items:center; justify-content:space-between; padding:0 14px 10px; }
  .recommended-title { font-family:'Inter',sans-serif; font-size:15px; font-weight:800; color:var(--dark); }
  .recommended-subtitle { font-size:10px; color:#888; margin-top:1px; }
  .recommended-scroll {
    display:flex; gap:10px; overflow-x:auto;
    scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 14px 10px;
  }
  .recommended-scroll::-webkit-scrollbar { display:none; }
  .rec-card {
    min-width:150px; max-width:150px; scroll-snap-align:start;
    background:#fff; border-radius:12px; border:1px solid #f0f0f0;
    overflow:hidden; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.05);
    flex-shrink:0; transition:transform .2s;
  }
  .rec-card:active { transform:scale(0.97); }
  .rec-card-img { width:100%; height:130px; object-fit:cover; display:block; background:#f5f5f5; }
  .rec-card-img-wrap { position: relative; }
  .rec-card-body { padding:8px 10px 10px; }
  .rec-card-name {
    font-size:12px; font-weight:600; color:var(--dark); margin-bottom:3px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3;
  }
  .rec-card-price { font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:var(--red); }
  .rec-card-old { font-size:10px; color:#bbb; text-decoration:line-through; }
  .rec-card-badge { display:inline-block; font-size:9px; font-weight:700; background:var(--red); color:#fff; padding:2px 6px; border-radius:3px; margin-bottom:4px; }

  /* ── PRODUCT TICKER (manual horizontal scroll, no auto-animation) ── */
  .products-ticker-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding: 10px 0;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .products-ticker-wrap::-webkit-scrollbar { display: none; }
  .products-ticker-track {
    display: flex;
    gap: 12px;
    width: max-content;
    padding: 0 12px;
  }
  .product-ticker-card {
    width: 140px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .2s;
    scroll-snap-align: start;
  }
  .product-ticker-card:active { transform: scale(0.97); }
  .product-ticker-img {
    width: 140px; height: 130px;
    object-fit: cover;
    display: block;
    background: #f5f5f5;
  }
  .product-ticker-info { padding: 8px 10px; }
  .product-ticker-name {
    font-size: 12px; font-weight: 600;
    color: var(--dark);
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; margin-bottom: 3px;
  }
  .product-ticker-price {
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--red);
  }
  .product-ticker-badge {
    position: absolute; top: 6px; left: 6px;
    font-size: 9px; font-weight: 700;
    padding: 2px 7px; border-radius: 3px;
    background: var(--red); color: #fff;
  }

  /* ── VIEW ALL GRID ── */
  #products-all-wrap { display: none; }
  #products-all-wrap.active { display: block; }
  #products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #e8e8e8;
  }
  /* ════════════════════════════════════════════════════════════════ */
  /* WELCOME POPUP (first-visit only) */
  /* ════════════════════════════════════════════════════════════════ */
  #welcome-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
  }
  #welcome-popup.show { display: flex; animation: welcomeFadeIn .35s ease-out; }
  @keyframes welcomeFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .welcome-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .welcome-card {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    animation: welcomePop .45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes welcomePop {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
  }
  .welcome-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #1a1a1a;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }
  .welcome-hero {
    background: linear-gradient(135deg, #E8001C 0%, #a30015 100%);
    padding: 26px 20px 20px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .welcome-hero::before, .welcome-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    animation: welcomeBlob 6s ease-in-out infinite;
  }
  .welcome-hero::before { width: 120px; height: 120px; top: -30px; left: -20px; }
  .welcome-hero::after  { width: 80px;  height: 80px;  bottom: -20px; right: -10px; animation-delay: 2s; }
  @keyframes welcomeBlob {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.3); }
  }
  .welcome-logo {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .welcome-greet {
    position: relative;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.5px;
    z-index: 2;
  }
  /* Canvas overlay used inside hero AND inside CTA button — fills its parent */
  .welcome-stars-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }
  /* ════════════════════════════════════════════════════════════════ */
  /* AUTH GATE — forces signup/login before shopping */
  /* ════════════════════════════════════════════════════════════════ */
  #auth-gate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
  }
  #auth-gate.show { display: flex; }
  .ag-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #E8001C 0%, #a30015 60%, #6b0010 100%);
  }
  .ag-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 24px;
    padding: 26px 22px 22px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    max-height: 90vh;
    overflow-y: auto;
  }
  .ag-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, #E8001C, #a30015);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(232,0,28,.3);
  }
  .ag-title {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #1a1a1a;
    margin-bottom: 3px;
  }
  .ag-sub {
    text-align: center;
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
  }
  .ag-tabs {
    display: flex;
    gap: 6px;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 14px;
  }
  .ag-tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    transition: .15s;
  }
  .ag-tab.active {
    background: #fff;
    color: #E8001C;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
  }
  .ag-field { margin-bottom: 10px; }
  .ag-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 5px;
  }
  .ag-field input {
    width: 100%;
    padding: 12px 14px;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    outline: none;
  }
  .ag-field input:focus {
    border-color: #E8001C;
    background: #fff;
  }
  .ag-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #E8001C, #c0001a);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 0 4px 12px rgba(232,0,28,.3);
  }
  .ag-btn:disabled { opacity: .6; cursor: not-allowed; }
  .ag-err {
    background: #fee;
    color: #b00;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 10px;
    border: 1px solid #fcc;
  }
  .welcome-body {
    padding: 18px 20px 22px;
    text-align: center;
  }
  .welcome-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .welcome-sub {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
  }
  .welcome-counter {
    background: linear-gradient(135deg, #fff8e1, #ffe69c);
    border: 1px solid #ffd166;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
  }
  .counter-emoji {
    font-size: 22px;
  }
  .counter-text {
    font-size: 12px;
    color: #664d03;
    font-weight: 600;
    text-align: left;
    line-height: 1.4;
  }
  .counter-num {
    color: #E8001C;
    font-weight: 900;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
  }
  .welcome-cta {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #E8001C 0%, #c0001a 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(232,0,28,.4);
    animation: welcomePulse 1.8s ease-in-out infinite;
  }
  .welcome-cta-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  @keyframes welcomePulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 6px 20px rgba(232,0,28,.4); }
    50%      { transform: scale(1.04); box-shadow: 0 8px 28px rgba(232,0,28,.6); }
  }
  .welcome-cta:active { transform: scale(0.97) !important; }
  .welcome-tiny {
    font-size: 10px;
    color: #999;
    margin-top: 10px;
    font-weight: 500;
  }

  #intro-splash {    position: fixed;
    inset: 0;
    background: var(--red);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    /* no auto-animation — JS handles dismissal */
  }

  #intro-splash.hidden {
    display: none;
  }

  @keyframes splashOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.06); pointer-events: none; }
  }

  .splash-logo-ring {
    width: 100px;
    height: 100px;
    border-radius: 28px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: ringPop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
  }

  @keyframes ringPop {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
  }

  .splash-logo-ring svg {
    width: 52px;
    height: 52px;
    color: #fff;
  }

  .splash-name {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .splash-name svg text {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 800;
    fill: none;
    stroke: url(#rainbowGrad);
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: writeName 8s ease forwards 0.5s, rainbowShift 3s linear 0.5s 3, settleFill 0.8s ease forwards 9.5s;
  }

  @keyframes writeName {
    0%   { stroke-dashoffset: 1200; fill: transparent; }
    80%  { stroke-dashoffset: 0;    fill: transparent; }
    100% { stroke-dashoffset: 0;    fill: url(#rainbowGrad); }
  }

  @keyframes rainbowShift {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
  }

  @keyframes settleFill {
    0%   { fill: url(#rainbowGrad); stroke: url(#rainbowGrad); filter: hue-rotate(0deg); }
    100% { fill: #ffffff;           stroke: #ffffff;           filter: hue-rotate(0deg); }
  }

  .splash-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 10px;
    animation: nameSlide 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.8s both;
  }

  .splash-dots {
    display: flex;
    gap: 7px;
    margin-top: 48px;
    animation: nameSlide 0.5s ease 1.1s both;
  }

  .splash-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    animation: dotPulse 1s ease-in-out infinite;
  }
  .splash-dot:nth-child(2) { animation-delay: 0.15s; }
  .splash-dot:nth-child(3) { animation-delay: 0.3s; }

  @keyframes dotPulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.3); }
  }

  /* ════════════════════════════════════════════════════════════════ */
  /* ── ADMIN-CONTROLLED INTRO STYLE (overrides default splash) ──   */
  /* When active, hides the default SVG and shows .intro-custom-text */
  /* ════════════════════════════════════════════════════════════════ */
  #intro-splash.intro-custom .splash-name svg { display: none; }
  #intro-splash.intro-custom .splash-name { min-height: 70px; }

  .intro-custom-text {
    font-size: 60px;
    line-height: 1;
    display: inline-block;
    position: relative;
  }

  /* ── INTRO FONT STYLES ── */
  .intro-font-modern { font-family: 'Syne', sans-serif; font-weight: 800; letter-spacing: -1.5px; }
  .intro-font-serif  { font-family: 'Playfair Display', serif; font-weight: 800; font-style: italic; }
  .intro-font-script { font-family: 'Pacifico', cursive; font-weight: 400; letter-spacing: 1px; }
  .intro-font-hand   { font-family: 'Caveat', cursive; font-weight: 700; letter-spacing: 1px; font-size: 70px; }
  .intro-font-retro  { font-family: 'Bungee', cursive; font-weight: 400; letter-spacing: 1px; }
  .intro-font-pixel  { font-family: 'Press Start 2P', monospace; font-weight: 400; font-size: 36px; letter-spacing: 1px; }

  /* ── INTRO COLOR STYLES ── */
  .intro-color-rainbow {
    background: linear-gradient(90deg, #ff4d6d, #ffd166, #06d6a0, #118ab2, #7b2cbf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .intro-color-white  { color: #fff; }
  .intro-color-theme  { color: var(--red); }
  .intro-color-gold   {
    background: linear-gradient(135deg, #fff4c4 0%, #ffd700 50%, #b8860b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .intro-color-black  { color: #111; }
  .intro-color-silver {
    background: linear-gradient(135deg, #e0e0e0 0%, #ffffff 50%, #909090 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* ── INTRO ANIMATIONS ── */
  .intro-anim-pulse  { animation: introPulse 1.6s ease-in-out infinite; }
  .intro-anim-bounce { animation: introBounce 1.4s ease-in-out infinite; }
  .intro-anim-glow   {
    animation: introGlow 2s ease-in-out infinite;
  }
  .intro-anim-rainbow { animation: introRainbowShift 3s linear infinite; background-size: 200% 100%; }
  .intro-anim-sparkle::after {
    content: '✨';
    position: absolute;
    top: -10px; right: -20px;
    animation: introSparkle 1.5s ease-in-out infinite;
    pointer-events: none;
    font-size: 24px;
  }
  .intro-anim-typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 4px solid currentColor;
    animation: introTypewriter 1.6s steps(5, end) forwards, introBlink 0.7s step-end infinite;
    width: 0;
  }

  @keyframes introPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
  }
  @keyframes introBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }
  @keyframes introGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255,255,255,.4)); }
    50%      { filter: drop-shadow(0 0 18px rgba(255,255,255,.95)); }
  }
  @keyframes introRainbowShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }
  @keyframes introSparkle {
    0%   { opacity: 0; transform: translate(0,0) rotate(0deg) scale(.5); }
    50%  { opacity: 1; transform: translate(20px,-20px) rotate(180deg) scale(1.2); }
    100% { opacity: 0; transform: translate(40px,0) rotate(360deg) scale(.5); }
  }
  @keyframes introTypewriter {
    from { width: 0; }
    to   { width: 100%; }
  }
  @keyframes introBlink {
    from, to { border-color: transparent; }
    50%      { border-color: currentColor; }
  }

  /* ── SIGNUP OVERLAY ── */
  #signup-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
  }

  #signup-overlay.active { display: flex; }

  #signup-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .signup-blur-bg {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .signup-card {
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,0.97);
    border-radius: 20px;
    padding: 28px 24px 24px;
    width: calc(100% - 40px);
    max-width: 380px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    animation: cardUp 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes cardUp {
    from { opacity: 0; transform: translateY(40px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }

  .signup-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
  }

  .signup-logo-badge {
    width: 36px; height: 36px;
    background: var(--red);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
  }

  .signup-logo-badge svg { color: #fff; }

  .signup-logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--dark);
  }

  .signup-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    text-align: center;
    margin-bottom: 4px;
  }

  .signup-sub {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin-bottom: 20px;
  }

  .signup-field {
    margin-bottom: 13px;
  }

  .signup-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .signup-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--dark);
    outline: none;
    transition: border-color 0.2s;
    background: #fafafa;
  }

  .signup-field input:focus {
    border-color: var(--red);
    background: #fff;
  }

  .signup-btn {
    width: 100%;
    padding: 14px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    transition: background 0.2s, transform 0.1s;
    letter-spacing: 0.3px;
  }

  .signup-btn:active { transform: scale(0.98); background: var(--red-dark); }

  .signup-login-link {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 14px;
  }

  .signup-login-link span {
    color: var(--red);
    font-weight: 600;
    cursor: pointer;
  }

  .signup-success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0 6px;
    text-align: center;
  }

  .success-circle {
    width: 64px; height: 64px;
    background: #e8f5e9;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

  .success-circle svg { color: #2e7d32; }

  .success-title {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 6px;
  }

  .success-msg {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  /* ── ADMIN LOGIN MODAL ── */
  #admin-login-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  #admin-login-modal.active { display: flex; }

  .admin-login-sheet {
    background: #fff;
    width: 100%;
    max-width: 480px;
    border-radius: 20px 20px 0 0;
    padding: 24px 20px 36px;
    animation: sheetUp 0.35s cubic-bezier(0.34,1.2,0.64,1) both;
  }

  @keyframes sheetUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  .admin-login-handle {
    width: 36px; height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 0 auto 20px;
  }

  .admin-login-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }

  .admin-login-badge {
    width: 40px; height: 40px;
    background: var(--dark);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
  }

  .admin-login-badge svg { color: #fff; }

  .admin-login-title {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--dark);
  }

  .admin-login-sub {
    font-size: 12px;
    color: #888;
    margin-bottom: 20px;
  }

  .admin-login-err {
    background: #fff0f0;
    border: 1px solid #ffd0d0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--red);
    margin-bottom: 14px;
    display: none;
  }
  .admin-login-err.show { display: block; }

  .afield input.err { border-color: var(--red); }

  .admin-login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: #ccc;
    font-size: 12px;
  }
  .admin-login-divider::before,
  .admin-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
  }

  .btn-google {
    width: 100%;
    padding: 13px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .15s, border-color .15s;
  }
  .btn-google:active { background: #f5f5f5; }

  .btn-admin-signin {
    width: 100%;
    padding: 14px;
    background: var(--dark);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.2px;
    transition: opacity .15s;
    margin-top: 4px;
  }
  .btn-admin-signin:active { opacity: 0.85; }
  .btn-admin-signin:disabled { opacity: 0.55; cursor: not-allowed; }

  .admin-login-cancel {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #888;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    cursor: pointer;
    margin-top: 8px;
  }

  /* Admin panel logout bar */
  .admin-logout-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1a1a;
    padding: 10px 16px;
    flex-shrink: 0;
  }
  .admin-user-email {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
  .btn-logout {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-logout:active { opacity: 0.7; }

  /* ── CONTACT-LIST CATEGORY PAGE ── */
  #page-category {
    display: none;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #f2f2f7;
  }
  #page-category.active { display: flex; }

  /* Search bar at top */
  #cat-search-bar {
    background: #f2f2f7;
    padding: 10px 14px 6px;
    flex-shrink: 0;
  }
  #cat-search-input {
    width: 100%;
    background: #e4e4eb;
    border: none;
    border-radius: 10px;
    padding: 9px 14px 9px 36px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #111;
    outline: none;
    box-sizing: border-box;
    position: relative;
  }
  #cat-search-wrap {
    position: relative;
  }
  #cat-search-wrap svg {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: #8e8e93;
    pointer-events: none;
  }

  /* Scrollable list */
  .cat-main-area {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex !important;
    flex-direction: column;
  }
  .cat-main-area::-webkit-scrollbar { display: none; }

  /* Alphabet section header */
  .cat-alpha-header {
    padding: 6px 16px 4px;
    font-size: 13px;
    font-weight: 700;
    color: #8e8e93;
    background: #f2f2f7;
    letter-spacing: 0.2px;
  }

  /* White card group per letter */
  .cat-alpha-group {
    background: #fff;
    margin: 0 0 0 0;
    border-top: 1px solid #e5e5ea;
    border-bottom: 1px solid #e5e5ea;
    margin-bottom: 8px;
  }

  /* Each category row */
  .cat-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 14px;
    cursor: pointer;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    transition: background .1s;
    position: relative;
  }
  .cat-list-row:last-child { border-bottom: none; }
  .cat-list-row:active { background: #f5f5f5; }

  /* Avatar circle */
  .cat-list-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: hidden;
  }
  .cat-list-avatar img { width: 100%; height: 100%; object-fit: cover; }

  /* Text */
  .cat-list-info { flex: 1; min-width: 0; }
  .cat-list-name {
    font-size: 15px;
    font-weight: 500;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cat-list-sub {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 1px;
  }

  /* Chevron */
  .cat-list-chevron { color: #c7c7cc; flex-shrink: 0; }

  /* Right index strip */
  #cat-alpha-index {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 10;
    pointer-events: none;
  }
  .cat-alpha-dot {
    font-size: 9px;
    font-weight: 700;
    color: var(--red);
    line-height: 1.4;
    text-align: center;
    padding: 0 3px;
  }

  /* Hide old elements */
  .cat-sidebar { display: none !important; }
  .cat-main-title { display: none; }
  #cat-header { display: none; }
  #cat-pills { display: none; }
  #cat-body { display: none; }
  #cat-section-title { display: none; }
  .cat-sub-grid { display: none; }
  .cat-section-block { display: none; }
  .cat-all-row { display: none; }


  /* ── SELLER INFO ON PRODUCT DETAIL ── */
  .pd-seller-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    margin-top: 2px;
  }
  .pd-seller-left {
    display: flex; align-items: center; gap: 10px;
  }
  .pd-seller-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), #c0001a);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px; font-weight: 800; color: #fff;
    flex-shrink: 0;
  }
  .pd-seller-info { }
  .pd-seller-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .5px; }
  .pd-seller-name { font-size: 14px; font-weight: 700; color: var(--dark); }

  /* Message button on product detail */
  .pd-msg-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 7px 12px;
    background: #fff;
    border: 1.5px solid var(--red, #e8001c);
    color: var(--red, #e8001c);
    border-radius: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }
  .pd-msg-btn svg { pointer-events: none; }
  .pd-msg-btn:active { background: #ffece9; }
  #chat-sheet button svg, #chat-sheet input { pointer-events: auto; }
  #chat-sheet button svg { pointer-events: none; }

  /* Chat bubbles */
  .chat-bubble {
    max-width: 78%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    position: relative;
  }
  .chat-bubble.from-buyer {
    align-self: flex-end;
    background: var(--red, #e8001c);
    color: #fff;
    border-bottom-right-radius: 5px;
  }
  .chat-bubble.from-seller {
    align-self: flex-start;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #eee;
    border-bottom-left-radius: 5px;
  }
  .chat-bubble-time {
    font-size: 9.5px;
    opacity: .6;
    margin-top: 3px;
    text-align: right;
  }
  .chat-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    margin: auto;
    padding: 30px;
  }
  .pd-follow-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 7px 13px;
    background: var(--dark);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    flex-shrink: 0;
  }
  .pd-follow-btn.following {
    background: #fff;
    color: var(--dark);
    border: 1.5px solid #e0e0e0;
  }

  /* ── INBOX ── */
  #inbox-screen {
    position: fixed; inset: 0; z-index: 600;
    background: #f5f5f5;
    display: none; flex-direction: column;
    max-width: 480px; margin: 0 auto;
  }
  #inbox-screen.active { display: flex; }
  .inbox-header {
    background: #fff;
    padding: 16px;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid #eee;
    position: sticky; top: 0; z-index: 10;
  }
  .inbox-back {
    width: 32px; height: 32px;
    background: none; border: none;
    cursor: pointer; color: #333;
    display: flex; align-items: center; justify-content: center;
  }
  .inbox-title {
    font-family: 'Inter', sans-serif;
    font-size: 17px; font-weight: 800;
  }
  .inbox-body {
    flex: 1; overflow-y: auto; padding: 12px;
  }
  .inbox-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 80px 20px; text-align: center; color: #aaa;
  }
  .inbox-empty svg { margin-bottom: 14px; opacity: .3; }
  .inbox-empty p { font-size: 13px; }

  .inbox-msg {
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
  }
  .inbox-msg.unread { border-left: 3px solid var(--red); background: #fff8f8; }
  .inbox-msg-top {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 8px;
  }
  .inbox-msg-shop {
    font-size: 13px; font-weight: 700;
    color: var(--dark);
  }
  .inbox-msg-time { font-size: 10px; color: #aaa; }
  .inbox-msg-text {
    font-size: 13px; color: #444;
    line-height: 1.5; margin-bottom: 10px;
  }
  .inbox-confirm-btn {
    background: var(--red); color: #fff;
    border: none; border-radius: 8px;
    padding: 9px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
  }
  .inbox-confirmed {
    font-size: 11px; color: #00875a;
    font-weight: 600;
  }

  /* Delivery info updated */
  .delivery-state-info {
    font-size: 11px; color: #888;
    margin-top: 3px; line-height: 1.4;
  }
  #seller-profile-sheet {
    position: fixed; inset: 0; z-index: 850;
    background: rgba(0,0,0,.55);
    display: none; align-items: flex-end;
    backdrop-filter: blur(4px);
  }
  #seller-profile-sheet.active { display: flex; }
  .sp-card {
    background: #fff; border-radius: 20px 20px 0 0;
    width: 100%; padding: 20px 20px 36px;
    max-height: 88vh; overflow-y: auto;
    animation: sheetUp .3s cubic-bezier(.34,1.2,.64,1) both;
  }
  .sp-hero { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
  .sp-avatar {
    width:60px; height:60px; border-radius:50%;
    background:linear-gradient(135deg,var(--red),#c0001a);
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; font-size:26px; font-weight:800;
    color:#fff; flex-shrink:0;
  }
  .sp-info { flex:1; }
  .sp-shop { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; margin-bottom:2px; }
  .sp-joined { font-size:11px; color:#888; }
  .sp-report-btn {
    width:36px; height:36px; border-radius:50%;
    background:rgba(232,0,28,.08); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    color:var(--red); flex-shrink:0;
  }
  .sp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
  .sp-stat { background:#f8f8f8; border-radius:12px; padding:12px 8px; text-align:center; }
  .sp-stat-val { font-family:'Inter',sans-serif; font-size:20px; font-weight:800; margin-bottom:3px; }
  .sp-stat-label { font-size:10px; color:#888; }
  .sp-section { background:#f8f8f8; border-radius:12px; padding:14px; margin-bottom:10px; }
  .sp-section-title { font-size:10px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
  .sp-row { display:flex; justify-content:space-between; font-size:13px; padding:5px 0; border-bottom:1px solid #f0f0f0; }
  .sp-row:last-child { border-bottom:none; }
  .sp-label { color:#888; }
  .sp-val { font-weight:600; }
  .sp-follow-big {
    width:100%; padding:13px; background:var(--dark); color:#fff;
    border:none; border-radius:10px; font-family:'Inter',sans-serif;
    font-size:14px; font-weight:700; cursor:pointer; margin-bottom:8px;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .sp-follow-big.following { background:#fff; color:var(--dark); border:1.5px solid #ddd; }
  .sp-close-btn { width:100%; padding:12px; background:transparent; color:#888; border:none; font-family:'Inter',sans-serif; font-size:13px; cursor:pointer; }

  /* Report sheet */
  #report-sheet {
    position:fixed; inset:0; z-index:900;
    background:rgba(0,0,0,.55);
    display:none; align-items:flex-end;
    backdrop-filter:blur(4px);
  }
  #report-sheet.active { display:flex; }
  .report-card {
    background:#fff; border-radius:20px 20px 0 0;
    width:100%; padding:20px 20px 36px;
    animation:sheetUp .3s cubic-bezier(.34,1.2,.64,1) both;
  }
  .report-option {
    padding:14px 16px; border-radius:10px;
    background:#f8f8f8; margin-bottom:8px;
    cursor:pointer; font-size:14px; font-weight:500;
    border:1.5px solid transparent; transition:all .2s;
  }
  .report-option:active { border-color:var(--red); background:#fff0f2; }

  /* ── RATING SECTION ── */
  .pd-rating-section {
    background: #fff;
    padding: 14px 16px;
    margin-bottom: 8px;
  }
  .pd-rating-overview {
    display: flex; align-items: center;
    gap: 14px; margin-bottom: 14px;
  }
  .pd-rating-big {
    font-family: 'Inter', sans-serif;
    font-size: 42px; font-weight: 800;
    color: var(--dark); line-height: 1;
  }
  .pd-rating-right { flex: 1; }
  .pd-stars { display: flex; gap: 2px; margin-bottom: 3px; }
  .pd-star { font-size: 16px; }
  .pd-rating-count { font-size: 11px; color: #888; }

  .pd-rating-bars { margin-bottom: 14px; }
  .pd-bar-row {
    display: flex; align-items: center;
    gap: 8px; margin-bottom: 4px;
  }
  .pd-bar-label { font-size: 11px; color: #888; width: 10px; text-align: right; }
  .pd-bar-track {
    flex: 1; height: 5px;
    background: #f0f0f0; border-radius: 3px; overflow: hidden;
  }
  .pd-bar-fill { height: 100%; background: #f59f00; border-radius: 3px; }

  .pd-add-review-btn {
    width: 100%; padding: 11px;
    background: #fff;
    border: 1.5px solid var(--dark);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer; color: var(--dark);
    margin-bottom: 12px;
  }

  .pd-review-item {
    padding: 12px 0;
    border-bottom: 1px solid #f4f4f4;
  }
  .pd-review-item:last-child { border-bottom: none; }
  .pd-review-top {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 5px;
  }
  .pd-review-name { font-size: 13px; font-weight: 600; }
  .pd-review-stars { font-size: 12px; }
  .pd-review-date { font-size: 10px; color: #aaa; margin-bottom: 5px; }
  .pd-review-text { font-size: 13px; color: #444; line-height: 1.4; }

  /* Review input sheet */
  #review-sheet {
    position: fixed; inset: 0; z-index: 850;
    background: rgba(0,0,0,.5);
    display: none; align-items: flex-end;
    backdrop-filter: blur(4px);
  }
  #review-sheet.active { display: flex; }
  .review-card {
    background: #fff;
    border-radius: 20px 20px 0 0;
    width: 100%; padding: 20px 20px 36px;
    animation: sheetUp .3s cubic-bezier(.34,1.2,.64,1) both;
  }
  .review-stars-input {
    display: flex; gap: 8px;
    justify-content: center;
    margin: 12px 0 16px;
  }
  .review-star-btn {
    font-size: 32px; cursor: pointer;
    background: none; border: none;
    transition: transform .15s;
  }
  .review-star-btn:active { transform: scale(1.2); }
  .review-submit-btn {
    width: 100%; padding: 14px;
    background: var(--red); color: #fff;
    border: none; border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px; font-weight: 700;
    cursor: pointer; margin-top: 4px;
  }
  #product-detail {
    position: fixed;
    inset: 0;
    z-index: 700;
    background: #f0f0f0;
    display: none;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
  }
  #product-detail.active { display: flex; }

  .pd-media-wrap {
    position: relative;
    width: 100%;
    background: #fff;
    flex-shrink: 0;
  }

  .pd-media-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    height: 300px;
  }
  .pd-media-slider::-webkit-scrollbar { display: none; }

  .pd-media-slide {
    min-width: 100%;
    scroll-snap-align: start;
    height: 300px;
    flex-shrink: 0;
    overflow: hidden;
  }

  .pd-media-slide img,
  .pd-media-slide video {
    width: 100%; height: 100%;
    object-fit: cover;
  }

  .pd-media-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 8px 0;
    background: #fff;
  }

  .pd-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ddd;
    transition: all .3s;
    cursor: pointer;
  }
  .pd-dot.active { background: var(--red); width: 16px; border-radius: 3px; }

  .pd-back-btn {
    position: absolute;
    top: 14px; left: 14px;
    width: 36px; height: 36px;
    background: rgba(0,0,0,0.45);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #fff;
    border: none;
  }

  .pd-share-btn {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: rgba(0,0,0,0.45);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #fff;
    border: none;
  }

  .pd-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f0f0f0;
  }

  .pd-info {
    background: #fff;
    padding: 16px;
    margin-bottom: 8px;
  }

  .pd-badges {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .pd-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    letter-spacing: 0.3px;
  }
  .pd-badge.brand { background: var(--red); color: #fff; }
  .pd-badge.discount { background: var(--blue); color: #fff; }
  .pd-badge.category { background: #f0f0f0; color: #555; }

  .pd-name {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
    margin-bottom: 10px;
  }

  .pd-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
  }

  .pd-price {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--red);
  }

  .pd-old-price {
    font-size: 14px;
    color: #aaa;
    text-decoration: line-through;
  }

  .pd-stock-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }

  .pd-stock-bar {
    flex: 1; height: 5px;
    background: #e8e8e8;
    border-radius: 3px;
    overflow: hidden;
  }

  .pd-stock-fill {
    height: 100%;
    background: var(--red);
    border-radius: 3px;
  }

  .pd-stock-text {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
  }

  .pd-section {
    background: #fff;
    padding: 14px 16px;
    margin-bottom: 8px;
  }

  .pd-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .pd-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f4f4f4;
    font-size: 13px;
  }
  .pd-detail-row:last-child { border-bottom: none; }
  .pd-detail-label { color: #888; }
  .pd-detail-value { color: var(--dark); font-weight: 500; text-align: right; }

  /* Bottom action bar */
  .pd-action-bar {
    background: #fff;
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
  }

  .btn-add-cart {
    flex: 1;
    padding: 14px;
    background: #fff;
    color: var(--red);
    border: 2px solid var(--red);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
  }
  .btn-add-cart:active { background: #fff0f0; }

  .btn-buy-now {
    flex: 1.4;
    padding: 14px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
  }
  .btn-buy-now:active { opacity: 0.85; }

  /* ── SHARE & SAVE (Temu-style) ── */
  .share-banner {
    display: none;
    margin: 10px 16px 0;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffe7b3 100%);
    border: 1.5px solid #ffd166;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
  }
  .share-banner.show { display: block; }
  .share-banner-row { display: flex; align-items: center; gap: 10px; }
  .share-banner-icon {
    width: 36px; height: 36px;
    background: #ff9800;
    color: #fff;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(255,152,0,.35);
  }
  .share-banner-text { flex: 1; min-width: 0; }
  .share-banner-title {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #5d3b00;
    line-height: 1.2;
  }
  .share-banner-sub {
    font-size: 11px;
    color: #8b5e00;
    margin-top: 2px;
    line-height: 1.3;
  }
  .share-banner-claimed {
    display: inline-block;
    margin-top: 6px;
    background: #2e7d32;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: .3px;
  }

  .btn-share {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid var(--border, #e5e5e5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    flex-shrink: 0;
    transition: background .15s;
  }
  .btn-share:active { background: #fff0f0; }

  .btn-share-save {
    flex: 1;
    padding: 14px;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(255,152,0,.4);
  }
  .btn-share-save.show { display: flex; }
  .btn-share-save:active { opacity: .9; }

  /* Cart-side discount row */
  .cart-summary-row.discount-row span:last-child { color: #2e7d32; font-weight: 700; }
  .discount-banner-cart {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
    border: 1.5px solid #ffd166;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 10px 0 14px;
    display: flex; align-items: center; gap: 10px;
    font-size: 12px;
    color: #5d3b00;
    font-weight: 600;
  }
  .discount-banner-cart .icon {
    width: 28px; height: 28px;
    background: #ff9800; color: #fff;
    border-radius: 8px;
    display:flex; align-items:center; justify-content:center;
    font-size: 14px;
    flex-shrink: 0;
  }

  /* Admin promotions tab */
  .promo-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
  }
  .promo-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 14px;
  }
  .promo-switch {
    position: relative;
    width: 50px;
    height: 28px;
    background: #ccc;
    border-radius: 14px;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
  }
  .promo-switch::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 22px; height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
  }
  .promo-switch.on { background: #2e7d32; }
  .promo-switch.on::after { transform: translateX(22px); }

  /* ── CART PAGE ── */
  /* ── CART PAGE ── */
  #page-cart { background: #f0f0f0; min-height: 100%; padding-bottom: 10px; }

  .cart-header {
    background: #fff;
    padding: 14px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .cart-back-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f2f2f2;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--dark);
  }
  .cart-back-btn:active { background: #e8e8e8; }
  .cart-header-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--dark);
    flex: 1;
  }
  .cart-clear-btn {
    font-size: 12px;
    color: var(--red);
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
  }

  .cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 30px;
    text-align: center;
    color: #aaa;
  }
  .cart-empty svg { margin-bottom: 16px; color: #ddd; }
  .cart-empty h3 {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #bbb;
    margin-bottom: 6px;
  }
  .cart-empty p { font-size: 13px; margin-bottom: 20px; }
  .cart-empty-btn {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .cart-items { padding: 10px 0; }

  .cart-item {
    background: #fff;
    margin-bottom: 8px;
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .cart-item-img {
    width: 72px; height: 72px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f0f0f0;
  }
  .cart-item-info { flex: 1; min-width: 0; }
  .cart-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cart-item-price {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--red);
    margin-bottom: 8px;
  }
  .cart-qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .qty-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--dark);
    line-height: 1;
  }
  .qty-btn:active { background: #f5f5f5; }
  .qty-val {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
  }
  .cart-del-btn {
    width: 32px; height: 32px;
    background: #fff0f0;
    border: none;
    border-radius: 8px;
    color: var(--red);
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  .cart-summary {
    /* Floating bubble effect */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    margin: 18px 14px 16px;
    padding: 18px 18px 16px;
    border-radius: 20px;
    box-shadow:
      0 12px 32px rgba(232, 0, 28, 0.10),
      0 4px 14px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: cartSummaryFloat 4.5s ease-in-out infinite;
    position: relative;
    z-index: 2;
  }
  @keyframes cartSummaryFloat {
    0%, 100% {
      transform: translateY(0);
      box-shadow:
        0 12px 32px rgba(232, 0, 28, 0.10),
        0 4px 14px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    50% {
      transform: translateY(-5px);
      box-shadow:
        0 20px 42px rgba(232, 0, 28, 0.18),
        0 8px 20px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
  }
  .cart-summary-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cart-summary-title::before {
    content: '📋';
    font-size: 16px;
  }
  .cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #555;
    padding: 5px 0;
  }
  .cart-summary-row.total {
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    font-size: 15px;
    color: var(--dark);
  }
  .cart-summary-row.total span:last-child { color: var(--red); font-family: 'Inter', sans-serif; font-size: 17px; }

  .cart-checkout-bar {
    background: #fff;
    padding: 12px 16px 16px;
    border-top: 1px solid #e8e8e8;
  }
  .cart-checkout-btn {
    width: 100%;
    padding: 15px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.3px;
  }
  .cart-checkout-btn:active { opacity: 0.85; }
  .cart-checkout-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Cart badge on nav */
  .nav-cart-badge {
    position: absolute;
    top: 4px; right: 18px;
    width: 16px; height: 16px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
  }
  .nav-cart-badge.show { display: flex; }

  /* ── CHECKOUT SHEET ── */
  #checkout-sheet {
    position: fixed;
    inset: 0;
    z-index: 850;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
  }
  #checkout-sheet.active { display: flex; }

  .checkout-card {
    background: #fff;
    width: 100%;
    max-width: 480px;
    border-radius: 20px 20px 0 0;
    padding: 20px 20px 36px;
    max-height: 90vh;
    overflow-y: auto;
    animation: sheetUp 0.35s cubic-bezier(0.34,1.2,0.64,1) both;
  }
  .checkout-handle {
    width: 36px; height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 0 auto 18px;
  }
  .checkout-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 16px;
  }
  .co-field {
    margin-bottom: 12px;
  }
  .co-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
  }
  .co-field input, .co-field select, .co-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--dark);
    background: #fafafa;
    outline: none;
    transition: border-color .2s;
  }
  .co-field input:focus, .co-field select:focus, .co-field textarea:focus {
    border-color: var(--red);
    background: #fff;
  }
  .co-field textarea { height: 70px; resize: none; }
  .co-section-label {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 10px;
  }
  .co-order-summary {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 14px;
  }
  .co-order-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #555;
    padding: 4px 0;
  }
  .co-order-row.total {
    border-top: 1px solid #e8e8e8;
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
    color: var(--dark);
  }
  .co-order-row.total span:last-child { color: var(--red); }
  .co-place-btn {
    width: 100%;
    padding: 15px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
  }
  .co-place-btn:active { opacity: 0.85; }
  .co-place-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Order success */
  .order-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0 10px;
  }
  .order-success-circle {
    width: 72px; height: 72px;
    background: #e8f5e9;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    animation: popIn .4s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  .order-success-circle svg { color: #2e7d32; }
  .order-success h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
  }
  .order-success p { font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 20px; }

  /* ── ORDERS PAGE ── */
  #page-orders {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: #f0f0f0;
    display: none;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
  }
  #page-orders.active { display: flex; }

  .orders-header {
    background: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
  }
  .orders-back {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f2f2f2;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--dark);
    flex-shrink: 0;
  }
  .orders-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--dark);
  }
  .orders-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 0;
  }
  .orders-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #aaa;
    font-size: 13px;
    gap: 10px;
  }
  .orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
  }
  .orders-empty svg { color: #ddd; margin-bottom: 14px; }
  .orders-empty h3 {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #bbb;
    margin-bottom: 6px;
  }
  .orders-empty p { font-size: 13px; color: #aaa; margin-bottom: 20px; }
  .orders-shop-btn {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .order-card {
    background: #fff;
    border-radius: 12px;
    margin: 0 12px 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .order-card-header {
    padding: 12px 14px;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .order-ref {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
    font-family: 'Inter', sans-serif;
  }
  .order-date {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
  }
  .order-status {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .order-status.paid       { background: #e8f5e9; color: #2e7d32; }
  .order-status.pending    { background: #fff8e1; color: #f57f17; }
  .order-status.delivered  { background: #e3f2fd; color: #1565c0; }
  .order-status.cancelled  { background: #fce4ec; color: #c62828; }

  .order-items-preview {
    padding: 10px 14px;
    border-bottom: 1px solid #f4f4f4;
  }
  .order-item-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #555;
    padding: 3px 0;
  }
  .order-item-row span:last-child { font-weight: 600; color: var(--dark); }

  .order-card-footer {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .order-total-label { font-size: 12px; color: #888; }
  .order-total-amount {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--red);
  }
  .order-payment-badge {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    background: #f4f4f4;
    padding: 3px 8px;
    border-radius: 10px;
  }

  /* ════════════════════════════════════════════════════════════════ */
  /* TIKTOK-STYLE VIDEO FEED */
  /* ════════════════════════════════════════════════════════════════ */
  #page-videos {
    position: fixed;
    inset: 0;
    z-index: 350;
    background: #000;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
  }
  #page-videos.active { display: block !important; }
  #videos-feed {
    position: absolute;
    inset: 0;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  #videos-feed::-webkit-scrollbar { display: none; }
  .video-slide {
    position: relative;
    width: 100%;
    /* Leave room at the bottom for the floating tab bar (~80px + safe area) */
    height: calc(100vh - 86px);
    height: calc(100dvh - 86px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: #000;
  }
  .video-slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
  }
  .video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #111;
    pointer-events: none;
  }
  /* Top dark gradient for header text legibility */
  .video-slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 110px;
    background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
    z-index: 1;
    pointer-events: none;
  }
  /* Bottom dark gradient for text legibility */
  .video-slide::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 280px;
    background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
    z-index: 1;
    pointer-events: none;
  }
  /* Top bar */
  #videos-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }
  #videos-topbar > * { pointer-events: auto; }
  /* Unmute hint pill */
  #video-unmute-hint {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
    animation: hintPulse 1.6s ease-in-out infinite;
  }
  @keyframes hintPulse {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50%      { opacity: .8; transform: translateX(-50%) scale(.95); }
  }
  /* Right-side action rail */
  .video-actions {
    position: absolute;
    right: 10px;
    bottom: 30px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }
  .video-action-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .video-action-btn:active { transform: scale(.85); }
  .va-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
  }
  .va-icon svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
  }
  .video-action-btn.liked .va-icon svg {
    stroke: #ff2d55;
    fill: #ff2d55;
    animation: heartBeat .4s ease;
  }
  .video-action-btn.saved .va-icon svg {
    stroke: #ffd166;
    fill: #ffd166;
  }
  @keyframes heartBeat {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.4); }
    50%  { transform: scale(.9); }
    100% { transform: scale(1); }
  }
  .va-label {
    font-size: 10px;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
  }
  /* Seller avatar action (replaces icon with image) */
  .va-seller {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    background: linear-gradient(135deg, #E8001C, #c0001a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
  }
  .va-seller img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Cart badge on cart action */
  .va-icon .va-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #E8001C;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 10px;
    border: 2px solid #000;
  }
  /* Bottom info overlay */
  .video-info {
    position: absolute;
    bottom: 24px;
    left: 14px;
    right: 70px;
    z-index: 5;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
  }
  .video-info-shop {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
    display: inline-block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .video-info-shop:hover { opacity: .9; }
  .video-info-name {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .video-info-desc {
    font-size: 12px;
    line-height: 1.4;
    opacity: .9;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .video-info-price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(232,0,28,.95);
    padding: 6px 12px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    backdrop-filter: blur(6px);
    cursor: pointer;
  }
  .video-info-price .old {
    text-decoration: line-through;
    font-size: 11px;
    opacity: .7;
    font-weight: 600;
  }
  /* Play/pause indicator (shown briefly when tapping video) */
  .video-play-indicator {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .video-play-indicator.show {
    opacity: 1;
    animation: pulseFade .6s ease forwards;
  }
  @keyframes pulseFade {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
    40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
  }
  /* Hide bottom-nav videos tab inside actual page if needed (keeping for clarity) */
  .nav-tab-videos svg { width: 22px; height: 22px; }

  /* ════════ GUEST BLUR + SIGN-IN OVERLAY ════════ */
  /* By default (signed in), no blur. When body has .is-guest, blur the wrapped sections + show overlay. */
  #account-guest-overlay { display: none; }
  body.is-guest #account-guest-blur {
    filter: blur(7px);
    -webkit-filter: blur(7px);
    pointer-events: none;
    user-select: none;
    transform: scale(1.02);
    transform-origin: top center;
  }
  body.is-guest #account-guest-overlay {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 5;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 18px;
    pointer-events: auto;
  }
  body.is-guest #account-guest-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.75) 30%, rgba(255,255,255,0.92) 100%);
    pointer-events: none;
  }
  .agc-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 20px;
    padding: 26px 22px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
    text-align: center;
    margin-top: 30px;
  }
  .agc-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, #e8001c, #a30015);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(232,0,28,.3);
  }
  .agc-title {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 6px;
  }
  .agc-sub {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .agc-btn-primary {
    display: block;
    width: 100%;
    padding: 12px 14px;
    background: linear-gradient(135deg, #e8001c, #c0001a);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(232,0,28,.3);
    margin-bottom: 8px;
  }
  .agc-btn-secondary {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: #f5f5f5;
    color: #333;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  /* SAVED PRODUCTS — list inside profile */
  .saved-products-section {
    background: #fff;
    margin: 8px 14px;
    border-radius: 14px;
    padding: 14px;
  }
  .saved-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
  }
  .saved-product-card {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    cursor: pointer;
  }
  .saved-product-card img,
  .saved-product-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .saved-product-card .sp-price {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 4px 6px;
    background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
  }

  /* ── CUSTOMER ACCOUNT PAGE ── */
  #page-profile {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: #f0f0f0;
    display: none;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 70px;
  }
  #page-profile.active { display: flex; }

  .profile-header {
    background: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
  }
  .profile-back {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f2f2f2;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--dark);
    flex-shrink: 0;
  }
  .profile-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--dark);
    flex: 1;
  }

  .profile-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .profile-avatar-section {
    background: #fff;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  .profile-avatar-ring {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    position: relative;
    flex-shrink: 0;
  }

  .profile-name-display {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
  }
  .profile-email-display {
    font-size: 13px;
    color: #888;
    margin-top: -6px;
  }
  .profile-member-since {
    font-size: 11px;
    color: #aaa;
    background: #f4f4f4;
    padding: 3px 10px;
    border-radius: 10px;
  }

  .profile-section {
    background: #fff;
    margin-bottom: 8px;
  }
  .profile-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px 8px;
    border-bottom: 1px solid #f4f4f4;
  }

  .profile-field {
    padding: 13px 16px;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .profile-field:last-child { border-bottom: none; }

  .profile-field-icon {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: #f4f4f4;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #666;
  }

  .profile-field-content { flex: 1; min-width: 0; }
  .profile-field-label {
    font-size: 11px;
    color: #aaa;
    font-weight: 500;
    margin-bottom: 2px;
  }
  .profile-field-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
  }
  .profile-field-value.empty { color: #bbb; font-style: italic; }

  .profile-edit-btn {
    background: none;
    border: none;
    color: var(--red);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
  }

  .profile-save-btn {
    width: calc(100% - 32px);
    margin: 16px;
    padding: 14px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }
  .profile-save-btn:active { opacity: 0.85; }
  .profile-save-btn:disabled { opacity: 0.5; }

  /* Inline edit input */
  .profile-field-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    font-family: 'Inter', sans-serif;
    background: transparent;
    border-bottom: 1.5px solid var(--red);
    padding-bottom: 2px;
  }

  .profile-stats {
    display: flex;
    gap: 1px;
    background: #e8e8e8;
    margin-bottom: 8px;
  }
  .profile-stat {
    flex: 1;
    background: #fff;
    padding: 14px 10px;
    text-align: center;
  }
  .profile-stat-val {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--red);
  }
  .profile-stat-label {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
  }
  @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

  /* ── EXPANDABLE MAP ── */
  .map-wrap { position:relative; }
  .map-expand-btn {
    position:absolute; top:8px; right:8px;
    z-index:1000;
    background:#fff; border:none;
    width:38px; height:38px; border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    color:#0a0a0a;
  }
  .map-expand-btn:active { background:#efefef; }

  .map-wrap.fullscreen {
    position:fixed !important;
    top:0; left:0; right:0; bottom:0;
    width:100% !important; height:100% !important;
    max-width:none !important;
    z-index:99999 !important;
    border-radius:0 !important;
    margin:0 !important;
    border:none !important;
    background:#fff !important;
  }
  .map-wrap.fullscreen > div[id$="-map"],
  .map-wrap.fullscreen > #pickup-stations-map {
    width:100% !important; height:100% !important;
    border-radius:0 !important;
  }
  .map-wrap.fullscreen .map-expand-btn {
    top:16px; right:16px;
    width:44px; height:44px;
  }
  .map-fs-bar {
    display:none;
    position:absolute; top:0; left:0; right:0;
    z-index:1001;
    background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
    padding:14px 64px 30px 16px;
    color:#fff;
    pointer-events:none;
  }
  .map-wrap.fullscreen .map-fs-bar { display:block; }
  .map-fs-title { font-family:'Inter',sans-serif; font-weight:700; font-size:14px; }
  .map-fs-hint  { font-size:11px; opacity:.85; margin-top:2px; }

  .map-fs-confirm {
    display:none;
    position:absolute; bottom:0; left:0; right:0;
    z-index:1001;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
  }
  .map-wrap.fullscreen .map-fs-confirm { display:flex; gap:8px; }
  .map-fs-confirm button {
    flex:1; padding:14px;
    border:none; border-radius:12px;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:700;
    cursor:pointer;
  }
  .map-fs-confirm .btn-cancel { background:rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(8px); }
  .map-fs-confirm .btn-done   { background:#e8001c; color:#fff; }




    @keyframes searchPulseShake {
      0%   { transform: scale(1) rotate(0deg); }
      10%  { transform: scale(1.18) rotate(-8deg); }
      20%  { transform: scale(1.18) rotate(8deg); }
      30%  { transform: scale(1.18) rotate(-6deg); }
      40%  { transform: scale(1.18) rotate(6deg); }
      50%  { transform: scale(1.18) rotate(0deg); }
      70%  { transform: scale(0.88) rotate(0deg); }
      85%  { transform: scale(1.08) rotate(0deg); }
      100% { transform: scale(1) rotate(0deg); }
    }
    .search-icon-animated {
      animation: searchPulseShake 1.8s ease-in-out infinite;
    }
    #hero-search-wrap {
      position: absolute;
      top: 12px;
      right: 14px;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    #hero-search-icon {
      width: 38px;
      height: 38px;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: opacity 0.2s;
    }
    #hero-search-bar {
      display: flex;
      align-items: center;
      background: rgba(255,255,255,0.95);
      border-radius: 20px;
      overflow: hidden;
      width: 0;
      opacity: 0;
      transition: width 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s;
      pointer-events: none;
    }
    #hero-search-bar.open {
      width: min(260px, calc(100vw - 70px));
      opacity: 1;
      pointer-events: all;
    }
    #hero-search-bar input {
      flex: 1;
      border: none;
      background: transparent;
      padding: 9px 12px;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      color: #111;
      outline: none;
      min-width: 0;
      user-select: text;
      -webkit-user-select: text;
    }
    #hero-search-bar input::placeholder { color: #aaa; }
    #hero-search-close {
      padding: 0 10px;
      cursor: pointer;
      color: #888;
      flex-shrink: 0;
      font-size: 18px;
      line-height: 1;
    }
    /* Transparent Local Market icon — inside banner, bottom area, aligned with search */
    #local-market-icon {
      position: absolute;
      top: 168px;            /* inside the 220px banner image, lower area */
      right: 14px;
      z-index: 20;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      animation: lmBounce 1.6s ease-in-out infinite;
    }
    #local-market-icon::after {
      content: 'Local';
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 8.5px;
      font-weight: 800;
      letter-spacing: .3px;
      text-shadow: 0 1px 3px rgba(0,0,0,.5);
    }
    #local-market-icon:active { transform: scale(0.85); }
    @keyframes lmBounce {
      0%, 100% { transform: translateY(0) scale(1); }
      25%      { transform: translateY(-5px) scale(1.08); }
      50%      { transform: translateY(0) scale(1); }
      75%      { transform: translateY(-2px) scale(1.04); }
    }
    /* pulsing glow ring behind the basket to grab attention */
    #local-market-icon svg {
      border-radius: 50%;
      animation: lmGlow 1.6s ease-in-out infinite;
    }
    @keyframes lmGlow {
      0%, 100% { filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)) drop-shadow(0 0 0px rgba(255,209,102,0)); }
      50%      { filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(255,209,102,.9)); }
    }
  


  /* ── COUPONS PAGE ── */
  #page-coupons {
    position: fixed; inset: 0;
    background: #f5f5f5;
    z-index: 600;
    display: none; flex-direction: column;
    max-width: 480px; margin: 0 auto;
    overflow-y: auto;
  }
  #page-coupons.active { display: flex; }
  .coupons-header {
    background: #0a0a0a;
    color: #fff;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 5;
  }
  .coupons-back {
    width: 36px; height: 36px;
    background: rgba(255,255,255,.12);
    border: none; border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .coupons-title-wrap { flex: 1; min-width: 0; }
  .coupons-title { font-family:'Inter',sans-serif; font-size: 17px; font-weight: 800; }
  .coupons-sub { font-size: 11px; color: #aaa; margin-top: 1px; }
  .coupons-body { flex: 1; padding: 14px 14px 30px; }

  /* Referral hero */
  .referral-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    padding: 22px 18px 20px;
    margin-bottom: 16px;
    color: #fff;
  }
  .referral-hero-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #e8001c 0%, #ff6b35 50%, #ffa500 100%);
    z-index: 0;
  }
  .referral-hero-content { position: relative; z-index: 1; text-align: center; }
  .referral-hero-icon { font-size: 32px; margin-bottom: 6px; }
  .referral-hero-title { font-family:'Inter',sans-serif; font-weight: 800; font-size: 17px; }
  .referral-hero-sub { font-size: 12px; opacity: .9; margin: 4px 16px 14px; line-height: 1.4; }
  .referral-code-box {
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    border: 1.5px dashed rgba(255,255,255,.5);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
  }
  .referral-code-label { font-size: 9px; font-weight: 700; letter-spacing: 1px; opacity: .8; }
  .referral-code { font-family:'Inter',sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 1.5px; margin-top: 3px; }
  .referral-share-btn {
    background: #fff;
    color: var(--red);
    border: none;
    padding: 11px 22px;
    border-radius: 10px;
    font-family:'Inter',sans-serif;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
  }

  .coupons-section {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid #eee;
  }
  .coupons-section-title {
    font-family:'Inter',sans-serif;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 8px;
  }
  .coupon-input-row { display: flex; gap: 8px; }
  .coupon-input-row input {
    flex: 1;
    padding: 11px 14px;
    border: 1.5px solid #e5e5e5;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    outline: none;
  }
  .coupon-input-row input:focus { border-color: var(--red); }
  .coupon-input-row button {
    padding: 11px 18px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family:'Inter',sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .coupons-tabs {
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 12px;
    border: 1px solid #eee;
  }
  .coupons-tab-btn {
    flex: 1;
    padding: 9px;
    background: transparent;
    border: none;
    border-radius: 9px;
    font-family:'Inter',sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
  }
  .coupons-tab-btn.active { background: #0a0a0a; color: #fff; }

  /* Coupon card */
  .coupon-card {
    background: #fff;
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    position: relative;
    display: flex;
  }
  .coupon-card.used      { opacity: 0.55; }
  .coupon-card.expired   { opacity: 0.55; }
  .coupon-card-left {
    width: 90px;
    background: linear-gradient(135deg, #e8001c 0%, #c40015 100%);
    color: #fff;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 14px 8px;
    position: relative;
    flex-shrink: 0;
  }
  .coupon-card.referral .coupon-card-left {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  }
  .coupon-card.used .coupon-card-left,
  .coupon-card.expired .coupon-card-left {
    background: #999;
  }
  .coupon-card-left::before, .coupon-card-left::after {
    content: ''; position: absolute; right: -8px;
    width: 16px; height: 16px;
    background: #f5f5f5;
    border-radius: 50%;
  }
  .coupon-card-left::before { top: -8px; }
  .coupon-card-left::after  { bottom: -8px; }
  .coupon-value {
    font-family:'Inter',sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
  }
  .coupon-value-sub {
    font-size: 9px;
    margin-top: 3px;
    opacity: .9;
    letter-spacing: 1px;
  }
  .coupon-card-right {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .coupon-name {
    font-family:'Inter',sans-serif;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 3px;
  }
  .coupon-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
    line-height: 1.4;
  }
  .coupon-code-row {
    display: flex; align-items: center; gap: 6px;
    background: #f8f8f8;
    border: 1px dashed #ddd;
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 11px;
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 1px;
    align-self: flex-start;
  }
  .coupon-copy-btn {
    background: transparent;
    border: none;
    color: var(--red);
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    padding: 0 0 0 4px;
  }
  .coupon-status {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    margin-top: 6px;
  }
  .coupon-status.used    { background: #e0e0e0; color: #555; }
  .coupon-status.expired { background: #ffe5e5; color: #c40015; }

  .coupons-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eee;
  }
  .coupons-empty .icon { font-size: 36px; margin-bottom: 8px; }
  .coupons-empty .msg-title { font-weight: 700; font-size: 14px; color: #333; margin-bottom: 4px; }
  .coupons-empty .msg-sub   { font-size: 12px; line-height: 1.5; }

  /* ── COUPON PICKER (checkout) ── */
  #coupon-picker-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 700;
    display: none;
  }
  #coupon-picker-overlay.active { display: block; }
  #coupon-picker-sheet {
    position: fixed;
    bottom: 0; left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%; max-width: 480px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 701;
    max-height: 80vh;
    display: flex; flex-direction: column;
    transition: transform .3s ease;
  }
  #coupon-picker-sheet.active { transform: translateX(-50%) translateY(0); }
  .coupons-handle {
    width: 40px; height: 4px;
    background: #ddd; border-radius: 2px;
    margin: 10px auto 0;
  }
  .coupon-picker-head {
    padding: 14px 16px 4px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .coupon-picker-title { font-family:'Inter',sans-serif; font-weight: 800; font-size: 16px; }
  .coupon-picker-sub { padding: 0 16px 8px; font-size: 11px; color: #888; }

  .picker-option {
    background: #fafafa;
    border: 1.5px solid #eee;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    display: flex; align-items: center; gap: 12px;
  }
  .picker-option.selected { border-color: var(--red); background: #fff8f8; }
  .picker-option .radio {
    width: 20px; height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
  }
  .picker-option.selected .radio { border-color: var(--red); }
  .picker-option.selected .radio::after {
    content: '';
    position: absolute; top: 3px; left: 3px;
    width: 10px; height: 10px;
    background: var(--red);
    border-radius: 50%;
  }
  .picker-info { flex: 1; min-width: 0; }
  .picker-info-name { font-weight: 700; font-size: 13px; }
  .picker-info-meta { font-size: 11px; color: #888; margin-top: 2px; }
  .picker-amount { font-family:'Inter',sans-serif; font-weight: 800; color: var(--red); font-size: 14px; }

  /* Coupon row in checkout */
  .checkout-coupon-row {
    padding: 12px 14px;
    background: #fff;
    border: 1.5px dashed #e5e5e5;
    border-radius: 12px;
    margin: 8px 0;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    transition: background .15s;
  }
  .checkout-coupon-row:active { background: #fafafa; }
  .checkout-coupon-row.has-discount {
    background: #fff8e1;
    border: 1.5px solid #ffd166;
    border-style: solid;
  }
  .ccr-icon {
    width: 32px; height: 32px;
    background: rgba(232,0,28,.08);
    color: var(--red);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
  }
  .checkout-coupon-row.has-discount .ccr-icon { background: #ff9800; color: #fff; }
  .ccr-text { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
  .ccr-text .ccr-sub { font-size: 11px; color: #888; font-weight: 500; margin-top: 2px; }

  /* ── SETTINGS SHEET ── */
  #settings-sheet {
    position: fixed;
    inset: 0;
    z-index: 850;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
  }
  #settings-sheet.active { display: flex; }

  .settings-card {
    background: #fff;
    width: 100%;
    max-width: 480px;
    border-radius: 20px 20px 0 0;
    padding: 16px 20px 40px;
    max-height: 88vh;
    overflow-y: auto;
    animation: sheetUp 0.35s cubic-bezier(0.34,1.2,0.64,1) both;
  }

  .settings-handle {
    width: 36px; height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 0 auto 16px;
  }

  .settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }

  .settings-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #111;
  }

  .settings-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f2f2f2;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
  }

  .settings-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 0 2px 8px;
  }

  .settings-menu {
    background: transparent;
    border-radius: 0;
    border: none;
    overflow: visible;
    padding: 4px 4px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .settings-menu-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    gap: 12px;
    cursor: pointer;
    /* Floating bubble */
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    box-shadow:
      0 10px 26px rgba(232, 0, 28, 0.08),
      0 3px 10px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: settingsBubbleFloat 4.8s ease-in-out infinite;
    transition: transform .15s ease;
  }
  .settings-menu-item:nth-child(1) { animation-delay: 0s; }
  .settings-menu-item:nth-child(2) { animation-delay: -1.2s; }
  .settings-menu-item:nth-child(3) { animation-delay: -2.4s; }
  .settings-menu-item:nth-child(4) { animation-delay: -3.6s; }
  .settings-menu-item:nth-child(5) { animation-delay: -0.6s; }
  .settings-menu-item:nth-child(6) { animation-delay: -1.8s; }
  .settings-menu-item:nth-child(7) { animation-delay: -3.0s; }
  .settings-menu-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.7); }
  .settings-menu-item:active { transform: scale(0.98); }
  @keyframes settingsBubbleFloat {
    0%, 100% {
      transform: translateY(0);
      box-shadow:
        0 10px 26px rgba(232, 0, 28, 0.08),
        0 3px 10px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    50% {
      transform: translateY(-4px);
      box-shadow:
        0 18px 36px rgba(232, 0, 28, 0.14),
        0 6px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
  }

  .settings-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }

  .settings-item-icon {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .settings-item-label {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin-bottom: 2px;
  }

  .settings-item-sub {
    font-size: 11px;
    color: #999;
  }

  .settings-item-arrow { color: #ccc; }

  /* Toggle switch */
  .settings-toggle-wrap { flex-shrink: 0; }
  .settings-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
  .settings-toggle input { opacity: 0; width: 0; height: 0; }
  .settings-toggle-slider {
    position: absolute;
    inset: 0;
    background: #ddd;
    border-radius: 24px;
    transition: .3s;
    cursor: pointer;
  }
  .settings-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
  }
  .settings-toggle input:checked + .settings-toggle-slider { background: var(--red); }
  .settings-toggle input:checked + .settings-toggle-slider::before { transform: translateX(20px); }

  /* Theme picker */
  .theme-options {
    display: flex;
    gap: 12px;
    width: 100%;
  }

  .theme-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }

  .theme-preview {
    width: 100%;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .2s;
    display: flex;
    flex-direction: column;
  }

  .theme-option.active .theme-preview { border-color: var(--red); }

  .tp-header { height: 16px; flex-shrink: 0; }
  .tp-body { flex: 1; display: flex; gap: 4px; padding: 4px; }
  .tp-card { flex: 1; border-radius: 4px; }

  .theme-preview-light { background: #f4f4f4; }
  .theme-preview-light .tp-header { background: #fff; }
  .theme-preview-light .tp-card { background: #fff; }

  .theme-preview-dark { background: #1a1a1a; }
  .theme-preview-dark .tp-header { background: #111; }
  .theme-preview-dark .tp-card { background: #2a2a2a; }

  .theme-preview-system {
    background: linear-gradient(to right, #f4f4f4 50%, #1a1a1a 50%);
  }
  .theme-preview-system .tp-header {
    background: linear-gradient(to right, #fff 50%, #111 50%);
  }
  .theme-preview-system .tp-card {
    background: linear-gradient(to right, #fff 50%, #2a2a2a 50%);
  }

  .theme-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
  }
  .theme-option.active .theme-label { color: var(--red); }

  /* ── PROFILE PAGE ── */
  #page-profile {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: #f0f0f0;
    display: none;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
  }
  #page-profile.active { display: flex; }
  .profile-header {
    background: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
  }
  .profile-back {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f2f2f2;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--dark);
    flex-shrink: 0;
  }
  .profile-title { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; color:var(--dark); flex:1; }
  .profile-save-btn {
    background: var(--red); color: #fff; border: none;
    border-radius: 8px; padding: 8px 16px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700; cursor:pointer;
  }
  .profile-save-btn:disabled { opacity:0.5; cursor:not-allowed; }
  .profile-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .profile-avatar-section {
    background:#fff; padding:24px 16px;
    display:flex; flex-direction:column; align-items:center; margin-bottom:8px;
  }
  .profile-avatar-wrap { position:relative; margin-bottom:12px; }
  .profile-avatar-circle {
    width:90px; height:90px; border-radius:50%;
    background:linear-gradient(135deg,var(--red),#c0001a);
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; font-size:36px; font-weight:800; color:#fff; overflow:hidden;
  }
  .profile-avatar-circle img { width:100%; height:100%; object-fit:cover; }
  .profile-avatar-edit {
    position:absolute; bottom:0; right:0;
    width:28px; height:28px; background:var(--dark); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:2px solid #fff;
  }
  .profile-name-display { font-family:'Inter',sans-serif; font-size:17px; font-weight:700; color:var(--dark); margin-bottom:3px; }
  .profile-email-display { font-size:12px; color:#888; }
  .profile-section { background:#fff; margin-bottom:8px; padding:14px 16px; }
  .profile-section-title {
    font-family:'Inter',sans-serif; font-size:12px; font-weight:700;
    color:#888; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px;
  }
  .profile-field { margin-bottom:12px; }
  .profile-field label {
    display:block; font-size:11px; font-weight:600; color:#555;
    text-transform:uppercase; letter-spacing:0.4px; margin-bottom:5px;
  }
  .profile-field input, .profile-field textarea {
    width:100%; padding:11px 13px; border:1.5px solid #e8e8e8;
    border-radius:10px; font-family:'Inter',sans-serif; font-size:14px;
    color:var(--dark); background:#fafafa; outline:none;
    transition:border-color .2s; box-sizing:border-box;
  }
  .profile-field input:focus, .profile-field textarea:focus { border-color:var(--red); background:#fff; }
  .profile-field textarea { height:80px; resize:none; }
  .profile-danger-btn {
    width:100%; padding:13px; background:#fff0f2; color:var(--red);
    border:1.5px solid #ffd0d8; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:700; cursor:pointer; margin-top:4px;
  }
  .profile-toast {
    position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
    background:#1a1a1a; color:#fff; padding:10px 20px; border-radius:20px;
    font-size:13px; font-weight:500; z-index:9999; opacity:0;
    transition:opacity .3s; pointer-events:none; white-space:nowrap;
  }
  .profile-toast.show { opacity:1; }

/* ── Privacy Policy page typography ── */
.pp-h {
  font-size: 14.5px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid #f0f0f0;
}
.pp-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--red, #e8001c);
  margin: 12px 0 4px;
}
.pp-p {
  font-size: 13px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 10px;
}
.pp-ul {
  margin: 6px 0 12px;
  padding-left: 20px;
}
.pp-ul li {
  font-size: 13px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 6px;
}
#privacy-agree-btn:not(:disabled) {
  background: var(--red, #e8001c) !important;
  cursor: pointer !important;
}