/* ========================================================================== OstuGrupp — THE ARCHIVE FRAME (archive-polish.css) The page this file is about: /pood/, every product category, every product tag. ~3472 products (counted by card-d3.css:31 against live on 2026-08-14), and the place a shopper actually browses. The design pass has covered the hero, the product card, the cart, the checkout and the product page. The CARD is card-d3.css and is not touched by a single selector here. What was never designed is everything AROUND the grid — the header, the control row, the band between them, and the page a shopper lands on when a filter returns nothing. PURE STYLE LAYER. It renders nothing, hooks no template, prints no markup and invents no text. Every selector below already exists in the DOM that inc/shop-extras.php, inc/ajax-filters.php and WooCommerce's own archive-product.php emit today: div.container.section-y.woo-content inc/woocommerce.php:43 nav.woocommerce-breadcrumb inc/woocommerce.php:45 header.woocommerce-products-header h1.woocommerce-products-header__title div.term-description taxonomy archives div.page-description the /pood/ page's own intro div.ostu-shop-layout inc/ajax-filters.php:797 button.ostu-filters-mobile-trigger inc/ajax-filters.php:798 aside.ostu-filters inc/ajax-filters.php:807 div.ostu-shop-main inc/ajax-filters.php:832 div.ostu-shop-toolbar inc/shop-extras.php:99 p.woocommerce-result-count WC core, priority 20 form.woocommerce-ordering > select.orderby WC core, priority 30 ul.products > li.product-card (card-d3.css owns these) nav.woocommerce-pagination div.ostu-load-more inc/ajax-filters.php:851 ------------------------------------------------------------------------ THREE MOMENTS, NOT THIRTY IMPROVEMENTS ------------------------------------------------------------------------ 1 · THE CONTROL ROW. inc/shop-extras.php:99 wraps the result count and the sort select in .ostu-shop-toolbar, and assets/css/shop.css:15-27 draws that wrapper as a CARD — white, 1px border, --radius-lg, --shadow-card. The pack's own elevation ladder says a card is level 1 and lists what lives there: "tootekaart, paneel, kleepuv riba" (D4, sample:1436-1444, transcribed in docs/DISAIN-KOMPONENDID.md section D4). A toolbar is none of the three; it is "sisuplokk lehel" — level 0, "ainult piir". So above the grid a shopper currently meets three floating white boxes in a row (breadcrumb pill, toolbar card, then the cards themselves) before the first product, and that stack is a large part of what "thrown together" looks like. Here the toolbar becomes a bounded rule row: no fill, no shadow, no corner, one hairline along the bottom that spans exactly the grid width and reads as the lid of the results. And the control inside it. The sort select is the single most-used control on this page and it announces itself with nothing at all: a white box whose only glyph is a chevron shared with every other select in the shop. It gets a sort glyph on its leading edge, the pack's field border (1.5px --border-strong, D2) and a hover state it has never had. Its FONT SIZE STAYS 16px — D2's reason is not aesthetic: "telefonis on see piir, millest allpool iOS lehe sisse suumib ja ostja kaotab konteksti", and 73% of this shop is a phone. 2 · THE BAND. On a phone the filter button and the control row are the same gesture split across two parents: .ostu-filters-mobile-trigger is a child of .ostu-shop-layout (inc/ajax-filters.php:798) and the toolbar is a child of .ostu-shop-main (inc/shop-extras.php:99), with the layout's 28px gap (filters.css:15) between them. They are pulled into one band. More importantly the button gains the state it never had: with filters ON it looks EXACTLY as it does with filters off, apart from a 20px badge. On a phone the chips live inside the off-canvas drawer (inc/ajax-filters.php:816) — invisible until the drawer is opened — so that badge is the ONLY thing on screen telling a shopper they are looking at a filtered subset of 3472 products. It should not be the only thing. See section 3. 3 · THE PAGE WITH NOTHING ON IT. Filter down to zero and this is a real page a real shopper reaches, and it currently looks like an error: a 460px card holding a 40px magnifying glass inside a grey circle (shop.css:49-69). The shop already owns a purpose-drawn illustration for exactly this state — assets/img/illustrations/search-empty.svg, the pack's C set (sample:809-833) — and empty-states.css installed the other three (cart, wishlist, 404) while this one, the fifth, kept the glyph. It joins them: same drawing, same clamp(104px, 26vw, 136px) as empty-states.css:46-48, same 560px measure that empty-states.css:166 chose so that "all four now share one measure". Five now. ------------------------------------------------------------------------ WHAT THIS FILE DELIBERATELY DOES NOT TOUCH ------------------------------------------------------------------------ · THE PRODUCT CARD. Not one selector below matches inside li.product-card. card-d3.css owns it. · THE FILTER CHIPS. pack-components.css:433-600 rebuilt them to D5 in this same release. Restyling them here would be two authors on one component, which is how a value drifts. The one chip fact this file acts on is a COMPOSITION fact, not a chip fact: on a phone they are inside a drawer. · FOCUS RINGS. a11y.css:33-46 owns :focus-visible shop-wide at (0,2,0) with outline + a double box-shadow. Nothing here declares outline or a focus box-shadow. The select's :focus-visible rule below sets border-colour ONLY, which a11y.css does not set, so the ring stays exactly one ring. · PAGINATION MATERIAL. It is NOT unstyled core markup — woocommerce.css: 386-442 already builds 44px pills with --radius, tabular-nums and a solid green .current, and motion.css:218-262 owns their hover/press/focus. It sits three values away from D10 (1.5px --border-strong instead of 1px --border; --brand-a1 + --brand-a3 on hover instead of white + green text; the dots at --text-subtle). Three values inside a file I may not edit is a report, not a rule — see the handover. The one pagination fact this file acts on is again composition: the gap between the numbers and "Lae rohkem", which D10 says are ONE control, not two. · THE BREADCRUMB. woocommerce.css:26-39 gives it a pill; it appears on the product page too, so it is shop-wide furniture, not archive frame. · THE RESULT-COUNT SENTENCE ITSELF. D10 marks the "Näidatud 48 toodet 287-st" counter as ⏸ waiting on server data (sample:1596-1599) because AJAX sends a per-page number that would be stale on arrival. Rule 2 of the pack: a wrong number is worse than no number. Nothing here invents one, and no ::before/::after adds a word to it — a CSS-injected Estonian plural is how you get "1 toodet" (docs/DISAIN-KOMPONENDID.md 5.2c). ------------------------------------------------------------------------ SPECIFICITY (Trap 1) AND FALLBACKS ------------------------------------------------------------------------ Every rule states what it had to beat. NOTHING BELOW WAS MEASURED IN A BROWSER — there was none in this session — so the arithmetic is arithmetic, not a computed value, exactly as CLAUDE.md Trap 1 warns. Where a rule only has to beat a sheet this file is guaranteed to load after, it is still written one class heavier, because load order is the thing that stops being true when a plugin recombines stylesheets. Every var() carries its literal. tokens.css is NOT deployed live yet (verified for card-d3.css:143-146 on 2026-08-14: the live page enqueues main.css but no tokens.css), so --brand, --text-muted, --space-*, --tap-min and the --text-* type steps do not resolve on the live site today and an unresolvable custom property is the guaranteed-invalid value, not a fallback to the old one. NOTHING HERE GOES NEAR THE CHECKOUT. The stylesheet is enqueued on shop and product-taxonomy archives only (inc/archive-polish.php), where is_cart(), is_checkout() and is_account_page() are all false, and it names no payment selector of any kind (CLAUDE.md invariant 1). ========================================================================== */ /* ========================================================================== 1 · THE HEADER BLOCK — a title, a paragraph, and a measure ========================================================================== Two archive types print two different descriptions and the theme styles only one of them: .term-description woocommerce.css:72 — 720px, --slate-600, 8px top .page-description NOTHING, anywhere. Verified: grep over assets/css returns zero matches. .page-description is the intro text of the /pood/ page itself, i.e. the most-visited archive in the shop, and it currently runs at the full .container measure — 1440px minus 2x32px padding = 1376px at desktop, roughly 170 characters per line at 16px. That is the exact defect type-rhythm.css:42-47 measured on the product description and fixed with 68ch, and this is the same defect on a different block, so it takes the same value rather than a new one. Below ~900px the container is already narrower than 68ch and the cap does nothing (type-rhythm.css:196-200). The two descriptions also disagree on colour: .term-description is muted, .page-description inherits body --fg. One role, two colours, decided by which archive you happened to open. Both become --text-muted. Specificity: both the (0,2,0) scoped form and the (0,1,0) bare form are in the list, and a selector list is evaluated per selector, so each applies at its own weight — the scoped form beats woocommerce.css:72 (0,1,0) outright and the bare form covers the case where a plugin moves the description out of
. Same both-shapes technique as type-rhythm.css:49-56. */ .woocommerce-products-header .term-description, .woocommerce-products-header .page-description, .term-description, .page-description { color: var(--text-muted, #475569); margin: var(--space-12, 12px) 0 0; } .woocommerce-products-header .term-description :is(p, ul, ol), .woocommerce-products-header .page-description :is(p, ul, ol), .term-description :is(p, ul, ol), .page-description :is(p, ul, ol) { max-width: 68ch; } .woocommerce-products-header .term-description p, .woocommerce-products-header .page-description p, .term-description p, .page-description p { /* Stops an Estonian paragraph ending on a single orphaned word. Browsers that do not know the value ignore the declaration. Same line, same reason, as type-rhythm.css:213-218. */ text-wrap: pretty; } /* The gap the brief names: header block to first row of products. The sequence this sets, top to bottom, is h1 (--h1, type-rhythm.css:101) 12px description 32px control row 14px the hairline 24px first card (ul.products margin-top, woocommerce.css:89) Was 24px from description to the toolbar CARD, then 4px, then 24px — three gaps that never agreed on what belonged to what. 32px is the pack's own step; nothing new is introduced. Specificity: (0,2,0) over woocommerce.css:70 (0,1,0) and its <=768px override at woocommerce.css:1580 (0,1,0), which is why the phone value is restated in the media query at the end of this file rather than left to the sheet it now outranks. */ .woo-content .woocommerce-products-header { margin-bottom: var(--space-32, 32px); } /* ========================================================================== 2 · THE CONTROL ROW — a card becomes a rule ========================================================================== ⚠️ THE RISKIEST CALL IN THIS FILE, and the first thing to look at on the live site. It is one rule block and the module has an owner switch, so it is also the cheapest thing in this file to take back. Two container forms are given because the toolbar has two possible parents: inc/ajax-filters.php:832 opens .ostu-shop-main at priority 5 on woocommerce_before_shop_loop and inc/shop-extras.php:99 opens the toolbar at priority 19, so on a normal archive the toolbar is inside it — but the layout wrapper is fenced behind ostugrupp_filters_is_catalog() (inc/ajax-filters.php:42-44) while the toolbar is not, so the .woo-content form is what keeps this from being conditional on a predicate that can drift away from the enqueue predicate. Specificity: (0,2,0) beats shop.css:15 (0,1,0) without depending on load order. background/border/box-shadow/radius are all reset explicitly rather than by omission — shop.css declares each of them and the cascade is per-property. */ .ostu-shop-main .ostu-shop-toolbar, .woo-content .ostu-shop-toolbar { background: transparent; border: 0; border-bottom: 1px solid var(--border, #e2e8f0); border-radius: 0; box-shadow: none; padding: 0 0 var(--space-12, 12px); margin: 0; gap: var(--space-12, 12px); } /* The count. It was already 14px/600/muted (shop.css:29-35); the one thing it was missing is the thing it is made of. tabular-nums stops "1-12" and "3472" from shifting the sentence sideways every time the AJAX layer rewrites this element (assets/js/filters.js:164-165 replaces its innerHTML on every filter, sort and page change). font-variant-numeric MUST come after the font shorthand: the shorthand resets font-variant, and font-variant-numeric is part of it. Specificity: (0,3,0) over shop.css:29 (0,2,0) — an equal-weight tie broken only by load order is exactly what a plugin that concatenates stylesheets silently reverses. */ .woo-content .ostu-shop-toolbar .woocommerce-result-count { font: var(--text-sm, 400 14px/20px "DM Sans", system-ui, sans-serif); font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums; color: var(--text-muted, #475569); margin: 0; min-width: 0; } /* ---- The sort control -------------------------------------------------- Two background images: a sort glyph on the leading edge, the chevron on the trailing one. The glyph is what turns "a white box that says Vaikimisi järjestus" into "the sort control" at a glance — the