/* =====================================================================
   MOBILE VIEW — phone-only styles
   Everything lives under #mobile-app and only ever renders <=480px.
   Desktop CSS/HTML/JS in style.css / index.html / script.js is untouched.
   ===================================================================== */

#mobile-app{
  display:none; /* hidden by default (desktop) */
}

@media (max-width:480px){

  /* hide the desktop shell completely on phones */
  .sidebar,
  .content-wrapper{
    display:none !important;
  }

  #mobile-app{
    display:block;
    --m-orange:#ff8c00;
    --m-orange-light:#ffcb8a;
    --m-nav-bg: rgba(255,255,255,0.92);
    --m-text-dark:#1a1a1a;
    --m-text-gray:#6b6b6b;
    --m-border-gray:#d9d9d9;

    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:#fff;
    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    position:relative;
  }
  #mobile-app *{ box-sizing:border-box; }
  #mobile-app img{ max-width:none; }

  /* no scrollbars anywhere in the mobile shell — phone UI, not a desktop pane */
  #mobile-app,
  #mobile-app *{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  #mobile-app *::-webkit-scrollbar{ display:none; }

  /* ---------- shared: sticky page header (cart / notifications) ---------- */
  #mobile-app .m-page-header{
    position:sticky;
    top:0;
    z-index:30;
    background:#fff;
    padding:22px 20px 14px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  #mobile-app .m-page-title{
    font-size:22px;
    font-weight:500;
    color:var(--m-text-dark);
  }
  #mobile-app .m-page-divider{
    height:1px;
    background:#ececec;
    margin:0 20px;
    position:sticky;
    top:62px;
    z-index:29;
    box-shadow:0 4px 8px -2px rgba(0,0,0,0.06);
  }
  #mobile-app .m-menu-btn{
    background:none;
    border:none;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }

  /* ---------- HOME HEADER: brand (left) + expanding search pill (right),
     one sticky row. The pill lives inside this bar as an absolutely
     positioned element pinned to the right edge, so it can grow leftward
     without disturbing the brand row's layout. ---------- */
  #mobile-app .m-header-bar{
    position:sticky;
    top:0;
    z-index:40;
    background:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 16px 14px 16px;
  }
  #mobile-app .m-brand-row{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    overflow:hidden;
    transition:opacity .15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  #mobile-app .m-brand-row:active{
    opacity:0.6;
  }
  #mobile-app .m-brand-row img{
    width:28px;
    height:27px;
    display:block;
    flex-shrink:0;
  }
  #mobile-app .m-brand-name{
    font-family:"Outfit", -apple-system, sans-serif;
    font-size:18px;
    font-weight:600;
    color:var(--m-text-dark);
    white-space:nowrap;
  }
  #mobile-app .m-header-bar.m-search-expanded .m-brand-row{
    opacity:0;
    pointer-events:none;
  }

  /* ---------- expanding search pill (ChatGPT-style: neutral grey pill,
     circular icon buttons, grows leftward from the right edge) ---------- */
  #mobile-app .m-header-pill{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    width:76px;
    height:46px;
    background:var(--m-nav-bg);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 8px 30px rgba(0,0,0,0.10);
    border-radius:999px;
    padding:0 3px;
    overflow:hidden;
    transition:width .32s cubic-bezier(.4,0,.2,1);
  }
  #mobile-app .m-header-bar.m-search-expanded .m-header-pill{
    width:calc(100% - 36px);
  }
  #mobile-app .m-pill-search-btn,
  #mobile-app .m-header-pill .m-icon-btn,
  #mobile-app .m-search-clear-btn{
    background:none;
    border:none;
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    flex-shrink:0;
  }
  #mobile-app .m-icon-btn{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
  }
  #mobile-app .m-pill-search-btn:active,
  #mobile-app .m-header-pill .m-icon-btn:active{
    background:rgba(0,0,0,0.06);
  }
  #mobile-app .m-search-input{
    flex:0;
    width:0;
    min-width:0;
    opacity:0;
    border:none;
    outline:none;
    background:transparent;
    font-size:14px;
    font-family:inherit;
    color:var(--m-text-dark);
    padding:0;
    transition:opacity .2s ease .08s;
  }
  #mobile-app .m-header-bar.m-search-expanded .m-search-input{
    flex:1;
    width:auto;
    opacity:1;
    padding:0 2px;
  }
  #mobile-app .m-search-input::placeholder{
    color:#9a9a9a;
  }
  #mobile-app .m-search-clear-btn{
    display:none;
  }
  #mobile-app .m-header-bar.m-search-expanded .m-search-clear-btn.m-search-clear-visible{
    display:flex;
  }
  #mobile-app .m-header-bar.m-search-expanded #m-menu-btn{
    display:none;
  }

  #mobile-app .m-hero{
    margin:0;
    border-radius:0;
    overflow:hidden;
    position:relative;
    height:150px;
    background:#1c1c1c;
  }
  #mobile-app .m-product-list{
    padding:18px 8px 24px 8px;
    display:flex;
    flex-direction:column;
    gap:0;
  }
  #mobile-app .m-product-card{
    display:flex;
    flex-direction:column;
    cursor:pointer;
    padding-bottom:22px;
    margin-bottom:22px;
    border-bottom:1px solid var(--m-border-gray);
  }
  #mobile-app .m-product-card:last-child{
    padding-bottom:0;
    margin-bottom:0;
    border-bottom:none;
  }
  #mobile-app .m-product-media{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    border-radius:16px;
    overflow:hidden;
    background:#e2e2e2;
    margin-bottom:12px;
    touch-action:pan-y;
  }

  /* Skeleton placeholder cards shown only on first paint of a fresh
     feed/search/filter — reuses the same .skeleton-box shimmer as
     desktop (Style.css, already loaded globally). */
  #mobile-app .m-product-skeleton{ cursor:default; pointer-events:none; }

  /* The single shared spinner (same design as the splash screen) —
     shown briefly at the bottom of the feed while the next batch of
     products loads, Instagram-style. Sized down and inline instead of
     full-screen. */
  #mobile-app .m-feed-spinner-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 0 32px;
  }
  #mobile-app .m-feed-spinner-svg{
    width:32px;
    height:32px;
  }

  /* Invisible trigger the IntersectionObserver watches — sits right
     after the product list, no visible height of its own. */
  #mobile-app .m-feed-sentinel{
    height:1px;
    width:100%;
  }

  #mobile-app .m-carousel-track{
    display:flex;
    width:100%;
    height:100%;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-product-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
    flex-shrink:0;
  }
  #mobile-app .m-carousel-chevron{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    background:rgba(0,0,0,0.25);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    z-index:2;
  }
  #mobile-app .m-carousel-chevron:active{
    transform:translateY(-50%) scale(0.9);
  }
  #mobile-app .m-carousel-chevron.left{ left:10px; }
  #mobile-app .m-carousel-chevron.right{ right:10px; }
  #mobile-app .m-carousel-chevron svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:#ffffff;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #mobile-app .m-carousel-indicators{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:5px;
    background:rgba(0,0,0,0.15);
    padding:5px 7px;
    border-radius:10px;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:2;
  }
  #mobile-app .m-indicator-pill{
    width:6px;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,0.45);
    transition:background .3s ease, width .3s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-indicator-pill.active{
    background:#ffffff;
    width:22px;
  }
  #mobile-app .m-product-details-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
  }
  #mobile-app .m-product-info{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    flex:1;
  }
  #mobile-app .m-product-name{
    font-size:17px;
    line-height:1.25;
    color:var(--m-text-dark);
    font-weight:700;
    letter-spacing:-0.2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #mobile-app .m-product-price{
    font-size:15px;
    font-weight:400;
    color:var(--m-text-dark);
    margin-top:2px;
  }
  #mobile-app .m-product-timestamp{
    font-size:12px;
    font-weight:500;
    color:var(--m-text-gray);
    margin-top:2px;
  }
  #mobile-app .m-product-actions{
    display:flex;
    gap:14px;
    padding-bottom:3px;
    flex-shrink:0;
  }
  #mobile-app .m-action-btn{
    width:28px;
    height:28px;
    background:none;
    border:none;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .1s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-action-btn:active{
    transform:scale(0.85);
  }
  #mobile-app .m-action-btn i{
    font-size:20px;
    color:var(--m-text-dark);
    transition:color .2s ease;
  }
  #mobile-app .m-heart-btn.active i{
    font-weight:900;
    color:var(--m-orange);
  }
  /* same shared icons/cart.svg the bottom nav uses — forced to a plain
     dark tone via filter, same trick as .m-nav-icon, so it always matches
     regardless of the color baked into the source file. */
  #mobile-app .m-action-icon{
    width:22px;
    height:22px;
    display:block;
    filter:brightness(0) saturate(100%);
  }
  #mobile-app .m-empty-note{
    text-align:center;
    color:var(--m-text-gray);
    padding:60px 20px;
    font-size:14px;
  }

  /* ---------- CART ---------- */
  #mobile-app .m-cart-list{
    padding:12px 20px 130px 20px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  #mobile-app .m-cart-item{
    display:flex;
    gap:14px;
    align-items:center;
  }
  #mobile-app .m-cart-thumb-wrap{
    position:relative;
    width:110px;
    height:96px;
    border-radius:16px;
    overflow:hidden;
    background:#e2e2e2;
    flex-shrink:0;
  }
  #mobile-app .m-cart-thumb{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
  }
  #mobile-app .m-cart-pending-overlay{
    position:absolute;
    bottom:0; left:0; right:0;
    background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color:#fff;
    font-weight:600;
    font-size:12px;
    text-align:right;
    padding:8px 10px 6px;
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
  }
  #mobile-app .m-cart-thumb-wrap.m-cart-pending .m-cart-pending-overlay{
    opacity:1;
  }
  #mobile-app .m-cart-check-overlay{
    position:absolute;
    bottom:5px; right:5px;
    width:22px; height:22px;
    background:#12C143;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff;
    opacity:0;
    transform:scale(0.8);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
  }
  #mobile-app .m-cart-thumb-wrap.m-cart-accepted .m-cart-check-overlay{
    opacity:1;
    transform:scale(1);
  }
  #mobile-app .m-cart-info{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
    min-width:0;
  }
  #mobile-app .m-cart-name{
    font-size:15px;
    line-height:1.3;
    color:var(--m-text-dark);
  }
  #mobile-app .m-cart-price-row{
    display:flex;
    align-items:center;
    gap:12px;
  }
  #mobile-app .m-cart-price{
    font-size:15px;
    font-weight:700;
    color:var(--m-text-dark);
  }
  #mobile-app .m-cart-remove-btn{
    background:none;
    border:none;
    padding:0;
    font-size:13px;
    font-weight:500;
    color:#FF3B30;
    cursor:pointer;
  }
  #mobile-app .m-cart-qty{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #dcdcdc;
    border-radius:999px;
    padding:8px 14px;
    width:fit-content;
  }
  #mobile-app .m-qty-btn{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    color:var(--m-text-dark);
    width:16px;
  }
  #mobile-app .m-qty-value{
    font-size:14px;
    color:var(--m-text-dark);
    min-width:10px;
    text-align:center;
  }
  #mobile-app .m-trash-btn{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  /* ---------- CART bottom action area (total + request/checkout) ---------- */
  #mobile-app .m-cart-bottom-area{
    position:fixed;
    left:50%;
    bottom:112px;
    transform:translateX(-50%);
    width:100%;
    max-width:430px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    z-index:60;
    pointer-events:none;
  }
  #mobile-app .m-cart-bottom-area button,
  #mobile-app .m-cart-bottom-area .m-cart-total-display{
    pointer-events:auto;
  }
  #mobile-app .m-cart-total-display{
    font-size:16px;
    font-weight:500;
    color:var(--m-text-dark);
    opacity:0;
    transition:opacity .3s ease;
    display:flex;
    gap:8px;
    background:var(--m-nav-bg);
    backdrop-filter:blur(10px);
    padding:8px 18px;
    border-radius:999px;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
  }
  #mobile-app .m-cart-total-display.m-cart-total-visible{
    opacity:1;
  }
  #mobile-app .m-cart-total-display span{
    font-weight:700;
  }
  #mobile-app .m-cart-primary-btn{
    background:var(--m-orange);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:14px 32px;
    font-size:16px;
    font-weight:600;
    width:190px;
    cursor:pointer;
    transition:background .25s ease, opacity .25s ease;
  }
  #mobile-app .m-cart-primary-btn.m-cart-btn-disabled{
    background:#AFAFAF;
    pointer-events:none;
  }

  /* ---------- BOTTOM NAV ---------- */
  #mobile-app .m-bottom-nav-wrap{
    position:fixed;
    bottom:18px;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    z-index:80;
  }
  #mobile-app .m-bottom-nav{
    width:calc(100% - 16px);
    max-width:412px;
    background:var(--m-nav-bg);
    backdrop-filter:blur(10px);
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    box-shadow:0 8px 30px rgba(0,0,0,0.10);
  }
  #mobile-app .m-nav-btn{
    background:none;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
    transition:transform .18s ease;
  }
  #mobile-app .m-nav-btn.active{
    transform:scale(1.06);
  }
  /* plain <img> tags, same files desktop uses — colored via a CSS filter
     computed to force true black (inactive) or the exact brand orange
     (active), regardless of whatever color is baked into the source svg. */
  /* Sized to match .m-nav-icon exactly, mirrors desktop's .nav-icon-wrap
     pattern — gives the unread dot (.noti-dot, shared with desktop CSS)
     a positioned home on the mobile bell without shifting the icon. */
  #mobile-app .m-nav-icon-wrap{
    position:relative;
    display:inline-flex;
    width:29px;
    height:29px;
    flex-shrink:0;
  }
  #mobile-app .m-nav-btn .m-nav-icon{
    width:29px;
    height:29px;
    display:block;
    filter:brightness(0) saturate(100%);
  }
  #mobile-app .m-nav-btn.active .m-nav-icon{
    filter:invert(49%) sepia(93%) saturate(531%) hue-rotate(356deg) brightness(98%) contrast(163%);
  }
  #mobile-app .m-nav-btn i.fa-solid{
    font-size:22px;
    color:#1a1a1a;
  }
  #mobile-app .m-nav-btn.active i.fa-solid{
    color:var(--m-orange);
  }
  #mobile-app .m-nav-icon-bg{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-app .m-nav-avatar{
    width:29px;
    height:29px;
    border-radius:50%;
    background:#ccc;
    object-fit:cover;
    display:block;
    box-shadow:0 0 0 2px transparent;
    transition:box-shadow .18s ease;
  }
  #mobile-app .m-nav-btn.active .m-nav-avatar{
    box-shadow:0 0 0 2px var(--m-orange);
  }

  /* individual mobile "screens" — one visible at a time, toggled by mobile.js.
     display is set inline by JS (so the transition below can actually run),
     this class just controls the animated opacity/position state. */
  #mobile-app .m-view{
    opacity:0;
    transition:opacity .14s ease;
  }
  #mobile-app .m-view.m-view-active{
    opacity:1;
  }

  /* ---------- PRODUCT VIEW (custom mobile design, real product/seller data) ---------- */
  #mobile-app .m-product-view{
    position:fixed;
    inset:0;
    z-index:200;
    background:#fff;
    overflow-y:auto;
    width:100%;
    max-width:430px;
    margin:0 auto;
    left:0;
    right:0;
    padding-bottom:110px;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .22s ease, transform .22s ease;
    display:none;
  }
  #mobile-app .m-product-view.m-pd-shown{
    opacity:1;
    transform:translateY(0);
  }
  #mobile-app .m-pd-back-btn{
    display:none;
    position:fixed;
    top:56px;
    left:20px;
    z-index:210;
    width:38px;
    height:38px;
    padding:0;
    border-radius:50%;
    background:#fff;
    border:none;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    cursor:pointer;
  }
  #mobile-app .m-pd-back-btn.m-pd-back-visible{
    display:flex;
  }
  #mobile-app .m-pd-hero{
    position:relative;
    width:100%;
    height:280px;
    background:#1c1c1c;
    overflow:hidden;
    cursor:pointer;
    touch-action:pan-y;
  }
  #mobile-app .m-pd-hero img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  /* the tiny-dots-in-a-rounded-pill carousel indicator */
  #mobile-app .m-pd-dots{
    position:absolute;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:5px;
    background:rgba(0,0,0,0.28);
    padding:6px 10px;
    border-radius:999px;
  }
  #mobile-app .m-pd-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(255,255,255,0.55);
  }
  #mobile-app .m-pd-dot.active{
    background:#fff;
    width:6px;
    height:6px;
  }
  #mobile-app .m-pd-body{
    padding:12px 14px 0 14px;
  }
  #mobile-app .m-pd-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:8px;
  }
  #mobile-app .m-pd-title-price{
    display:flex;
    flex-direction:column;
  }
  #mobile-app .m-pd-name{
    font-size:22px;
    font-weight:700;
    color:var(--m-text-dark);
    line-height:1.2;
  }
  #mobile-app .m-pd-price{
    font-size:17px;
    font-weight:600;
    color:var(--m-text-gray);
    margin-top:4px;
  }
  #mobile-app .m-pd-condition-row{
    margin-bottom:18px;
  }
  #mobile-app .m-pd-condition-badge{
    display:inline-flex;
    align-items:center;
    border:1.5px solid #2a2a2a;
    border-radius:30px;
    padding:3px 3px 3px 14px;
    background:#fff;
  }
  #mobile-app .m-pd-condition-label{
    font-size:14px;
    font-weight:500;
    color:var(--m-text-dark);
    margin-right:12px;
  }
  #mobile-app .m-pd-condition-value{
    background:#3f4246;
    color:#fff;
    font-size:13px;
    font-weight:700;
    padding:6px 16px;
    border-radius:20px;
  }
  #mobile-app .m-pd-desc-section{
    margin-bottom:28px;
  }
  #mobile-app .m-pd-desc-title{
    font-size:15px;
    font-weight:700;
    color:var(--m-text-dark);
    margin-bottom:6px;
  }
  #mobile-app .m-pd-desc{
    font-size:13.5px;
    line-height:1.4;
    color:var(--m-text-gray);
    font-weight:500;
    white-space:pre-wrap;
  }
  #mobile-app .m-pd-order-btn{
    width:100%;
    border:2px solid #ff3000;
    border-radius:30px;
    background:#fff;
    padding:13px 0;
    font-size:17px;
    font-weight:700;
    color:#ff3000;
    cursor:pointer;
    margin-bottom:26px;
    transition:background-color .2s ease, color .2s ease;
  }
  #mobile-app .m-pd-order-btn:hover,
  #mobile-app .m-pd-order-btn:active{
    background:#ff3000;
    color:#fff;
  }
  #mobile-app .m-pd-order-btn:disabled{
    border-color:rgba(0,0,0,0.12);
    background:#ececec;
    color:#a1a1a6;
    cursor:not-allowed;
  }
  #mobile-app .m-pd-order-btn:disabled:hover,
  #mobile-app .m-pd-order-btn:disabled:active{
    background:#ececec;
    color:#a1a1a6;
  }
  #mobile-app .m-pd-owner-stats{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:26px;
  }
  #mobile-app .m-pd-owner-stat-box{
    width:100%;
    border-radius:999px;
    padding:16px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
  }
  #mobile-app .m-pd-owner-stat-box.outline{
    border:1.5px solid #1a1a1a;
    background:#fff;
  }
  #mobile-app .m-pd-owner-stat-box.filled{
    background:#4a4a4a;
  }
  #mobile-app .m-pd-owner-stat-label{
    font-size:15px;
    font-weight:500;
    color:var(--m-text-dark);
  }
  #mobile-app .m-pd-owner-stat-box.filled .m-pd-owner-stat-label{
    color:#fff;
  }
  #mobile-app .m-pd-owner-stat-value{
    font-size:22px;
    font-weight:700;
    color:var(--m-text-dark);
  }
  #mobile-app .m-pd-owner-stat-box.filled .m-pd-owner-stat-value{
    color:#fff;
  }
  #mobile-app .m-pd-seller{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    cursor:pointer;
    flex-shrink:0;
  }
  #mobile-app .m-pd-seller-avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
    background:#ccc;
  }
  #mobile-app .m-pd-seller-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
  }
  #mobile-app .m-pd-seller-name{
    font-size:13px;
    font-weight:700;
    color:var(--m-text-dark);
    max-width:110px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mobile-app .m-pd-seller-handle{
    font-size:12px;
    font-weight:500;
    color:var(--m-text-muted, #8a8a8e);
  }

  /* ---------- SELLER SHOP — same slide-in overlay pattern as
     .m-product-view (back button outside the transformed panel; see the
     note on .m-pd-back-btn above for why). Banner/avatar/stats/follow
     layout follows the same channel-page convention as YouTube/TikTok
     profile screens, built from the same m- design tokens as the rest
     of the mobile shell. ---------- */
  #mobile-app .m-shop-view{
    position:fixed;
    inset:0;
    z-index:220;
    background:#fff;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    width:100%;
    max-width:430px;
    margin:0 auto;
    left:0;
    right:0;
    padding-bottom:60px;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .22s ease, transform .22s ease;
    display:none;
  }
  #mobile-app .m-shop-view.m-shop-shown{
    opacity:1;
    transform:translateY(0);
  }
  /* Loading state while goToSellerMarketplace()'s real Supabase round
     trips (follower count, follow status, popular-order tally) are
     still in flight — a soft pulse on the header/grid areas rather than
     a blank flash of unfilled DOM. Cleared the moment the mirror runs
     with real data. */
  #mobile-app .m-shop-view.m-shop-loading .m-shop-avatar,
  #mobile-app .m-shop-view.m-shop-loading .m-shop-banner,
  #mobile-app .m-shop-view.m-shop-loading .m-shop-products-grid{
    animation:m-shop-pulse 1.1s ease-in-out infinite;
  }
  @keyframes m-shop-pulse{
    0%, 100% { opacity:1; }
    50% { opacity:.5; }
  }
  #mobile-app .m-shop-back-btn{
    display:none;
    position:fixed;
    top:56px;
    left:20px;
    z-index:230;
    width:38px;
    height:38px;
    padding:0;
    border-radius:50%;
    background:#fff;
    border:none;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    cursor:pointer;
  }
  #mobile-app .m-shop-back-btn.m-shop-back-visible{
    display:flex;
  }
  #mobile-app .m-shop-banner{
    width:100%;
    height:120px;
    background:linear-gradient(135deg, #8e8e93, #a1a1a6);
    background-size:cover;
    background-position:center;
  }
  #mobile-app .m-shop-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    padding:0 18px;
    margin-top:-40px;
  }
  #mobile-app .m-shop-avatar{
    width:80px;
    height:80px;
    border-radius:50%;
    object-fit:cover;
    background:#ccc;
    border:3px solid #fff;
  }
  #mobile-app .m-shop-actions{
    display:flex;
    align-items:center;
    gap:8px;
    padding-bottom:10px;
  }
  #mobile-app .m-shop-follow-btn{
    border:none;
    border-radius:999px;
    background:var(--m-orange);
    color:#fff;
    font-size:14px;
    font-weight:700;
    padding:9px 20px;
    cursor:pointer;
  }
  #mobile-app .m-shop-follow-btn.is-following{
    background:#e8e8e8;
    color:var(--m-text-dark);
  }
  #mobile-app .m-shop-more-wrap{
    position:relative;
  }
  #mobile-app .m-shop-more-btn{
    width:36px;
    height:36px;
    border-radius:50%;
    border:1.5px solid var(--m-border-gray);
    background:#fff;
    color:var(--m-text-dark);
    cursor:pointer;
  }
  #mobile-app .m-shop-more-menu{
    display:none;
    position:absolute;
    right:0;
    top:42px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    overflow:hidden;
    z-index:10;
    min-width:150px;
  }
  #mobile-app .m-shop-more-menu.active{
    display:block;
  }
  #mobile-app .m-shop-more-menu button{
    display:block;
    width:100%;
    text-align:left;
    padding:12px 16px;
    border:none;
    background:none;
    font-size:14px;
    color:var(--m-text-dark);
    cursor:pointer;
  }
  #mobile-app .m-shop-more-menu button:active{
    background:rgba(0,0,0,0.04);
  }
  #mobile-app .m-shop-identity{
    padding:14px 18px 0 18px;
  }
  #mobile-app .m-shop-identity h2{
    font-size:19px;
    font-weight:700;
    color:var(--m-text-dark);
    margin:0;
  }
  #mobile-app .m-shop-handle{
    font-size:14px;
    color:var(--m-text-gray);
    margin:2px 0 0 0;
  }
  #mobile-app .m-shop-stats{
    padding:10px 18px 0 18px;
    font-size:13px;
    color:var(--m-text-gray);
  }
  #mobile-app .m-shop-stats strong{
    color:var(--m-text-dark);
  }
  #mobile-app .m-shop-dot{
    margin:0 6px;
  }
  #mobile-app .m-shop-bio{
    padding:10px 18px 0 18px;
    font-size:14px;
    line-height:1.45;
    color:var(--m-text-dark);
    margin:0;
  }
  #mobile-app .m-shop-products-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:20px 18px 0 18px;
  }
  #mobile-app .m-shop-product-card{
    cursor:pointer;
  }
  #mobile-app .m-shop-product-img{
    width:100%;
    aspect-ratio:1/1;
    border-radius:14px;
    object-fit:cover;
    background:#e2e2e2;
    margin-bottom:8px;
  }
  #mobile-app .m-shop-product-price{
    font-size:14px;
    font-weight:700;
    color:var(--m-text-dark);
  }
  #mobile-app .m-shop-product-name{
    font-size:13px;
    color:var(--m-text-gray);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.dark-theme #mobile-app .m-shop-view{ background:#121212; }
  body.dark-theme #mobile-app .m-shop-back-btn{ background:#1e1e20; }
  body.dark-theme #mobile-app .m-shop-back-btn svg path{ stroke:#e8e8e8; }
  body.dark-theme #mobile-app .m-shop-avatar{ border-color:#121212; }
  body.dark-theme #mobile-app .m-shop-identity h2,
  body.dark-theme #mobile-app .m-shop-bio,
  body.dark-theme #mobile-app .m-shop-stats strong{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-shop-more-menu{ background:#1e1e1e; }
  body.dark-theme #mobile-app .m-shop-more-menu button{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-shop-follow-btn.is-following{ background:#2c2c2e; color:#f0f0f0; }
  body.dark-theme #mobile-app .m-shop-more-btn{ background:#1e1e1e; border-color:#3a3a3c; color:#f0f0f0; }

  /* ---------- ORDER SUMMARY / PAYMENT / OTP shared "sub-screen" chrome
     (fixed full-panel overlay above the cart, same structural pattern as
     .m-product-view: back button lives outside the transformed panel so
     position:fixed on it isn't broken by the panel's own transform). ---------- */
  #mobile-app .m-ord-view,
  #mobile-app .m-pay-view,
  #mobile-app .m-otp-view{
    position:fixed;
    inset:0;
    z-index:200;
    background:#FAFAFA;
    overflow-y:auto;
    width:100%;
    max-width:430px;
    margin:0 auto;
    left:0;
    right:0;
    padding:110px 0 60px 0;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .22s ease, transform .22s ease;
    display:none;
  }
  #mobile-app .m-ord-view.m-ord-shown,
  #mobile-app .m-pay-view.m-pay-shown,
  #mobile-app .m-otp-view.m-otp-shown{
    opacity:1;
    transform:translateY(0);
  }
  #mobile-app .m-ord-back-btn,
  #mobile-app .m-pay-back-btn,
  #mobile-app .m-otp-back-btn{
    display:none;
    position:fixed;
    top:56px;
    left:20px;
    z-index:210;
    width:38px;
    height:38px;
    padding:0;
    border-radius:50%;
    background:#fff;
    border:none;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    cursor:pointer;
  }
  #mobile-app .m-ord-back-btn.m-ord-back-visible,
  #mobile-app .m-pay-back-btn.m-pay-back-visible,
  #mobile-app .m-otp-back-btn.m-otp-back-visible{
    display:flex;
  }

  /* ---------- ORDER SUMMARY ---------- */
  #mobile-app .m-ord-summary-card{
    background:#fff;
    margin:0 20px;
    padding:12px;
    border-radius:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.03);
    display:flex;
    gap:16px;
    align-items:center;
  }
  #mobile-app .m-ord-summary-img{
    width:100px;
    height:75px;
    border-radius:12px;
    object-fit:cover;
    background:#e2e2e2;
    flex-shrink:0;
  }
  #mobile-app .m-ord-summary-text h3{
    margin:0 0 4px;
    font-size:16px;
    font-weight:500;
    color:var(--m-text-dark);
    line-height:1.3;
  }
  #mobile-app .m-ord-summary-text p{
    margin:0;
    font-size:16px;
    font-weight:600;
    color:var(--m-text-dark);
  }
  #mobile-app .m-ord-section-title{
    margin:30px 20px 10px;
    font-size:15px;
    font-weight:600;
    color:var(--m-text-dark);
    text-decoration:underline;
    text-underline-offset:4px;
  }
  #mobile-app .m-ord-location-header{
    margin:20px 20px 10px;
    font-size:15px;
    color:var(--m-text-dark);
    display:flex;
    align-items:center;
    gap:6px;
  }
  #mobile-app .m-ord-location-card{
    background:#fff;
    margin:0 20px;
    padding:16px;
    border-radius:16px;
    box-shadow:0 2px 10px rgba(0,0,0,0.03);
  }
  #mobile-app .m-ord-location-label{
    font-size:13px;
    color:var(--m-text-gray);
    margin-bottom:4px;
  }
  #mobile-app .m-ord-location-value{
    font-size:15px;
    font-weight:500;
    color:var(--m-text-dark);
  }
  #mobile-app .m-ord-bottom-btn-container{
    display:flex;
    justify-content:center;
    margin-top:60px;
  }
  #mobile-app .m-ord-pay-btn{
    background:var(--m-orange);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:14px 0;
    width:180px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
  }

  /* ---------- PAYMENT SELECTION ---------- */
  #mobile-app .m-pay-title{
    font-size:20px;
    font-weight:500;
    text-align:center;
    margin-bottom:24px;
    color:var(--m-text-dark);
  }
  #mobile-app .m-pay-accordion{
    padding:0 20px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  #mobile-app .m-pay-card{
    background:#fff;
    border-radius:16px;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
    overflow:hidden;
    transition:all .3s ease;
  }
  #mobile-app .m-pay-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
  }
  #mobile-app .m-pay-mpesa-text{ color:#12C143; }
  #mobile-app .m-pay-airtel-text{ color:#FF0000; }
  #mobile-app .m-pay-chevron{ transition:transform .3s ease; }
  #mobile-app .m-pay-card-content{
    max-height:0;
    opacity:0;
    transition:all .3s ease;
  }
  #mobile-app .m-pay-card.active .m-pay-card-content{
    max-height:200px;
    opacity:1;
    margin-top:20px;
  }
  #mobile-app .m-pay-card.active .m-pay-chevron{
    transform:rotate(180deg);
  }
  #mobile-app .m-pay-input-label{
    font-size:13px;
    color:var(--m-text-gray);
    margin-bottom:8px;
    font-weight:500;
  }
  #mobile-app .m-pay-phone-input{
    width:100%;
    box-sizing:border-box;
    padding:16px;
    border:1px solid #C7C7CC;
    border-radius:12px;
    font-size:16px;
    outline:none;
    margin-bottom:12px;
    font-family:inherit;
    color:var(--m-text-dark);
    background:#fff;
  }
  #mobile-app .m-pay-helper-text{
    font-size:12px;
    color:var(--m-text-dark);
    line-height:1.4;
  }
  #mobile-app .m-pay-bottom-btn-container{
    display:flex;
    justify-content:center;
    margin-top:40px;
    padding:0 20px;
  }
  #mobile-app .m-pay-confirm-btn{
    background:var(--m-orange);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:14px 0;
    width:100%;
    max-width:280px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
  }

  /* ---------- OTP VERIFY ---------- */
  #mobile-app .m-otp-success-container{
    text-align:center;
    margin-top:0;
  }
  #mobile-app .m-otp-success-title{
    font-size:18px;
    font-weight:500;
    color:var(--m-text-dark);
    margin-bottom:24px;
  }
  #mobile-app .m-otp-success-circle{
    width:120px;
    height:120px;
    border:4px solid var(--m-orange);
    border-radius:50%;
    margin:0 auto 30px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-app .m-otp-instruction-text{
    font-size:15px;
    font-weight:500;
    color:var(--m-text-dark);
    max-width:280px;
    margin:0 auto 40px;
    line-height:1.4;
  }
  #mobile-app .m-otp-container{
    display:flex;
    gap:8px;
    justify-content:center;
    margin-bottom:50px;
  }
  #mobile-app .m-otp-input{
    width:45px;
    height:50px;
    border:1.5px solid var(--m-text-dark);
    border-radius:12px;
    text-align:center;
    font-size:24px;
    font-weight:600;
    background:transparent;
    outline:none;
    color:var(--m-text-dark);
    font-family:inherit;
  }
  #mobile-app .m-otp-input:focus{
    border-color:var(--m-orange);
  }
  #mobile-app .m-otp-verify-btn{
    display:block;
    margin:0 auto;
    color:#A0A0A0;
    font-size:18px;
    font-weight:500;
    width:160px;
    padding:14px 0;
    border:2px solid transparent;
    border-radius:30px;
    background-image:linear-gradient(#FAFAFA, #FAFAFA), linear-gradient(to right, #FF3B30, #FF9500);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    cursor:pointer;
    outline:none;
    transition:color .3s ease;
  }
  #mobile-app .m-otp-verify-btn.m-otp-ready{
    color:var(--m-orange);
    font-weight:600;
  }

  /* ---------- FILTER SHEET (real category/condition/price data) ---------- */
  #mobile-app .m-menu-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.3);
    z-index:220;
    display:none;
  }
  #mobile-app .m-menu-backdrop.m-menu-open{
    display:block;
  }
  #mobile-app .m-menu-modal{
    position:fixed;
    top:56px;
    right:16px;
    width:220px;
    max-width:calc(100% - 32px);
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 30px rgba(0,0,0,0.16);
    z-index:230;
    padding:8px;
    opacity:0;
    transform:translateY(-8px) scale(0.97);
    transform-origin:top right;
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
  }
  #mobile-app .m-menu-modal.m-menu-open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  #mobile-app .m-menu-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    background:none;
    border:none;
    padding:12px 10px;
    font-size:14px;
    font-weight:500;
    color:var(--m-text-dark);
    border-radius:10px;
    cursor:pointer;
    text-align:left;
  }
  #mobile-app .m-menu-item:active{
    background:#f2f2f2;
  }
  #mobile-app .m-menu-item.m-menu-item-active{
    color:var(--m-orange);
  }
  #mobile-app .m-menu-item.m-menu-item-active .m-menu-item-icon{
    color:var(--m-orange);
  }
  #mobile-app .m-menu-item-icon{
    width:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--m-text-dark);
    font-size:14px;
  }
  #mobile-app .m-menu-item-label{
    flex:1;
  }
  #mobile-app .m-menu-cat-chevron{
    transition:transform .2s ease;
    flex-shrink:0;
  }
  #mobile-app .m-menu-cat-toggle.m-menu-cat-expanded .m-menu-cat-chevron{
    transform:rotate(180deg);
  }
  /* dropdown reveal for the category option list, directly under the
     Categories row inside the same modal panel */
  #mobile-app .m-menu-cat-dropdown{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .22s ease, opacity .18s ease;
  }
  #mobile-app .m-menu-cat-dropdown.m-menu-cat-dropdown-open{
    max-height:240px;
    opacity:1;
    overflow-y:auto;
  }
  #mobile-app .m-menu-cat-option{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    padding:10px 10px 10px 36px;
    font-size:13.5px;
    color:var(--m-text-gray);
    border-radius:8px;
    cursor:pointer;
  }
  #mobile-app .m-menu-cat-option:active{
    background:#f2f2f2;
  }
  #mobile-app .m-menu-cat-option.active{
    color:var(--m-orange);
    font-weight:600;
  }
}

