/* Ryjik — mobile bottom-sheet for filter drawer.
   Overrides theme's left-side drawer (.layout-sidebar.product-sidebar)
   on shop/archive/single-product pages at <=1023px breakpoint.
   Pure CSS — preserves existing JS toggle (toggleClass('active')) and
   overlay click-to-close. Swipe-left dismiss still works (acceptable). */

@media (max-width: 1023px) {
    /* Convert side-drawer into bottom-sheet on WC pages only.
       .product-sidebar is set by theme on the filter sidebar specifically. */
    body.woocommerce .layout-sidebar.product-sidebar,
    body.woocommerce-page .layout-sidebar.product-sidebar {
        /* viewport-fit=cover пускает layout-viewport за notch — на iPhone с notch
           safe-area-inset-top добавляет ~47px к визуальной высоте хедера.
           Без env() drawer уходит под нижнюю часть оранжевого хедера. */
        top: var(--ryjik-drawer-top, 64px) !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        /* Definite JS-measured height -> real bounded scroll box.
           Fallback dvh tracks Chrome/Safari toolbar show/hide before JS runs. */
        height: var(--ryjik-drawer-height, calc(100dvh - var(--ryjik-drawer-top, 64px))) !important;
        max-height: none !important;
        /* +100px buffer past 100% — iOS Safari visual viewport ≠ layout viewport
           во время scroll'а (address bar hide), drawer мог torchить snizu */
        transform: translateY(calc(100% + 100px)) !important;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
        /* Internal scroll; X-overflow hidden preserves rounded corners.
           !important needed — theme sets overflow:hidden !important on the drawer. */
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain !important; /* don't chain scroll to body */
    }

    /* Lock background page scroll while sheet is open */
    body.woocommerce:has(.layout-sidebar.product-sidebar.active),
    body.woocommerce-page:has(.layout-sidebar.product-sidebar.active) {
        overflow: hidden !important;
    }

    body.woocommerce .layout-sidebar.product-sidebar.active,
    body.woocommerce-page .layout-sidebar.product-sidebar.active {
        transform: translateY(0) !important;
    }

    /* Decorative drag handle at top of sheet */
    body.woocommerce .layout-sidebar.product-sidebar::before,
    body.woocommerce-page .layout-sidebar.product-sidebar::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.18);
        z-index: 1;
        pointer-events: none;
    }

    /* Push content below the drag handle (theme defaults to 32px padding) */
    body.woocommerce .layout-sidebar.product-sidebar .widget-area,
    body.woocommerce-page .layout-sidebar.product-sidebar .widget-area {
        padding-top: 28px !important;
        /* clear the dynamic browser bottom bar + the iOS home indicator */
        padding-bottom: calc(var(--ryjik-drawer-bottom-inset, 0px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    }

    /* Overlay: keep theme default look, just no left-side gradient */
    .sidebar-layout-overlay {
        background: rgba(0, 0, 0, 0.45);
    }

    /* Hide the cookie-consent banner while the filter sheet is open. The
       banner is a separate fixed bottom:0 element (ryjik-cookie-consent.php,
       z-index 9999); with the sheet open it has nothing to do and only risks
       overlapping the sheet bottom. Restored automatically on close. */
    body.woocommerce:has(.layout-sidebar.product-sidebar.active) .ryjik-consent,
    body.woocommerce-page:has(.layout-sidebar.product-sidebar.active) .ryjik-consent {
        display: none !important;
    }
}