/* ============================================================
   mobile-sort.css — CORE mobile sort bottom-sheet (<= 767px)
   ------------------------------------------------------------
   Sorting on mobile lives in the bottom tab bar, not in a sticky
   toolbar above the products: the tab bar is already on screen, so
   the entry point costs no vertical space, while the old sticky
   [Filter][Sort] bar permanently ate ~60px of the product area.

   AJAX-safe: .product-selectors is NOT moved in the DOM — it is
   promoted to a bottom sheet purely via the .m-sort-open class on
   <html>/<body> (toggled by mobile-sort.js).

   Which tab is shown is decided here, from the server-rendered page
   class on <html>, so no JS is needed for the swap (no flash).

   NOTE: faceted FILTERS are deliberately not exposed on mobile
   (user decision 2026-09-02). The markup still renders and still
   works — it is only hidden — so restoring it is a few lines.
   ============================================================ */

/* desktop: the tab bar itself is hidden, but keep the Sort tab out of
   the document flow regardless of viewport */
.m-nav-sort { display: none; }

@media (max-width: 767.98px) {

    /* ---------- tab swap: Home -> Sort on catalog listing pages ----------
       The six page types below are exactly the ones that render
       _CatalogSelectors (category, manufacturer, search, vendor, product tag,
       recently-added). Same selector-list convention as mobile-category.css. */
    html.html-category-page .m-nav-home,
    html.html-manufacturer-page .m-nav-home,
    html.html-search-page .m-nav-home,
    html.html-product-tag-page .m-nav-home,
    html.html-recently-added-products-page .m-nav-home,
    html.html-vendor-page .m-nav-home { display: none; }

    html.html-category-page .m-nav-sort,
    html.html-manufacturer-page .m-nav-sort,
    html.html-search-page .m-nav-sort,
    html.html-product-tag-page .m-nav-sort,
    html.html-recently-added-products-page .m-nav-sort,
    html.html-vendor-page .m-nav-sort { display: block; }

    /* mobile-sort.js sets [hidden] on the one case CSS cannot detect: a catalog
       page whose _CatalogSelectors rendered nothing (empty search). The JS
       correction must always win over the rule above. */
    .m-nav-sort[hidden] { display: none !important; }

    /* ---------- the inline toolbar is redundant now ----------
       Portrait: sorting is reached from the tab bar, so the inline toolbar would
       only re-spend the space this change reclaims. (Landscape re-enables it
       further down — the tab bar is hidden there.) */
    html.html-category-page .product-selectors,
    html.html-manufacturer-page .product-selectors,
    html.html-search-page .product-selectors,
    html.html-product-tag-page .product-selectors,
    html.html-recently-added-products-page .product-selectors,
    html.html-vendor-page .product-selectors { display: none; }

    /* ---------- faceted filters: not exposed on mobile ----------
       .catalog-filter-bar-h is the horizontal filter strip on 1-column category
       pages. The .block.product-filters blocks are the same filters rendered as
       sidebar accordions (2-column category, and search) — without this rule they
       would resurface UNDER the grid, because mobile-category.css sends .sidebar
       to order:2 on listing pages.
       Category/manufacturer NAVIGATION blocks are intentionally NOT hidden: they
       are browse paths, not filters, and they are the only way left to move
       between categories from a search result. */
    .catalog-filter-bar-h,
    html.html-category-page .block.product-filters,
    html.html-manufacturer-page .block.product-filters,
    html.html-search-page .block.product-filters,
    html.html-product-tag-page .block.product-filters,
    html.html-recently-added-products-page .block.product-filters,
    html.html-vendor-page .block.product-filters { display: none !important; }

    /* ---------- bottom sheet ---------- */
    .m-sort-backdrop {
        display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
        z-index: 1090;
    }
    body.m-sort-open .m-sort-backdrop { display: block; }
    /* lock BOTH: <html> is the scroll container in this theme (same as the menu drawer) */
    html.m-sort-open, body.m-sort-open { overflow: hidden; }

    body.m-sort-open .product-selectors {
        display: block !important; position: fixed; inset-inline: 0; inset-block-end: 0;
        z-index: 1091; background: #fff; color: #222;
        max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        border-start-start-radius: 16px; border-start-end-radius: 16px;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .2);
        /* the tab bar is promoted ABOVE this sheet (see below) so the Sort tab stays
           tappable to close — which means it also covers the sheet last rows. Pad past it. */
        padding: 20px 16px calc(var(--m-bottomnav-h) + 20px + env(safe-area-inset-bottom, 0px));
        /* the theme gives .product-selectors margin-bottom:30px for its in-flow use.
           On a bottom-anchored fixed box, `bottom:0` aligns the MARGIN edge, so that
           30px lifted the sheet off the viewport floor and pushed its last rows behind
           the opaque tab bar — the sheet read as cut off. */
        margin: 0 !important;
    }

    /* Floating page furniture outranks the sheet (the promo banner sits at
       z-index 2147483645, the accessibility FAB at 1e9) and covered the sort
       controls. They are page-level affordances, not sheet controls — take them
       out while the sheet owns the screen. */
    body.m-sort-open .wpu-banner,
    body.m-sort-open .at-trigger,
    body.m-sort-open #backTop { display: none !important; }

    /* keep the tab bar above the backdrop while the sheet is open, so tapping Sort
       again closes it (the expected toggle) instead of hitting the scrim */
    body.m-sort-open .mobile-bottom-nav { z-index: 1092; }
    body.m-sort-open .m-sort-trigger { color: var(--m-accent); }

    /* drawer header */
    .m-drawer-title {
        font-size: 16px; font-weight: 700; margin: 0 0 12px; display: none;
        align-items: center; justify-content: space-between;
    }
    .m-drawer-title .m-drawer-close {
        border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #222;
        min-width: 44px; min-height: 44px;
    }
    body.m-sort-open .product-selectors .m-drawer-title { display: flex; }

    /* Sort sheet: stack Sort-by / Display as FULL-WIDTH labelled rows. The inline,
       narrow layout (mobile-category.css) is meant for the collapsed in-page toolbar;
       inside the sheet, full-width rows are easier to tap. */
    body.m-sort-open .product-selectors .product-sorting,
    body.m-sort-open .product-selectors .product-page-size {
        display: block; width: 100%; padding: 0; margin: 0 0 14px;
    }
    body.m-sort-open .product-selectors .product-sorting .row,
    body.m-sort-open .product-selectors .product-page-size .row {
        display: block !important; margin: 0;
    }
    body.m-sort-open .product-selectors .product-span {
        display: block; width: 100% !important; padding: 0;
    }
    body.m-sort-open .product-selectors .product-span label {
        display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; white-space: normal;
    }
    body.m-sort-open .product-selectors .remove_left_padding {
        width: 100% !important; padding: 0;
    }
    body.m-sort-open .product-selectors .dropdown-filter {
        width: 100% !important; min-height: 44px; font-size: 15px;
    }

    /* grid/list view toggle is hidden on mobile: BOTH viewmodes render as the same 2-up
       grid (see mobile-category.css), so the toggle changes nothing — a control that does
       nothing is confusing. */
    .product-viewmode { display: none !important; }
}

/* Landscape: the bottom tab bar is hidden to preserve vertical space
   (mobile-header-v2.css), which would leave no way to sort — put the inline
   toolbar back. Same six page types as the portrait hide rule. */
@media (max-width: 767.98px) and (orientation: landscape) {
    html.html-category-page .product-selectors,
    html.html-manufacturer-page .product-selectors,
    html.html-search-page .product-selectors,
    html.html-product-tag-page .product-selectors,
    html.html-recently-added-products-page .product-selectors,
    html.html-vendor-page .product-selectors { display: block; }
}

/* Print: an open sheet is position:fixed and would float over the printed page. */
@media print {
    body.m-sort-open .product-selectors { position: static !important; max-height: none; }
    .m-sort-backdrop { display: none !important; }
}