/* Visual authority: SmashingPOS-Design-Handoff/approved-designs.html.
   Each rule adapts an approved family; no business controls are removed. */
:root {
  --sidebar-width: 248px;
  --page-space: 28px;
  --section-space: 24px;
  --control-height: 40px;
  --control-radius: 7px;
  --card-radius: 8px;
  --sidebar-active-radius: 8px;
  --approved-inspector: 360px;
}
body {
  font-size: 14px;
  line-height: 1.5;
}
h1,
h2,
h3,
h4 {
  letter-spacing: -0.025em;
}
button,
input,
select,
textarea {
  font-family: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 3px;
}
.button {
  border-radius: 7px;
  min-height: 38px;
  font-size: 13px;
  padding: 9px 15px;
  box-shadow: none;
}
.button.primary,
.button.blue-button {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.button.blue-button:not(.primary) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='range']),
select,
textarea {
  border-radius: 6px;
}
.search-input {
  border-radius: 7px;
  background: var(--raised);
}
.search-input input {
  background: transparent;
}
.app-body {
  background: var(--surface);
}
.app-body > #main {
  padding: 28px;
  min-width: 0;
}
.page-heading {
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.page-heading h1 {
  font-size: 30px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.page-heading p {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 7px;
  color: var(--muted);
  max-width: 72ch;
}
.heading-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.panel {
  border-radius: 8px;
  box-shadow: none;
}
.panel-title {
  padding: 18px 20px;
  border: 0;
}
.panel-title h2 {
  font-size: 18px;
}
.topbar,
.pos-layout .pos-toolbar {
  min-height: 78px;
  height: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 14px 22px;
  gap: 18px;
}
.topbar .workspace-location {
  min-width: 210px;
}
.topbar .navigation-search {
  max-width: 410px;
  flex: 1;
}
.topbar-account {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 3px 0 3px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.topbar-account .sidebar-avatar {
  width: 34px;
  height: 34px;
}
.topbar-account > .icon {
  width: 14px;
}
.topbar .header-actions {
  gap: 8px;
}
.topbar .icon-button,
.pos-toolbar .icon-button {
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
}
.workspace-foot {
  font-size: 11px;
  padding: 14px 28px;
}
.preview-banner {
  padding: 6px 28px;
  min-height: 29px;
  font-size: 10px;
  background: var(--raised);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
/* One quiet, reference-led sidebar with every current destination retained. */
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
}
.sidebar-header {
  padding: 18px 24px 20px;
  min-height: 94px;
}
.sidebar .brand {
  height: 54px;
  padding: 0;
}
.sidebar .brand-logo {
  width: 190px;
}
.sidebar nav {
  padding: 0 12px;
  scrollbar-width: thin;
}
.sidebar .nav-group {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.sidebar .nav-group h2 {
  font-size: 10px;
  letter-spacing: 0.075em;
  color: var(--muted);
  padding: 0 15px;
  margin: 16px 0 12px;
  font-weight: 650;
}
.sidebar .nav-link {
  min-height: 44px;
  margin: 3px 0;
  padding: 10px 15px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  gap: 13px;
}
.sidebar .nav-link .icon {
  width: 20px;
  height: 20px;
  color: inherit;
}
.sidebar .nav-link.active {
  color: var(--primary);
  background: var(--orange-soft);
  font-weight: 650;
  box-shadow: none;
}
.sidebar .nav-link.active:after {
  content: '';
  display: block !important;
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  height: auto;
  border: 0;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.sidebar .sidebar-active-indicator {
  display: none;
}
.sidebar[data-indicator-ready] .nav-link.active:after {
  display: block;
  visibility: visible;
}
.sidebar-quick-actions {
  padding: 12px 20px 18px;
  border-top: 1px solid var(--line);
  gap: 8px;
}
.sidebar-quick-actions .sidebar-collapse {
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  font-size: 12px;
  text-align: left;
  color: var(--muted);
  margin-bottom: 6px;
}
.sidebar-quick-actions .sidebar-collapse > .icon {
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
}
.sidebar-quick-actions .sidebar-account {
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin-top: 4px;
  padding: 14px 0 0;
  min-height: 54px;
}
.sidebar-avatar {
  background: var(--raised);
  color: var(--ink);
}
.sidebar-account strong {
  font-size: 12px;
}
.sidebar-account small {
  font-size: 11px;
}
.nav-link:focus-visible,
.button:focus-visible,
.icon-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Dashboard 1: four compact statistics, order ledger, then four shortcuts. */
.page-dashboard .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 0;
  margin: 28px 0 32px;
  background: transparent;
  padding: 0;
}
.page-dashboard .stat {
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 4px 20px;
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-dashboard .stat:first-child {
  padding-left: 0;
}
.page-dashboard .stat:last-child {
  border-right: 0;
}
.page-dashboard .stat-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  padding: 14px;
}
.page-dashboard .stat > div > span {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 550;
}
.page-dashboard .stat strong {
  font-size: 29px;
  line-height: 1.25;
  margin: 4px 0;
  font-weight: 750;
  letter-spacing: -0.025em;
}
.page-dashboard .stat small {
  font-size: 11px;
  line-height: 1.4;
}
.page-dashboard .dashboard-grid {
  grid-template-columns: 1fr;
  gap: 30px;
}
.page-dashboard .dashboard-grid > .panel {
  border: 0;
  background: transparent;
}
.page-dashboard .dashboard-grid > .panel > .panel-title {
  padding: 0 0 16px;
}
.page-dashboard .dashboard-grid > .panel > .table-scroll {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
}
.page-dashboard .shortcuts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.page-dashboard .shortcuts > a {
  padding: 16px;
  min-height: 100px;
  border: 1px solid var(--line);
  border-radius: 8px;
  gap: 12px;
  background: var(--surface);
}
.page-dashboard .shortcuts strong {
  font-size: 13px;
}
.page-dashboard .shortcuts p {
  font-size: 11px;
  line-height: 1.4;
}
.page-dashboard .shortcuts > a > .icon:first-child {
  width: 42px;
  height: 42px;
  padding: 10px;
}
.page-dashboard .dashboard-grid .notice {
  margin-top: 16px;
  font-size: 12px;
}
/* Inventory 2 governs all collection tables and inline editors. */
table {
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  background: var(--raised);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 14px;
}
tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
tbody tr:last-child td {
  border-bottom: 0;
}
.table-scroll {
  max-width: 100%;
  min-width: 0;
}
.table-scroll table {
  width: 100%;
}
.badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 5px;
  line-height: 1.3;
  font-weight: 500;
}
.badge.green {
  background: var(--green-soft);
  color: var(--green);
}
.badge.red {
  background: var(--red-soft);
  color: var(--red);
}
.operations-records {
  border-radius: 8px;
  border: 1px solid var(--line);
}
.operations-filterbar {
  padding: 12px 14px;
  gap: 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.operation-category-rail {
  border-radius: 7px;
  box-shadow: none;
}
.operation-category-rail button {
  border-radius: 0;
  font-size: 12px;
}
.operations-layout {
  gap: 16px;
}
.operation-inline-row > td {
  padding: 0;
}
.operation-inline-editor {
  padding: 18px 20px;
  background: var(--surface);
}
.operation-inline-editor .form-grid {
  gap: 16px 22px;
}
.operations-editor-tabs {
  margin: 0 0 18px;
}
.operations-editor-tabs button {
  font-size: 12px;
  padding: 10px 12px;
}
.workspace-tabs {
  margin: 0 0 20px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}
.page-navigation-links {
  gap: 16px;
}
.page-navigation .tab {
  padding: 10px 0;
  font-size: 12px;
  min-height: 40px;
  border-radius: 0;
  border: 0;
  background: transparent;
  flex-shrink: 0;
}
.page-navigation .tab.active {
  background: transparent;
  color: var(--primary);
  border: 0;
  border-bottom: 2px solid var(--primary);
}
.page-navigation .tab.active:hover {
  color: var(--primary);
}
.statistical-grid,
.statistical-section,
.statistical-card {
  border-radius: 7px;
  box-shadow: none;
}
.reference-stats {
  border-radius: 0;
  background: transparent;
}
/* Settings 1: searchable category workbench, full fields and pinned save actions. */
#main:has(.settings-workbench) .settings-workbench {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  grid-template-rows: 128px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  min-height: calc(100svh - 260px);
}
#main:has(.settings-workbench) .settings-searchbar {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 24px 16px 16px;
  border: 0;
  border-right: 1px solid var(--line);
}
#main:has(.settings-workbench) .settings-searchbar .search-input {
  max-width: 100%;
  min-width: 0;
  flex: none;
  min-height: 40px;
  height: 40px;
}
#main:has(.settings-workbench) .settings-searchbar [role='status'] {
  font-size: 11px;
  line-height: 1.4;
}
#main:has(.settings-workbench) .settings-categories {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 0 12px 24px;
  border: 0;
  border-right: 1px solid var(--line);
  overflow: visible;
}
#main:has(.settings-workbench) .settings-category {
  display: flex;
  justify-content: flex-start;
  gap: 9px;
  min-height: 48px;
  text-align: left;
  white-space: normal;
  padding: 11px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
}
#main:has(.settings-workbench) .settings-category.selected {
  background: var(--orange-soft);
  color: var(--ink);
  box-shadow: inset 2px 0 var(--primary);
}
#main:has(.settings-workbench) .settings-panes {
  grid-column: 2;
  grid-row: 1/3;
  padding: 26px 28px 0;
  min-width: 0;
}
#main:has(.settings-workbench) .settings-form-heading {
  padding: 0 0 24px;
  margin: 0;
}
#main:has(.settings-workbench) .settings-form-heading h2 {
  font-size: 26px;
  line-height: 1.2;
}
#main:has(.settings-workbench) .settings-form-heading p {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 8px;
}
.settings-form .page-section {
  display: block;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.settings-form .section-description {
  margin-bottom: 16px;
}
.settings-form .section-description h2 {
  font-size: 15px;
}
.settings-form .section-controls {
  width: 100%;
}
.settings-form .section-description > p {
  font-size: 12px;
}
.settings-form .settings-form-fields {
  padding: 0;
}
.settings-form .repeat-row {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 18px 0;
}
.settings-form .repeat-rows {
  border-top: 1px solid var(--line);
}
.settings-save.page-savebar {
  margin: 20px -28px 0;
  padding: 16px 28px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: none;
}
.page-savebar .savebar-actions {
  gap: 12px;
}
.page-savebar [role='status'] {
  font-size: 12px;
  line-height: 1.4;
}
.settings-form .form-grid {
  gap: 18px 20px;
}
.field > span {
  font-size: 12px;
  font-weight: 550;
}
.field input,
.field select {
  min-height: 38px;
}
.field small {
  font-size: 11px;
  line-height: 1.4;
}
.page-section {
  border-color: var(--line);
}
/* Shared dialog 3; selected payment/modifier/import/guest compositions stay distinct. */
dialog.calm-panel.centered-dialog {
  inset: 0;
  margin: auto;
  width: min(610px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  height: auto;
  max-height: calc(100dvh - 64px);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px #0003;
  transform: none;
}
dialog.calm-panel.centered-dialog.panel-wide {
  width: min(960px, calc(100vw - 64px));
  max-width: calc(100vw - 64px);
}
dialog.calm-panel.centered-dialog .panel-header {
  padding: 20px 24px 16px;
}
dialog.calm-panel.centered-dialog .panel-header h2 {
  font-size: 21px;
}
.calm-panel .panel-body {
  padding: 22px 24px;
}
.calm-panel .panel-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.calm-panel .panel-context {
  font-size: 12px;
}
.calm-panel .field > span,
.calm-panel legend {
  font-size: 12px;
}
.calm-panel .button {
  font-size: 13px;
  border-radius: 6px;
}
.calm-panel .panel-header .icon-button {
  background: transparent;
}
.calm-panel .notice {
  font-size: 12px;
  line-height: 1.5;
}
.calm-panel .form-grid {
  gap: 18px;
}
.calm-panel::backdrop {
  background: #0006;
  backdrop-filter: none;
}
.calm-panel.confirmation-dialog {
  border-radius: 8px;
}
.payment-dialog .payment-dialog-balance {
  padding: 18px;
  background: var(--raised);
  border-radius: 7px;
}
.payment-dialog .payment-dialog-amount {
  font-size: 34px;
}
.modifier-workspace {
  gap: 24px;
}
.item-live-summary {
  background: var(--raised);
  padding: 18px;
  border-radius: 7px;
}
.option:has(input:checked),
.tender.active {
  border-color: var(--primary);
  background: var(--orange-soft);
  color: var(--ink);
}
.import-workbench {
  gap: 0;
}
.import-workbench > section {
  border-right: 1px solid var(--line);
  padding: 18px;
}
.import-workbench > section:last-child {
  border: 0;
}
.import-workbench h3 {
  font-size: 15px;
}
/* Approved dedicated operational families. */
.order-status-tabs {
  gap: 10px;
  margin-bottom: 20px;
}
.order-status-tab {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--raised);
  font-size: 12px;
}
.order-status-tab.active {
  background: var(--orange-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.order-panel-item {
  padding-block: 12px;
}
.order-panel-total {
  font-size: 18px;
}
.reference-orders .order-panel-actions .button {
  min-height: 40px;
}
.reference-tables .table-floor-grid {
  gap: 14px;
}
.table-floor-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: none;
}
.table-floor-card.selected {
  border-color: var(--primary);
  background: var(--orange-soft);
}
.kitchen-board,
.reference-kitchen-board {
  gap: 18px;
}
.kitchen-lane {
  background: var(--raised);
  border: 0;
  border-radius: 7px;
  padding: 14px;
}
.kitchen-lane > header {
  background: transparent;
  padding: 0 0 14px;
}
.kitchen-ticket {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: none;
}
.kitchen-ticket h3,
.kitchen-ticket h2 {
  font-size: 22px;
}
.schedule-day-rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 0 12px 0 0;
}
.schedule-day-rail button {
  border: 0;
  border-radius: 0;
  font-size: 12px;
}
.schedule-day-rail button.active {
  box-shadow: inset 2px 0 var(--primary);
  background: var(--orange-soft);
}
.schedule-create-region {
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 20px;
}
.supplier-ledger-summary {
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
}
.report-catalogue {
  border-radius: 0;
}
.report-card {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 16px 0;
}
@media (min-width: 1200px) {
  .reference-orders .orders-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    gap: 20px;
  }
  .reference-orders .orders-layout:has(> .order-inspector[open]) {
    grid-template-columns: minmax(0, 1fr) var(--approved-inspector);
  }
  .reference-orders .order-inspector.panel-is-docked {
    position: sticky;
    inset: auto;
    top: 0;
    margin: 0;
    min-width: 0;
    width: 100%;
    max-width: none;
    height: calc(100svh - 160px);
    max-height: none;
    align-self: start;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
    background: var(--surface);
    z-index: 2;
  }
  .reference-orders .order-inspector.panel-is-docked .panel-header {
    padding: 16px 0 18px 20px;
  }
  .reference-orders .order-inspector.panel-is-docked .panel-body {
    padding: 18px 0 18px 20px;
  }
  .reference-orders .order-inspector .order-panel-more {
    margin-top: 18px;
  }
  .pos-layout {
    --sidebar-width: 228px;
  }
  .pos-layout .pos-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(390px, 1fr);
    gap: 16px;
    padding: 20px 22px;
  }
  .pos-layout .catalogue {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .pos-layout .catalogue > .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .pos-layout .product-card {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    overflow: hidden;
  }
  .pos-layout .product-card img,
  .pos-layout .product-placeholder,
  .pos-layout .product-card > .reference-photo {
    height: auto;
    aspect-ratio: 1.2/1;
    max-height: 205px;
    object-fit: cover;
  }
  .pos-layout .product-card-copy {
    padding: 9px 8px;
    min-height: 65px;
  }
  .pos-layout .product-card-copy strong {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
  }
  .pos-layout .product-card-copy > span {
    font-size: 12px;
    font-weight: 650;
  }
  .pos-layout .product-card-copy b {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }
  .pos-layout .pos-order-column {
    border: 1px solid var(--line);
    border-radius: 8px;
    grid-template-rows: minmax(200px, 1fr) auto;
    min-height: 0;
    background: var(--surface);
  }
  .pos-layout .ticket {
    padding: 14px;
    border: 0 !important;
    border-radius: 0;
  }
  .pos-layout .payment-panel {
    padding: 0 14px 14px;
    border: 0;
    border-radius: 0;
  }
  .pos-layout .payment-body {
    padding: 0;
  }
  .pos-layout .pos-actions {
    padding: 12px 0 0;
  }
  .pos-layout .pay-button {
    min-height: 48px;
    border-radius: 6px;
  }
  .pos-layout .pos-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .pos-layout .pos-secondary-actions > .button {
    flex: 1 1 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 7px 5px;
    font-size: 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
  }
  .pos-layout .pos-secondary-actions kbd {
    font-size: 9px;
  }
  .pos-layout .ticket-bottom {
    padding-block: 10px;
  }
  .pos-layout .ticket-bottom summary {
    font-size: 12px;
  }
  .pos-layout .ticket-context {
    gap: 10px;
  }
  .pos-layout .cart-line {
    padding-block: 12px;
  }
  .pos-layout .totals {
    font-size: 12px;
  }
  .pos-layout .grand-total {
    border-top: 1px solid var(--line);
    font-size: 18px !important;
  }
  .pos-layout .topbar-account {
    display: none;
  }
  .pos-layout .pos-toolbar {
    padding: 12px 22px;
  }
  .sidebar-compact .sidebar-quick-actions .sidebar-collapse > span {
    display: none;
  }
  .sidebar-compact .sidebar-quick-actions .sidebar-collapse {
    justify-content: center;
  }
  .sidebar-compact .sidebar-quick-actions {
    padding: 10px 8px;
  }
  .sidebar-compact .sidebar-header {
    padding: 18px 10px;
    min-height: 88px;
  }
  .sidebar-compact .sidebar .brand-logo {
    display: none;
  }
}
@media (max-width: 1199px) {
  .topbar-account > span:not(.sidebar-avatar) {
    display: none;
  }
  .topbar .navigation-search {
    max-width: none;
  }
  .topbar .header-actions {
    gap: 4px;
  }
  .heading-actions {
    justify-content: flex-start;
  }
  .page-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .page-heading h1 {
    font-size: 27px;
  }
  .page-dashboard .stat {
    padding: 4px 12px;
    gap: 10px;
  }
  .page-dashboard .stat strong {
    font-size: 23px;
  }
  .page-dashboard .stat-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    padding: 11px;
  }
  .page-dashboard .shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #main:has(.settings-workbench) .settings-workbench {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  #main:has(.settings-workbench) .settings-panes {
    padding: 22px 20px 0;
  }
  .settings-save.page-savebar {
    margin-inline: -20px;
    padding-inline: 20px;
  }
  .settings-form .section-split {
    display: block;
  }
}
@media (max-width: 767px) {
  .app-body > #main {
    padding: 20px 16px;
  }
  .topbar {
    padding: 10px 14px;
    gap: 10px;
    min-height: 64px;
  }
  .topbar .workspace-location {
    min-width: 0;
  }
  .topbar-account {
    padding: 0;
  }
  .topbar-account > .icon {
    display: none;
  }
  .page-heading {
    gap: 14px;
    margin-bottom: 20px;
  }
  .page-heading h1 {
    font-size: 25px;
  }
  .page-heading p {
    font-size: 13px;
  }
  .heading-actions {
    gap: 7px;
  }
  .heading-actions .button {
    font-size: 12px;
    padding: 9px 11px;
  }
  .preview-banner {
    padding: 7px 16px;
  }
  .preview-banner > button {
    font-size: 10px;
  }
  .page-dashboard .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 22px 0;
    gap: 16px 0;
  }
  .page-dashboard .stat {
    min-height: 90px;
    padding: 0 12px;
  }
  .page-dashboard .stat:nth-child(2) {
    border: 0;
  }
  .page-dashboard .stat:nth-child(3) {
    padding-left: 0;
  }
  .page-dashboard .stat > div > span {
    font-size: 12px;
  }
  .page-dashboard .stat small {
    font-size: 10px;
  }
  .page-dashboard .stat strong {
    font-size: 21px;
  }
  .page-dashboard .shortcuts {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .page-dashboard .shortcuts > a {
    padding: 12px;
    gap: 8px;
    min-height: 110px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .page-dashboard .shortcuts > a > .icon:first-child {
    width: 32px;
    height: 32px;
    padding: 7px;
  }
  .page-dashboard .shortcuts p {
    font-size: 11px;
  }
  .page-dashboard .shortcuts > a > .icon:last-child {
    width: 14px;
    flex: none;
  }
  .page-dashboard .shortcuts > a > div {
    min-width: 90px;
    flex: 1;
  }
  .page-dashboard .panel-title h2 {
    font-size: 17px;
  }
  .workspace-foot {
    padding: 14px 16px;
  }
  .operations-filterbar {
    padding: 12px;
    gap: 8px;
  }
  .operations-layout {
    gap: 12px;
  }
  .table-scroll table {
    font-size: 12px;
  }
  tbody td {
    padding: 12px;
  }
  .settings-workbench {
    min-height: 0 !important;
  }
  #main:has(.settings-workbench) .settings-workbench {
    display: block;
  }
  #main:has(.settings-workbench) .settings-searchbar {
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px;
  }
  #main:has(.settings-workbench) .settings-categories {
    display: flex;
    flex-direction: row;
    overflow: auto;
    flex-wrap: nowrap;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 12px;
    gap: 8px;
  }
  #main:has(.settings-workbench) .settings-category {
    flex-shrink: 0;
    min-height: 42px;
    white-space: nowrap;
    padding: 10px;
    font-size: 12px;
  }
  #main:has(.settings-workbench) .settings-panes {
    padding: 20px 16px 0;
  }
  #main:has(.settings-workbench) .settings-form-heading h2 {
    font-size: 23px;
  }
  .settings-form .form-grid {
    grid-template-columns: 1fr;
  }
  .settings-save.page-savebar {
    margin-inline: -16px;
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .settings-form .repeat-row .repeat-actions {
    flex-wrap: wrap;
  }
  dialog.calm-panel.centered-dialog,
  dialog.calm-panel.centered-dialog.panel-wide {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 8px;
  }
  .calm-panel .panel-body,
  dialog.calm-panel.centered-dialog .panel-body {
    padding: 18px;
  }
  .calm-panel .panel-footer {
    padding: 14px 18px;
  }
  .calm-panel .panel-header,
  dialog.calm-panel.centered-dialog .panel-header {
    padding: 18px;
  }
  .calm-panel .panel-header h2 {
    font-size: 20px;
  }
  .calm-panel .form-grid {
    grid-template-columns: 1fr;
  }
  .sidebar-header {
    min-height: 88px;
  }
  .sidebar .brand-logo {
    width: 180px;
  }
  .sidebar .nav-group {
    margin-bottom: 16px;
  }
  .sidebar .nav-link {
    min-height: 44px;
  }
  .sidebar-quick-actions {
    padding: 10px 16px 16px;
  }
  .schedule-create-region {
    padding: 16px;
  }
  .schedule-create-region .form-grid {
    grid-template-columns: 1fr;
  }
  .import-workbench {
    grid-template-columns: 1fr;
  }
  .import-workbench > section {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .pos-layout .pos-secondary-actions {
    gap: 7px;
  }
  .pos-layout .pos-secondary-actions > .button {
    min-height: 44px;
  }
  .page-navigation-links {
    gap: 18px;
  }
  .page-navigation .tab {
    font-size: 12px;
  }
  .topbar .header-actions {
    flex-shrink: 0;
  }
}
html[data-theme='dark'] .app-body,
html[data-theme='dark'] .settings-workbench {
  background: var(--bg);
}
html[data-theme='dark'] .sidebar .nav-link.active {
  background: var(--orange-soft);
  color: var(--accent-ink);
}
html[data-theme='dark'] .page-navigation .tab.active {
  color: var(--accent-ink);
}
html[data-theme='dark'] .topbar,
html[data-theme='dark'] .pos-toolbar {
  background: var(--surface);
}
html[data-theme='dark'] .page-dashboard .stat-icon {
  background: var(--raised);
  color: var(--accent-ink);
}
html[data-theme='dark'] dialog.calm-panel.centered-dialog {
  box-shadow: 0 24px 70px #0007;
}
html[data-theme='dark'] .order-status-tab.active {
  color: var(--accent-ink);
}
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-link,
  .sidebar .nav-link .icon {
    transition: none;
  }
}
/* Customer menu/cart 3: narrow branded catalogue, category rail and compact rows.
   This intentionally replaces the superseded restaurant-reference tile grid. */
