/* ============================================================================
   Grimshackle Shoppekeep — mobile / responsive overrides (≤640px).

   Linked AFTER shoppekeep.css. Everything here is scoped inside the media query,
   so the desktop layout is provably untouched (these rules simply don't apply
   above 640px). Remove the <link> to this file to turn the mobile layout off.

   Targets the sk-* class hooks in the render. See shoppekeep.css for the base.
   ============================================================================ */

@media (max-width:640px){

  /* Safety net: never allow a horizontal scrollbar on a phone (e.g. during the
     brief fallback-font flash before the web fonts settle). Vertical scroll only. */
  html,body{overflow-x:hidden}

  /* App shell: let the page scroll naturally instead of a fixed 100vh with a
     crushed two-column body. dvh dodges the mobile browser-chrome clipping. */
  .sk-shell{height:auto !important;min-height:100dvh !important;overflow:visible !important}

  /* Shop top bar: brand + Buy/Sell + actions wrap instead of colliding. */
  .sk-topbar{height:auto !important;flex-wrap:wrap;justify-content:center;padding:9px 10px !important;row-gap:8px !important}
  .sk-topbtns{flex:1 1 100% !important;flex-wrap:wrap;justify-content:center}
  .sk-topbtns > span{height:30px !important;padding:0 10px !important;font-size:11.5px !important}

  /* Flair band crest + name shrink to phone scale. */
  .sk-crest{width:58px !important;height:58px !important}
  .sk-shopname{font-size:21px !important}

  /* Shop body: stack the shelves above the tally, both full width, page scrolls. */
  .sk-shopbody{flex-direction:column !important}
  .sk-gridcol{overflow:visible !important}
  .sk-scroll{overflow:visible !important;min-height:0 !important}
  .sk-slip{width:100% !important;border-left:none !important;border-top:2px solid #d8cdb5 !important}

  /* Keeper gets its own row so the coin box + shelf filters wrap cleanly below. */
  .sk-keeper{flex:1 1 100% !important}

  /* One column of item cards. */
  .sk-itemgrid,.sk-sellgrid{grid-template-columns:1fr !important}

  /* Setup: two-up toggle chips (four is too tight), keep dropdown menus on-screen. */
  .sk-togglegrid{grid-template-columns:repeat(2,1fr) !important}
  .sk-ddmenu{max-width:calc(100vw - 44px)}
  /* The paint swatch popover opens from a chip mid-screen; 8 columns overflow the
     phone, so drop to 5 (≈192px). In the compact bar the chip is bottom-right, so
     anchor its menu to the right edge (opens leftward) to stay on-screen. */
  .sk-paint-menu{grid-template-columns:repeat(5,30px) !important}
  .sk-togglegrid .sk-paint-menu{left:auto !important;right:0 !important}

  /* Compact bar: shorten the shop-open button ("Raise the shutters" → "Open") so it
     packs onto the dropdown row instead of taking a row of its own. */
  .sk-raise-full{display:none}
  .sk-raise-mini{display:inline}

  /* Sticky tally: once the deal/sell slip has items, pin it to the bottom of the
     screen as a bottom sheet so the shopper never scrolls down to reach it. Empty =
     normal document flow (not pinned). The shelves get bottom padding so their last
     row can still scroll clear of the sheet. */
  .sk-slip-stick{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:60vh;border-radius:16px 16px 0 0;box-shadow:0 -10px 28px rgba(20,12,4,.30)}
  .sk-body-stuck .sk-scroll{padding-bottom:62vh}

}