/* ============================================================
   MONOSYSM ECOSYSTEM — RESPONSIVE
   Mobile minimizes scroll everywhere except the Basic catalog.
   Overlays become full-height bottom sheets.
   ============================================================ */

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .release-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .sku-grid { grid-template-columns: repeat(3, 1fr); }
  .detail { grid-template-columns: 1fr; }
  .detail-info { border-left: none; border-top: var(--hair) solid var(--line); }
  [data-brand="basys"] .hero-main { grid-template-columns: 1fr; }
  .hero-side { justify-self: stretch; max-width: none; }
}

/* ---- Phone ---- */
@media (max-width: 620px) {
  :root { --gutter: 16px; }
  html { font-size: 15px; }

  .topbar { padding: 14px var(--gutter); }
  .statusbar { gap: 14px; }
  .statusbar span:nth-child(n+4) { display: none; } /* keep version only */
  .statusbar .grow-line { display: none; }
  .footer-cart, .catalog-foot .footer-cart { order: 99; margin-left: auto; } /* pin cart to the right edge on mobile — grow-line is hidden here, so push with margin instead */
  .wordmark { height: clamp(22px, 6vw, 30px); }

  /* MONOSYSM hero → single column, statement above render */
  [data-brand="monosysm"] .hero-main { display: flex; flex-direction: column; padding-top: 8px; }
  .hero-statement { position: static; max-width: none; }
  .hero-statement .mega, [data-brand="monosysm"] .hero-statement .mega { max-width: none; }
  .hero-stage { position: relative; top: auto; right: auto; transform: none; width: min(78vw, 380px); height: auto; aspect-ratio: 1; align-self: center; margin: 4px auto 0; }
  .hero-boot { position: static; margin-top: 16px; }
  .hero-cta { position: static; margin-top: 24px; padding-top: 0; padding-bottom: 12px; }
  .hero-cta .btn { width: 100%; }

  /* Collection */
  .release-grid { grid-template-columns: 1fr; gap: 12px; }
  .sku-grid { grid-template-columns: repeat(2, 1fr); }

  /* Detail — visual then info, whole page scrolls as one (no nested
     scroll box) so info content can't overlap the actions bar below it */
  .detail { grid-template-rows: 42vh auto; overflow-y: auto; }
  .detail-info { display: block; }
  .detail-info-scroll { overflow: visible; flex: none; }
  .detail-thumbs { height: 44px; gap: 6px; }
  .detail-thumbs .thumb { width: 44px; height: 44px; }

  /* Scrollbars become overlay-only — no reserved gutter, so layout
     doesn't shift/misalign when a scroll region appears */
  :root { --scrollbar-w: 0px; }
  .scroll-region, .detail, .overlay-body { scrollbar-width: none; }
  .scroll-region::-webkit-scrollbar, .detail::-webkit-scrollbar, .overlay-body::-webkit-scrollbar { display: none; }

  /* Overlays → bottom sheets */
  .overlay--dialog, .overlay--wide {
    top: auto; bottom: 0; left: 0; translate: none; transform: translateY(100%);
    width: 100%; max-height: 92vh; border-bottom: none; border-left: none; border-right: none;
  }
  #overlay-host.is-open .overlay { transform: translateY(0); }

  /* Checkout stepper stacks */
  .overlay--wide .overlay-body > div { grid-template-columns: 1fr !important; }
  .stepper { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .step { padding: 6px 0; }
}

/* short landscape: let content scroll rather than clip */
@media (max-height: 560px) {
  #app { height: auto; min-height: 100vh; }
  html { overflow: auto; }
  .screen { position: relative; }
}