/* The floating Filter / Sort bar of a products listing (PL-8, 02-11-2026; plist1 Floating bar block,
   comps/plist1/frontend/views/blocks/floating_bar/index.php). Loaded only by a page whose listing shows one
   (cl_list_floating_bar_ensure_assets()). Its looks are its presets; here only where it sits and how it comes and goes
   (list-floating-bar.js adds .is-shown): at the bottom, or on computers on a side (end of this file).

   z-index 9000: above the cards, the product page's sticky button (1000) and the header's menus; under the drawers and
   popups, the quick view, the cart drawer, a stuck header and the WhatsApp button (frontend-modal-system.md). */
.cl-floating-bar {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100vw - 32px);
    /* Hidden: out of the Tab order and of screen readers too (visibility), and a little lower, for its slide in. */
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 16px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.cl-floating-bar.is-shown {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
    .cl-floating-bar,
    .cl-floating-bar.is-shown {
        transition: none;
    }
}
/* 44px tall at least (Apple's minimum target), on one line. */
.cl-floating-bar .cl-floating-bar-button,
.cl-floating-bar .cl-sort-toggle {
    min-height: 44px;
    white-space: nowrap;
}
/* A long Sort by text ("Sort by: Price, low to high") shortens instead of widening the bar. */
.cl-floating-bar .cl-sort {
    min-width: 0;
}
.cl-floating-bar .cl-sort-toggle {
    max-width: 100%;
}
.cl-floating-bar .cl-sort-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The Category menu (PL-8b, 02-11-2026; frontend/views/blocks/floating_bar/categories.php): first in the bar, its list of
   links opens above it from its start, as the Sort by's list opens from its end; its looks are the Sort by list's two
   designs. A long list scrolls inside, under 60 % of the screen. */
.cl-floating-bar .cl-bar-categories {
    position: relative;
    min-width: 0;
}
.cl-floating-bar .cl-bar-categories-toggle {
    max-width: 100%;
}
.cl-floating-bar .cl-bar-categories-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-bar-categories-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 10000;
    width: max-content;
    min-width: 200px;
    max-width: min(320px, calc(100vw - 32px));
    max-height: 60vh;
    overflow-y: auto;
}
/* !important: a card preset with "force styles" may set its own display. */
.cl-bar-categories-menu[hidden] {
    display: none !important;
}
.cl-bar-categories-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* A link is a line of the list, 44px tall at least. (0,3,0): the buttons preset centres its content at (0,2,0). */
.cl-floating-bar .cl-bar-categories-menu .cl-bar-categories-link {
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    text-align: start;
    text-decoration: none;
}
/* On phones the bar keeps clear of the bottom corners, where the floating open-cart button sits (cart, 10px from the
   corner by default) and the WhatsApp button can: 80px each side. Measured on dev1 at 390px (02-11-2026): Filter and
   "Sort by: Price, low to high" made the bar 272px, reaching into those 80px; it is now at most 230px there. */
@media (max-width: 767.98px) {
    .cl-floating-bar {
        max-width: calc(100vw - 160px);
    }
}
/* The title (follow-up, 02-11-2026; floating_bar_title_*): first in the bar, its look its typography preset. It gives way
   first — shrink 1000000 against the buttons' 1 — so a narrow bar shortens it, then leaves it no room, and the buttons keep
   theirs. Not 1000: the buttons' share was then a fraction of a pixel, enough for a label's ellipsis ("Catego…" at 390px
   with a long title, dev1 02-11-2026). */
.cl-floating-bar .cl-floating-bar-title {
    flex: 0 1000000 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* On a side of the screen (floating_bar_position start | end; computers only — below 768px these classes change nothing,
   so phones keep the bottom bar, and list-floating-bar.js takes them off where the listing leaves the side less room than
   the bar is wide): centred on its edge 24px in (Material's vertical toolbar margin), its title and buttons
   stacked, each button's icon above its label, sliding in from its edge (mirrored in a right-to-left store). Its Sort by
   and Category lists open beside it, toward the page, centred on the bar (so on the screen) rather than on their button:
   their wrappers stop being their reference, the bar is. (0,3,0): the buttons preset sets its own layout at (0,2,0). */
@media (min-width: 768px) {
    .cl-floating-bar.cl-floating-bar-side {
        top: 50%;
        bottom: auto;
        left: auto;
        flex-direction: column;
        align-items: stretch;
        /* Compact (Material: no wide buttons in a vertical toolbar): it stands over the page's edge, so a long label
           ("Sort by: Featured") takes two lines rather than widening the bar over the products. Measured on dev1 at
           1440px: 132px wide it covered the first column of cards by 36px. */
        max-width: 104px;
        transform: translate(-16px, -50%);
    }
    .cl-floating-bar.cl-floating-bar-start {
        inset-inline-start: 24px;
    }
    .cl-floating-bar.cl-floating-bar-end {
        inset-inline-end: 24px;
        transform: translate(16px, -50%);
    }
    [dir="rtl"] .cl-floating-bar.cl-floating-bar-start {
        transform: translate(16px, -50%);
    }
    [dir="rtl"] .cl-floating-bar.cl-floating-bar-end {
        transform: translate(-16px, -50%);
    }
    .cl-floating-bar.cl-floating-bar-side.is-shown {
        transform: translate(0, -50%);
    }
    .cl-floating-bar.cl-floating-bar-side .cl-floating-bar-button,
    .cl-floating-bar.cl-floating-bar-side .cl-sort-toggle {
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: 56px;
        white-space: normal;
        text-align: center;
    }
    .cl-floating-bar.cl-floating-bar-side .cl-floating-bar-title,
    .cl-floating-bar.cl-floating-bar-side .cl-sort-label,
    .cl-floating-bar.cl-floating-bar-side .cl-bar-categories-label {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        text-align: center;
    }
    .cl-floating-bar.cl-floating-bar-side .cl-sort,
    .cl-floating-bar.cl-floating-bar-side .cl-bar-categories {
        position: static;
        width: 100%;
    }
    .cl-floating-bar.cl-floating-bar-side .cl-sort-menu,
    .cl-floating-bar.cl-floating-bar-side .cl-bar-categories-menu {
        top: 50%;
        bottom: auto;
        max-height: 80vh;
        overflow-y: auto;
        transform: translateY(-50%);
    }
    .cl-floating-bar.cl-floating-bar-start .cl-sort-menu,
    .cl-floating-bar.cl-floating-bar-start .cl-bar-categories-menu {
        inset-inline-start: calc(100% + 12px);
        inset-inline-end: auto;
    }
    .cl-floating-bar.cl-floating-bar-end .cl-sort-menu,
    .cl-floating-bar.cl-floating-bar-end .cl-bar-categories-menu {
        inset-inline-end: calc(100% + 12px);
        inset-inline-start: auto;
    }
}