/*
 * Tablet responsive authority for ERP-CV.BJAS.
 * Scope: WMS operational pages and POS cashier only.
 * Breakpoints:
 * - 641px-900px: tablet portrait / small tablet
 * - 901px-1180px: tablet landscape / large tablet
 */

@media (min-width: 641px) and (max-width: 1180px) {
    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) {
        --tablet-content-gap: 12px;
        --tablet-card-radius: 14px;
        --tablet-field-height: 38px;
        overflow-x: hidden;
    }

    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) :is(
        .internal-app-topbar,
        .internal-shell-header,
        .site-header
    ) {
        min-height: 68px;
        padding: 8px 12px;
    }

    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) :is(
        .internal-header-center img,
        .header-center-logo img
    ) {
        height: 42px;
        max-height: 48px;
    }

    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) :is(
        .internal-brand-chip,
        .internal-homebase-chip,
        .internal-ai-button,
        .internal-ai-btn,
        .internal-user-pill,
        .profile-button.internal-user-pill,
        .notification-button.internal-icon-button
    ) {
        min-height: 36px;
        padding: 0 12px;
        font-size: 12.5px;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(
        .page-content,
        .main,
        .module-main,
        .shell-content,
        .clean-content-panel,
        .content-panel,
        .internal-module-panel
    ) {
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(
        .module-shell,
        .shell-with-sidebar,
        .internal-module-layout,
        .module-layout,
        .clean-module-layout
    ) {
        min-width: 0;
        gap: var(--tablet-content-gap);
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(
        .module-page-header,
        .wms-page-header,
        .page-header,
        .stock-page-header,
        .category-brand-page-header,
        .audit-page-header,
        .approval-page-header
    ) {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(
        .module-page-title,
        .wms-page-title,
        .page-title,
        .stock-title,
        .category-brand-title,
        .audit-title,
        .approval-title
    ) {
        font-size: clamp(26px, 4vw, 34px);
        line-height: 1.05;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(
        .wms-page-actions,
        .page-actions,
        .stock-actions,
        .toolbar-actions,
        .filter-actions,
        .wms-filter-actions
    ) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(
        .table-box,
        .table-wrap,
        .table-responsive,
        .inventory-table-wrap,
        .stock-table-viewport,
        .stock-opname-table-box,
        .audit-table-wrap,
        .approval-table-wrap,
        .wms-table-wrap,
        .wms-variant-table-wrap
    ) {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(
        .wms-filter-grid,
        .filter-grid,
        .stock-filter-grid,
        .category-brand-filter-grid,
        .audit-filter-grid,
        .approval-filter-grid
    ) {
        gap: 8px;
        min-width: 0;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(
        .wms-filter-grid,
        .filter-grid,
        .stock-filter-grid,
        .category-brand-filter-grid,
        .audit-filter-grid,
        .approval-filter-grid,
        .wms-form-grid,
        .form-grid,
        .product-identity-grid,
        .wms-product-identity-grid,
        .wms-single-product-panel,
        .product-detail-grid
    ) :is(input, select, textarea, button, .wms-taxonomy-combobox-input, .wms-taxonomy-combobox-toggle) {
        min-width: 0;
        max-width: 100%;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(.modal-dialog, .wms-modal, .app-modal-dialog, .shell-modal) {
        width: min(900px, 92vw);
        max-height: 86vh;
        overflow: hidden;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .spreadsheet-center-page-shell,
        .request-workflow-shell,
        .stock-opname-page-shell,
        .wms-transfer-page-shell,
        .wms-outbound-page-shell,
        .wms-inbound-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(.modal-body, .wms-modal-body, .app-modal-body) {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) {
        --shell-sidebar-width: 236px;
    }

    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) :is(
        .module-shell,
        .shell-with-sidebar,
        .internal-module-layout,
        .module-layout,
        .clean-module-layout
    ) {
        grid-template-columns: 236px minmax(0, 1fr);
    }

    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) :is(
        .module-sidebar,
        .internal-sidebar,
        .app-sidebar,
        .clean-module-sidebar
    ) {
        width: 236px;
        min-width: 236px;
        max-width: 236px;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .stock-opname-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(.wms-kpi-grid, .summary-grid, .stock-summary-grid, .category-brand-kpis, .so-status-strip) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(.wms-filter-grid, .filter-grid, .stock-filter-grid, .category-brand-filter-grid, .audit-filter-grid) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.wms-input-item-shell:not(.pos-shell) :is(
        .product-identity-grid,
        .wms-product-identity-grid,
        .wms-single-product-panel,
        .product-detail-grid,
        .wms-variant-master-price
    ) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body:is(.request-workflow-shell, .wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell):not(.pos-shell) :is(
        .wms-two-column-layout,
        .batch-composer-layout,
        .request-cockpit,
        .transfer-layout,
        .inbound-layout,
        .outbound-layout
    ) {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    }

    body.wms-approval-page-shell:not(.pos-shell) :is(.approval-layout, .approval-shell, .approval-workspace) {
        grid-template-columns: minmax(300px, .9fr) minmax(340px, 1.1fr);
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) :is(
        .module-shell,
        .shell-with-sidebar,
        .internal-module-layout,
        .module-layout,
        .clean-module-layout
    ) {
        grid-template-columns: 1fr;
    }

    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) :is(
        .internal-header-center,
        .header-center-logo
    ) {
        display: none;
    }

    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) :is(
        .module-sidebar,
        .internal-sidebar,
        .app-sidebar,
        .clean-module-sidebar
    ) {
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0 12px;
        border-radius: 14px;
        border: 1px solid #dbe3ef;
    }

    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) :is(
        .module-sidebar-nav,
        .shell-sidebar-nav,
        .sidebar-menu,
        .hris-module-grid
    ) {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 8px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    body:is(.wms-module-shell, .internal-wms-module-shell):not(.pos-shell) :is(
        .module-sidebar-link,
        .shell-sidebar-link,
        .sidebar-link,
        .hris-module-card
    ) {
        flex: 0 0 auto;
        min-height: 38px;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .stock-opname-page-shell,
        .wms-approval-page-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(.wms-kpi-grid, .summary-grid, .stock-summary-grid, .category-brand-kpis, .so-status-strip) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(.wms-filter-grid, .filter-grid, .stock-filter-grid, .category-brand-filter-grid, .audit-filter-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:is(
        .wms-module-shell,
        .internal-wms-module-shell,
        .wms-stock-reference-shell,
        .category-brand-master-shell,
        .wms-audit-page-shell
    ):not(.pos-shell) :is(.wms-filter-actions, .filter-actions, .stock-filter-actions, .audit-filter-actions) {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
    }

    body.wms-input-item-shell:not(.pos-shell) :is(
        .product-identity-grid,
        .wms-product-identity-grid,
        .wms-single-product-panel,
        .product-detail-grid,
        .wms-variant-master-price
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:is(.request-workflow-shell, .wms-transfer-page-shell, .wms-outbound-page-shell, .wms-inbound-page-shell):not(.pos-shell) :is(
        .wms-two-column-layout,
        .batch-composer-layout,
        .request-cockpit,
        .transfer-layout,
        .inbound-layout,
        .outbound-layout
    ),
    body.wms-approval-page-shell:not(.pos-shell) :is(.approval-layout, .approval-shell, .approval-workspace) {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 641px) and (max-width: 1180px) {
    body.pos-shell {
        overflow-x: hidden;
    }

    body.pos-shell :is(.internal-app-topbar, .internal-shell-header, .internal-sidebar, .app-sidebar, .shell-sidebar, .module-sidebar, .internal-base-footer, .internal-module-footer) {
        display: none;
    }

    body.pos-shell :is(.layout, .main, .page-content, .page-content-bleed, #posCheckoutRoot) {
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    body.pos-page-wide #posCheckoutRoot :is(.pos-ipos-window, .pos-page, .pos-shell) {
        max-width: 100%;
        min-width: 0;
    }

    body.pos-page-wide #posCheckoutRoot :is(.pos-ipos-cartbox, .pos-cart-table-wrap, .pos-table-wrap) {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.pos-page-wide #posCheckoutRoot :is(.payment-modal, .pos-payment-modal, .pos-checkout-success-window, .modal-dialog) {
        width: min(900px, 92vw);
        max-height: 86vh;
        overflow: hidden;
    }

    body.pos-page-wide #posCheckoutRoot :is(.payment-modal-body, .pos-payment-body, .pos-checkout-success-body, .modal-body) {
        overflow-y: auto;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    body.pos-page-wide #posCheckoutRoot .pos-ipos-window {
        grid-template-rows: 44px minmax(0, 1fr) 56px;
    }

    body.pos-page-wide #posCheckoutRoot .pos-ipos-layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
        gap: 10px;
    }

    body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.pos-page-wide #posCheckoutRoot .pos-total-value {
        font-size: clamp(34px, 4vw, 52px);
        line-height: 1;
        overflow-wrap: anywhere;
    }

    body.pos-page-wide #posCheckoutRoot .pos-ipos-bottom-panel {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    body.pos-page-wide #posCheckoutRoot .pos-ipos-layout {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.pos-page-wide #posCheckoutRoot .pos-ipos-flat-item-form {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    body.pos-page-wide #posCheckoutRoot .pos-ipos-flat-item-form :is(.pos-ipos-search-actions, .pos-scan-actions) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.pos-page-wide #posCheckoutRoot .pos-ipos-payment-compact {
        grid-template-columns: 1fr;
    }

    body.pos-page-wide #posCheckoutRoot .pos-total-value {
        font-size: clamp(30px, 7vw, 46px);
        line-height: 1;
        overflow-wrap: anywhere;
    }

    body.pos-page-wide #posCheckoutRoot .pos-ipos-bottom-panel,
    body.pos-page-wide #posCheckoutRoot .pos-transaction-info {
        grid-template-columns: 1fr;
        max-height: none;
    }

    body.pos-page-wide #posCheckoutRoot .pos-ipos-quickbar,
    body.pos-shell .pos-action-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    body.pos-page-wide #posCheckoutRoot .pos-ipos-quickbar-action,
    body.pos-shell .pos-action-bar > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* POS tablet correction pass: tablet is not mobile. Keep cashier workflow compact. */
@media (min-width: 641px) and (max-width: 1180px) {
    html[data-theme] body.pos-shell.pos-page-wide,
    body.pos-shell.pos-page-wide {
        overflow: hidden !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    html[data-theme] body.pos-shell :is(.internal-app-topbar, .internal-shell-header, .site-header, .module-sidebar, .internal-sidebar, .internal-base-footer, .internal-module-footer),
    body.pos-shell :is(.internal-app-topbar, .internal-shell-header, .site-header, .module-sidebar, .internal-sidebar, .internal-base-footer, .internal-module-footer) {
        display: none !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot :is(.pos-ipos-window, .pos-terminal-clean.pos-ipos-refactor),
    body.pos-page-wide #posCheckoutRoot :is(.pos-ipos-window, .pos-terminal-clean.pos-ipos-refactor) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot :is(.pos-ipos-field, .pos-ipos-mini-field, .pos-ipos-flat-item-form label),
    body.pos-page-wide #posCheckoutRoot :is(.pos-ipos-field, .pos-ipos-mini-field, .pos-ipos-flat-item-form label) {
        min-width: 0 !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot :is(.pos-ipos-field label, .pos-ipos-mini-field span, .pos-ipos-flat-item-form label span),
    body.pos-page-wide #posCheckoutRoot :is(.pos-ipos-field label, .pos-ipos-mini-field span, .pos-ipos-flat-item-form label span) {
        display: block !important;
        margin-bottom: 4px !important;
        font-size: 10.5px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot :is(.pos-ipos-field, .pos-ipos-mini-field, .pos-ipos-flat-item-form, .pos-ipos-select-search) :is(input, select, button),
    body.pos-page-wide #posCheckoutRoot :is(.pos-ipos-field, .pos-ipos-mini-field, .pos-ipos-flat-item-form, .pos-ipos-select-search) :is(input, select, button) {
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        font-size: 12.5px !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-cart-panel,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-cart-panel {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-cartbox,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-cartbox {
        min-height: 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-quickbar,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-quickbar {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-quickbar-action,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-quickbar-action {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        min-height: 42px !important;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-window,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-window {
        display: grid !important;
        grid-template-rows: 44px auto minmax(0, 1fr) auto 56px !important;
        gap: 8px !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-topbar,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-topbar {
        min-height: 44px !important;
        height: 44px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-toolbar,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-toolbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        min-height: 38px !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-layout,
    html[data-theme] body.pos-page-wide #posCheckoutRoot.pos-page.is-cart-empty .pos-ipos-layout,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-layout,
    body.pos-page-wide #posCheckoutRoot.pos-page.is-cart-empty .pos-ipos-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
        gap: 8px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-main,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-main {
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-payment-compact,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-payment-compact {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: center !important;
        min-height: 82px !important;
        max-height: 118px !important;
        max-width: 360px !important;
        overflow: hidden !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid,
    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid.pos-customer-row,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid.pos-customer-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot form.pos-ipos-flat-item-form,
    body.pos-page-wide #posCheckoutRoot form.pos-ipos-flat-item-form {
        display: grid !important;
        grid-template-columns: 110px minmax(0, 1fr) 96px 136px !important;
        gap: 8px !important;
        align-items: end !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-total-value,
    body.pos-page-wide #posCheckoutRoot .pos-total-value {
        font-size: clamp(34px, 4vw, 50px) !important;
        line-height: .95 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-bottom-panel,
    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-transaction-info,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-bottom-panel,
    body.pos-page-wide #posCheckoutRoot .pos-transaction-info {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: 8px !important;
        min-height: 96px !important;
        max-height: 112px !important;
        overflow: auto !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-quickbar,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-quickbar {
        height: 56px !important;
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-window,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-window {
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto 58px !important;
        gap: 8px !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-topbar,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-topbar {
        min-height: 52px !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
        align-items: center !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-toolbar,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-height: 0 !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-layout,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid,
    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid.pos-customer-row,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid.pos-customer-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-payment-compact,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-payment-compact {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        min-height: 72px !important;
        max-height: 86px !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot form.pos-ipos-flat-item-form,
    body.pos-page-wide #posCheckoutRoot form.pos-ipos-flat-item-form {
        display: grid !important;
        grid-template-columns: 120px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: end !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot form.pos-ipos-flat-item-form > :is(button, .pos-vintage-button),
    body.pos-page-wide #posCheckoutRoot form.pos-ipos-flat-item-form > :is(button, .pos-vintage-button) {
        min-width: 0 !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot form.pos-ipos-flat-item-form > :is(button, .pos-vintage-button):nth-last-child(-n+2),
    body.pos-page-wide #posCheckoutRoot form.pos-ipos-flat-item-form > :is(button, .pos-vintage-button):nth-last-child(-n+2) {
        grid-column: auto !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-total-value,
    body.pos-page-wide #posCheckoutRoot .pos-total-value {
        font-size: clamp(32px, 7vw, 48px) !important;
        line-height: .95 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-cart-panel,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-cart-panel {
        min-height: 0 !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-bottom-panel,
    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-transaction-info,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-bottom-panel,
    body.pos-page-wide #posCheckoutRoot .pos-transaction-info {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 120px !important;
        max-height: 160px !important;
        overflow: auto !important;
    }

    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-quickbar,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-quickbar {
        height: 58px !important;
        min-height: 58px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
}

@media (max-width: 640px) {
    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-layout,
    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid,
    html[data-theme] body.pos-page-wide #posCheckoutRoot .pos-ipos-bottom-panel,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-layout,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-transaction-grid,
    body.pos-page-wide #posCheckoutRoot .pos-ipos-bottom-panel {
        grid-template-columns: 1fr !important;
    }
}