/* ================================================ RED POINT — CATEGORY MENU ================================================ The button and drawer shared by all three category strips: the Hero (home and the landing pages), Category Tabs (product page) and Category Hero (category archive). One stylesheet rather than three copies. Two rounds of this build were spent fixing the same bug twice because a strip had been duplicated instead of shared. Not in the Figma — the client asked for it once the real catalogue outgrew the design's eight-pill row. ================================================ */ .rp-catmenu { position: relative; flex-shrink: 0; } /* ------------------------------------------------ THE STRIP IS TWO ITEMS, NOT NINE ------------------------------------------------ The pills and the menu button used to be siblings in one wrapping flex row. That works only while everything fits on one line. It did at 1440px and at 1366px — which is why this looked fine for weeks — but the eight pills measure ~1155px and the button needs another 68px, and the hero's content box is only `viewport - 120px`. Below about 1340px the button was the item that wrapped: it left the strip, landed alone on a second line at the RTL row start (the right), and straddled the hero's bottom edge. The client read that as the hamburger being missing on desktop, and they were right — it was no longer in the strip. So the pills now sit in their own wrapper and THAT is what wraps. The button is a sibling of the set, which means no amount of pills can push it onto a line of its own: it stays on the strip, vertically centred, at the far left under RTL. `gap: inherit` rather than a number — each strip sets its own (16px, 12px at tablet), and the set has to keep whatever its row is using or the tablet override would be lost. `justify-content: inherit` for the same reason: the hero and category archive start their rows at the RTL right edge, the product page centres its chips. `min-width: 0` so the set is allowed to shrink and wrap internally instead of forcing the row wider than its container. THE TAG NAME IS IN THE SELECTOR ON PURPOSE — `.rp-hero nav.rp-hero__pills`, not `.rp-hero__pills`. The base rows declare `flex-wrap: wrap` in their own stylesheets at (0,1,0), this file is enqueued BEFORE those on some pages, and an equal-weight rule loses on load order. Shipped once without this and the fix silently did nothing on the live site: the row kept wrapping and the button kept dropping off it, exactly as before. (0,2,1) settles it. */ /* `:not(.rp-blogx__filter)` — THE BLOG BROWSER BORROWS THESE CLASS NAMES. Its post filter renders as `