/* * Catalog archive — filter rail, sort toolbar, product grid. * * Marker class: .nou-catalog-archive * Depends on: assets/css/catalog-blog.css (the pager) * assets/css/catalog-home.css (the grid and the card) * assets/css/catalog-page.css (the pathbar, .nou-catalog-btn) * assets/css/catalog.css (shell, chip, title, section) * * DELIBERATELY SMALL, for the same reason assets/css/catalog-blog.css is: the * cards in design-lab/wf-c-category.html are the cards from the home page, and * the pager is the pager from the blog. Only three things on this page are new: * the two-column layout, the filter rail and the sort toolbar. * * WHAT THIS FIXES IN THE OLD ARCHIVE. templates/archive-product.html used to * ship a 2-column grid with 4:3 images, while the home page showed the same * products at 3 columns and 16:10 — one product, two sizes, two crops. It also * hardcoded #dcdcde for the card border and an inline 8px radius that fought * the 12px in assets/css/woocommerce.css. Reusing .nou-catalog-grid and * .nou-catalog-card removes all four faults at once: there is now exactly one * definition of a product card in the theme. */ /* ================================================================== * * TWO-COLUMN LAYOUT * ================================================================== */ /* * 208px for the rail. The longest label the counts produce here is * "Wordpress Themes" plus its number in mono at 11.5px, which measures just * under 200px; at 200px it touches the edge, at 208px it never wraps and the * grid on the right still holds three columns at 1440px. * * Measured at 1440px: shell 1200 minus the 40px gutters is 1120, minus the rail * 208 and the 48px gap leaves 864 for the grid; three columns less two 24px * gutters is 272px a card, so a 16:10 preview is 170px tall — still legible * with the name and price beneath it. */ .nou-catalog-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: clamp(28px, 3.4vw, 48px); align-items: start; } /* Nothing to filter by (a leaf category, or a shop with one price): the grid * takes the whole width rather than leaving a column of empty space. */ .nou-catalog-layout--bare { grid-template-columns: minmax(0, 1fr); } /* * min-width: 0 on the grid ITEM, not only on the track. A grid item's default * min-width is auto, which is measured from its content, so one long product * name widens the column past minmax(0, 1fr) and pushes the rail off. */ .nou-catalog-layout__main { min-width: 0; } /* * The grid loses 208px to the rail, so it drops to two columns earlier than * the home page does. * * BOTH BREAKPOINTS ARE SPELLED OUT ON PURPOSE. `.nou-catalog-layout * .nou-catalog-grid` is two classes, so it outranks the single-class rules in * catalog-home.css: a bare `max-width: 1180px` override would still be winning * at 400px and would hold two columns where the home page correctly shows one. * The floor is therefore closed at 560px, matching catalog-home.css. */ @media (min-width: 561px) and (max-width: 1180px) { .nou-catalog-layout .nou-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .nou-catalog-layout .nou-catalog-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { /* * The rail goes ABOVE the grid, not below it. Filters underneath the * results are filters you find after you have finished scrolling past the * thing they filter. */ .nou-catalog-layout { grid-template-columns: minmax(0, 1fr); } .nou-catalog-layout__rail { order: -1; } } /* ================================================================== * * FILTER RAIL * ================================================================== */ .nou-catalog-filters { display: grid; gap: clamp(20px, 2.4vw, 26px); /* 88px clears the pinned header, the same figure the article table of * contents uses. */ position: sticky; top: 88px; } @media (max-width: 900px) { /* Sticky is pointless once the rail is a band at the top of the page, and * it would pin a tall block over the results. */ .nou-catalog-filters { position: static; } } /* * The form needs an accessible name or it is not exposed as a form at all, and * the design has no room for a visible "Filter products" heading above three * legends that already say what they do. So the name is there for assistive * technology and clipped for everyone else. * * Clipped, NOT `display: none` and not `visibility: hidden`: both remove the * element from the accessibility tree, which would defeat the point. */ .nou-catalog-filters__heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* * RESET ALL FOUR BORDERS FIRST. A
carries a 2px groove border by * default and punches a hole in the TOP edge to sit inside it. Only * setting border-top here leaves the browser's own three sides in place and * draws a box with a notch, which is not the hairline the design asks for. */ .nou-catalog-filters__group { min-width: 0; margin: 0; padding: 0; border: 0; } /* * The divider is border-BOTTOM, and that is not a style preference. * * clears space in its fieldset's border-top so its text can sit on the * line; with `width: 100%` on the legend that cleared space is the full width, * so a border-top is erased completely. border-bottom is out of the legend's * reach, and a rule under every group but the last draws the same thing: lines * BETWEEN the groups. */ .nou-catalog-filters__group:not(:last-of-type) { padding-bottom: clamp(16px, 2vw, 20px); border-bottom: 1px solid var(--wp--custom--line--strong); } /* * is inline by default, floats itself over the border and carries its * own inline padding. Turning it into a block with no padding makes it behave * like an ordinary heading line so margin-bottom applies. */ .nou-catalog-filters__title { display: block; float: none; width: 100%; margin: 0 0 12px; padding: 0; font-family: var(--wp--preset--font-family--mono); font-size: 10px; font-weight: var(--wp--custom--font-weight--medium); letter-spacing: 0.09em; text-transform: uppercase; color: var(--wp--custom--neutral--600); } .nou-catalog-filters__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .nou-catalog-filters__list li { margin: 0; } /* * The whole row is the target, not just the box. A 14px checkbox on its own is * a 14px touch target, well under the 24px minimum in WCAG 2.5.8; wrapping it * in a padded