/* Stacked profile, ui-spec 2.8. Above --stacked-max-width nothing here applies. */
.order-summary {
  display: none;
}

.order-rail__dock,
.payment-rail__dock {
  display: contents;
}

.appbar__initials,
.appbar__user-first {
  display: none;
}

@media (max-width: 1059.98px) {
  .appbar {
    padding: 0 var(--space-md);
    gap: var(--space-sm);
  }

  .appbar__left,
  .appbar__right {
    gap: var(--space-sm);
  }

  .appbar__clock,
  .appbar__user-full {
    display: none;
  }

  .appbar__user-first {
    display: inline;
  }

  .sale-screen,
  .payment-screen {
    flex-direction: column;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
  }

  .sale-screen__left {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: var(--space-md);
  }

  .sale-screen__left > .search,
  .sale-screen__left > .search-error,
  .sale-screen__left > .cat-row-wrap {
    flex: 0 0 auto;
  }

  .sale-screen__left .product-grid,
  .sale-screen__left .grid-empty {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .sale-screen__left .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    align-content: start;
  }

  .product-card__name {
    overflow-wrap: anywhere;
  }

  .order-rail {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    padding: 0;
    overflow: visible;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
  }

  .order-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    order: 1;
    width: 100%;
    height: 52px;
    padding: 0 var(--space-md);
    border: none;
    background: var(--surface-alt);
    color: var(--text-primary);
    font-size: var(--font-label-size);
    font-weight: 700;
    text-align: left;
  }

  .order-summary__info small {
    display: block;
    font-weight: 400;
    font-size: var(--font-caption-size);
    color: var(--text-secondary);
  }

  .order-summary__chevron {
    width: 48px;
    text-align: center;
  }

  .order-rail__lines {
    order: 2;
    flex: 0 1 auto;
    overflow-y: auto;
    max-height: calc(50vh - 266px);
    max-height: calc(50dvh - 266px);
    min-height: 110px;
    padding: 0 var(--space-md);
  }

  .order-rail__lines .order-line {
    flex-wrap: wrap;
    padding: var(--space-sm);
  }

  .order-rail__lines .order-line__info {
    flex: 1 1 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .order-rail .totals {
    order: 3;
    margin: var(--space-sm) var(--space-md);
  }

  .order-rail .actions {
    display: contents;
  }

  .order-rail .actions .btn {
    width: auto;
  }

  .order-rail__kitchen {
    order: 4;
  }

  .order-rail__cancel {
    order: 5;
  }

  .order-rail .toast {
    order: 6;
  }

  .order-rail .banner {
    order: 7;
  }

  .order-rail .over-limit-alert {
    order: 8;
  }

  .order-rail__kitchen,
  .order-rail__cancel,
  .order-rail .toast,
  .order-rail .banner,
  .order-rail .over-limit-alert {
    margin: 0 var(--space-md) var(--space-sm);
  }

  .order-rail__dock {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    order: 9;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));
  }

  .order-rail--collapsed .order-rail__lines,
  .order-rail--collapsed .totals,
  .order-rail--collapsed .order-rail__kitchen,
  .order-rail--collapsed .order-rail__cancel {
    display: none;
  }

  .payment-screen__left {
    width: 100%;
    flex: 0 0 auto;
    max-height: 120px;
    overflow-y: auto;
    padding: var(--space-md) var(--space-md) 0;
  }

  .payment-rail {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-md);
  }

  .tender-row {
    flex-direction: column;
    align-items: stretch;
  }

  .tender-toggle button {
    flex: 1 1 0;
    padding: 0;
  }

  .tender-row .field {
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-body-size);
    background: var(--surface);
  }

  .tender-row__remove {
    align-self: flex-end;
  }

  .payment-rail__dock {
    display: flex;
    flex-direction: column-reverse;
    position: sticky;
    bottom: 0;
    margin: var(--space-sm) calc(-1 * var(--space-md)) 0;
    padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  .payment-rail__dock .btn {
    width: 100%;
  }

  .payment-rail__dock .caption {
    margin: 0 0 var(--space-xs);
  }
}

@media (min-width: 768px) and (max-width: 1059.98px) {
  .sale-screen__left {
    padding: var(--space-md) var(--space-lg);
  }

  .sale-screen__left .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .appbar__user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text-primary);
    font-weight: 700;
  }

  .appbar__user-first {
    display: none;
  }

  .appbar__initials {
    display: inline;
  }
}