/* =====================================================================
   MOBILE UPLOAD FLOW ("+" nav button)
   A phone-native multi-step flow (source -> form -> preview -> publish)
   skinned to match the rest of #mobile-app. Under the hood it drives the
   real desktop listing wizard (#listing-sheet-overlay in index.html /
   script.js) -- same Supabase inserts, same photo upload, same validation
   -- mobile.js just fills its hidden fields and reads its real result.
   ===================================================================== */
@media (max-width:480px){

  #mobile-app .m-upload-overlay{
    position:fixed;
    inset:0;
    z-index:300;
    background:transparent;
    display:none;
    width:100%;
    max-width:430px;
    margin:0 auto;
    left:0;
    right:0;
  }
  #mobile-app .m-upload-overlay.m-up-open{
    display:block;
  }

  #mobile-app .m-up-screen{
    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
    background:#fff;
    padding-bottom:24px;
  }
  #mobile-app .m-up-screen.active{ display:flex; }

  #mobile-app .m-up-nav-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    height:52px;
    padding-top:14px;
    font-size:16px;
    font-weight:600;
    color:var(--m-text-dark);
    position:relative;
    flex-shrink:0;
  }
  #mobile-app .m-up-nav-back{
    position:absolute;
    left:16px;
    top:14px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#f5f5f5;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }

  /* ---------- source picker modal (tap outside to dismiss, no X) ----------
     Apple-style sheet: backdrop fades in, sheet slides up from off-screen.
     Stays in the DOM/display:flex once opened so the transition can run;
     mobile.js toggles the .m-up-source-visible class on open/close. */
  #mobile-app #m-up-screen-source{
    justify-content:flex-end;
    background:transparent;
    padding-bottom:0;
    pointer-events:none;
  }
  #mobile-app .m-up-source-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.4);
    opacity:0;
    pointer-events:none;
    transition:opacity .32s cubic-bezier(.4,0,.2,1);
  }
  #mobile-app #m-up-screen-source.m-up-source-visible .m-up-source-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  #mobile-app .m-up-source-sheet{
    position:relative;
    background:#fff;
    border-radius:24px 24px 0 0;
    padding:14px 20px 30px 20px;
    display:flex;
    flex-direction:column;
    pointer-events:none;
    transform:translateY(100%);
    transition:transform .38s cubic-bezier(.32,.72,0,1);
  }
  #mobile-app #m-up-screen-source.m-up-source-visible .m-up-source-sheet{
    transform:translateY(0);
    pointer-events:auto;
  }
  #mobile-app .m-up-source-handle{
    width:40px;
    height:4px;
    border-radius:999px;
    background:#e2e2e4;
    margin:4px auto 18px auto;
  }
  #mobile-app .m-up-source-option{
    width:100%;
    border:none;
    background:none;
    padding:14px 4px;
    display:flex;
    align-items:center;
    gap:16px;
    font-size:16px;
    font-weight:500;
    color:var(--m-text-dark);
    font-family:inherit;
    text-align:left;
    cursor:pointer;
  }
  #mobile-app .m-up-source-icon{
    width:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:var(--m-text-dark);
    flex-shrink:0;
  }

  /* ---------- form ---------- */
  #mobile-app .m-up-form-body{
    flex:1;
    overflow-y:auto;
    padding:8px 20px 20px 20px;
    display:flex;
    flex-direction:column;
  }
  #mobile-app .m-up-photo-row{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:10px;
    margin:8px 0 20px 0;
    -webkit-overflow-scrolling:touch;
  }
  #mobile-app .m-up-photo-add{
    width:84px;
    height:84px;
    border-radius:16px;
    border:1.5px dashed rgba(0,0,0,0.25);
    background:rgba(0,0,0,0.02);
    color:#a3a3a3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:11px;
    cursor:pointer;
    flex-shrink:0;
  }
  #mobile-app .m-up-photo-add i{ font-size:20px; }
  #mobile-app .m-up-photo-thumb{
    width:84px;
    height:84px;
    border-radius:16px;
    position:relative;
    flex-shrink:0;
    overflow:hidden;
  }
  #mobile-app .m-up-photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  #mobile-app .m-up-photo-remove{
    position:absolute;
    top:4px;
    right:4px;
    width:20px;
    height:20px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,0.55);
    color:#fff;
    font-size:10px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-app .m-up-photo-crop{
    position:absolute;
    bottom:4px;
    left:4px;
    width:22px;
    height:22px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,0.55);
    color:#fff;
    font-size:10px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-app .m-up-field{ margin-bottom:14px; }
  #mobile-app .m-up-field label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--m-text-gray);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:0.3px;
  }
  #mobile-app .m-up-field input,
  #mobile-app .m-up-field select,
  #mobile-app .m-up-field textarea{
    width:100%;
    background:#f2f2f4;
    border:none;
    border-radius:12px;
    padding:13px 14px;
    font-size:15px;
    font-family:inherit;
    color:var(--m-text-dark);
    outline:none;
  }
  #mobile-app .m-up-field textarea{ resize:none; min-height:80px; line-height:1.45; }
  #mobile-app .m-up-textarea-wrap{ position:relative; }
  #mobile-app .m-up-textarea-wrap textarea{ padding-bottom:26px; overflow:hidden; }
  #mobile-app .m-up-char-count{
    position:absolute;
    right:12px;
    bottom:9px;
    font-size:11px;
    color:#9a9a9e;
    pointer-events:none;
  }
  #mobile-app .m-up-char-count.limit-near{ color:#e0392b; }
  #mobile-app .m-up-field-row{ display:flex; gap:12px; }
  #mobile-app .m-up-field-row .m-up-field{ flex:1; }
  #mobile-app .m-up-stepper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#f2f2f4;
    border-radius:12px;
    padding:10px 14px;
  }
  #mobile-app .m-up-stepper button{
    background:none;
    border:none;
    font-size:17px;
    color:var(--m-text-dark);
    cursor:pointer;
    width:20px;
  }
  #mobile-app .m-up-condition-toggle{ display:flex; gap:10px; }
  #mobile-app .m-up-condition-opt{
    flex:1;
    border:1.5px solid #dcdcdc;
    background:#fff;
    border-radius:999px;
    padding:10px;
    font-size:14px;
    font-weight:500;
    color:var(--m-text-dark);
    cursor:pointer;
  }
  #mobile-app .m-up-condition-opt.active{
    border-color:var(--m-orange);
    color:var(--m-orange);
    font-weight:600;
  }
  #mobile-app .m-up-bottom-cta{ margin-top:auto; padding-top:10px; }
  #mobile-app .m-up-primary-btn{
    width:100%;
    padding:15px;
    border:none;
    border-radius:999px;
    font-size:15px;
    font-weight:600;
    color:#fff;
    background:#d9c2a3;
    font-family:inherit;
    cursor:not-allowed;
    transition:background .2s ease;
  }
  #mobile-app .m-up-primary-btn.enabled{ background:var(--m-orange); cursor:pointer; }
  #mobile-app .m-up-text-btn{
    display:block;
    margin:14px auto 0 auto;
    background:none;
    border:none;
    color:var(--m-text-gray);
    font-size:14px;
    font-family:inherit;
    cursor:pointer;
  }

  /* ---------- preview ---------- */
  #mobile-app .m-up-preview-card{
    background:#fafafa;
    border-radius:18px;
    padding:16px;
    margin-top:8px;
  }
  #mobile-app .m-up-preview-image{
    width:100%;
    aspect-ratio:16/11;
    border-radius:14px;
    background:#e2e2e2;
    background-size:cover;
    background-position:center;
    margin-bottom:14px;
  }
  #mobile-app .m-up-preview-title{ font-size:18px; font-weight:700; color:var(--m-text-dark); margin:0 0 4px 0; }
  #mobile-app .m-up-preview-price{ font-size:16px; font-weight:700; color:var(--m-orange); margin:0 0 8px 0; }
  #mobile-app .m-up-preview-desc{ font-size:14px; color:var(--m-text-gray); line-height:1.5; margin:0; }

  /* ---------- uploading / success / error ---------- */
  #mobile-app #m-up-screen-progress{ align-items:center; justify-content:center; padding:20px; text-align:center; }
  #mobile-app .m-up-progress-wrap,
  #mobile-app .m-up-success-wrap,
  #mobile-app .m-up-error-wrap{
    display:none;
    flex-direction:column;
    align-items:center;
  }
  #mobile-app .m-up-progress-wrap.active,
  #mobile-app .m-up-success-wrap.active,
  #mobile-app .m-up-error-wrap.active{ display:flex; }

  #mobile-app .m-up-ring-wrap{ position:relative; width:150px; height:150px; margin-bottom:24px; }
  #mobile-app .m-up-ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
  #mobile-app .m-up-ring-bg{ fill:none; stroke:#f0f0f0; stroke-width:8; }
  #mobile-app .m-up-ring-fg{ fill:none; stroke:var(--m-orange); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .15s linear; }
  #mobile-app .m-up-ring-percent{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; color:var(--m-text-dark); }

  #mobile-app .m-up-item-card{
    display:flex;
    align-items:center;
    gap:12px;
    background:#f2f2f4;
    border-radius:14px;
    padding:10px 14px;
    width:100%;
    max-width:280px;
    text-align:left;
  }
  #mobile-app .m-up-item-thumb{ width:42px; height:42px; border-radius:10px; background:#dcdcdc; background-size:cover; background-position:center; flex-shrink:0; }
  #mobile-app .m-up-item-title{ font-size:14px; font-weight:600; color:var(--m-text-dark); }
  #mobile-app .m-up-item-sub{ font-size:12px; color:var(--m-text-gray); margin-top:2px; }

  #mobile-app .m-up-success-check{
    width:72px; height:72px; border-radius:50%;
    background:#34c759;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
  }
  #mobile-app .m-up-success-title{ font-size:19px; font-weight:700; color:var(--m-text-dark); margin-bottom:6px; }
  #mobile-app .m-up-success-sub{ font-size:14px; color:var(--m-text-gray); margin-bottom:6px; }
  #mobile-app .m-up-error-title{ font-size:16px; font-weight:600; color:var(--m-text-dark); margin-bottom:18px; max-width:280px; }

  /* ---------- ios-style alert (policy confirm) ---------- */
  #mobile-app .m-up-modal-overlay{
    position:absolute; inset:0; background:rgba(0,0,0,0.35);
    display:none; align-items:center; justify-content:center; z-index:320;
  }
  #mobile-app .m-up-modal-overlay.m-up-open{ display:flex; }
  #mobile-app .m-up-ios-alert{
    width:270px; background:rgba(247,247,247,0.94); backdrop-filter:blur(20px);
    border-radius:14px; overflow:hidden; text-align:center;
  }
  #mobile-app .m-up-alert-title{ font-size:16px; font-weight:600; padding:18px 16px 4px 16px; color:var(--m-text-dark); }
  #mobile-app .m-up-alert-body{ font-size:13px; color:var(--m-text-dark); padding:0 16px 16px 16px; line-height:1.4; }
  #mobile-app .m-up-alert-actions{ display:flex; border-top:0.5px solid #dcdcdc; }
  #mobile-app .m-up-alert-actions button{
    flex:1; border:none; background:none; padding:13px 8px; font-size:16px;
    color:var(--m-orange); font-family:inherit; border-right:0.5px solid #dcdcdc;
  }
  #mobile-app .m-up-alert-actions button:last-child{ border-right:none; }
  #mobile-app .m-up-alert-actions button.bold{ font-weight:600; }
}

