:root {
    --benira-visual-viewport-height: 100dvh;
    --benira-visual-viewport-width: 100vw;
    --benira-visual-viewport-top: 0px;
    --benira-visual-viewport-left: 0px;
    --benira-safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

[data-benira-ui-modal-root="1"] {
    overscroll-behavior: contain !important;
}

[data-benira-ui-dialog="1"] {
    overscroll-behavior: contain !important;
    scroll-padding-block: 16px calc(16px + var(--benira-safe-area-bottom)) !important;
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
    [data-benira-ui-viewport-root="1"] {
        top: var(--benira-modal-viewport-top, var(--benira-visual-viewport-top)) !important;
        bottom: auto !important;
        height: var(--benira-modal-viewport-height, var(--benira-visual-viewport-height)) !important;
        max-height: var(--benira-modal-viewport-height, var(--benira-visual-viewport-height)) !important;
    }

    [data-benira-ui-dialog="1"] {
        max-height: min(
            var(--benira-modal-original-max-height, 100000px),
            calc(var(--benira-modal-viewport-height, var(--benira-visual-viewport-height)) - 8px)
        ) !important;
    }

    .hn-search-container .hn-search-dropdown {
        max-height: var(--hn-search-mobile-max-height, min(62dvh, 570px)) !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

html.benira-ios-mobile [data-benira-ios-zoom-fixed="1"] {
    font-size: 16px !important;
}

[data-benira-compact-target="1"],
[data-benira-compact-positioned="1"] {
    overflow: visible !important;
    isolation: isolate;
}

[data-benira-compact-target="1"] {
    position: relative !important;
}

.benira-ui-hit-area {
    position: absolute !important;
    z-index: 5 !important;
    top: 50% !important;
    left: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: inherit !important;
    background: transparent !important;
    pointer-events: auto !important;
}

button.benira-ui-pressed,
a.benira-ui-pressed,
[role="button"].benira-ui-pressed {
    scale: .985 !important;
}

[data-benira-button-stable="1"] {
    min-inline-size: var(--benira-button-stable-width) !important;
    min-block-size: var(--benira-button-stable-height) !important;
}

[data-benira-list-stable="1"] {
    min-block-size: var(--benira-list-stable-height) !important;
    overflow-anchor: none !important;
}

img.benira-ui-image-pending {
    opacity: .01;
    transition: opacity .2s ease;
}

img.benira-ui-image-loaded,
img.benira-ui-image-fallback {
    opacity: 1;
}

img.benira-ui-image-fallback,
img.benira-ui-image-failed {
    background: var(--bn-color-skeleton_highlight, #f8fafc) !important;
    object-fit: contain !important;
}

.hn-search-highlight {
    padding: 0 !important;
    border-radius: 2px !important;
    background: rgba(var(--bn-color-primary-rgb, 190, 250, 0), .42) !important;
    color: inherit !important;
    font: inherit !important;
}

.hn-search-dropdown[aria-busy="true"] {
    cursor: progress;
}

.benira-cart-notice-host[data-notice-type="warning"] .benira-cart-notice {
    border-color: rgba(var(--bn-color-warning-rgb, 251, 191, 36), .62) !important;
}

.benira-cart-notice-host[data-notice-type="warning"] .benira-cart-notice-icon {
    background: var(--bn-color-warning_bg, #fef3c7) !important;
    color: var(--bn-color-warning_text, #92400e) !important;
}

.benira-cart-notice-host[data-notice-type="info"] .benira-cart-notice-icon::before,
.benira-cart-notice-host[data-notice-type="warning"] .benira-cart-notice-icon::before,
.benira-cart-notice-host[data-notice-type="error"] .benira-cart-notice-icon::before {
    display: block;
    font-family: Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
}

.benira-cart-notice-host[data-notice-type="info"] .benira-cart-notice-icon::before { content: "i"; }
.benira-cart-notice-host[data-notice-type="warning"] .benira-cart-notice-icon::before { content: "!"; }
.benira-cart-notice-host[data-notice-type="error"] .benira-cart-notice-icon::before { content: "!"; }
.benira-cart-notice-host[data-notice-type="info"] .benira-cart-notice-icon svg,
.benira-cart-notice-host[data-notice-type="warning"] .benira-cart-notice-icon svg,
.benira-cart-notice-host[data-notice-type="error"] .benira-cart-notice-icon svg { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    button.benira-ui-pressed,
    a.benira-ui-pressed,
    [role="button"].benira-ui-pressed {
        scale: 1 !important;
    }

    img.benira-ui-image-pending,
    img.benira-ui-image-loaded,
    img.benira-ui-image-fallback {
        transition: none !important;
    }
}

/* Safe-area additions only affect devices that report a non-zero system inset. */
.bn-cart-footer {
    padding-bottom: calc(20px + var(--benira-safe-area-bottom)) !important;
}

.hyper-filter-modal-footer {
    padding-bottom: calc(16px + var(--benira-safe-area-bottom)) !important;
}

[data-benira-ui-dialog="1"] :focus-visible {
    outline: 2px solid var(--bn-color-focus, #0f172a) !important;
    outline-offset: 2px !important;
}


/* Keep existing modal visuals intact while ensuring bottom-sheet motion stays compositor-only. */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
    .bn-plp-modal-content,
    .cat-modal-content,
    .hc-modal-content,
    .hyper-filter-modal,
    .hyper-var-panel,
    .benira-compare-sheet,
    .bn-popup-card--bottom-sheet,
    .hn-modal-box,
    .benira-wheel-auth-modal {
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    .bn-plp-modal.is-transitioning .bn-plp-modal-content,
    .cat-modal-overlay.active .cat-modal-content,
    .hc-modal-overlay.is-open .hc-modal-content,
    .hyper-filter-modal.active,
    .hyper-var-panel.open,
    .benira-compare-modal.is-open .benira-compare-sheet,
    .bn-popup-overlay--bottom-sheet.is-visible .bn-popup-card--bottom-sheet,
    .hn-modal-overlay.active-modal .hn-modal-box,
    .benira-wheel-auth-overlay.is-open .benira-wheel-auth-modal {
        will-change: transform !important;
    }
}


/* Bottom-sheet motion: one compositor-only travel path, no scale or partial slide. */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
    .bn-plp-modal-content,
    .cat-modal-content,
    .hc-modal-content,
    .benira-compare-sheet,
    .bn-popup-overlay--bottom-sheet .bn-popup-card--bottom-sheet {
        transform: translate3d(0, calc(100% + 12px), 0) !important;
        transition: transform .38s cubic-bezier(.22, 1, .36, 1) !important;
        will-change: transform !important;
    }

    .bn-plp-modal.is-open .bn-plp-modal-content,
    .cat-modal-overlay.active .cat-modal-content,
    .cat-modal-overlay[aria-hidden="false"] .cat-modal-content,
    .hc-modal-overlay.is-open .hc-modal-content,
    .hc-modal-overlay.active .hc-modal-content,
    .hc-modal-overlay.show .hc-modal-content,
    .hc-modal-overlay[aria-hidden="false"] .hc-modal-content,
    .benira-compare-modal.is-open .benira-compare-sheet,
    .bn-popup-overlay--bottom-sheet.is-visible .bn-popup-card--bottom-sheet {
        transform: translate3d(0, 0, 0) !important;
    }

    .hyper-filter-modal,
    .hyper-var-panel {
        opacity: 1 !important;
        transform: translate3d(-50%, calc(100% + 12px), 0) !important;
        transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s !important;
        will-change: transform !important;
    }

    .hyper-filter-modal.active,
    .hyper-var-panel.open {
        transform: translate3d(-50%, 0, 0) !important;
        transition-delay: 0s !important;
    }

    .bn-plp-filter-sheet,
    .bn-plp-variable-sheet {
        opacity: 1 !important;
        transform: translate3d(0, calc(100% + 12px), 0) !important;
        transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s !important;
        will-change: transform !important;
    }

    .bn-plp-filter-sheet.active,
    .bn-plp-variable-sheet.active {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
        transition-delay: 0s !important;
    }

    .hyper-filter-overlay,
    .bn-plp-modal-overlay,
    .bn-plp-filter-overlay,
    .bn-plp-variable-overlay {
        transition-duration: .26s !important;
    }

    .cat-modal-overlay,
    .hc-modal-overlay,
    .benira-compare-modal,
    .bn-popup-overlay--bottom-sheet {
        transition: opacity .26s ease, visibility 0s linear .38s !important;
    }

    .cat-modal-overlay.active,
    .cat-modal-overlay[aria-hidden="false"],
    .hc-modal-overlay.is-open,
    .hc-modal-overlay.active,
    .hc-modal-overlay.show,
    .hc-modal-overlay[aria-hidden="false"],
    .benira-compare-modal.is-open,
    .bn-popup-overlay--bottom-sheet.is-visible {
        transition-delay: 0s !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bn-plp-modal-content,
    .bn-plp-filter-sheet,
    .bn-plp-variable-sheet,
    .cat-modal-content,
    .hc-modal-content,
    .hyper-filter-modal,
    .hyper-var-panel,
    .benira-compare-sheet,
    .bn-popup-overlay--bottom-sheet .bn-popup-card--bottom-sheet {
        transition: none !important;
    }
}