/**
 * POS wizard flow — Đồng Thuận parity (mobile steps + desktop split).
 * Load after orders-pos-modal-mobile-fullscreen.css.
 */

@layer pages {
  /*
   * Beat style.css `.pos-order-layout.pos-real { display:grid }` (higher selector count).
   * Mobile wizard must be a single full-width column — not a 2-col grid that squeezes step 1–3.
   */
  #modal .modal-card.pos-modal .pos-main.pos-order-layout.pos-real.pos-wizard-shell,
  #modal .modal-card.pos-modal .pos-main.pos-wizard-shell {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
  }

  #modal .modal-card.pos-modal .pos-wizard-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
  }

  #modal .modal-card.pos-modal .pos-wizard-col--left,
  #modal .modal-card.pos-modal .pos-wizard-col--right {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  #modal .modal-card.pos-modal .pos-wizard-pane {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #modal .pos-wizard-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
  }

  #modal .pos-modal-headline--dt {
    padding: 6px 12px 4px;
    min-height: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  #modal .pos-modal-headline--dt .tiny-date {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--hydra-font-sans, "Be Vietnam Pro", system-ui, sans-serif);
  }

  #modal .pos-wizard-nav {
    flex: 0 0 auto;
    padding: 4px 0 8px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 8px;
  }

  #modal .pos-wizard-progress {
    display: block;
    padding: 0;
    width: 100%;
  }

  #modal .pos-wizard-progress__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5rem;
    align-items: center;
    gap: 8px;
  }

  #modal .pos-wizard-progress__meta {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    color: #0f172a;
    line-height: 1.25;
    min-width: 0;
  }

  #modal .pos-wizard-progress__bar {
    height: 3px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
  }

  #modal .pos-wizard-progress__bar span {
    display: block;
    height: 100%;
    background: #ea580c;
    border-radius: inherit;
    transition: width 0.2s ease;
  }

  #modal .pos-wizard-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem;
    align-items: center;
  }

  #modal .pos-wizard-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
  }

  #modal .pos-wizard-step__idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
  }

  #modal .pos-wizard-step__label {
    white-space: nowrap;
  }

  #modal .pos-wizard-step.is-active {
    color: #0f172a;
  }

  #modal .pos-wizard-step.is-active .pos-wizard-step__idx,
  #modal .pos-wizard-step.is-done .pos-wizard-step__idx,
  #modal .pos-wizard-step.is-complete .pos-wizard-step__idx {
    background: #ea580c;
    border-color: #ea580c;
    color: #fff;
  }

  #modal .pos-wizard-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 0.35rem);
    width: clamp(1.25rem, 4vw, 3rem);
    height: 1px;
    background: #cbd5e1;
  }

  #modal .pos-wizard-body {
    flex: 1 1 auto;
    min-height: 0;
  }

  #modal .pos-wizard-pane__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.25;
  }

  #modal .pos-wizard-pane__hint {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.35;
    color: #64748b;
  }

  #modal .pos-walkin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  #modal .pos-walkin-toggle {
    min-height: 36px;
    border-radius: 999px;
    padding: 0 14px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
  }

  #modal .pos-walkin-toggle.is-on {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
    box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.15);
  }

  #modal .pos-fulfillment-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 0 8px;
  }

  #modal .pos-wizard-pane--customer .pos-fulfillment-pills {
    margin: 0 0 6px;
  }

  #modal .pos-fulfillment-pill {
    flex: 1 1 0;
    display: block;
    cursor: pointer;
  }

  #modal .pos-fulfillment-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  #modal .pos-fulfillment-pill span {
    display: block;
    text-align: center;
    min-height: 32px;
    line-height: 32px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    padding: 0 6px;
  }

  #modal .pos-fulfillment-pill input:checked + span {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
  }

  #modal .pos-product-pane-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 6px;
    min-width: 0;
  }

  #modal .pos-product-pane-head .pos-product-search-row {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  #modal .pos-oos-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 10.5rem;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
    overflow: hidden;
  }

  #modal .pos-oos-toggle__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  #modal .pos-oos-toggle__count {
    min-width: 1.25rem;
    padding: 1px 5px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  #modal .pos-oos-toggle.is-on {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
  }

  #modal .pos-oos-toggle.is-on .pos-oos-toggle__count {
    background: #ffedd5;
    color: #9a3412;
  }

  #modal .pos-oos-toggle:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  #modal .pos-product-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    border: none;
    border-radius: 12px;
    background: #f1f5f9;
  }

  #modal .pos-product-list-empty {
    grid-column: 1 / -1;
    margin: 8px 4px;
    font-size: 12px;
    color: #64748b;
  }

  /* Search suggest keeps compact horizontal rows */
  #modal .pos-prow {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #eef2f7;
    border-radius: 0;
    background: #fff;
    text-align: left;
    min-height: 0;
    font-family: var(--hydra-font-sans, "Be Vietnam Pro", system-ui, sans-serif);
    box-shadow: none;
    transition: background 120ms ease, box-shadow 120ms ease;
  }

  #modal .pos-prow:last-child {
    border-bottom: none;
  }

  #modal .pos-prow__art {
    flex-shrink: 0;
  }

  #modal .pos-prow .pos-pcard__thumb {
    width: 52px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(160deg, #f1f5f9 0%, #e8edf3 100%);
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #modal .pos-prow .pos-pcard__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transform: scale(1.14);
    transform-origin: center center;
  }

  #modal .pos-prow__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #modal .pos-prow .pos-pcard__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0f172a;
  }

  #modal .pos-prow__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 2px;
  }

  #modal .pos-prow__price {
    font-size: 13px;
    font-weight: 800;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  #modal .pos-prow__stock {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
  }

  #modal .pos-prow__code {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
  }

  #modal .pos-prow__oos {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 1px 5px;
    border-radius: 4px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
  }

  #modal .pos-prow.is-out-of-stock {
    opacity: 0.72;
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: none;
  }

  #modal .pos-prow.is-out-of-stock .pos-pcard__name {
    color: #64748b;
  }

  #modal .pos-prow.is-out-of-stock .pos-prow__price {
    color: #94a3b8;
  }

  #modal .pos-prow__foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    flex-shrink: 0;
  }

  #modal .pos-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  }

  #modal .pos-prow .pos-qty-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 0;
    border: none;
    border-right: 1px solid #e2e8f0;
    background: #f8fafc;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    color: #334155;
    touch-action: manipulation;
    user-select: none;
    padding: 0;
  }

  #modal .pos-prow .pos-qty-btn-plus {
    border-right: none;
    border-left: 1px solid #e2e8f0;
    background: #fff7ed;
    color: #c2410c;
  }

  #modal .pos-prow .pos-qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  #modal .pos-prow .pos-qty-val {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0 4px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
    background: #fff;
  }

  #modal .pos-prow__remove {
    display: none;
  }

  #modal .pos-prow__remove.hidden {
    display: none;
  }

  #modal .pos-prow.is-in-cart {
    background: #fffbf7;
    box-shadow: inset 3px 0 0 #ea580c;
  }

  #modal .pos-prow.is-in-cart .pos-pcard__name {
    color: #0f172a;
  }

  /* Catalog gallery tiles (2-col mobile, auto-fill desktop) */
  #modal .pos-product-list > .pos-prow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: auto;
    min-height: 100%;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px #e2e8f0;
    overflow: hidden;
    transition: background 120ms ease, box-shadow 120ms ease;
  }

  #modal .pos-product-list > .pos-prow.is-in-cart {
    background: #fffbf7;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.45);
  }

  #modal .pos-product-list > .pos-prow .pos-prow__art {
    width: 100%;
  }

  #modal .pos-product-list > .pos-prow .pos-pcard__thumb {
    width: 100%;
    height: clamp(68px, 24vw, 100px);
    aspect-ratio: auto;
    max-height: 100px;
    border-radius: 0;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  }

  #modal .pos-product-list > .pos-prow .pos-pcard__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(1.08);
    transform-origin: center center;
  }

  #modal .pos-product-list > .pos-prow .pos-prow__main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 8px 4px;
    gap: 3px;
  }

  #modal .pos-product-list > .pos-prow .pos-pcard__name {
    font-size: 12px;
    line-height: 1.25;
    min-height: 0;
    -webkit-line-clamp: 2;
  }

  #modal .pos-product-list > .pos-prow .pos-prow__price {
    font-size: 13px;
    margin-top: 0;
  }

  #modal .pos-product-list > .pos-prow .pos-prow__meta {
    margin-top: 0;
    gap: 4px;
  }

  #modal .pos-product-list > .pos-prow .pos-prow__code {
    flex: 1 1 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #modal .pos-product-list > .pos-prow .pos-prow__foot {
    padding: 0 6px 8px;
    margin-top: auto;
  }

  #modal .pos-product-list > .pos-prow .pos-qty-stepper {
    width: 100%;
    display: flex;
  }

  #modal .pos-product-list > .pos-prow .pos-qty-val {
    flex: 1 1 auto;
    min-width: 0;
  }

  #modal .pos-suggest .pos-prow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 12px;
    width: 100%;
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f7;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }

  #modal .pos-suggest .pos-prow.is-in-cart {
    box-shadow: inset 3px 0 0 #ea580c;
  }

  #modal .pos-suggest .pos-prow .pos-pcard__thumb {
    width: 52px;
    height: 72px;
    border-radius: 8px;
    aspect-ratio: auto;
  }

  #modal .pos-suggest .pos-prow .pos-pcard__thumb img {
    transform: scale(1.14);
  }

  #modal .pos-suggest .pos-prow .pos-prow__main {
    padding: 0;
    min-height: 0;
  }

  #modal .pos-suggest .pos-prow .pos-pcard__name {
    font-size: 14px;
    min-height: 0;
  }

  #modal .pos-suggest .pos-prow__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0;
    margin-top: 0;
  }

  #modal .pos-suggest .pos-prow .pos-qty-stepper {
    width: auto;
  }

  #modal .pos-pcard {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    min-height: 72px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }

  #modal .pos-pcard:hover,
  #modal .pos-pcard:focus-visible {
    border-color: #fdba74;
    box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.2);
    outline: none;
  }

  #modal .pos-pcard.is-in-cart {
    border-color: #16a34a;
    background: #f0fdf4;
  }

  #modal .pos-pcard__thumb {
    width: 52px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #modal .pos-pcard__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #modal .pos-pcard__thumb-fallback {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #64748b;
    text-transform: uppercase;
    padding: 4px;
    text-align: center;
    line-height: 1.2;
  }

  #modal .pos-pcard__name {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #modal .pos-pcard__code {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    margin-top: 2px;
  }

  #modal .pos-pcard__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
  }

  #modal .pos-pcard__price {
    font-size: 12px;
    font-weight: 800;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
  }

  #modal .pos-pcard__stock {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
  }

  #modal .pos-pcard__picked {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 999px;
    padding: 2px 6px;
  }

  #modal .pos-pcard.is-in-cart .pos-pcard__picked {
    display: inline-block;
  }

  #modal .pos-suggest .pos-pcard {
    width: 100%;
    margin: 0;
  }

  #modal .pos-suggest .pos-option.pos-pcard-option {
    padding: 0;
    border: 0;
    background: transparent;
  }

  #modal .pos-suggest .pos-option.pos-pcard-option.active .pos-pcard {
    border-color: #ea580c;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.25);
  }

  #modal .pos-barcode-scan-btn {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  #modal .pos-cart-bar {
    display: none !important;
  }

  #modal .pos-cart-bar__meta {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  #modal .pos-cart-bar__count {
    font-size: 12px;
    font-weight: 600;
    color: #9a3412;
  }

  #modal .pos-cart-bar__total {
    font-size: 18px;
    font-weight: 800;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  #modal .pos-cart-bar .btn.primary {
    flex: 0 0 auto;
    min-width: 108px;
    min-height: 42px;
    font-weight: 800;
  }

  #modal .pos-footer-actions--wizard-nav {
    display: none;
    gap: 8px;
    width: 100%;
    justify-content: stretch;
  }

  #modal .pos-footer-actions--wizard-nav .btn {
    flex: 1 1 0;
    min-height: 40px;
    font-weight: 700;
  }

  #modal .pos-footer-actions--wizard-nav #posWizardBack {
    flex: 0 1 38%;
    max-width: 9.5rem;
    min-height: 38px;
    font-weight: 650;
    font-size: 13px;
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #475569;
  }

  #modal .pos-footer-actions--wizard-nav #posWizardNext {
    flex: 1 1 auto;
    min-height: 38px;
    font-weight: 800;
    font-size: 13px;
  }

  #modal .pos-success-sheet {
    display: none !important;
  }

  #modal .pos-review-sections {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
  }

  #modal .pos-review-block {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    padding: 8px 10px;
  }

  #modal .pos-review-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }

  #modal .pos-review-block__title {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #64748b;
  }

  #modal .pos-review-block__body {
    font-size: 12px;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  #modal .pos-review-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: baseline;
  }

  #modal .pos-review-line__name {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #modal .pos-review-line__qty {
    font-weight: 700;
    color: #475569;
    font-variant-numeric: tabular-nums;
  }

  #modal .pos-review-kv {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
  }

  #modal .pos-review-kv strong {
    font-weight: 700;
    text-align: right;
  }

  #modal .pos-confirm-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  #modal .pos-confirm-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
  }

  #modal .pos-confirm-section-head__title {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #0f172a;
  }

  #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-l1,
  #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-l1.pos-confirm-l1 {
    position: static;
    top: auto;
    z-index: 1;
  }

  #modal .pos-confirm-l1,
  #modal .pos-l1.pos-confirm-l1 {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
  }

  #modal .pos-l1__status {
    min-width: 0;
    font-size: 12px;
    font-weight: 650;
    color: #475569;
    line-height: 1.25;
  }

  #modal .pos-l1__status strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
  }

  #modal .pos-l1__due {
    flex: 0 0 auto;
    text-align: right;
  }

  #modal .pos-l1__due-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #9a3412;
  }

  #modal .pos-l1__due-amt {
    font-size: 22px;
    font-weight: 800;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  #modal .party-grid {
    display: grid;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
  }

  #modal .party-block {
    padding: 10px 12px;
  }

  #modal .party-block + .party-block {
    border-top: 1px solid #e2e8f0;
    background: #fafafa;
  }

  #modal .party-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
  }

  #modal .party-main {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
  }

  #modal .party-sub {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
  }

  #modal .party-fee {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 650;
    color: #475569;
  }

  #modal .party-fee strong {
    font-variant-numeric: tabular-nums;
    color: #0f172a;
  }

  #modal .pos-confirm-block--notes {
    padding-top: 2px;
  }

  #modal .pos-confirm-note-row {
    margin: 0;
  }

  #modal .pos-confirm-pay-sheet.pay-block {
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 10px 12px 12px;
    gap: 8px;
    overflow: visible;
  }

  #modal .pos-confirm-collect-hero {
    display: none !important;
  }

  #modal .pos-confirm-block {
    min-width: 0;
  }

  #modal .pos-confirm-block--party {
    padding-top: 4px;
  }

  #modal .pos-confirm-block--bill {
    padding-top: 4px;
  }

  #modal .pos-confirm-pay-sheet {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  #modal .pos-confirm-pay-sheet > .pos-confirm-pay-fields__controls,
  #modal .pos-confirm-pay-sheet > .pos-confirm-pay-status,
  #modal .pos-confirm-pay-sheet > .pos-confirm-pay-fields__adjust,
  #modal .pos-confirm-pay-sheet > .pos-confirm-bill-lines {
    margin: 0;
  }

  #modal .pos-confirm-pay-fields__tail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
  }

  #modal .pos-confirm-collect-hero {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    padding: 6px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fdba74;
  }

  #modal .pos-confirm-collect-hero__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #9a3412;
  }

  #modal .pos-confirm-collect-hero__amount {
    font-size: clamp(20px, 5.5vw, 24px);
    font-weight: 800;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  #modal .pos-confirm-pay-status {
    margin: -2px 0 0;
    padding: 0 2px;
    font-size: 11px;
    font-weight: 650;
    color: #475569;
    line-height: 1.25;
  }

  #modal .pos-confirm-bill-lines {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 2px 0 0;
  }

  #modal .pos-confirm-bill-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
    border-bottom: 1px solid #f1f5f9;
  }

  #modal .pos-confirm-bill-line:last-child {
    border-bottom: none;
  }

  #modal .pos-confirm-bill-line__label {
    font-weight: 650;
    color: #64748b;
    flex: 0 1 auto;
  }

  #modal .pos-confirm-bill-line__value {
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    text-align: right;
    flex: 0 0 auto;
  }

  #modal .pos-confirm-bill-line--due .pos-confirm-bill-line__label,
  #modal .pos-confirm-bill-line--due .pos-confirm-bill-line__value {
    font-weight: 800;
    color: #9a3412;
  }

  #modal .pos-confirm-bill-line--staff {
    display: none !important;
  }

  @media (min-width: 641px) {
    #modal .pos-confirm-bill-line--staff {
      display: flex !important;
    }

    #modal .pos-confirm-block--secondary {
      margin-top: 4px;
    }
  }

  /* 2×2: ship | discount / paid | COD (DOM order in app.js) */
  #modal .pos-confirm-pay-fields__adjust {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: row;
    gap: 4px 8px;
    align-items: stretch;
  }

  #modal .pos-confirm-pay-fields__adjust .pos-confirm-pay-row--cod {
    grid-column: auto;
  }

  #modal .pos-confirm-pay-fields__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 8px;
    align-items: stretch;
  }

  #modal #modalForm label.pos-confirm-pay-row,
  #modal .pos-confirm-pay-row {
    display: grid !important;
    flex-direction: unset;
    grid-template-columns: minmax(5rem, 42%) minmax(0, 1fr);
    gap: 4px 6px;
    align-items: start;
    font-size: 11px;
    font-weight: 650;
    color: #64748b;
    margin: 0;
    min-height: 44px;
    overflow: visible;
  }

  #modal .pos-confirm-pay-row__label {
    display: block;
    line-height: 1.25;
    padding: 9px 2px 0 0;
    background: none;
    position: static;
    transform: none;
    pointer-events: none;
    overflow: visible;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
  }

  #modal .pos-confirm-pay-row--note,
  #modal .pos-confirm-note-row {
    grid-template-columns: minmax(3.25rem, 26%) minmax(0, 1fr);
  }

  #modal .pos-confirm-block--notes {
    overflow: visible;
  }

  #modal .pos-confirm-pay-row--full {
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: 44px;
  }

  #modal .pos-confirm-pay-row input,
  #modal .pos-confirm-pay-row select {
    min-height: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }

  #modal .pos-confirm-secondary__summary {
    list-style: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 8px 0 4px;
    border-top: 1px solid #e2e8f0;
  }

  #modal .pos-confirm-secondary__summary::-webkit-details-marker {
    display: none;
  }

  #modal .pos-confirm-secondary__body {
    font-size: 11px;
    color: #64748b;
    padding: 0 0 6px;
  }

  #modal .pos-confirm-stock-mini {
    display: grid;
    gap: 2px;
    font-size: 11px;
  }

  #modal .pos-summary-strip--confirm-hidden {
    display: none !important;
  }

  #modal .pos-confirm-party {
    padding-top: 0;
  }

  #modal .pos-confirm-party__body {
    font-size: 12px;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  #modal .pos-confirm-party__body--ff {
    margin-top: 2px;
  }

  #modal .pos-cart-zone--confirm .pos-cart-head--confirm {
    display: none;
  }

  #modal .pos-cart-row--mo-pro .pos-cart-row__thumb {
    display: none;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__thumb {
    display: block;
    align-self: start;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__thumb .pos-pcard__thumb {
    width: 40px;
    height: 48px;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__head {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding-top: 1px;
    align-self: start;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__code {
    margin: 3px 0 0;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .oi-name {
    font-size: 12px;
    font-weight: 650;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__money {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    padding-left: 6px;
    flex-shrink: 0;
    align-self: start;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__line-total {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__line-total strong {
    font-weight: inherit;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__unit-qty {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__meta {
    display: none !important;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__summary {
    display: none !important;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__inputs {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding: 0;
    min-width: 0;
    justify-self: start;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-line-field--qty {
    margin: 0;
    padding: 0;
    border: 0;
    min-height: 0;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-line-field__label {
    display: none !important;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-line-field--actual {
    display: none !important;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .oi-del,
  #modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__del {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 650;
    color: #94a3b8;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro {
    position: relative;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro > .oi-del {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    color: #94a3b8 !important;
    background: transparent !important;
  }

  /*
   * Wizard step 3 — beat orders-pos-modal-mobile-fullscreen.css flex card layout
   * (loads before this file but uses !important on generic .pos-cart-row--mo-pro).
   */
  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    flex-direction: unset !important;
    align-items: center !important;
    gap: 0 !important;
    row-gap: 6px !important;
    column-gap: 10px !important;
    padding: 6px 0 !important;
    padding-right: 0 !important;
    min-height: 0 !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__thumb {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__head {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: start !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .oi-name {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.28 !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__money {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    text-align: right !important;
    padding-left: 6px !important;
    align-self: start !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__unit-qty {
    display: none !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__thumb .pos-pcard__thumb {
    width: 40px !important;
    height: 48px !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__meta,
  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__summary {
    display: none !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__inputs {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    justify-self: start !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .oi-del,
  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__del {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-line-field--qty {
    display: block !important;
    flex-direction: row !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-line-field__label {
    display: none !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-line-field--actual {
    display: none !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-line-field input {
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 0 !important;
    text-align: center !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-qty-stepper {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-qty-stepper .pos-qty-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 20px !important;
    flex: 0 0 44px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-qty-stepper .pos-qty-btn:first-child {
    border-radius: 10px 0 0 10px !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-qty-stepper .pos-qty-btn-plus {
    border-radius: 0 10px 10px 0 !important;
    border-left: 0 !important;
  }

  body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-qty-stepper .oi-qty-display {
    width: auto !important;
    min-width: 40px !important;
    max-width: 52px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    padding: 0 6px !important;
    border-top: 1px solid #cbd5e1 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  #modal .pos-cart-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    margin: 0;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-qty-stepper .pos-qty-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #475569;
    border-radius: 0;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-qty-stepper .pos-qty-btn:first-child {
    border-radius: 10px 0 0 10px;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-qty-stepper .pos-qty-btn-plus {
    border-radius: 0 10px 10px 0;
    border-left: 0;
    color: #c2410c;
    background: #fff7ed;
  }

  #modal .pos-wizard-pane--confirm .pos-cart-qty-stepper .oi-qty-display {
    width: auto;
    min-width: 40px;
    max-width: 52px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 6px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: #fff;
    color: #0f172a;
    -moz-appearance: textfield;
  }

  #modal .pos-cart-qty-stepper .oi-qty-display {
    width: 2.35rem;
    min-height: 34px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    padding: 0 2px;
  }

  #modal .pos-cart-qty-stepper .pos-qty-btn {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  #modal .pos-dt-panel--confirm {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  #modal .pos-dt-meta {
    display: none;
  }

  @media (min-width: 641px) {
    #modal .pos-dt-meta {
      display: block;
    }
  }

  #modal .pos-success-sheet__badge {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #dcfce7;
    border: 2px solid #86efac;
    color: #166534;
    font-size: 28px;
    font-weight: 800;
    line-height: 52px;
  }

  #modal .pos-success-sheet__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
  }

  #modal .pos-success-sheet__code {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
  }

  #modal .pos-success-sheet__total {
    margin: 4px 0 0;
    font-size: 28px;
    font-weight: 800;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
  }

  #modal .pos-success-sheet__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(100%, 320px);
    margin-top: 8px;
  }

  #modal .pos-success-sheet__actions .btn {
    min-height: 44px;
    font-weight: 700;
  }

  #modal .pos-success-sheet__qr-note {
    margin: 8px 0 0;
    font-size: 11px;
    color: #94a3b8;
  }

  #modal .pos-draft-btn {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
  }

  #modal .pos-confirm-btn {
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.22);
  }

  #modal .pos-strip-total {
    color: #c2410c;
  }

  #modal .pos-strip-total b {
    font-size: 15px;
  }

  @media (min-width: 641px) {
    #modal .pos-wizard-progress {
      display: none;
    }

    #modal .pos-wizard-steps {
      display: grid;
    }

    #modal .pos-wizard-pane[hidden] {
      display: block !important;
    }

    #modal .pos-wizard-pane__title,
    #modal .pos-wizard-pane__hint {
      display: none;
    }

    #modal .pos-cart-bar {
      display: none !important;
    }

    #modal .pos-product-list {
      max-height: min(52vh, 420px);
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      gap: 10px;
      padding: 8px;
    }

    #modal .modal-card.pos-modal .pos-main.pos-order-layout.pos-real.pos-wizard-shell,
    #modal .modal-card.pos-modal .pos-main.pos-wizard-shell {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 16px;
      align-items: start;
    }

    #modal .pos-wizard-nav {
      grid-column: 1 / -1;
    }

    /* Beat base `.modal-card.pos-modal .pos-wizard-body { display:flex }` (higher selector count). */
    #modal .modal-card.pos-modal .pos-wizard-body {
      display: contents !important;
    }

    #modal .pos-wizard-col--left {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }

    #modal .pos-wizard-col--right {
      grid-column: 2;
      display: grid;
      gap: 10px;
      align-content: start;
      min-width: 0;
    }

    #modal .pos-cart-bar,
    #modal .pos-success-sheet {
      grid-column: 1 / -1;
    }

    #modal .modal-card.order-pos-modal .pos-wizard-pane--confirm .pos-cart-head--confirm,
    #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-head--confirm {
      display: none !important;
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro,
    #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro {
      display: grid !important;
      grid-template-columns: 44px minmax(0, 1fr) auto !important;
      grid-template-rows: auto auto !important;
      column-gap: 10px !important;
      row-gap: 6px !important;
      align-items: center !important;
      padding: 8px 0 !important;
      min-height: 0 !important;
      border-radius: 0 !important;
      border-bottom: 1px solid #f1f5f9 !important;
      background: transparent !important;
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__meta,
    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__summary,
    #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__meta,
    #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-cart-row__summary {
      display: none !important;
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-line-field--actual,
    #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro .pos-line-field--actual {
      display: none !important;
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro > .oi-del,
    #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-cart-row--mo-pro > .oi-del {
      position: static !important;
      width: auto !important;
      height: auto !important;
    }

    #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-confirm-l1 {
      position: sticky;
      top: 0;
      z-index: 5;
    }

    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-wizard-pane--confirm .pos-confirm-l1 {
      position: static;
      top: auto;
      z-index: 1;
    }

    #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-items-wrap.order-pos-items-wrap {
      min-height: 0 !important;
      border: none !important;
      background: transparent !important;
    }

    #modal .modal-card.pos-modal .pos-wizard-pane--confirm .pos-items-scroll {
      min-height: 0 !important;
      overflow: visible !important;
      padding: 0 !important;
    }

    /* Step 3 desktop — PROPOSED 1280 split (SP+party | L1+pay+notes) */
    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-main.pos-order-layout.pos-real.pos-wizard-shell,
    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal .pos-wizard-shell[data-pos-wizard-step="3"].pos-main.pos-order-layout.pos-real.pos-wizard-shell,
    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-main.pos-wizard-shell,
    #modal .pos-wizard-shell[data-pos-wizard-step="3"].pos-main.pos-wizard-shell {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Beat orders-pos-modal-desktop.css `.pos-right { width/max-width: 340px }` on confirm. */
    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-wizard-col--right.pos-right,
    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-wizard-col--right.pos-right,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-wizard-col--right.pos-right {
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-wizard-col--left {
      display: none !important;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-wizard-col--right {
      grid-column: 1 / -1;
      min-width: 0;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-wizard-pane--products,
    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-wizard-pane--customer {
      display: none !important;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-wizard-pane--confirm {
      display: grid !important;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: 16px 16px;
      align-content: start;
      padding: 4px 4px 8px;
      min-width: 0;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-confirm-l1 {
      grid-column: 2;
      grid-row: 1;
      position: static;
      top: auto;
      z-index: 1;
      margin: 0;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-confirm-stack {
      display: contents;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-confirm-block--lines {
      grid-column: 1;
      grid-row: 1;
      align-self: start;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-confirm-block--party {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-confirm-block--bill {
      grid-column: 2;
      grid-row: 2;
      align-self: start;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-confirm-block--notes {
      grid-column: 2;
      grid-row: 3;
      align-self: start;
      min-width: 0;
      padding-bottom: 4px;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-confirm-block--secondary {
      grid-column: 1;
      grid-row: 3;
      align-self: start;
      min-width: 0;
    }

    #modal .modal-card.pos-modal.pos-wizard-checkout-step #modalForm,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step .order-modal-body,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-main.pos-wizard-shell {
      padding-bottom: var(--pos-wizard-footer-clearance, 72px) !important;
      scroll-padding-bottom: var(--pos-wizard-footer-clearance, 72px) !important;
    }

    #modal .pos-wizard-shell[data-pos-wizard-step="3"] .pos-wizard-pane--confirm {
      padding-bottom: 12px;
    }

    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-wizard-shell[data-pos-wizard-step="3"] .pos-wizard-pane--confirm {
      max-height: min(70vh, calc(92vh - 168px));
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-bottom: var(--pos-wizard-footer-clearance, 72px);
      scroll-padding-bottom: var(--pos-wizard-footer-clearance, 72px);
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-modal-footer,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-modal-footer {
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-modal-footer .pos-shortcut-helper {
      display: none !important;
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-footer-actions,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions {
      width: auto !important;
      margin-left: 0 !important;
      flex-wrap: nowrap !important;
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-footer-actions .btn,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions .btn {
      flex: 0 1 auto !important;
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav {
      display: flex !important;
      flex: 0 0 auto !important;
      margin: 0 auto 0 0 !important;
      min-width: 0;
      max-width: none !important;
    }

    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav #posWizardNext {
      display: none !important;
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav #posWizardBack,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav #posWizardBack {
      flex: 0 0 auto !important;
      width: auto !important;
      max-width: none !important;
      min-height: 42px;
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-footer-actions--split,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--split {
      flex: 1 1 auto !important;
      margin: 0 0 0 auto !important;
      min-width: 0;
      justify-content: flex-end !important;
    }

    #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--split .pos-draft-btn,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step #posCancel {
      display: none !important;
    }

    body.use-new-ui.route-orders #modal .modal-card.order-pos-modal.pos-wizard-checkout-step #posConfirm,
    #modal .modal-card.pos-modal.pos-wizard-checkout-step #posConfirm {
      flex: 1 1 auto !important;
      min-width: 8rem !important;
      max-width: 100% !important;
      min-height: 42px;
      font-weight: 800;
    }
  }

  @media (max-width: 640px) {
    #modal .pos-wizard-pane[hidden] {
      display: none !important;
    }

    #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-wizard-nav {
      padding: 2px 0 10px;
      margin-bottom: 6px;
      width: 100%;
    }

    #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-wizard-progress__row {
      grid-template-columns: minmax(0, 1fr) 4.5rem;
    }

    #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-product-pane-head {
      margin-bottom: 8px;
    }

    #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-global-search input,
    #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) #posProductSearch {
      min-height: 44px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 500;
    }

    #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-barcode-scan-btn {
      min-height: 44px;
      border-radius: 12px;
    }

    #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-product-list {
      gap: 8px;
      padding: 6px;
    }

    #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-items-wrap {
      width: 100%;
      border-radius: 12px;
    }

    #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-wizard-pane--customer .panel,
    #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-wizard-pane--confirm .pos-items-wrap {
      border-radius: 12px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-shell {
      min-height: 0;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-main.pos-wizard-shell {
      padding-bottom: 4px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-progress__meta {
      font-size: 14px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-product-list > .pos-prow .pos-pcard__name {
      font-size: 12px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-product-list > .pos-prow .pos-prow__price {
      font-size: 13px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-product-list > .pos-prow .pos-prow__stock {
      font-size: 10px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-product-pane-head {
      flex-wrap: nowrap;
      gap: 5px;
      margin-bottom: 5px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-oos-toggle {
      min-height: 34px;
      max-width: 6.75rem;
      padding: 0 7px;
      font-size: 9px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-prow .pos-qty-btn {
      width: 44px;
      min-width: 44px;
      height: 44px;
      min-height: 44px;
      font-size: 17px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-cart-head {
      display: none;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-block--secondary {
      display: none;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-footer-actions--split {
      display: none !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-footer-actions--wizard-nav {
      display: flex !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav {
      display: none !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--split {
      display: flex !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-summary-strip {
      display: none;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-shortcut-helper {
      display: none;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-shortcut-helper {
      display: none;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-main,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-main.pos-order-layout,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-main.pos-wizard-shell,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-order-layout.pos-real,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .order-modal-body,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-mo-scroll-body {
      overflow: hidden !important;
      overflow-y: hidden !important;
      padding-bottom: 0 !important;
      scroll-padding-bottom: 0 !important;
      min-height: 0 !important;
      flex: 1 1 auto !important;
      max-height: none !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-wizard-shell,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-wizard-body,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-wizard-col--right,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-wizard-col--right.pos-right,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-right {
      flex: 1 1 0% !important;
      flex-grow: 1 !important;
      flex-shrink: 1 !important;
      min-height: 0 !important;
      max-height: none !important;
      height: auto !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-wizard-col--left {
      flex: 0 0 auto !important;
      min-height: 0 !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-wizard-pane--confirm {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px;
      flex: 1 1 0% !important;
      min-height: 0 !important;
      max-height: 100% !important;
      overflow: hidden !important;
      padding-bottom: 0;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-l1 {
      position: static;
      top: auto;
      z-index: 1;
      flex-shrink: 0;
      margin-bottom: 4px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-stack {
      gap: 6px;
      flex: 1 1 0% !important;
      min-height: 0 !important;
      max-height: 100% !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding-bottom: var(--pos-wizard-footer-clearance, calc(58px + env(safe-area-inset-bottom, 0px)));
      scroll-padding-bottom: var(--pos-wizard-footer-clearance, calc(58px + env(safe-area-inset-bottom, 0px)));
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-block--party,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-block--lines,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-block--bill,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-block--notes {
      flex: 0 0 auto;
      max-height: none;
      overflow: visible;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-wizard-pane--confirm .pos-items-scroll {
      max-height: none;
      overflow: visible;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-modal-footer {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 8px !important;
      align-items: stretch !important;
      padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
      box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.06) !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-modal-footer .pos-shortcut-helper,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-modal-footer .pos-summary-strip {
      display: none !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions .btn {
      min-height: 44px !important;
      max-height: 44px !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      white-space: nowrap !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav {
      display: flex !important;
      flex: 0 1 38%;
      margin: 0;
      min-width: 0;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav #posWizardNext {
      display: none;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav #posWizardBack {
      flex: 1 1 auto;
      max-width: none;
      min-height: 44px;
      padding-top: 0;
      padding-bottom: 0;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--split {
      display: flex !important;
      flex: 1 1 62%;
      margin: 0;
      min-width: 0;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--split .pos-draft-btn {
      display: none;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step #posCancel {
      display: none;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step #posConfirm {
      min-height: 44px;
      font-size: 13px;
      font-weight: 800;
      flex: 1 1 auto;
      min-width: 0;
    }

    /*
     * Beat orders-pos-modal-mobile-fullscreen footer column + generic split flex:1 on every btn
     * (draft labels overlap when checkout class lags or split stays visible on step 3).
     */
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-modal-footer,
    body.modal-pos-fullscreen-mo #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-modal-footer {
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: stretch !important;
      gap: 8px !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions,
    body.modal-pos-fullscreen-mo #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-footer-actions {
      flex-wrap: nowrap !important;
      width: auto !important;
      min-width: 0 !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--split #posSaveDraft,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--split #posSaveNew,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--split #posCancel,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--split .pos-draft-btn,
    body.modal-pos-fullscreen-mo #modal .modal-card.order-pos-modal.pos-wizard-checkout-step .pos-footer-actions--split .pos-draft-btn {
      display: none !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav {
      flex: 0 1 auto !important;
      max-width: 42% !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--split {
      flex: 1 1 auto !important;
      min-width: 0 !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions .btn {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      padding-inline: 10px !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-footer-actions--wizard-nav #posWizardBack {
      flex: 1 1 auto !important;
      max-width: none !important;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-pay-fields__controls {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    @media (max-width: 390px) {
      body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-pay-fields__controls {
        grid-template-columns: minmax(0, 1fr);
      }

      body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-pay-fields__adjust {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px 6px;
      }

      body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-pay-row {
        grid-template-columns: minmax(4.75rem, 36%) minmax(0, 1fr);
      }
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-collect-hero {
      padding: 6px 10px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal.pos-wizard-checkout-step .pos-confirm-block--bill {
      padding-bottom: 2px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--customer .pos-head-grid.compact {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px 10px;
      margin-bottom: 4px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--customer .pos-head-grid.compact > label:first-child {
      grid-column: 1 / -1;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--customer .pos-head-grid.compact label {
      gap: 4px;
      font-size: 11px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--customer .pos-head-grid.compact input,
    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--customer .pos-head-grid.compact select {
      min-height: 36px;
      margin-top: 0;
      font-size: 13px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--customer .pos-walkin-row {
      margin-bottom: 6px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--customer .pos-walkin-toggle {
      min-height: 34px;
      padding: 0 12px;
      font-size: 12px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--customer label.compact-note textarea {
      min-height: 56px;
      margin-top: 4px;
      padding: 8px 10px;
      font-size: 13px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-modal-headline--dt {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding-top: 4px;
      padding-bottom: 2px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-modal-headline--dt .tiny-date {
      width: auto;
      min-height: 34px !important;
      max-width: 11.5rem;
      padding: 0 10px !important;
      font-size: 13px !important;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      box-sizing: border-box;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--products {
      display: flex;
      flex-direction: column;
      min-height: 0;
      flex: 1 1 auto;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-pane--products .pos-product-list {
      flex: 1 1 auto;
      max-height: none;
      gap: 6px;
      padding: 4px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-product-list > .pos-prow .pos-pcard__thumb {
      height: clamp(64px, 20vw, 88px);
      max-height: 88px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-product-list > .pos-prow .pos-pcard__thumb img {
      transform: scale(1.02);
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-product-list > .pos-prow .pos-prow__main {
      padding: 5px 6px 2px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-product-list > .pos-prow .pos-prow__foot {
      padding: 0 4px 6px;
    }

    @media (min-width: 414px) {
      body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-product-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
      }

      body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal:not(.pos-wizard-checkout-step) .pos-product-list > .pos-prow .pos-pcard__thumb {
        height: clamp(60px, 18vw, 80px);
        max-height: 80px;
      }
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-wizard-nav {
      padding-left: 2px;
      padding-right: 2px;
    }

    body.modal-pos-fullscreen-mo #modal .modal-card.pos-modal .pos-modal-headline--dt {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}