/*
 * Paradise Market — Mobile Styles
 * Completely separate from paradise.css — desktop is NEVER affected.
 * All rules are either:
 *   a) inside @media queries (only fires on mobile), OR
 *   b) hiding NEW elements (.pe-mob-*) that don't exist in the desktop layout
 */

/* ── Hide mobile-only elements on desktop ─────────────────────────────────── */
.pe-mob-brand  { display: none; }
.pe-mob-nav    { display: none; }
.pe-mob-search { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   TABLET / MOBILE  ≤ 880px
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {

  /* ── App shell ─────────────────────────────────────────────────────────── */
  .pe-app     { grid-template-columns: 1fr !important; }
  .pe-sidebar { display: none !important; }
  .pe-content { padding: 14px 14px 84px !important; }

  /* ── Topbar ────────────────────────────────────────────────────────────── */
  .pe-topbar  { padding: 0 12px !important; gap: 8px !important;
                height: 54px !important; min-height: 54px !important; }
  .pe-search  { display: none !important; }

  /* Mobile brand replaces sidebar logo */
  .pe-mob-brand {
    display: flex !important;
    align-items: center; gap: 8px;
    font-size: 13px; font-weight: 800;
    color: #fff; letter-spacing: .04em;
    text-decoration: none; flex-shrink: 0;
  }
  .pe-mob-brand img { width: 28px; height: 28px; border-radius: 50%; }

  /* Compress coin pill */
  .pe-coin-pill { padding: 6px 10px 6px 6px !important; font-size: 12px !important; gap: 6px !important; }
  .pe-coin-pill .coin { width: 20px !important; height: 20px !important; font-size: 10px !important; }

  /* Push topbar items to the right (search is gone, brand is on the left) */
  .pe-topbar-cta { margin-left: auto !important; }

  /* ── Toast — lift above bottom nav ────────────────────────────────────── */
  .pe-toast {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
  }

  /* ── Bottom nav ────────────────────────────────────────────────────────── */
  .pe-mob-nav {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000;
    background: var(--pe-bg-2);
    border-top: 1px solid var(--pe-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .pe-mob-nav a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 10px;
    color: var(--pe-mute); font-size: 9px; font-weight: 700;
    text-decoration: none; letter-spacing: .04em; text-transform: uppercase;
    border-top: 2px solid transparent;
    transition: color .15s, border-color .15s;
    min-width: 0;
  }
  .pe-mob-nav a svg { width: 20px; height: 20px; flex-shrink: 0; }
  .pe-mob-nav a.active { color: var(--pe-gold); border-top-color: var(--pe-gold); }
  .pe-mob-nav a.active svg { stroke: var(--pe-gold); }

  /* ── Grid class helpers ────────────────────────────────────────────────── */
  .pe-grid-3, .pe-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .pe-hero { padding: 24px !important; }
  .pe-hero h1 { font-size: 28px !important; }
  .pe-chat { grid-template-columns: 1fr !important; height: auto !important; }
  .pe-chat-list { display: none !important; }

  /* ── Marketplace hero ──────────────────────────────────────────────────── */
  .pe-mkt-hero-pro                { min-height: auto !important; }
  .pe-mkt-hero-pro .pe-hero-inner { padding: 32px 22px !important; }
  .pe-mkt-hero-pro h1             { font-size: 46px !important; }
  .pe-hero-stats-pro              { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Inline-style grid overrides ────────────────────────────────────────
     Handles the most common patterns used in templates.
     These ONLY fire at ≤880px so desktop is never touched.               */

  /* Main content + sidebar layouts */
  [style*="grid-template-columns:1fr 260px"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 280px"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 290px"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 300px"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 320px"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 340px"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:280px 1fr"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.5fr 1fr"]   { grid-template-columns: 1fr !important; }

  /* Chat room 3-column layout — stack panels vertically */
  [style*="grid-template-columns:260px 1fr 220px"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Stat/card grids — collapse to 2 columns */
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Written-out fractions (1fr 1fr 1fr 1fr style, not repeat()) */
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Wallet table — make scrollable ───────────────────────────────────── */
  .pe-card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SMALL MOBILE  ≤ 560px
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {

  .pe-content { padding: 12px 12px 84px !important; }
  .pe-topbar  { gap: 6px !important; }

  /* Post Ad button — shrink text */
  .pe-topbar-cta { font-size: 11px !important; padding: 7px 10px !important; gap: 4px !important; }

  /* Stack all 2-col grids */
  .pe-grid-2, .pe-grid-3, .pe-grid-4 { grid-template-columns: 1fr !important; }

  /* Inline-style overrides */
  [style*="grid-template-columns:repeat(2,1fr)"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3,1fr)"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"]   { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(5,1fr)"]   { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:1fr 1fr"]          { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr 1fr"]      { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"]  { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:110px 1fr auto"]   { grid-template-columns: 1fr !important; }

  /* Hero sections */
  .pe-mkt-hero-pro h1             { font-size: 34px !important; }
  .pe-mkt-hero-pro .pe-hero-inner { padding: 24px 16px !important; }
  .pe-mkt-hero-pro::before        { opacity: .3 !important; }
  .pe-cat-mega                    { grid-template-columns: 1fr 1fr !important; }
  .pe-hero-stats-pro              { grid-template-columns: 1fr 1fr !important; }
  .pe-feat-strip                  { grid-template-columns: 1fr !important; }

  /* Stores list hero — stack the stats dividers */
  [style*="width:1px;height:48px"] { display: none !important; }

  /* Hide coin pill to save topbar space */
  .pe-coin-pill { display: none !important; }

  /* Banner heights */
  [style*="height:200px"] { height: 130px !important; }
  [style*="height:240px"] { height: 160px !important; }

  /* Profile stats — 5 col → 3 col at small */
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* Post-ad form sidebar stacks below form */
  [style*="grid-template-columns:1fr 300px"] { grid-template-columns: 1fr !important; }

  /* Store detail / profile sidebar stacks */
  [style*="grid-template-columns:1fr 290px"] { grid-template-columns: 1fr !important; }

  /* Toast full-width at very small */
  .pe-toast { left: 8px !important; right: 8px !important; }
}