:root {
  --nat-safe-top: env(safe-area-inset-top, 0px);
  --nat-safe-right: env(safe-area-inset-right, 0px);
  --nat-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nat-safe-left: env(safe-area-inset-left, 0px);
  --nat-page-gutter: clamp(14px, 2.2vw, 24px);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body:not(.auth-page) .topbar {
  padding-top: calc(14px + var(--nat-safe-top));
  padding-right: max(var(--nat-page-gutter), var(--nat-safe-right), calc((100vw - 1280px) / 2));
  padding-left: max(var(--nat-page-gutter), var(--nat-safe-left), calc((100vw - 1280px) / 2));
}

main.content {
  width: 100%;
  max-width: 1280px;
  padding-right: max(var(--nat-page-gutter), var(--nat-safe-right));
  padding-bottom: calc(50px + var(--nat-safe-bottom));
  padding-left: max(var(--nat-page-gutter), var(--nat-safe-left));
}

main.content.product-page,
main.content.mine,
main.content.appointments-page,
main.content.orders-page,
main.content.notifications-page {
  max-width: 1080px;
}

.form-page {
  max-width: 620px;
  padding-right: max(16px, var(--nat-safe-right));
  padding-bottom: calc(42px + var(--nat-safe-bottom));
  padding-left: max(16px, var(--nat-safe-left));
}

.auth-page {
  padding-top: max(24px, var(--nat-safe-top));
  padding-right: max(18px, var(--nat-safe-right));
  padding-bottom: max(24px, var(--nat-safe-bottom));
  padding-left: max(18px, var(--nat-safe-left));
}

.nat-checkout-overlay,
.mobile-app-dialog {
  padding-top: max(18px, var(--nat-safe-top));
  padding-right: max(18px, var(--nat-safe-right));
  padding-bottom: max(18px, var(--nat-safe-bottom));
  padding-left: max(18px, var(--nat-safe-left));
}

@media (min-width: 1080px) {
  .store-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mine .store-grid,
  .product-page .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  :root { --nat-page-gutter: 6px; }

  body:not(.auth-page) .topbar {
    padding-top: calc(9px + var(--nat-safe-top));
    padding-right: max(8px, var(--nat-safe-right));
    padding-bottom: 9px;
    padding-left: max(8px, var(--nat-safe-left));
  }

  main.content {
    max-width: 100%;
    padding-top: 13px !important;
    padding-right: max(6px, var(--nat-safe-right)) !important;
    padding-bottom: calc(38px + var(--nat-safe-bottom)) !important;
    padding-left: max(6px, var(--nat-safe-left)) !important;
  }

  .form-page {
    max-width: 100%;
    margin-top: 15px;
    padding-right: max(4px, var(--nat-safe-right));
    padding-left: max(4px, var(--nat-safe-left));
  }

  .tabs {
    margin-right: calc(-1 * max(6px, var(--nat-safe-right)));
    margin-left: calc(-1 * max(6px, var(--nat-safe-left)));
    padding-right: max(8px, var(--nat-safe-right));
    padding-left: max(8px, var(--nat-safe-left));
  }

  .store-grid,
  .service-list {
    gap: 8px;
  }

  .store-card,
  .service,
  .product-detail,
  .form-card,
  .card,
  .appointment,
  .order-card,
  .notice,
  .catalog-card,
  .booking-card,
  .store-trust,
  .seller-panel {
    border-right: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
  }

  .store-card,
  .service {
    border-radius: 10px;
  }

  .product-detail,
  .form-card,
  .card {
    border-radius: 14px;
  }

  .nat-checkout-overlay {
    padding-top: var(--nat-safe-top);
    padding-right: var(--nat-safe-right);
    padding-bottom: var(--nat-safe-bottom);
    padding-left: var(--nat-safe-left);
  }
}

@media (max-width: 340px) {
  :root { --nat-page-gutter: 4px; }
  main.content { padding-right: max(4px, var(--nat-safe-right)) !important;padding-left: max(4px, var(--nat-safe-left)) !important; }
}