/* =====================================================================
   MOBILE PROFILE FLOW (bottom-nav "profile" button)
   Profile / Edit profile / Orders / History / Studio / About.
   Real data — mirrors the same desktop elements/functions the rest of
   mobile.js already mirrors from (user-photo, pf-info-*, loadMyListings,
   logout-btn, studio-save-btn) instead of any hardcoded name/photo.
   ===================================================================== */
@media (max-width:480px){

  #mobile-app .m-profile-overlay{
    position:fixed;
    inset:0;
    z-index:300;
    background:#f6f6f6;
    display:none;
    width:100%;
    max-width:430px;
    margin:0 auto;
    left:0;
    right:0;
    overflow:hidden;
  }
  #mobile-app .m-profile-overlay.m-pf-open{ display:block; }

  /* On the main Profile screen only, drop below the bottom nav's stacking
     context so it stays visible for quick navigation (Home/Cart/etc).
     Sub-screens (Orders, Studio, Edit profile...) keep the full-screen
     z-index so they aren't cut off by the nav. The guest login screen
     gets its own dedicated bottom-sheet treatment instead (see
     .m-pf-login-sheet-mode below) rather than reusing this rule. */
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-on-root{
    z-index:70;
  }

  /* ---- Guest login: bottom sheet, not a full-page takeover ----
     #m-pf-screen-login keeps its normal .m-pf-screen behavior completely
     untouched (same translateX slide system every profile screen uses)
     — it's wrapped in its own .m-pf-login-sheet container, positioned
     as a sheet pinned to the bottom ~78% of the viewport, which gets
     its own independent translateY slide-up animation. This avoids the
     two transform systems (translateX page-nav vs translateY sheet)
     fighting over the same element. */
  #mobile-app .m-pf-login-scrim{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    opacity:0;
    transition:opacity .28s ease;
    pointer-events:none;
    display:none;
    z-index:1;
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode{
    background:transparent;
    pointer-events:none; /* only the scrim + sheet itself should catch clicks */
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode .m-pf-login-scrim{
    display:block;
    pointer-events:auto;
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode.m-pf-login-sheet-visible .m-pf-login-scrim{
    opacity:1;
  }
  #mobile-app .m-pf-login-sheet{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:78%;
    max-height:78%;
    background:#fff;
    border-radius:28px 28px 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,0.18);
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.32,.72,0,1);
    overflow:hidden;
    z-index:2;
    display:none;
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode .m-pf-login-sheet{
    display:block;
    pointer-events:auto;
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode.m-pf-login-sheet-visible .m-pf-login-sheet{
    transform:translateY(0);
  }
  #mobile-app .m-pf-login-sheet .m-pf-screen{
    padding-bottom:max(24px, env(safe-area-inset-bottom));
    position:relative;
    inset:auto;
    height:100%;
    transform:none !important;
    transition:none !important;
  }

  #mobile-app .m-pf-screen{
    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:20px 16px 120px 16px;
    transform:translateX(0);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  #mobile-app #m-pf-screen-profile{
    padding-bottom:130px; /* keep content clear of the fixed bottom nav */
  }
  #mobile-app .m-pf-screen.active{ display:flex; }

  /* page-to-page navigation: forward screens enter from the left / exit to
     the right, back navigation is the exact mirror of that ---------- */
  #mobile-app .m-pf-screen.m-pf-enter-left{ transform:translateX(-100%); }
  #mobile-app .m-pf-screen.m-pf-enter-right{ transform:translateX(100%); }
  #mobile-app .m-pf-screen.m-pf-exit-left{ transform:translateX(-100%); }
  #mobile-app .m-pf-screen.m-pf-exit-right{ transform:translateX(100%); }

  #mobile-app .m-pf-title{
    font-size:24px;
    font-weight:700;
    color:var(--m-text-dark);
    margin:4px 0 18px 0;
    letter-spacing:-0.3px;
  }
  #mobile-app .m-pf-back-row{ margin-bottom:14px; }
  #mobile-app .m-pf-back-circle{
    width:38px; height:38px; border-radius:50%;
    background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.05);
    border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }

  #mobile-app .m-pf-header-card{
    background:#fff;
    border-radius:20px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:14px;
    cursor:pointer;
    margin:0 0 12px 0;
  }
  #mobile-app .m-pf-header-avatar{
    width:54px; height:54px; border-radius:50%; object-fit:cover; background:#e5e5e5; flex-shrink:0;
  }
  #mobile-app .m-pf-header-name{ font-size:16px; font-weight:600; color:var(--m-text-dark); margin:0 0 2px 0; }
  #mobile-app .m-pf-header-email{ font-size:13px; color:var(--m-text-gray); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  #mobile-app .m-pf-stats-row{
    display:flex;
    background:#fff;
    border-radius:20px;
    margin:0 0 12px 0;
    overflow:hidden;
  }
  #mobile-app .m-pf-stat{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:14px 0;
    background:none;
    border:none;
    cursor:pointer;
  }
  #mobile-app .m-pf-stat:first-child{
    position:relative;
  }
  #mobile-app .m-pf-stat:first-child::after{
    content:'';
    position:absolute;
    right:0;
    top:20%;
    bottom:20%;
    width:1px;
    background:#f0f0f2;
  }
  #mobile-app .m-pf-stat-value{ font-size:17px; font-weight:700; color:var(--m-text-dark); }
  #mobile-app .m-pf-stat-label{ font-size:12px; color:var(--m-text-gray); }

  #mobile-app .m-pf-section-label{ font-size:13px; font-weight:500; color:var(--m-text-gray); margin:12px 0 8px 4px; }

  #mobile-app .m-pf-card{
    background:#fff;
    border-radius:20px;
    padding:2px 16px;
    box-shadow:0 4px 14px rgba(0,0,0,0.02);
    margin:0 0 12px 0;
  }
  #mobile-app .m-pf-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 0;
    cursor:pointer;
    position:relative;
  }
  #mobile-app .m-pf-row:not(:last-child)::after{
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:1px;
    background:#f0f0f2;
  }
  #mobile-app .m-pf-row-icon{ width:22px; display:flex; align-items:center; justify-content:center; color:var(--m-text-dark); flex-shrink:0; }
  #mobile-app .m-pf-row-icon i{ font-size:19px; }
  #mobile-app .m-pf-row-icon img{ filter:brightness(0) saturate(100%); opacity:0.88; }
  #mobile-app .m-pf-row-text{ font-size:15px; font-weight:600; color:var(--m-text-dark); flex:1; }
  #mobile-app .m-pf-row-chevron{ color:#c4c4c7; display:flex; }

  /* ---------- edit profile ---------- */
  #mobile-app .m-pf-avatar-wrap{ display:flex; flex-direction:column; align-items:center; margin:8px 0 22px 0; }
  #mobile-app .m-pf-avatar-lg{ width:92px; height:92px; border-radius:50%; object-fit:cover; background:#e5e5e5; margin-bottom:8px; }
  #mobile-app .m-pf-avatar-edit-tap{ position:relative; width:92px; height:92px; cursor:pointer; }
  #mobile-app .m-pf-avatar-edit-tap .m-pf-avatar-lg{ margin-bottom:0; }
  #mobile-app .m-pf-avatar-edit-badge{
    position:absolute;
    right:-2px;
    bottom:6px;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--m-orange, #ff8c00);
    border:2.5px solid #fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-app .m-pf-field{ margin-bottom:14px; }
  #mobile-app .m-pf-field label{ display:block; font-size:13px; font-weight:500; color:#444; margin:0 0 6px 10px; }
  #mobile-app .m-pf-pill{
    background:#ececed;
    border-radius:999px;
    padding:13px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  #mobile-app .m-pf-pill input{
    background:transparent; border:none; outline:none;
    font-size:15px; font-weight:600; color:var(--m-text-dark);
    width:100%; padding:0; font-family:inherit;
  }
  #mobile-app .m-pf-pill.readonly input{ color:#6d6d72; }
  #mobile-app .m-pf-save-btn{
    background:var(--m-orange);
    border:none;
    border-radius:999px;
    padding:14px;
    width:100%;
    color:#fff;
    font-size:15px;
    font-weight:600;
    margin-top:10px;
    cursor:pointer;
  }
  #mobile-app .m-pf-logout-btn{
    background:transparent;
    border:1.5px solid #666;
    border-radius:999px;
    padding:12px 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:15px;
    font-weight:700;
    color:var(--m-text-dark);
    width:150px;
    margin:30px auto 6px auto;
    cursor:pointer;
  }

  /* ---------- empty state ---------- */
  #mobile-app .m-pf-empty-box{
    display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:70px; color:var(--m-text-gray);
  }
  #mobile-app .m-pf-empty-box i{ font-size:44px; margin-bottom:18px; color:#c9c9cc; }
  #mobile-app .m-pf-empty-title{ font-size:16px; font-weight:500; color:var(--m-text-dark); line-height:1.4; margin-bottom:8px; }
  #mobile-app .m-pf-browse-btn{
    background:#fff; border:1px solid #eaeaea; border-radius:999px;
    padding:10px 32px; color:var(--m-orange); font-size:15px; font-weight:700;
    box-shadow:0 4px 10px rgba(0,0,0,0.02); cursor:pointer; margin-top:20px;
  }

  /* ---------- orders ---------- */
  #mobile-app .m-pf-orders-header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
  #mobile-app .m-pf-order-group-label{ font-size:13px; font-weight:600; color:var(--m-text-gray); margin:18px 0 10px 2px; text-transform:uppercase; letter-spacing:0.3px; }
  #mobile-app .m-pf-order-row{
    background:#fff;
    border-radius:16px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
    font-size:15px;
    color:var(--m-text-dark);
    font-weight:500;
  }
  #mobile-app .m-pf-order-status{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:11px; }
  #mobile-app .m-pf-order-status.delivered{ background:#e4f8ea; color:#2fa84f; }
  #mobile-app .m-pf-order-status.pending{ background:#fdeceb; color:#e0483a; }
  #mobile-app .m-pf-order-empty{ font-size:14px; color:var(--m-text-gray); padding:10px 2px 4px 2px; }

  /* ---------- studio (ported literally from provided design) ---------- */
  #mobile-app .m-pf-segment-bar{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1.5px solid #2a2a2a;
    border-radius: 30px;
    padding: 3px;
    margin-bottom: 16px;
    background-color: #ffffff;
  }
  #mobile-app .m-pf-segment-btn{
    position: relative;
    z-index: 2;
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    cursor: pointer;
    border-radius: 20px;
    transition: color 0.25s ease;
  }
  #mobile-app .m-pf-segment-btn.active{ color: #ffffff; }
  #mobile-app .m-pf-segment-indicator{
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    background-color: #333333;
    border-radius: 20px;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #mobile-app .m-pf-studio-sub{ display:none; }
  #mobile-app .m-pf-studio-sub.active{ display:block; }

  #mobile-app .m-pf-studio-banner{
    width: 100%;
    height: 125px;
    background-color: #f2f2f2;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
    cursor: pointer;
    border: none;
  }
  #mobile-app .m-pf-studio-banner svg{ margin-bottom: 6px; }
  #mobile-app .m-pf-studio-banner span{
    font-size: 16px;
    font-weight: 700;
    color: #555555;
  }

  #mobile-app .m-pf-pill{
    background-color: #f2f2f2;
    border-radius: 24px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
  }
  #mobile-app .m-pf-pill input{
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    width: 100%;
    padding: 0;
    font-family: inherit;
  }
  #mobile-app .m-pf-pill-icon{ margin-right: 8px; display: flex; align-items: center; }

  #mobile-app .m-pf-field{ margin-bottom: 12px; }
  #mobile-app .m-pf-field label{
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 6px;
  }

  #mobile-app .m-pf-bio-box{
    background-color: #f2f2f2;
    border-radius: 18px;
    padding: 16px;
    min-height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #mobile-app .m-pf-bio-box span{
    font-size: 15px;
    font-weight: 500;
    color: #666666;
  }
  #mobile-app .m-pf-bio-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #mobile-app .m-pf-bio-charcount{
    font-size: 12px;
    font-weight: 600;
    color: #444444;
  }

  #mobile-app .m-pf-save-btn-outline{
    width: 100%;
    padding: 12px 0;
    border: 2px solid #ff3000;
    background-color: #ffffff;
    color: #ff3000;
    font-size: 17px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  #mobile-app .m-pf-save-btn-outline:hover{
    background-color: #ff3000;
    color: #ffffff;
  }

  #mobile-app .m-pf-studio-product-row{
    display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px;
    padding:10px; margin-bottom:12px;
  }
  #mobile-app .m-pf-studio-thumb{ width:56px; height:56px; border-radius:12px; object-fit:cover; background:#e5e5e5; flex-shrink:0; }
  #mobile-app .m-pf-studio-info{ flex:1; min-width:0; }
  #mobile-app .m-pf-studio-name{ font-size:14px; font-weight:600; color:var(--m-text-dark); }
  #mobile-app .m-pf-studio-sub-text{ font-size:12px; color:var(--m-text-gray); margin-top:2px; }
  #mobile-app .m-pf-studio-stats-row{
    display:flex; align-items:center; gap:12px; margin-top:6px; flex-wrap:wrap;
  }
  #mobile-app .m-pf-studio-stat{
    display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
    color:var(--m-text-gray);
  }
  #mobile-app .m-pf-studio-stat i{ font-size:11px; color:#a0a0a5; }
  #mobile-app .m-pf-studio-delete-btn{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:#fdeeee; border:none; display:flex; align-items:center; justify-content:center;
    color:#e0453c; font-size:14px; cursor:pointer;
  }
  #mobile-app .m-pf-studio-delete-btn:active{ background:#f9d9d8; }
  #mobile-app .m-pf-na-card{
    background:#fff; border-radius:20px; padding:32px 24px; text-align:center; margin-top:30px;
  }
  #mobile-app .m-pf-na-title{ font-size:15px; font-weight:700; color:var(--m-text-dark); margin:10px 0 6px 0; }
  #mobile-app .m-pf-na-desc{ font-size:13px; color:#444; line-height:1.4; }

  /* ---------- studio orders ---------- */
  #mobile-app .m-pf-studio-orders-subtabs{
    display:flex; gap:8px; margin-bottom:14px; overflow-x:auto;
  }
  #mobile-app .m-pf-studio-orders-subtab{
    background:#f0f0f2; border:none; font-family:inherit; font-size:13px; font-weight:600;
    color:var(--m-text-gray); padding:7px 14px; border-radius:999px; cursor:pointer; flex-shrink:0;
  }
  #mobile-app .m-pf-studio-orders-subtab.active{ background:#ff3000; color:#fff; }
  #mobile-app .m-pf-studio-order-row{
    display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px;
    padding:10px; margin-bottom:12px; flex-wrap:wrap;
  }
  #mobile-app .m-pf-studio-order-buyer{
    display:flex; align-items:center; gap:6px;
  }
  #mobile-app .m-pf-studio-order-buyer img{
    width:18px; height:18px; border-radius:50%; object-fit:cover; flex-shrink:0;
  }
  #mobile-app .m-pf-studio-order-actions{
    display:flex; gap:8px; width:100%; margin-top:8px; padding-left:68px;
  }
  #mobile-app .m-pf-studio-order-approve-btn,
  #mobile-app .m-pf-studio-order-decline-btn{
    font-family:inherit; font-size:12.5px; font-weight:600; padding:7px 12px;
    border-radius:10px; border:none; cursor:pointer;
  }
  #mobile-app .m-pf-studio-order-approve-btn{ background:#ff3000; color:#fff; }
  #mobile-app .m-pf-studio-order-decline-btn{ background:#f0f0f2; color:var(--m-text-dark); }
  #mobile-app .m-pf-order-status-approved,
  #mobile-app .m-pf-order-status-declined{
    font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; margin-left:auto;
  }
  #mobile-app .m-pf-order-status-approved{ background:rgba(52,199,89,0.14); color:#248a3d; }
  #mobile-app .m-pf-order-status-declined{ background:rgba(255,59,48,0.12); color:#d70015; }

  /* ---------- about ---------- */
  #mobile-app .m-pf-toggle-bar{ background:#fff; border:1px solid #eaeaea; border-radius:999px; display:inline-flex; padding:4px; margin-bottom:24px; }
  #mobile-app .m-pf-toggle-item{ padding:8px 22px; border-radius:999px; font-size:14px; font-weight:600; color:#666; cursor:pointer; }
  #mobile-app .m-pf-toggle-item.active{ background:#999; color:#fff; }
  #mobile-app .m-pf-about-title{ font-size:15px; font-weight:600; color:var(--m-text-dark); margin-bottom:12px; }
  #mobile-app .m-pf-about-p{ font-size:13px; color:var(--m-text-dark); line-height:1.55; margin:0 0 16px 0; }
  #mobile-app .m-pf-help-row{
    background:#fff; border:1px solid #eaeaea; border-radius:16px; padding:15px 16px;
    display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:500;
    color:var(--m-text-dark); margin-top:40px; cursor:pointer;
  }
  #mobile-app .m-pf-copyright{ text-align:center; font-size:11px; color:#666; margin-top:40px; }

  /* ---------- preferences ---------- */
  #mobile-app .m-pf-row.m-pf-currency-trigger::after{ content:none; }
  #mobile-app .m-pf-currency-code{ font-size:14px; font-weight:500; color:var(--m-text-gray); }

  #mobile-app .m-pf-theme-row{ align-items:center; }
  #mobile-app .m-pf-theme-seg{
    display:flex; align-items:center;
    background:#ececed; border-radius:999px; padding:3px; gap:2px;
  }
  #mobile-app .m-pf-theme-opt{
    display:flex; align-items:center; justify-content:center;
    padding:7px 9px; border-radius:999px; border:none; background:transparent;
    cursor:pointer; gap:6px;
    transition:background .35s cubic-bezier(.16,1,.3,1), padding .35s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-pf-theme-opt.active{ background:var(--m-orange); padding:7px 14px; }
  #mobile-app .m-pf-theme-icon{
    width:16px; height:16px; flex-shrink:0;
    filter:brightness(0) saturate(100%); opacity:0.7;
    transition:filter .35s ease, opacity .35s ease;
  }
  #mobile-app .m-pf-theme-opt.active .m-pf-theme-icon{
    filter:brightness(0) saturate(100%) invert(1); opacity:1;
  }
  #mobile-app .m-pf-theme-badge{
    width:16px; height:16px; border-radius:50%; border:1.5px solid var(--m-text-dark);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; color:var(--m-text-dark); flex-shrink:0;
    transition:border-color .35s ease, color .35s ease;
  }
  #mobile-app .m-pf-theme-opt.active .m-pf-theme-badge{ border-color:#fff; color:#fff; }
  #mobile-app .m-pf-theme-label{
    max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
    font-size:13px; font-weight:600; color:#fff;
    transition:max-width .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  }
  #mobile-app .m-pf-theme-opt.active .m-pf-theme-label{ max-width:40px; opacity:1; }

  #mobile-app .m-pf-switch{
    position:relative; width:50px; height:28px; border-radius:14px;
    background:#d1d1d6; border:none; padding:0; cursor:pointer; flex-shrink:0;
    transition:background-color .3s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-pf-switch.active{ background:var(--m-orange); }
  #mobile-app .m-pf-switch-thumb{
    position:absolute; top:3px; left:3px; width:26px; height:22px; border-radius:11px;
    background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.15);
    transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-pf-switch.active .m-pf-switch-thumb{ transform:translateX(18px); }

  #mobile-app .m-pf-currency-trigger{ cursor:pointer; }
  #mobile-app .m-pf-currency-chevron{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
  #mobile-app .m-pf-currency-chevron.open{ transform:rotate(90deg); }
  #mobile-app .m-pf-currency-list{
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, margin-top .3s ease;
    margin-top:0;
  }
  #mobile-app .m-pf-currency-list.open{
    max-height:400px; opacity:1; margin-top:6px;
    border-top:0.5px solid #f0f0f2; padding-top:6px;
  }
  #mobile-app .m-pf-currency-option{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 4px; cursor:pointer; border-radius:8px;
  }
  #mobile-app .m-pf-currency-option:active{ background:#f6f6f6; }
  #mobile-app .m-pf-currency-option-code{ font-size:14px; font-weight:700; color:var(--m-text-dark); }
  #mobile-app .m-pf-currency-option-name{ font-size:13px; color:var(--m-text-gray); }
  #mobile-app .m-pf-currency-check{ width:16px; height:16px; opacity:0; transition:opacity .2s ease; flex-shrink:0; }
  #mobile-app .m-pf-currency-option.active .m-pf-currency-check{ opacity:1; }
}

