/* Customer layout only. No changes to normal browser pages or staff workspaces. */
html.rublcom-installed {
    /* Safari rubber-band offsets are not keyboard occlusion. Do not apply the
       legacy translateY and the shared shell's bottom compensation together. */
    --vv-overlap: 0px !important;
    overscroll-behavior-y: none;
}
html.rublcom-installed body { overscroll-behavior-y: none; }
/* Keep the native root scrollbars. A fixed 6px scrollbar reserves space in
   mobile WebKit and changes visualViewport.offsetTop while the page scrolls. */
html.rublcom-installed::-webkit-scrollbar,
html.rublcom-installed body::-webkit-scrollbar { width: auto; height: auto; }
html.rublcom-installed .modal-body { min-height: 0; overscroll-behavior-y: contain; }
html.rublcom-installed .modal-container {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
html.rublcom-installed .modal-content {
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    overscroll-behavior-y: contain;
}
html.rublcom-installed.rublcom-customer-keyboard-open .mobile-nav { display: none; }
html.rublcom-installed.rublcom-customer-keyboard-open .modal-container {
    top: var(--customer-keyboard-top, 0px);
    bottom: auto;
    height: var(--customer-keyboard-height, 100dvh);
    padding: 16px;
}
html.rublcom-installed.rublcom-customer-keyboard-open .modal-content {
    max-height: calc(var(--customer-keyboard-height, 100dvh) - 32px);
}
/* A delayed update/connection notice must not insert a new row above the page. */
html.rublcom-installed #rublcom-safety {
    position: fixed;
    z-index: 80;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 12px);
    margin: 0;
    max-height: min(45dvh, 320px);
    overflow-y: auto;
}
html.rublcom-installed.rublcom-customer-keyboard-open #rublcom-safety {
    top: calc(var(--customer-keyboard-top, 0px) + 8px);
    bottom: auto;
    max-height: calc(var(--customer-keyboard-height, 100dvh) / 3);
}
html.rublcom-installed .mobile-nav {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    bottom: 0 !important;
    transform: none;
    will-change: auto;
}
/* Paint the sensor/status area while the document scrolls underneath it.
   Keep the document's existing safe-area padding and native scrolling. */
html.rublcom-installed body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: var(--bg-primary, #fff);
    z-index: 1000;
    pointer-events: none;
}
@media (max-width: 1023px) {
    html.rublcom-installed .customer-delivery-code .flex-1 { min-width: 0; }
    html.rublcom-installed .customer-delivery-code .bg-white.flex { flex-wrap: wrap; padding-left: 8px; padding-right: 8px; }
    html.rublcom-installed .customer-profile-stats {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
        gap: 8px;
    }
    html.rublcom-installed .customer-profile-stats > .w-px { display: none; }
    html.rublcom-installed .customer-profile-stats > .text-center { min-width: 0; }
    html.rublcom-installed .customer-profile-stats .text-sm { font-size: clamp(12px, 3.4vw, 14px); }
    html.rublcom-installed .customer-profile-stats .whitespace-nowrap {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: clamp(16px, 4.8vw, 20px);
    }
    /* iPhone otherwise zooms into the catalogue's 14/15px search fields. */
    html.rublcom-installed :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), textarea, select) {
        font-size: max(16px, 1em);
    }
}

