/* Loaded only by App mode. Bottom safe-area paint follows the moving surface. */
#app .bottom-sheet-safe-area::after {
    display: none;
}

#app .bottom-sheet-safe-area::before,
#app .app-custom-tip-overlay::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-sheet-safe-area-top, 0px) + 24px);
    background: linear-gradient(to bottom, var(--bottom-sheet-safe-area-surface, #F5F5F5), transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0 var(--bottom-sheet-safe-area-top, 0px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0 var(--bottom-sheet-safe-area-top, 0px), transparent 100%);
    opacity: var(--bottom-sheet-safe-area-opacity, 1);
    transition: opacity 300ms ease;
    pointer-events: none;
    z-index: 2;
}

#app .bottom-sheet-safe-area {
    --bottom-sheet-bottom-reserve: max(8px, var(--bottom-sheet-device-safe-area-bottom, 0px));
}

#app .app-custom-tip-surface {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

#app .bottom-sheet-safe-area .bottom-sheet-surface-gradient::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--bottom-sheet-safe-area-paint-height, 0px);
    background: #fff;
    pointer-events: none;
}

#app .app-catalog-cart-footer,
#app .app-catalog-cart-footer::before {
    background: transparent;
}

/* Preserve the visible header while the router replaces the old catalog DOM. */
html #app [data-app-catalog-navigating="compact"] .app-catalog-compact-header,
html #app [data-app-catalog-navigating="compact"] .app-catalog-compact-nav {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

#app [data-app-catalog-navigating="compact"] .app-catalog-compact-header {
    z-index: 3;
}

/* Safari already anchors fixed footers above its controls. Dynamic viewport offsets
   compensate twice and move the action whenever the browser bars expand. */
#app .app-safari-tap-safe-footer {
    bottom: 0;
}

/* Keep a compact, stable gap below iOS actions so their fill/shadow does not
   reach the viewport edge sampled by Safari's translucent controls. */
@supports (-webkit-touch-callout: none) {
    @media (pointer: coarse) and (display-mode: browser) {
        #app {
            --app-footer-extra-reserve: 8px;
        }

        #app .app-safari-tap-safe-footer > button {
            margin-bottom: max(env(safe-area-inset-bottom, 0px), 24px);
        }
    }
}

#app .product-details-mobile-shell:has(input:focus, textarea:focus) {
    --product-details-mobile-viewport-height: var(--nexus-visible-viewport-height, 100dvh);
    --product-details-mobile-keyboard-padding: 0px;
    top: var(--nexus-visible-viewport-offset-top, 0px);
}

#app [data-app-product-submit] {
    touch-action: manipulation;
}

#app [data-app-product-submit][aria-busy="true"] {
    position: relative;
    pointer-events: none;
}

#app [data-app-product-submit][aria-busy="true"]:not(:has(.fa-spinner))::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-left: 8px;
    margin-right: 16px;
    flex-shrink: 0;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: app-submit-spin 700ms linear infinite;
}

@keyframes app-submit-spin {
    to { transform: rotate(360deg); }
}

/* App scroll chrome stays mounted and is switched before any server round trip. */
.app-catalog-compact-header,
.app-catalog-compact-nav {
    visibility: hidden;
    pointer-events: none;
    animation: none !important;
}

html[data-app-catalog-header="compact"] .app-catalog-compact-header,
html[data-app-catalog-header="compact"] .app-catalog-compact-nav {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

html[data-app-catalog-header="compact"] .app-catalog-compact-header {
    z-index: 3;
}

html[data-app-catalog-header="regular"] .app-catalog-compact-header,
html[data-app-catalog-header="regular"] .app-catalog-compact-nav {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* dark-theme:generated — dark variants of the colours above, written by Nexus.Retail.Server/TailwindAssets/dark-theme-sync.mjs.
   Edit the light rules and rerun the script; do not edit this block. */

:where(:root[data-theme="dark"]) #app .bottom-sheet-safe-area::before,
:where(:root[data-theme="dark"]) #app .app-custom-tip-overlay::before {
    background: linear-gradient(to bottom, var(--bottom-sheet-safe-area-surface, #111317), transparent);
}

:where(:root[data-theme="dark"]) #app .bottom-sheet-safe-area .bottom-sheet-surface-gradient::after {
    background: #1A1D23;
}

:where(:root[data-theme="dark"]) #app .app-catalog-cart-footer,
:where(:root[data-theme="dark"]) #app .app-catalog-cart-footer::before {
    background: transparent;
}

/* dark-theme:generated:end */