:root {
  --layout-content-max: 1280px;
  --layout-shell-max: 1280px;
  --layout-feature-max: 1280px;
}

main {
  width: 100%;
  max-width: var(--layout-content-max);
  padding: 40px 32px 64px;
}

.site-header-inner,
.site-footer-inner {
  width: min(var(--layout-shell-max), 100%);
}

.premium-home {
  width: 100%;
  max-width: var(--layout-feature-max);
}

/* Decorative glows on the shirt landing page must not create horizontal scroll. */
body:has(.premium-home) {
  overflow-x: clip;
}

.premium-home::before {
  right: -24px;
}

.premium-home::after {
  left: -24px;
}

/* Keep long public forms and receipt content within a comfortable reading span. */
.booking-gallery,
.booking-form,
.receipt,
.booking-progress,
.two-col,
.payment-panel {
  width: 100%;
  max-width: var(--layout-feature-max);
  margin-right: auto;
  margin-left: auto;
}

.booking-form,
.payment-panel {
  margin-bottom: 20px;
}

/* Settings and account forms benefit from room, but very long fields are harder to scan. */
.settings-workspace,
.profile-layout {
  width: 100%;
  max-width: var(--layout-feature-max);
  margin-right: auto;
  margin-left: auto;
}

.module-grid,
.anniversary-promo,
.portal-status-grid {
  width: 100%;
  max-width: var(--layout-feature-max);
}

.module-hero {
  max-width: 900px;
}

.module-school-logo {
  width: 300px;
  height: 300px;
  border-radius: 28px;
}

/* Page-level widths: use the wider canvas without stretching each workspace edge-to-edge. */
main:has(> .admin-module-grid),
main:has(> .dashboard-welcome),
main:has(> .booking-list-card),
main:has(> .admin-hero + .user-manager) {
  max-width: var(--layout-content-max);
}

.admin-module-grid,
.admin-global-actions {
  width: 100%;
  max-width: var(--layout-feature-max);
  margin-right: auto;
  margin-left: auto;
}

.admin-module-hero {
  width: 100%;
  max-width: var(--layout-feature-max);
  margin-right: auto;
  margin-left: auto;
}

.booking-list-card {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.user-manager {
  width: 100%;
  max-width: var(--layout-feature-max);
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 1100px) {
  .dashboard-welcome {
    display: grid;
  }

  .shirt-module-actions {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 1500px) {
  main {
    padding-right: 28px;
    padding-left: 28px;
  }
}

@media (max-width: 900px) {
  main {
    padding: 32px 20px 54px;
  }

  .site-header-inner {
    gap: 12px;
  }

  .site-nav {
    gap: 2px;
  }

  .site-nav a {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (max-width: 700px) {
  main {
    padding: 24px 16px 48px;
  }

  .site-header-inner {
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .site-brand {
    margin-right: auto;
  }

  .site-nav {
    width: 100%;
    padding-bottom: 7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .site-nav a {
    flex: 1 0 auto;
    justify-content: center;
    min-width: max-content;
  }

  .site-footer-inner {
    padding-right: 18px;
    padding-left: 18px;
  }

  .module-school-logo {
    width: min(224px, 62vw);
    height: min(224px, 62vw);
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .site-nav a {
    gap: 5px;
    padding-right: 7px;
    padding-left: 7px;
  }
}