/* ========================================================================== category.css — category / tag listing page overrides Loaded AFTER styles/index.css, header.css and home.css (see category.ejs). home.css already switches body.sp-home from the old full-viewport swiper deck to normal document flow and supplies the shared `.sp-main` content width/padding -- category.ejs reuses both by carrying `class="sp-home sp-category"` on . Everything specific to this page is additionally scoped under body.sp-category so it can't leak onto the homepage or any other view sharing home.css. Also loaded by all_items.ejs (see all_items.css, loaded right after this file): the "filters sidebar + sort toolbar + infinite-scroll product grid" shell below is identical structure for both a single category/tag listing and the all-items listing, so it lives here once and all_items.css only adds the bits that differ (a second filter facet for categories, clear visual separation between the two facets, and a couple of offcanvas corrections). If you're changing card/grid/filter layout, change it here -- all_items.css should only ever need facet-specific additions. ========================================================================== */ body.sp-category .sp-main { padding-top: 0.5rem; } /* ---------- Page title / count ---------- */ .sp-category-hero { padding: 1.5rem 0 1.25rem; border-bottom: 2px solid var(--sp-ink); margin-bottom: 24px; } .sp-category-hero__title { margin: 0 0 4px; font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; letter-spacing: -0.01em; color: var(--sp-ink); } .sp-category-hero__count { margin: 0; font-size: 14px; color: var(--sp-muted); font-weight: 500; } @media (max-width: 560px) { .sp-category-hero { padding: 1rem 0 1rem; margin-bottom: 16px; } } /* ========================================================================== Card container/media base rules, copied verbatim from items_grid_shell.ejs's own