/* r246: desktop alignment only for the login and More Features pages.
   Keep the approved mobile layout and all card interiors unchanged. */
@media screen and (min-width: 900px) {
  html body.violin-account-page {
    --violin-account-max-width: 1180px;
    --violin-account-gutter: 24px;
    padding-left: var(--violin-account-gutter) !important;
    padding-right: var(--violin-account-gutter) !important;
  }

  /* Size only outer sections, never nested cards or form controls. */
  html body.violin-account-page > :is(
    .profile-header, .page-header, .page-title, .violin-page-heading,
    .login-card, .feedback-card, .address-list, .form-card, .btn-add-new,
    .main-card, .card, .tab-scroll, .tab-bar, .action-bar, .footer,
    #cartListContainer, #violinPhysicalCart, #violinDigitalCart
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: var(--violin-account-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.violin-account-page > .profile-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.violin-account-page > .profile-header > .top-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.violin-account-page > :is(.page-header, .violin-page-heading) > .page-title {
    width: auto !important;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.violin-account-page.violin-footer-layout > .footer.violin-site-footer {
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* Fixed navigation uses the viewport's available width, excluding its scrollbar.
     Unlike vw, this matches the body content width with 24px gutters on both sides. */
  html body.violin-account-page > .bottom-nav {
    width: min(var(--violin-account-max-width), calc(100% - 2 * var(--violin-account-gutter))) !important;
    max-width: var(--violin-account-max-width) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}