/* Second customer review: shared drawers and notifications on small screens. */
html.rublcom-installed .customer-more-panel { overscroll-behavior: contain; }
html.rublcom-installed :is(.customer-toast-stack, .customer-notification-stack) {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto !important;
    min-width: 0 !important;
    max-width: min(400px, calc(100vw - 24px)) !important;
    margin-left: auto;
}
html.rublcom-installed :is(.customer-toast-stack, .customer-notification-stack) > div {
    min-width: 0 !important;
    max-width: 100%;
    width: 100%;
    overflow-wrap: anywhere;
}
html.rublcom-installed .customer-toast-stack .flex-1 { min-width: 0; }
html.rublcom-installed .customer-share-overlay {
    z-index: 95;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
html.rublcom-installed .customer-share-panel {
    min-width: 0;
    max-width: 450px;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
}
html.rublcom-installed .customer-share-panel > .flex { gap: 12px; align-items: flex-start; }
html.rublcom-installed .customer-share-panel h3 { flex: 1; min-width: 0; white-space: normal; }
@media (max-width: 1023px) {
    html.rublcom-installed .cart-panel {
        max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px)));
    }
    html.rublcom-installed .cart-panel :is(.cart-header, .cart-grab, .cart-footer) { flex-shrink: 0; }
    html.rublcom-installed .customer-cart-items { min-height: 0; overscroll-behavior: contain; }
    html.rublcom-installed .customer-share-panel { padding: 20px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    html.rublcom-installed .cart-panel { top: max(12px, env(safe-area-inset-top, 0px)); }
}
@media (max-height: 600px) and (max-width: 1023px) {
    html.rublcom-installed .cart-panel { overflow-y: auto; overscroll-behavior: contain; }
    html.rublcom-installed .customer-cart-items { flex: 0 0 auto; overflow-y: visible; }
}
/* A quantity keyboard must not hide the cart's last buttons. */
html.rublcom-installed.rublcom-customer-keyboard-open .cart-panel {
    top: calc(var(--customer-keyboard-top, 0px) + 8px);
    bottom: auto;
    max-height: calc(var(--customer-keyboard-height, 100dvh) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
html.rublcom-installed.rublcom-customer-keyboard-open .customer-cart-items { flex: 0 0 auto; overflow-y: visible; }

/* Customer review 3: keep totals and actions readable in compact layouts. */
html.rublcom-installed .customer-cart-line-total { flex-wrap: wrap; gap: 8px; }
html.rublcom-installed .customer-cart-line-total .qty { flex-shrink: 0; }
html.rublcom-installed .customer-cart-line-total > .text-right {
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
    overflow-wrap: anywhere;
}
html.rublcom-installed .customer-loyalty-panel {
    left: max(12px, calc(50% - 220px), env(safe-area-inset-left, 0px)) !important;
    right: max(12px, calc(50% - 220px), env(safe-area-inset-right, 0px)) !important;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px)));
    overscroll-behavior: contain;
}
@media (max-width: 1023px) {
    html.rublcom-installed .customer-matrix-summary {
        bottom: calc(var(--mobile-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 12px);
    }
}
@media (max-height: 500px) and (max-width: 1023px) {
    html.rublcom-installed .customer-matrix-summary { position: static; }
}
html.rublcom-installed :is(.customer-order-heading, .customer-order-details) {
    flex-wrap: wrap;
    gap: 8px;
}
html.rublcom-installed .customer-order-heading > span { flex-shrink: 0; white-space: nowrap; }
html.rublcom-installed .customer-order-details > .text-sm { flex: 1 1 160px; min-width: 0; }
html.rublcom-installed .customer-order-total { flex-shrink: 0; margin-left: auto; white-space: nowrap; }

/* Checkout dialogs use the same visible viewport as the other customer forms. */
html.rublcom-installed .customer-checkout-frame {
    height: 100%; min-height: 0; padding: 16px;
}
html.rublcom-installed .customer-checkout-panel {
    flex-shrink: 0;
    max-height: calc(100dvh - 32px);
    overscroll-behavior: contain;
}
html.rublcom-installed.rublcom-customer-keyboard-open .customer-checkout-overlay {
    top: var(--customer-keyboard-top, 0px); bottom: auto;
    height: var(--customer-keyboard-height, 100dvh);
}
html.rublcom-installed.rublcom-customer-keyboard-open .customer-checkout-panel {
    max-height: calc(var(--customer-keyboard-height, 100dvh) - 32px);
}