/* ========================================================================== Air Market - v9 mobile layer, browse facet collapse (V9-MOBILE-SPEC.md section 3.4, route #/browse). Owner: T2.3. Paired JS: assets/js/v3/filterbar.js (one aria-expanded toggle; same DOM, CSS-only collapse otherwise). NAME COLLISION WARNING, read before touching anything: this file is store-v9-BROWSE.css, the v9 mobile sheet. store-v6-browse.css is a DIFFERENT, already-shipped file - the v6 Discover/browse face (:root[data-v6="on"] .v6-disc-layout etc). Do not confuse the two, and do not duplicate store-v6-browse.css:106-108's existing `@media (max-width: 720px) { .v6-disc-layout { grid-template-columns: 1fr; } }` here - that collapse already ships. What this file adds on top is the FACET RAIL's presentation once it is already a single column: a "Filters (n)" disclosure button above the results, the facet rail itself becoming a slide-down panel below that button (same markup, CSS-only collapse plus the one aria-expanded toggle in filterbar.js), and 44px row heights for the type/category count rows inside the panel. Results should start on the first screen, not three screens below the filters. HARD RULE, identical across all seven v9 sheets: every declaration in this file must live inside `@media (max-width: 720px)` or `@media (max-width: 480px)` (store-v9-mobile.css's BREAKPOINTS section explains why those two numbers and not a ladder). A rule outside either query is a desktop regression by definition - the >= 861px byte-identity bar this whole layer exists to hold depends on that being true of every one of the seven sheets, not just six of them. SCOPING: mirror the specificity of whatever you are overriding - see store-v9-mobile.css's SCOPING section for the exact prefixes. The Discover/browse facet layout is v6: `:root[data-v6="on"]`. The disclosure button and slide-down panel state are new surfaces this sheet introduces, so they need no prefix - there is nothing above to tie-break against. Never !important. ========================================================================== */ /* Rules start here. */ /* -------------------------------------------------------------------------- THE TRADE THIS SECTION MAKES. Collapsing eight facet groups behind one tap costs something real: a shopper who wants "no internet access" AND "checked by AIR" now needs one extra tap to even see that those options exist. That is a worse first impression than a rail sitting open beside the results, on any screen wide enough to show both at once. Below 720px there is no such screen - store-v6-browse.css:106-108's own collapse to one column is what proves it, and section 1 of the spec measured exactly what an always-open rail costs there: the first result card at roughly y=1926 on a 390x844 viewport, more than two full screens of scrolling before a shopper sees a single listing. A collapsed-by-default disclosure trades that one extra tap for getting the results (the actual reason anyone opened this page) onto the first screen. The "Filters (n)" count on the button is the other half of the trade: it is what stops "collapsed" from also meaning "invisible" - a shopper who already picked a filter and navigated back to this route can see, without opening anything, that the filter is still active. WHOSE DOM THIS IS. The facet rail (.v6-disc-layout, [data-v6-facets], .v6-facet-val and friends) is rendered by assets/js/v6/discover.js, a file this task does not own - #/browse only DELEGATES its body there under the v6 flag (assets/js/v3/filterbar.js's header explains the delegation). So every rule below either targets a brand-new class this layer introduces (no prefix needed) or adds properties the v6 rule for that selector never sets (so there is no specificity fight to win, only a v6-scoped prefix to mirror out of caution - see individual comments). Nothing here restyles a property store-v6-browse.css already owns. -------------------------------------------------------------------------- */ @media (max-width: 720px) { /* ---- the disclosure button -------------------------------------------- A brand-new surface (assets/js/v3/filterbar.js injects it as the element immediately before .v6-disc-layout, once per route render of #/browse under the v6 flag, only when this same 720px query matches in JS via matchMedia - so at wider viewports the button is never created at all, not merely hidden). No prefix: nothing above this layer defines .v9-browse-filters-toggle. */ .v9-browse-filters-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; box-sizing: border-box; min-height: 44px; margin: 0 0 var(--space-16); padding: 0 var(--space-16); font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--color-text-primary); background: var(--color-surface-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); cursor: var(--cur-pointer); } .v9-browse-filters-toggle:focus-visible { outline: none; border-color: var(--color-border-focus); } /* A drawn chevron, not a sprite icon - sprite.js's set is another file's surface, and a button that only ever needs "open" or "closed" does not earn a new icon dependency. Rotates to point up when the panel is open; prefers-reduced-motion turns the rotation into a plain snap, nested below with the slide transition it shares a cause with. */ .v9-browse-filters-toggle::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; } .v9-browse-filters-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); } /* ---- the slide-down panel ---------------------------------------------- .v9-facets-panel is added by filterbar.js to the SAME