/* ══ SHOP ALL — page-specific styling ════════════════════════════════════ The filter rail itself (.cx-layout, .cx-filters, .cx-fgroup, .cx-fopt, .cx-apill, .cx-fmob …) already lives in storefront.css and is used as-is. Everything here is either the grid override this page has always had, or the price slider, which storefront.css has no equivalent for. Tokens come from storefront.css :root. ══════════════════════════════════════════════════════════════════════ */ /* ── Grid columns ───────────────────────────────────────────────────────── The rail is 232px wide and stays INLINE beside the grid down to 900px, where storefront.css stacks it. So between 901px and ~1040px, three columns share whatever is left of a ~800px page and each card falls to about 144px of content — narrower than the 4-column card on a 2560px monitor. Two columns through that band instead. */ #shopGrid{grid-template-columns:repeat(4,1fr);} @media (max-width:1100px){#shopGrid{grid-template-columns:repeat(3,1fr);}} @media (max-width:1040px) and (min-width:901px){#shopGrid{grid-template-columns:repeat(2,1fr);}} @media (max-width:700px){#shopGrid{grid-template-columns:repeat(2,1fr);}} /* Retail price sits beside the member price here, not struck through */ .retail-val{text-decoration:none;} /* ── "Join to get this price" sized to "Add to bag" ─────────────────────── The two are declared in ONE rule on purpose: they are a stacked pair of controls, and listing them together means a future change to the button's padding or radius can't leave the hint behind at a different size. THE HEIGHT IS SET BY line-height, NOT font-size. A