/* ============================================================
   SHOPTER™.SHOPPING — TABLET & DESKTOP LAYOUT
   Include after the page's own <style> blocks:
   <link rel="stylesheet" href="shopter-desktop.css">
   and tag the page: <body data-page="closet"> (discover, closet,
   sell, scan, resale, inbox).

   Every rule sits inside a min-width media query, so phones
   (under 768px) render exactly as before.

   Tablet  (768px+):  bottom nav stays; narrow phone columns widen
                      and product grids gain a column.
   Desktop (1024px+): bottom nav becomes a left side rail; content
                      sits in a centred column up to 1120px.
   ============================================================ */

:root{--dk-rail:96px;--dk-max:1120px}

/* ─────────────────────────── TABLET ─────────────────────────── */
@media (min-width:768px){

  /* Discover: keep the hero's headline and search to a readable width */
  body[data-page="discover"] .hero-inner{max-width:680px;width:100%;margin:0 auto}
  body[data-page="discover"] #bounty-feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  body[data-page="discover"] #bounty-feed .bounty-card{margin-bottom:0}
  body[data-page="discover"] #bounty-feed > :not(.bounty-card){grid-column:1/-1}

  /* Closet: the page was locked to a 480px phone column */
  body[data-page="closet"] main{max-width:720px;padding:0 24px}
  body[data-page="closet"] .closet-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Resale: the whole body was capped at 520px */
  body[data-page="resale"]{max-width:760px}
  body[data-page="resale"] nav.bnav{max-width:760px}
  body[data-page="resale"] .grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Scan: centre the scanner instead of stretching tiles edge to edge */
  body[data-page="scan"] .sec{max-width:680px;margin-left:auto;margin-right:auto}

  /* Messages: a centred conversation list reads better than full width */
  body[data-page="inbox"] .head,
  body[data-page="inbox"] #threads{max-width:720px;margin-left:auto;margin-right:auto}
}

/* ─────────────────────────── DESKTOP ────────────────────────── */
@media (min-width:1024px){

  /* Room for the side rail; the bottom-nav spacer is no longer needed */
  body[data-page]{padding-left:var(--dk-rail);padding-bottom:40px}

  /* Bottom nav → left side rail. Covers all three nav variants:
     .shopter-bottom-nav, .shopter-bnav (sell) and nav.bnav (resale).
     !important because shopter-polish.css styles the phone nav with
     !important and loads at the end of <body>; the body[data-page]
     prefix gives these rules the higher specificity so they win. */
  body[data-page] .shopter-bottom-nav,
  body[data-page] .shopter-bnav,
  body[data-page] nav.bnav{
    top:0;bottom:0;left:0;right:auto;width:var(--dk-rail);max-width:none;margin:0;
    padding:88px 0 24px !important;border-top:none !important;box-shadow:none !important;
    border-right:0.5px solid var(--border2,var(--line,rgba(0,0,0,0.08)));
    display:flex;flex-direction:column;align-items:center !important;justify-content:flex-start;gap:6px;
    overflow-y:auto;z-index:250}
  body[data-page] .shopter-bnav-inner{
    flex-direction:column;justify-content:flex-start !important;align-items:center !important;gap:6px;
    max-width:none !important;width:100%;margin:0;padding:0 !important}
  body[data-page] .shopter-bnav-item,
  body[data-page] .bnav-sell,
  body[data-page] nav.bnav .bi,
  body[data-page] nav.bnav .bsell{
    flex:0 0 auto !important;width:80px;padding:10px 4px !important;border-radius:14px !important;
    justify-content:center !important;text-align:center}
  body[data-page] .shopter-bnav-item:hover,
  body[data-page] nav.bnav .bi:hover{background:rgba(57,255,100,0.08) !important}
  /* The raised Sell button sits level inside the rail */
  body[data-page] .bnav-sell-icon,
  body[data-page] nav.bnav .bsell-ic{margin-top:0 !important}
  body[data-page] .bnav-sell,
  body[data-page] nav.bnav .bsell{order:-1;margin-bottom:10px}

  /* Toasts are centred on the content, not the whole window */
  body[data-page] .toast{margin-left:calc(var(--dk-rail) / 2)}
  /* Fixed bottom buttons drop to where the bottom nav used to be */
  body[data-page] .floating-refine-btn,
  body[data-page] .floating-bounty-btn{bottom:28px;right:28px}
  body[data-page="closet"] .floating-twin-pill{margin-left:calc(var(--dk-rail) / 2)}

  /* Discover */
  body[data-page="discover"] .hero{max-width:var(--dk-max);margin:20px auto 0;border-radius:24px;min-height:440px;padding-bottom:32px}
  body[data-page="discover"] .hero-h{font-size:46px}
  body[data-page="discover"] .pulse-tucked,
  body[data-page="discover"] .category-chip-row,
  body[data-page="discover"] .sec{max-width:var(--dk-max);margin-left:auto;margin-right:auto}
  body[data-page="discover"] .scan-card{margin-left:0;margin-right:0}
  body[data-page="discover"] .ticker-bar{border-radius:12px;margin-top:14px}
  body[data-page="discover"] .category-chip-row{border-bottom:none;padding-left:0;padding-right:0}
  body[data-page="discover"] .sec{padding-left:0;padding-right:0}
  body[data-page="discover"] #bounty-feed{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

  /* Closet */
  body[data-page="closet"] main{max-width:1040px;padding:0 32px}
  body[data-page="closet"] .closet-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

  /* Resale: free the body from its phone cap and centre each block */
  body[data-page="resale"]{max-width:none;margin:0}
  body[data-page="resale"] > .top,
  body[data-page="resale"] > .hero,
  body[data-page="resale"] > .banner,
  body[data-page="resale"] > .wrap,
  body[data-page="resale"] > .pills,
  body[data-page="resale"] > .meta,
  body[data-page="resale"] > .grid{max-width:var(--dk-max);margin-left:auto;margin-right:auto}
  body[data-page="resale"] > .hero,
  body[data-page="resale"] > .banner{margin-top:16px;border-radius:24px;max-width:calc(var(--dk-max) - 32px)}
  body[data-page="resale"] > .sellcard,
  body[data-page="resale"] > .actcard{max-width:calc(var(--dk-max) - 32px);margin-left:auto;margin-right:auto}
  body[data-page="resale"] .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

  /* Scan */
  body[data-page="scan"] .sec{max-width:760px}

  /* Messages */
  body[data-page="inbox"] .head,
  body[data-page="inbox"] #threads{max-width:820px}
  body[data-page="inbox"] .thread{border-radius:12px}
  body[data-page="inbox"] .thread:hover{background:var(--bg2)}
}

/* Wide screens: five product columns on resale */
@media (min-width:1360px){
  body[data-page="resale"] .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}