html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

pre,
code,
td,
th,
p,
a,
button,
label {
  overflow-wrap: anywhere;
}

@media (max-width: 991px) {
  .sales-global-header .nav-container {
    gap: 12px;
  }

  .sales-global-header .nav-links {
    gap: 8px;
  }

  .sales-global-header .nav-item {
    padding-inline: 8px;
    font-size: 13px;
  }

  .sales-actions {
    gap: 8px;
  }
}

.sales-global-header .nav-links {
  min-width: 0;
  gap: clamp(4px, 0.7vw, 12px);
}

.sales-global-header .nav-item {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: normal;
}

@media (max-width: 850px) {
  .sales-global-header .nav-links {
    display: none;
  }

  .sales-global-header .nav-links.is-open {
    display: flex;
    position: absolute;
    z-index: 55;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border: 1px solid #d9e0eb;
    border-radius: 0 0 16px 16px;
    background: #fff;
    box-shadow: 0 14px 28px #1a1c1e1f;
  }

  .sales-global-header .btn-menu-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-header .nav-links {
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .sales-global-header .nav-container,
  .nav-header .nav-container {
    width: calc(100% - 24px);
    gap: 8px;
  }

  .sales-global-header .nav-brand .img,
  .nav-header .nav-brand .img {
    width: 58px;
    height: 48px;
  }

  .sales-actions {
    gap: 6px;
  }

  .sales-global-header .account-trigger {
    padding: 5px 7px;
  }

  .footer-site {
    padding-top: 40px;
  }

  .employee-header {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
  }

  .employee-main,
  .status-main {
    width: calc(100% - 24px);
    padding-top: 20px;
  }

  .page-heading,
  .queue-heading,
  .queue-order {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .queue-counter {
    min-width: 64px;
    min-height: 64px;
  }

  .status-ribbon,
  .success-banner,
  .customer-card,
  .action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-state {
    margin-left: 0;
    align-self: flex-start;
  }

  .ribbon-actions,
  .action-group {
    flex-wrap: wrap;
  }

  .ribbon-actions button,
  .action-group button {
    flex: 1 1 180px;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  .sales-global-header .nav-container,
  .nav-header .nav-container {
    min-height: 60px;
    padding-block: 6px;
  }

  .sales-global-header .nav-brand .img,
  .nav-header .nav-brand .img {
    width: 50px;
    height: 42px;
  }

  .sales-global-header .account-trigger {
    font-size: 11px;
  }

  .pwa-install-button {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 11px 15px;
    font-size: 12px;
  }

  .queue-order,
  .queue-order-meta,
  .manual-row,
  .section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .manual .manual-row button {
    width: 100%;
  }

  .customer-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}