.guest-app.qr-menu {
  position: relative;
  --restaurant-width: 760px;
  width: 100%;
  max-width: 760px;
  padding: 0 18px calc(var(--qr-bottom-height, 90px) + 28px);
  font-size: 14px;
}
.qr-menu .guest-header {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 100px;
  padding: 20px 0 16px;
  border: 0;
  background: transparent;
}
.qr-menu .qr-restaurant-identity {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  min-width: 0;
}
.qr-menu .guest-header h1 {
  font-size: 21px;
  line-height: 1.25;
}
.qr-menu .guest-header p {
  font-size: 12px;
  line-height: 1.4;
}
.qr-menu .qr-restaurant-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.qr-menu .qr-table-trigger {
  display: none;
}
.qr-menu .guest-header .header-actions {
  display: flex;
  gap: 6px;
  flex: none;
}
.qr-menu .guest-header .icon-button {
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  background: transparent;
}
.qr-menu .qr-session {
  margin: 0 0 14px;
  border: 0;
  padding: 10px 12px;
  background: var(--raised);
  border-radius: 6px;
  font-size: 12px;
}
.qr-menu .qr-session > div {
  gap: 12px;
}
.qr-menu .qr-session [role='status'] {
  font-size: 11px;
}
.qr-menu .qr-browse-tools {
  display: flex;
  gap: 10px;
  margin: 16px 0;
}
.qr-menu .qr-menu-search {
  flex: 1;
  max-width: none;
  border-radius: 6px;
  margin: 0;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.qr-menu .qr-layout-choice {
  display: flex;
  gap: 4px;
}
.qr-menu .qr-layout-choice .icon-button {
  width: 30px;
  height: 34px;
  min-width: 30px;
  padding: 6px;
  border-radius: 5px;
}
.qr-menu .qr-catalogue-layout {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.qr-menu .guest-menu-filters {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100dvh - 160px);
  padding: 0;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  gap: 4px;
}
.qr-menu .guest-menu-filters .category-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  width: 100%;
  padding: 10px 6px;
  border-radius: 0;
  border: 0;
  font-size: 11px;
  font-weight: 500;
  white-space: normal;
  background: transparent;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
}
.qr-menu .guest-menu-filters .category-chip .icon {
  display: block;
  width: 22px;
  height: 22px;
}
.qr-menu .guest-menu-filters .category-chip.active {
  color: var(--primary);
  background: var(--orange-soft);
  box-shadow: inset 2px 0 var(--primary);
}
.qr-menu .qr-food-section {
  margin: 0 0 26px;
}
.qr-menu .qr-food-section > h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 14px;
  font-weight: 700;
}
.qr-menu .qr-food-card {
  border: 0;
  background: transparent;
  border-radius: 0;
}
.qr-menu[data-menu-columns='1'] .qr-food-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.qr-menu[data-menu-columns='1'] .qr-food-open {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 80px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.qr-menu[data-menu-columns='1'] .qr-food-image {
  width: 82px;
  height: 86px;
  border-radius: 6px;
  margin: 0;
}
.qr-menu[data-menu-columns='1'] .qr-food-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.qr-menu .qr-food-copy h3 {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  margin: 0;
}
.qr-menu .qr-food-copy p {
  font-size: 12px;
  line-height: 1.45;
  margin-top: 5px;
  display: block;
}
.qr-menu[data-menu-columns='1'] .qr-food-purchase {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: auto;
  padding: 0;
}
.qr-menu .qr-food-purchase > strong {
  font-size: 12px;
}
.qr-menu .qr-food-add {
  border-radius: 5px;
  min-width: 54px;
  padding: 6px 10px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 12px;
  font-weight: 600;
}
.qr-menu[data-menu-columns='2'] .qr-food-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.qr-menu[data-menu-columns='2'] .qr-food-open {
  border-radius: 7px;
  border: 1px solid var(--line);
}
.qr-menu[data-menu-columns='2'] .qr-food-image {
  height: 130px;
  aspect-ratio: auto;
}
.qr-menu[data-menu-columns='2'] .qr-food-copy {
  padding: 12px;
}
.qr-menu[data-menu-columns='2'] .qr-food-purchase {
  padding: 0 12px 12px;
}
.qr-menu .guest-bottom {
  width: 100%;
  max-width: 760px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  padding: 12px 18px;
  gap: 10px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.qr-menu .guest-bottom .button {
  min-height: 46px;
  padding: 10px;
  font-size: 12px;
  border-radius: 7px;
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.qr-menu .guest-bottom .button:not(.primary) {
  border: 0;
  background: transparent;
}
.qr-menu .guest-bottom .button span {
  font-size: 12px;
}
.qr-menu .qr-carousel {
  border: 0;
  border-radius: 8px;
  margin: 12px 0 18px;
}
.qr-menu .qr-banner-image {
  aspect-ratio: 2.5/1;
}
.qr-menu .qr-slide-copy {
  padding: 12px 16px;
}
.qr-menu .qr-slide-copy h2 {
  font-size: 18px;
}
.qr-menu .qr-carousel-controls {
  padding: 8px;
}
.qr-menu .qr-menu-credit {
  margin: 26px 0 0;
  font-size: 10px;
}
.qr-menu .qr-menu-credit .brand-logo {
  max-width: 105px;
}
.qr-menu .qr-food-image .qr-food-placeholder {
  border-radius: 6px;
}
body:has(.qr-menu) dialog.calm-panel[open]:not(.confirmation-dialog) {
  inset: auto auto 0 50%;
  transform: translateX(-50%);
  margin: 0;
  width: min(760px, 100vw);
  max-width: 100vw;
  height: auto;
  max-height: 90dvh;
  border-radius: 18px 18px 0 0;
  animation: approved-guest-sheet 160ms ease-out;
}
.guest-bill-balance strong,
.guest-amount-due {
  color: var(--primary);
}
.guest-service-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.guest-service-choice {
  border-radius: 7px;
  background: var(--raised);
  border: 1px solid transparent;
  min-height: 110px;
}
.guest-service-choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--orange-soft);
}
.guest-service-choice .icon {
  width: 34px;
  height: 34px;
}
.guest-service-quantity {
  padding-block: 12px;
}
.guest-cart-dialog .guest-cart-items {
  padding: 0;
}
.guest-cart-dialog .cart-line {
  padding-block: 16px;
}
.guest-cart-dialog .grand-total {
  font-size: 16px;
}
.guest-cart-dialog .panel-footer {
  position: static;
}
.guest-access-status h3 {
  font-size: 22px;
}
.guest-access-actions .button {
  border-radius: 6px;
}
.approved-storefront-catalogue {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 24px 0;
}
.approved-storefront-catalogue > .restaurant-menu-toolbar {
  display: block;
  position: sticky;
  top: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  min-width: 0;
}
.approved-storefront-catalogue .guest-menu-filters {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-height: 75svh;
  overflow: auto;
  padding: 0 10px 0 0;
  border-right: 1px solid var(--line);
  margin: 0;
  gap: 4px;
}
.approved-storefront-catalogue .category-chip {
  border: 0;
  border-radius: 0;
  min-height: 52px;
  white-space: normal;
  justify-content: center;
  font-size: 12px;
  padding: 10px 7px;
  background: transparent;
  color: var(--muted);
  text-align: center;
}
.approved-storefront-catalogue .category-chip.active {
  background: var(--orange-soft);
  color: var(--primary);
  box-shadow: inset 2px 0 var(--primary);
}
.approved-storefront-content {
  min-width: 0;
}
.approved-storefront-content > .restaurant-search {
  width: 100%;
  border-radius: 6px;
  padding: 10px 14px;
}
.approved-storefront-content .restaurant-introduction {
  padding: 24px 0 0;
}
.approved-storefront-content .restaurant-introduction h1 {
  font-size: 25px;
}
.approved-storefront-content .restaurant-food-section {
  margin-top: 28px;
}
.approved-storefront-content .restaurant-food-section h2 {
  font-size: 21px;
  margin-bottom: 12px;
}
.approved-storefront-content .product-grid {
  display: block;
}
.approved-storefront-content .product-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.approved-storefront-content .product-card > img,
.approved-storefront-content .product-placeholder {
  width: 88px;
  height: 88px;
  aspect-ratio: auto;
  border-radius: 6px;
  object-fit: cover;
}
.approved-storefront-content .product-card-copy {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: center;
}
.approved-storefront-content .product-card-copy > strong {
  font-size: 15px;
}
.approved-storefront-content .product-card-copy > p {
  grid-column: 1;
  grid-row: 2;
  font-size: 12px;
  line-height: 1.5;
}
.approved-storefront-content .product-card-copy > span {
  grid-column: 2;
  grid-row: 1/3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.approved-storefront-content .product-card-copy b {
  width: 30px;
  height: 28px;
  border-radius: 5px;
  font-size: 20px;
}
#website-app {
  max-width: 1120px;
}
#website-app .restaurant-header {
  border-bottom: 1px solid var(--line);
}
#website-app .restaurant-brand {
  font-size: 23px;
}
#website-app .restaurant-location {
  border-radius: 6px;
}
.restaurant-location-dialog {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px #0003;
}
.restaurant-location-dialog::backdrop {
  backdrop-filter: none;
  background: #0006;
}
.location-modes button {
  border-radius: 6px;
}
.location-current {
  border-radius: 6px;
}
#website-app .guest-bottom {
  max-width: 1120px;
}
#website-app .guest-bottom .button {
  border-radius: 6px;
}
@keyframes approved-guest-sheet {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (min-width: 650px) {
  .qr-menu.qr-menu-leading-banner .guest-header {
    max-width: 57%;
    min-height: 152px;
    align-items: flex-start;
    padding-top: 22px;
  }
  .qr-menu.qr-menu-leading-banner > .qr-carousel {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 40%;
    margin: 0;
    height: 132px;
    overflow: hidden;
  }
  .qr-menu.qr-menu-leading-banner > .qr-carousel .qr-banner-image {
    height: 104px;
    aspect-ratio: auto;
  }
  .qr-menu.qr-menu-leading-banner > .qr-carousel .qr-slide-copy {
    display: none;
  }
  .qr-menu.qr-menu-leading-banner > .qr-carousel .qr-carousel-controls {
    padding: 1px 6px;
    font-size: 10px;
  }
  .qr-menu.qr-menu-leading-banner .guest-header .header-actions {
    flex-direction: column;
  }
  .qr-menu .guest-cart-dialog {
    min-height: 0;
  }
}
@media (max-width: 649px) {
  .guest-app.qr-menu {
    padding: 0 12px calc(var(--qr-bottom-height, 90px) + 24px);
  }
  .qr-menu .guest-header {
    display: flex;
    min-height: 86px;
    padding: 16px 0;
    gap: 8px;
  }
  .qr-menu .qr-table-trigger {
    display: none;
  }
  .qr-menu .guest-header h1 {
    font-size: 19px;
  }
  .qr-menu .guest-header .qr-restaurant-logo {
    width: 40px;
    height: 40px;
  }
  .qr-menu .qr-catalogue-layout {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
  }
  .qr-menu .guest-menu-filters .category-chip {
    font-size: 10px;
    min-height: 62px;
    padding: 10px 4px;
    gap: 5px;
  }
  .qr-menu .qr-food-section > h2 {
    font-size: 18px;
  }
  .qr-menu[data-menu-columns='1'] .qr-food-open {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
  }
  .qr-menu[data-menu-columns='1'] .qr-food-image {
    width: 64px;
    height: 70px;
    grid-row: 1/3;
  }
  .qr-menu[data-menu-columns='1'] .qr-food-copy {
    grid-column: 2;
    grid-row: 1;
  }
  .qr-menu[data-menu-columns='1'] .qr-food-purchase {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
  }
  .qr-menu .qr-food-copy h3 {
    font-size: 13px;
  }
  .qr-menu .qr-food-copy p {
    font-size: 11px;
    line-height: 1.4;
    margin-top: 4px;
  }
  .qr-menu .qr-food-add {
    min-width: 44px;
    padding: 5px 8px;
    font-size: 11px;
  }
  .qr-menu .guest-bottom {
    padding: 10px 12px;
    gap: 7px;
  }
  .qr-menu .guest-bottom .button {
    font-size: 10px;
    padding: 8px 5px;
    min-height: 46px;
    gap: 5px;
  }
  .qr-menu .guest-bottom .button span {
    font-size: 10px;
  }
  .qr-menu .guest-bottom .icon {
    width: 17px;
    height: 17px;
  }
  .qr-menu .qr-session {
    font-size: 11px;
  }
  .qr-menu .qr-menu-search input {
    font-size: 12px;
  }
  .qr-menu .qr-browse-tools {
    gap: 7px;
  }
  .qr-menu .qr-layout-choice .icon-button {
    width: 27px;
    min-width: 27px;
    padding: 5px;
  }
  .qr-menu[data-menu-columns='2'] .qr-food-list {
    gap: 10px;
  }
  .qr-menu[data-menu-columns='2'] .qr-food-image {
    height: 110px;
  }
  .qr-menu[data-menu-columns='2'] .qr-food-copy {
    padding: 10px;
  }
  .qr-menu[data-menu-columns='2'] .qr-food-purchase {
    padding: 0 10px 10px;
    flex-wrap: wrap;
  }
  .qr-menu .qr-banner-image {
    aspect-ratio: 2.5/1;
  }
  .approved-storefront-catalogue {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    margin-top: 18px;
  }
  .approved-storefront-catalogue .guest-menu-filters {
    padding-right: 6px;
  }
  .approved-storefront-catalogue .category-chip {
    font-size: 11px;
    padding: 9px 5px;
    min-height: 50px;
  }
  .approved-storefront-content .restaurant-introduction h1 {
    font-size: 22px;
  }
  .approved-storefront-content .restaurant-introduction > p {
    font-size: 12px;
  }
  .approved-storefront-content .product-card {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
  }
  .approved-storefront-content .product-card > img,
  .approved-storefront-content .product-placeholder {
    width: 66px;
    height: 72px;
  }
  .approved-storefront-content .product-card-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .approved-storefront-content .product-card-copy > strong {
    font-size: 13px;
  }
  .approved-storefront-content .product-card-copy > p {
    font-size: 11px;
    line-height: 1.4;
  }
  .approved-storefront-content .product-card-copy > span {
    flex-direction: row;
    font-size: 12px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  #website-app .restaurant-header {
    padding: 12px 0;
  }
  #website-app .restaurant-brand {
    font-size: 20px;
  }
}
html[data-theme='dark'] .qr-menu .guest-menu-filters .category-chip.active,
html[data-theme='dark'] .approved-storefront-catalogue .category-chip.active {
  color: var(--accent-ink);
}
@media (prefers-reduced-motion: reduce) {
  body:has(.qr-menu) dialog.calm-panel[open]:not(.confirmation-dialog) {
    animation: none;
  }
}

