/* =============================================================
   KASDAP ONE — app-like mobile layer (PWA "feels native")
   Loaded last so it can refine the responsive base.
============================================================= */

/* installed / standalone mode → hide browser-ish affordances, use app feel */
@media (max-width: 760px) {
  /* momentum scroll + no overscroll bounce leaking the page */
  html, body { overscroll-behavior-y: contain; }
  body { -webkit-overflow-scrolling: touch; }

  /* chrome (top + bottom bars) shouldn't be text-selectable like an app */
  .topbar, .botnav, .modeswitch, .adm-topbar, .adm-side { -webkit-user-select: none; user-select: none; }

  /* sticky app header with safe-area inset (notch phones) */
  .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar) + env(safe-area-inset-top)); }
  .app { padding-top: calc(var(--topbar) + env(safe-area-inset-top)); }

  /* bigger, app-like tap targets on the bottom bar */
  .botnav button { padding-top: 10px; }
  .botnav button svg { width: 23px; height: 23px; }

  /* press feedback like a native app */
  .pcard:active, .ord-card:active, .chip:active, .btn:active, .frow:active, .demo-chip:active { transform: scale(.975); }
  .pcard, .ord-card, .btn, .chip { transition: transform .12s ease, border-color .2s, box-shadow .2s; }

  /* product grid feels like an app store: 2-up cards, comfy spacing */
  .grid { gap: 11px; }

  /* search bar becomes a pill, app-like */
  .searchbar { border-radius: var(--r-pill); }

  /* page headings a touch tighter */
  .page-wrap { padding-top: 14px; }
}

/* standalone display: add a subtle top status tint so it reads as an app */
@media (display-mode: standalone) {
  .topbar { box-shadow: 0 1px 0 var(--line); }
  /* hide the "open admin console" inline link inside the installed customer app */
}

/* larger phones / small tablets: 3-up product grid */
@media (min-width: 600px) and (max-width: 860px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* prevent iOS auto-zoom on focus (inputs must be >=16px) */
@media (max-width: 760px) {
  .input, .select, .textarea, .searchbar input, .otp-digit { font-size: 16px; }
}