/* =====================================================================
   MOBILE DARK THEME
   Driven by the same body.dark-theme class the desktop theme control
   already applies (localStorage "themeMode": light / dark / auto — see
   the theme-opt proxy buttons in mobile.js). Redefining the shared
   --m-text-dark / --m-text-gray / --m-border-gray / --m-nav-bg variables
   here re-colors every component that already reads them; everything
   else below covers the colors that were hardcoded instead of using
   those variables.
   ===================================================================== */
@media (max-width:480px){

  body.dark-theme #mobile-app{
    --m-text-dark:#f0f0f0;
    --m-text-gray:#9a9a9e;
    --m-border-gray:#3a3a3c;
    --m-nav-bg: rgba(30,30,32,0.85);
    background:#121212;
  }

  /* headers / search */
  body.dark-theme #mobile-app .m-page-header,
  body.dark-theme #mobile-app .m-header-bar{ background:#121212; }

  /* header pill icons are inline svgs with a hardcoded dark stroke —
     override it here so search/clear/filter/menu turn light in dark mode */
  body.dark-theme #mobile-app .m-header-pill svg circle,
  body.dark-theme #mobile-app .m-header-pill svg line,
  body.dark-theme #mobile-app .m-header-pill svg path{
    stroke:#e8e8e8;
  }
  body.dark-theme #mobile-app .m-page-divider{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-search-input::placeholder{ color:#8a8a8e; }

  /* home / product cards */
  body.dark-theme #mobile-app .m-product-media,
  body.dark-theme #mobile-app .m-cart-thumb,
  body.dark-theme #mobile-app .m-up-preview-image{ background:#2a2a2c; }

  /* cart */
  body.dark-theme #mobile-app .m-cart-qty{ border-color:#3a3a3c; }

  /* bottom nav */
  body.dark-theme #mobile-app .m-nav-btn i.fa-solid{ color:#e8e8e8; }
  body.dark-theme #mobile-app .m-nav-btn .m-nav-icon{
    filter:brightness(0) saturate(100%) invert(1);
  }

  /* feed card actions */
  body.dark-theme #mobile-app .m-action-btn i{ color:#e8e8e8; }
  body.dark-theme #mobile-app .m-heart-btn.active i{ color:var(--m-orange); }
  body.dark-theme #mobile-app .m-action-icon{
    filter:brightness(0) saturate(100%) invert(1);
  }

  body.dark-theme #mobile-app .m-nav-btn.active .m-nav-icon{
    filter:invert(49%) sepia(93%) saturate(531%) hue-rotate(356deg) brightness(98%) contrast(163%);
  }
  body.dark-theme #mobile-app .m-nav-avatar{ background:#3a3a3c; }

  /* product detail view */
  body.dark-theme #mobile-app .m-product-view{ background:#121212; }
  body.dark-theme #mobile-app .m-pd-back-btn{ background:#1e1e20; }
  body.dark-theme #mobile-app .m-pd-back-btn svg path{ stroke:#e8e8e8; }
  body.dark-theme #mobile-app .m-pd-order-btn{
    background:#1e1e20;
  }
  body.dark-theme #mobile-app .m-pd-order-btn:disabled{
    background:#3a3a3c;
    border-color:#48484a;
    color:#6e6e73;
  }
  body.dark-theme #mobile-app .m-pd-condition-badge{
    background:#1e1e20; border-color:#4a4a4d;
  }
  body.dark-theme #mobile-app .m-pd-condition-label{ color:#e8e8e8; }
  body.dark-theme #mobile-app .m-pd-owner-stat-box.outline{
    background:#1e1e20; border-color:#4a4a4d;
  }

  /* order summary / payment / otp screens */
  body.dark-theme #mobile-app .m-ord-view,
  body.dark-theme #mobile-app .m-pay-view,
  body.dark-theme #mobile-app .m-otp-view{ background:#121212; }
  body.dark-theme #mobile-app .m-ord-back-btn,
  body.dark-theme #mobile-app .m-pay-back-btn,
  body.dark-theme #mobile-app .m-otp-back-btn{ background:#1e1e20; }
  body.dark-theme #mobile-app .m-ord-back-btn svg path,
  body.dark-theme #mobile-app .m-pay-back-btn svg path,
  body.dark-theme #mobile-app .m-otp-back-btn svg path{ stroke:#e8e8e8; }
  body.dark-theme #mobile-app .m-ord-summary-card,
  body.dark-theme #mobile-app .m-ord-location-card,
  body.dark-theme #mobile-app .m-pay-card{ background:#1e1e20; box-shadow:none; }
  body.dark-theme #mobile-app .m-ord-location-header svg{ stroke:#e8e8e8; }
  body.dark-theme #mobile-app .m-pay-card-header{ color:#e8e8e8; }
  body.dark-theme #mobile-app .m-pay-chevron{ stroke:#e8e8e8; }
  body.dark-theme #mobile-app .m-pay-phone-input{ background:#2a2a2c; border-color:#3a3a3c; color:#f0f0f0; }
  body.dark-theme #mobile-app .m-cart-total-display{ background:rgba(30,30,32,0.85); }
  body.dark-theme #mobile-app .m-otp-input{ border-color:#e8e8e8; color:#f0f0f0; }
  body.dark-theme #mobile-app .m-otp-verify-btn{
    background-image:linear-gradient(#121212, #121212), linear-gradient(to right, #FF3B30, #FF9500);
  }

  /* hamburger menu modal */
  body.dark-theme #mobile-app .m-menu-modal{ background:#1c1c1e; box-shadow:0 8px 30px rgba(0,0,0,0.5); }
  body.dark-theme #mobile-app .m-menu-item{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-menu-item:active{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-menu-item-icon{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-menu-cat-chevron path{ stroke:#f0f0f0; }
  body.dark-theme #mobile-app .m-menu-cat-option{ color:#a0a0a0; }
  body.dark-theme #mobile-app .m-menu-cat-option:active{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-menu-cat-option.active{ color:var(--m-orange); }

  /* upload flow */
  body.dark-theme #mobile-app .m-up-screen{ background:#121212; }
  body.dark-theme #mobile-app .m-up-nav-back{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-up-source-sheet{ background:#1c1c1e; }
  body.dark-theme #mobile-app .m-up-source-handle{ background:#3a3a3c; }
  body.dark-theme #mobile-app .m-up-photo-add{ border-color:rgba(255,255,255,0.25); color:#8a8a8e; background:rgba(255,255,255,0.03); }
  body.dark-theme #mobile-app .m-up-field input,
  body.dark-theme #mobile-app .m-up-field select,
  body.dark-theme #mobile-app .m-up-field textarea,
  body.dark-theme #mobile-app .m-up-stepper,
  body.dark-theme #mobile-app .m-up-item-card{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-up-item-thumb{ background:#3a3a3c; }
  body.dark-theme #mobile-app .m-up-condition-opt{
    background:#1e1e20; border-color:#3a3a3c;
  }
  body.dark-theme #mobile-app .m-up-primary-btn{ background:#4a3f30; }
  body.dark-theme #mobile-app .m-up-preview-card{ background:#1c1c1e; }
  body.dark-theme #mobile-app .m-up-ring-bg{ stroke:#2a2a2c; }
  body.dark-theme #mobile-app .m-up-ios-alert{ background:rgba(40,40,42,0.94); }
  body.dark-theme #mobile-app .m-up-alert-actions,
  body.dark-theme #mobile-app .m-up-alert-actions button{ border-color:#48484a; }

  /* profile flow */
  body.dark-theme #mobile-app .m-profile-overlay{ background:#121212; }
  body.dark-theme #mobile-app .m-pf-back-circle,
  body.dark-theme #mobile-app .m-pf-header-card,
  body.dark-theme #mobile-app .m-pf-card,
  body.dark-theme #mobile-app .m-pf-stats-row,
  body.dark-theme #mobile-app .m-pf-browse-btn,
  body.dark-theme #mobile-app .m-pf-order-row,
  body.dark-theme #mobile-app .m-pf-segment-btn,
  body.dark-theme #mobile-app .m-pf-studio-product-row,
  body.dark-theme #mobile-app .m-pf-na-card,
  body.dark-theme #mobile-app .m-pf-toggle-bar,
  body.dark-theme #mobile-app .m-pf-help-row{
    background:#1e1e20;
  }
  body.dark-theme #mobile-app .m-pf-browse-btn,
  body.dark-theme #mobile-app .m-pf-toggle-bar,
  body.dark-theme #mobile-app .m-pf-help-row{
    border-color:#333;
  }
  body.dark-theme #mobile-app .m-pf-segment-bar{ background:#1e1e20; border-color:#48484a; }
  body.dark-theme #mobile-app .m-pf-segment-indicator{ background:#48484a; }
  body.dark-theme #mobile-app .m-pf-studio-banner{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-pf-studio-banner span{ color:#9a9a9e; }
  body.dark-theme #mobile-app .m-pf-studio-banner svg{ stroke:#9a9a9e; }
  body.dark-theme #mobile-app .m-pf-row:not(:last-child)::after{ background:#2e2e30; }
  body.dark-theme #mobile-app .m-pf-row-chevron{ color:#6e6e72; }
  body.dark-theme #mobile-app .m-pf-row-icon img{ filter:brightness(0) saturate(100%) invert(1); opacity:0.8; }
  body.dark-theme #mobile-app .m-pf-field label{ color:#9a9a9e; }
  body.dark-theme #mobile-app .m-pf-pill,
  body.dark-theme #mobile-app .m-pf-bio-box,
  body.dark-theme #mobile-app .m-pf-theme-seg{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-pf-pill.readonly input{ color:#9a9a9e; }
  body.dark-theme #mobile-app .m-pf-avatar-lg,
  body.dark-theme #mobile-app .m-pf-studio-thumb{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-pf-studio-delete-btn{ background:#3a1e1d; color:#ff6b61; }
  body.dark-theme #mobile-app .m-pf-studio-delete-btn:active{ background:#4a2624; }
  body.dark-theme #mobile-app .m-pf-empty-box i{ color:#48484a; }
  body.dark-theme #mobile-app .m-pf-na-desc{ color:#a8a8ac; }
  body.dark-theme #mobile-app .m-pf-na-card{ color:var(--m-text-gray); }
  body.dark-theme #mobile-app .m-pf-toggle-item{ color:#9a9a9e; }
  body.dark-theme #mobile-app .m-pf-toggle-item.active{ background:#5a5a5d; }
  body.dark-theme #mobile-app .m-pf-copyright{ color:#8a8a8e; }
  body.dark-theme #mobile-app .m-pf-help-row svg path,
  body.dark-theme #mobile-app .m-pf-help-row svg polyline,
  body.dark-theme #mobile-app .m-pf-help-row svg line{ stroke:#aaaaae; }
  body.dark-theme #mobile-app .m-pf-order-status.delivered{ background:rgba(47,168,79,0.18); color:#57cf78; }
  body.dark-theme #mobile-app .m-pf-order-status.pending{ background:rgba(224,72,58,0.18); color:#ff7a6b; }

  /* preferences */
  body.dark-theme #mobile-app .m-pf-theme-icon{ filter:brightness(0) saturate(100%) invert(1); opacity:0.7; }
  body.dark-theme #mobile-app .m-pf-theme-opt.active .m-pf-theme-icon{ filter:brightness(0) saturate(100%) invert(1); opacity:1; }
  body.dark-theme #mobile-app .m-pf-theme-badge{ border-color:#e8e8e8; color:#e8e8e8; }
  body.dark-theme #mobile-app .m-pf-switch{ background:#48484a; }
  body.dark-theme #mobile-app .m-pf-currency-option:active{ background:#2a2a2c; }

  /* Reused desktop login/signup card (relocated into the profile
     overlay — see Mobile.js). style.css sizes it for a centered
     desktop page (60px card padding, 400px max-width, flex context
     assumptions); restyled here to match this app's own mobile
     language instead — full-width, m-pf-title-style heading, no
     leftover desktop centering/padding. */
  #mobile-app .m-pf-screen #guest-wrapper,
  #mobile-app .m-pf-screen .auth-card{
    display:block;
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
  }
  #mobile-app .m-pf-screen .auth-card-header{
    text-align:left;
    margin-bottom:22px;
  }
  #mobile-app .m-pf-screen .auth-title{
    font-size:24px;
    font-weight:700;
    letter-spacing:-0.3px;
    margin:4px 0 0 0;
  }
  #mobile-app .m-pf-screen .auth-subtitle{
    font-size:14px;
    font-weight:400;
    color:var(--m-text-gray);
    margin:6px 0 0 0;
  }
  #mobile-app .m-pf-screen .auth-form-container{
    display:block;
    width:100%;
    max-width:100%;
  }
  #mobile-app .m-pf-screen .input-group input{
    font-size:16px; /* >=16px keeps iOS Safari from auto-zooming on focus */
    border-radius:14px;
  }
  #mobile-app .m-pf-screen .main-login-btn{
    border-radius:14px;
    height:52px;
  }
  #mobile-app .m-pf-screen .auth-divider{
    margin:20px 0;
  }
  #mobile-app .m-pf-screen .auth-social-row{
    display:flex;
    width:100%;
  }
  #mobile-app .m-pf-screen .auth-social-row .social-btn{
    flex:1 1 auto;
    width:100%;
    border-radius:14px;
    height:52px !important;
  }
  #mobile-app .m-pf-screen .auth-footer-row,
  #mobile-app .m-pf-screen .auth-switch-row{
    margin-top:18px;
    font-size:13px;
  }
  /* signup card's terms/switch links wrap awkwardly at desktop line
     length; let them wrap naturally at mobile width */
  #mobile-app .m-pf-screen .auth-footer-row p{
    line-height:1.5;
  }

  /* ---------- change password modal (shared #reset-password-modal, used
     from both desktop and mobile — see m-pf-change-password-row in
     Mobile.js). Desktop sizes it as a centered card with generous
     padding; here it's restyled as a compact bottom sheet matching
     this app's other mobile modals/cards instead. Scoped to the same
     max-width:480px query as the rest of this mobile layout, so
     desktop (a different media context) is unaffected. ---------- */
  #reset-password-modal.modal-overlay{
    align-items:flex-end;
  }
  #reset-password-modal .feedback-content{
    width:100%;
    max-width:100%;
    border-radius:24px 24px 0 0;
    padding:24px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 30px rgba(0,0,0,0.12);
  }
  #reset-password-modal .feedback-header h1{
    font-size:20px;
    font-weight:700;
    letter-spacing:-0.3px;
  }
  #reset-password-modal .feedback-header p{
    font-size:13px;
  }
  #reset-password-modal .input-group input{
    font-size:16px; /* keeps iOS Safari from auto-zooming on focus */
    border-radius:14px;
  }
  #reset-password-modal .main-login-btn{
    border-radius:14px;
    height:52px;
  }
}