/* Supplier account 1 retains its ledger plus adjacent payment workbench. */
dialog.calm-panel.supplier-account-dialog {
  inset: 80px 0 0 var(--sidebar-width);
  margin: 0;
  width: auto;
  max-width: none;
  height: calc(100dvh - 80px);
  max-height: calc(100dvh - 80px);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
dialog.supplier-account-dialog::backdrop {
  background: #0002;
}
.supplier-account-dialog .supplier-account-workspace {
  grid-template-columns: minmax(0, 1.6fr) minmax(310px, 1fr);
  gap: 28px;
}
.supplier-account-dialog .panel-body {
  padding: 24px 28px;
}
.supplier-account-dialog .panel-header {
  padding: 22px 28px;
}
.supplier-account-dialog .supplier-payment-region {
  padding-left: 24px;
}
.supplier-account-dialog .supplier-account-totals dd {
  font-size: 23px;
}
.supplier-account-dialog .supplier-account-totals > div:last-child dd {
  color: var(--primary);
}
@media (max-width: 1199px) {
  dialog.calm-panel.supplier-account-dialog {
    inset: 0;
    margin: 0;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }
  .supplier-account-dialog .supplier-account-workspace {
    grid-template-columns: minmax(0, 1.4fr) minmax(270px, 1fr);
    gap: 20px;
  }
}
@media (max-width: 699px) {
  .supplier-account-dialog .supplier-account-workspace {
    grid-template-columns: 1fr;
  }
  .supplier-account-dialog .supplier-payment-region {
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .supplier-account-dialog .panel-body,
  .supplier-account-dialog .panel-header {
    padding: 18px;
  }
  .supplier-account-dialog .supplier-account-totals {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .supplier-account-dialog .supplier-account-totals > div {
    padding: 0;
    border: 0;
  }
}

#main:has(.settings-workbench) .settings-workbench:has(#settings-search-clear:not([hidden])) {
  grid-template-rows: 174px minmax(0, 1fr);
}