/*
  POS layout — final intended behavior:

  Products (pos-left):
    - Height locked to the viewport (min 800px).
    - Product tiles scroll INSIDE the grid.
    - Never grows the page to fit every product.

  Cart (pos-right):
    - min-height 800px.
    - Grows only with cart lines + payment (no inner cart scroll).
    - Independent of products height (align-items: start).
*/

.page-body .pos-left.panel-card {
    /* visible so SearchableSelect panels are not clipped; grid scrolls itself */
    overflow: visible !important;
}

.page-body .pos-right.panel-card {
    overflow: visible !important;
}

@media (min-width: 961px) {
    .pos-workspace.is-pos-layout .pos-screen {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-items: start !important;
    }

    /* PRODUCTS: fixed band — does not follow cart/products count */
    .pos-workspace.is-pos-layout .pos-left.panel-card {
        display: flex !important;
        flex-direction: column !important;
        align-self: start !important;
        position: sticky;
        top: 0.65rem;
        width: 100%;
        height: max(800px, calc(100dvh - 8.25rem)) !important;
        min-height: 800px !important;
        max-height: max(800px, calc(100dvh - 8.25rem)) !important;
        overflow: visible !important;
    }

    /* CART: own height only */
    .pos-workspace.is-pos-layout .pos-right.panel-card {
        display: flex !important;
        flex-direction: column !important;
        align-self: start !important;
        position: static;
        width: 100%;
        height: auto !important;
        min-height: 800px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .pos-workspace.is-pos-layout .pos-left .scan-bar,
    .pos-workspace.is-pos-layout .pos-left .item-search,
    .pos-workspace.is-pos-layout .pos-left .pos-price-mode,
    .pos-workspace.is-pos-layout .pos-left .pos-scale-panel {
        flex-shrink: 0 !important;
    }

    /* Tiles scroll here — keep enough room so cards are not half-cut */
    .pos-workspace.is-pos-layout .pos-left .product-grid.touch-grid,
    .pos-workspace.is-pos-layout .pos-left .touch-grid {
        flex: 1 1 0 !important;
        min-height: 22rem !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        align-content: start !important;
    }

    .pos-workspace.is-pos-layout .pos-right .cart-lines {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    .pos-workspace.is-pos-layout .pos-right .pos-checkout-sticky,
    .pos-workspace.is-pos-layout .pos-right .pos-totals,
    .pos-workspace.is-pos-layout .pos-right .pos-actions,
    .pos-workspace.is-pos-layout .pos-right .pay-tender-panel {
        flex-shrink: 0 !important;
        overflow: visible !important;
    }

    .pos-workspace.is-pos-layout .pos-right .empty-cart {
        min-height: 5rem;
        display: grid;
        place-items: center;
        box-sizing: border-box;
    }
}

@media (max-width: 960px) {
    .pos-workspace.is-pos-layout .pos-screen {
        height: auto;
        min-height: 0;
        max-height: none;
        align-items: stretch;
    }

    .pos-workspace.is-pos-layout .pos-left.panel-card {
        position: static;
        height: auto !important;
        min-height: 24rem !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .pos-workspace.is-pos-layout .pos-right.panel-card {
        height: auto !important;
        min-height: 800px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .pos-workspace.is-pos-layout .pos-left .touch-grid {
        min-height: 16rem !important;
        max-height: min(55vh, 32rem) !important;
        overflow-y: auto !important;
    }

    .pos-workspace.is-pos-layout .pos-right .cart-lines {
        flex: 0 0 auto !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
}