/* Mobile-only layout guard shared by every Store route. Keep pinch zoom available. */
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
  body { min-width: 0; max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]), textarea, select,
  [contenteditable="true"] { font-size: max(16px, 1rem) !important; }
  input, textarea, select { min-width: 0; max-width: 100%; box-sizing: border-box; }
  body > main, #app, .panel, .workspace, .workspace-body, .workspace-head,
  .grid > *, .split > *, .tools > *, .actions > *, .intro > *,
  .compose-grid > *, .profile-group > *, .cart-item > *, .creator-tabs > * {
    min-width: 0;
  }
  body > main, #app, .panel, .workspace { max-width: 100%; }
  body > header { flex-wrap: wrap; gap: 12px; padding-inline: 16px; }
  body > header > *, .nav, .account-control { min-width: 0; max-width: 100%; }
  .brand { flex-wrap: wrap; overflow-wrap: anywhere; }
  .mark { flex-shrink: 0; }
  .nav { flex-wrap: wrap; }
  .workspace-head, .intro { flex-wrap: wrap; }
  .workspace-head > *, .preview-bar > * { min-width: 0; }
  .workspace-head h1, .workspace-head p, .card h2, .cart-item strong,
  .profile-readonly, .creator-menu strong { overflow-wrap: anywhere; }
  .actions button, .actions a, .intro-actions button, .myapp-actions button,
  .runtime-bar a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  iframe, img, video, canvas { max-width: 100%; }
  dialog { box-sizing: border-box; max-width: calc(100% - 24px); }
  .table-scroll, .pricing-scroll, .legal-table-wrap { max-width: 100%; overflow-x: auto; }
  .pricing-foot strong, .pricing-usage strong { white-space: normal; }
  .creator-tabs { flex-wrap: wrap; }
}

/* Home only: simplify the mobile catalog without changing desktop controls. */
@media (max-width: 767px) {
  #app > .store-front > .catalog-section > .catalog-tabs,
  #app > .store-front > .catalog-section > .catalog-toolbar {
    display: none !important;
  }
  #app > .store-front > .home-sections {
    margin: 0;
  }
  #app > .store-front > .home-sections > .personal-section {
    padding: 10px 12px;
    margin: 0 0 10px;
    border-radius: 12px;
  }
  #app > .store-front > .home-sections > .personal-section h2 {
    margin: 0 0 7px;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -.02em;
  }
  #app > .store-front > .home-sections .personal-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  #app > .store-front > .home-sections .personal-links button {
    min-width: 0;
    min-height: 44px;
    padding: 7px 6px;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  #app > .store-front > .home-sections .personal-links span {
    display: none;
  }
}