/* Small-screen spacing pass: keep content comfortably away from the viewport edge. */
@media (max-width: 760px) {
  .wrap,
  .admin-shell {
    width: calc(100% - 32px);
  }

  .site-header {
    padding-inline: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-header::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar,
  .side-panel::-webkit-scrollbar {
    display: none;
  }

  .hero {
    padding-inline: 2px;
  }

  .welcome {
    margin-inline: 0;
  }

  .store-content > .panel,
  .store-content > .faq-list .panel,
  .product-detail.panel,
  .admin-shell .panel {
    padding: 18px;
  }

  .store-content > .table-panel,
  .admin-shell .table-panel {
    padding: 0;
  }

  .category-card,
  .subcategory-card,
  .product-card,
  .vote-card,
  .post-card,
  .join-steps .panel,
  .reference-banner,
  .community-banner,
  .apple-status,
  .apple-news,
  .information-panel {
    padding: 16px;
  }

  .package-card {
    padding: 16px;
    gap: 14px;
  }

  .package-art {
    width: 102px;
    height: 128px;
    flex-basis: 102px;
  }

  .package-copy h2 {
    font-size: 17px;
    margin-bottom: 10px;
  }

  .package-price {
    margin-bottom: 11px;
  }

  .admin-header {
    padding: 18px 0;
    margin-bottom: 24px;
    gap: 12px;
  }

  .admin-tabs {
    gap: 16px;
    padding-inline: 2px;
    margin-inline: -2px;
  }

  .stats .panel {
    padding: 16px;
  }

  .login-panel {
    padding: 24px 18px;
  }

  .editor {
    padding: 18px;
  }

  .form-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .wrap,
  .admin-shell {
    width: calc(100% - 24px);
  }

  .site-header nav {
    gap: 18px;
  }

  .welcome-title {
    padding: 15px 16px;
  }

  .account,
  .basket-link {
    padding: 11px 12px;
  }

  .category-card,
  .product-card,
  .vote-card,
  .post-card,
  .reference-banner,
  .community-banner,
  .apple-status,
  .apple-news,
  .information-panel,
  .subcategory-card {
    padding: 14px;
  }

  .package-card {
    padding: 14px;
    gap: 11px;
  }

  .package-art {
    width: 88px;
    height: 112px;
    flex-basis: 88px;
  }

  .package-actions {
    gap: 6px;
  }

  .package-info,
  .package-buy {
    font-size: 18px;
  }
}