/* ================================
   OFFLINE BANNER (mobile tweaks)
   ================================ */
@media (max-width: 480px) {
  #offline-banner{
    padding-top: max(10px, env(safe-area-inset-top));
    font-size: 13px;
  }

  #mobile-app .m-pf-bio-box textarea{
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
    color: #666666;
    font-family: inherit;
    padding: 0;
  }

  #mobile-app .m-pf-handle-status{
    display: block;
    min-height: 16px;
    font-size: 12px;
    margin-top: 6px;
    margin-left: 10px;
  }
  #mobile-app .m-pf-handle-status.checking{ color: #8e8e93; }
  #mobile-app .m-pf-handle-status.available{ color: #1fa34d; }
  #mobile-app .m-pf-handle-status.taken,
  #mobile-app .m-pf-handle-status.invalid{ color: #e0392b; }

  body.dark-theme #mobile-app .m-pf-bio-box textarea{ color: #9a9a9e; }
}

@media (max-width: 480px) {
  /* Mirrored desktop cart-empty-state has height:100% which collapses
     without an explicit parent height on mobile — give it real breathing
     room so it reads as a proper empty-state screen, same as notifications. */
  #mobile-app .m-cart-list .cart-empty-state{
    height: auto;
    padding: 70px 20px;
  }
}