/* ========================================================================== OstuGrupp — CATEGORY HEADER AND PAGER (category-header.css) Pairs with inc/category-header.php. Three strips, all of them OUTSIDE the product grid: 1 the breadcrumb rail above the h1 2 the header block under the h1 — facts, description, category tiles 3 the pager under the grid WHERE THIS SHEET LOADS (ostugrupp_cathead_has_chrome()): shop · product category / tag archives · SINGLE PRODUCT. Strip 1 is the reason for that last one. inc/woocommerce.php:45 prints the same nav.woocommerce-breadcrumb inside the same div.woo-content on the product page (verified by curl, 2026-08-15), so styling it on archives only gave one component two shapes one click apart — a 44px rail with the LAST crumb strong on the category page, the old white pill with the FIRST crumb strong on the product page. Strips 2 and 3 have no markup to match there (no .og-cathead, no nav.woocommerce-pagination on a single product), so nothing else in this file can reach that page. WHERE IT DELIBERATELY DOES NOT LOAD: search results (?s=…&post_type=product) — is_shop() is true there but the page is inc/search-ux.php's; cart and checkout — inc/woocommerce.php:46 prints no breadcrumb on either (curl: 0 nodes), so there is nothing here for them. NOT TOUCHED HERE, on purpose, because another module owns them: .ostu-shop-toolbar, .woocommerce-result-count, select.orderby, .ostu-filters*, .ostu-empty-shop → inc/archive-polish.php ul.products, li.product-card → assets/css/card-d3.css .term-description colour and measure → assets/css/archive-polish.css (this file only decides WHERE that block sits, never how it reads) ------------------------------------------------------------------------ SPECIFICITY — measured, not assumed ------------------------------------------------------------------------ Every rule below that supersedes an existing rule carries the arithmetic beside it. The rules being beaten, read out of the files that actually ship on the page (checked against the stylesheet list in the live HTML of http://og.local/tootekategooria/aiakaubad/ on 2026-08-14): A WooCommerce 11.0.1 assets/css/woocommerce.css .woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb (0,2,0) same, plus " a" (0,2,1) .woocommerce .woocommerce-breadcrumb (0,2,0) .woocommerce .woocommerce-breadcrumb::before / ::after (0,2,1) .woocommerce nav.woocommerce-pagination ul li a (0,2,4) B theme assets/css/woocommerce.css .woocommerce-breadcrumb (0,1,0) .woocommerce-breadcrumb a (0,1,1) .woocommerce-breadcrumb a:first-child (0,2,1) .woocommerce-breadcrumb .sep (0,2,0) .woocommerce nav.woocommerce-pagination ul (0,2,2) .woocommerce nav.woocommerce-pagination ul li (0,2,3) .woocommerce nav.woocommerce-pagination ul li a (0,2,4) .woocommerce nav.woocommerce-pagination ul li span.current (0,3,4) .woocommerce nav.woocommerce-pagination ul li a.prev (0,3,4) .woocommerce-pagination ul li a.prev (0,2,3) .woocommerce-pagination ul li a.prev::before (0,2,4) .woocommerce-pagination ul li span.dots (0,2,3) C theme assets/css/a11y.css .a11y-ready .woocommerce-pagination a (0,2,1) D theme assets/css/main.css ul (0,0,1) The three ::before/::after numbers above were each one element short in the first version of this file: a pseudo-ELEMENT counts in the third column, exactly like a tag name. Corrected 2026-08-15. No winner changed — every rule below was already at least one class heavier than what it supersedes — but the arithmetic in a comment is the whole point of writing it down. Note A vs B on the breadcrumb: WooCommerce core sets font-size .92em and colour #767676 at (0,2,0), while the theme sets font-size and colour at (0,1,0). Core wins on specificity no matter which sheet is printed later, so the theme's 13px breadcrumb has never actually been what a shopper saw on a WooCommerce page. Two lines above it in the same core file sits the bigger one: .woocommerce .woocommerce-breadcrumb { margin: 0 0 1em; padding: 0 } at (0,2,0), which beats the theme's padding: 9px 16px at (0,1,0) — so the theme's breadcrumb "pill" has been drawing its border with NO padding on every WooCommerce page since it was written, text against the frame. The rail below gives back real spacing (44px min-height on the nav, 8px per link) at (0,3,1), and now does so on the product page as well, which is the second reason this sheet loads there. The theme's own file is not this module's to edit; nothing here changes it. All of the above is arithmetic on the shipped stylesheets, NOT a computed value read in a browser — it still needs confirming in DevTools. The base context used below is .woocommerce-page .woo-content nav.woocommerce-breadcrumb (0,3,1) .woocommerce-page .woo-content nav.woocommerce-pagination (0,3,1) Both context classes are on the page: body carries "woocommerce-page" (both /pood/ and every category, read from the live body tag) and inc/woocommerce.php:43 wraps the archive in div.container.section-y.woo-content. Every custom property has a literal fallback: an unresolvable var() voids the WHOLE declaration, not just the value. ========================================================================== */ /* ========================================================================== 1 · BREADCRUMB RAIL The markup (inc/woocommerce.php:45) is nav.woocommerce-breadcrumb > a, span.sep, a, span.sep, TEXT The last crumb is already a bare text node, not a link — so it is styled by giving the nav itself the strong colour and the anchors the quiet one. That also means nothing needs to be added to the markup to satisfy "the last item is not a link"; it never was one. Today the row wraps onto three lines on a 375px phone once the trail is four levels deep. Here it becomes one line that scrolls sideways inside itself — .woo-content stays exactly as wide as it was, so the page cannot gain a horizontal scrollbar from this. THIS SECTION IS SITE CHROME, NOT ARCHIVE CHROME. The same markup is on the single product page, where the trail is longest — measured on a live URL: Avaleht / Pood / Aiakaubad / Survepesurid / Survepesur autole – 220BAR 2x aku (Makita 18V akude sobivus) five steps and a 57-character last one. That is the worst wrapping case in the shop, and it is the page a shopper reaches from the category page in one click, so the two must look the same. inc/category-header.php loads this sheet on both. Every rule in this section is written against markup that exists identically on both pages; nothing here is archive-specific. ========================================================================== */ /* (0,3,1) beats A (0,2,0) and B (0,1,0). */ .woocommerce-page .woo-content nav.woocommerce-breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; width: 100%; max-width: 100%; min-height: var(--tap-min, 44px); margin: 0 0 var(--space-8, 8px); padding: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; font-size: 13px; line-height: 1.3; font-weight: var(--fw-semibold, 600); color: var(--slate-dark, #1e293b); } .woocommerce-page .woo-content nav.woocommerce-breadcrumb::-webkit-scrollbar { display: none; } /* WooCommerce ships a float clearfix on this element: .woocommerce .woocommerce-breadcrumb::before / ::after { content: " "; display: table } (0,2,1) In a flex container those two pseudo-elements are blockified into real flex ITEMS, so the row silently carries a phantom cell at each end. The theme already made this element inline-flex, so that is happening today. (0,3,2) switches them off — three classes to two decides it before the element column is even read. */ .woocommerce-page .woo-content nav.woocommerce-breadcrumb::before, .woocommerce-page .woo-content nav.woocommerce-breadcrumb::after { content: none; } /* (0,3,2) beats A (0,2,1) and B (0,1,1). 44px tall touch target, which is why the rail above carries min-height 44px rather than a fixed padding. */ .woocommerce-page .woo-content nav.woocommerce-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap-min, 44px); padding: 0 var(--space-8, 8px); border-radius: var(--radius, 12px); font-weight: var(--fw-medium, 500); color: var(--text-subtle, #64748b); text-decoration: none; flex: 0 0 auto; transition: color .15s ease, background-color .15s ease; } /* The theme made the FIRST crumb the strong one. With the trail now reading as a rail, the crumb that matters is the page you are on — which is the last one, and it is plain text taking its colour from the nav above. (0,4,2) beats B's a:first-child (0,2,1). */ .woocommerce-page .woo-content nav.woocommerce-breadcrumb a:first-child { font-weight: var(--fw-medium, 500); color: var(--text-subtle, #64748b); } .woocommerce-page .woo-content nav.woocommerce-breadcrumb a:hover, .woocommerce-page .woo-content nav.woocommerce-breadcrumb a:focus-visible { color: var(--brand, #047857); background-color: var(--brand-a1, rgb(4 120 87 / .06)); } /* (0,4,1) beats B's .woocommerce-breadcrumb .sep (0,2,0). */ .woocommerce-page .woo-content nav.woocommerce-breadcrumb .sep { flex: 0 0 auto; margin: 0; padding: 0 var(--space-2, 2px); color: var(--border-strong, #cbd5e1); font-weight: var(--fw-regular, 400); } /* ========================================================================== 2 · HEADER BLOCK inc/category-header.php prints, inside header.woocommerce-products-header and after the h1: div.og-cathead p.og-cathead__facts "637 toodet · 43 alamkategooriat" div.term-description WooCommerce core, only if the term has one nav.og-cathead__nav h2.og-cathead__nav-title "Alamkategooriad" / "Lähedased kategooriad" ul.og-cathead__grid the first 12 tiles details.og-cathead__more the rest, behind one native control .og-cathead is a plain block, not a flex column, precisely so that .term-description keeps the margins archive-polish.css gives it instead of having them fought over here. ========================================================================== */ .og-cathead { margin-top: var(--space-12, 12px); } .og-cathead__facts { margin: 0; font-size: 15px; line-height: 1.4; font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums; color: var(--text-muted, #475569); } .og-cathead__dot { display: inline-block; margin: 0 var(--space-8, 8px); color: var(--border-strong, #cbd5e1); } /* The block reads as its own strip under a hairline, with no fill and no shadow — the same "level 0, border only" treatment archive-polish.css gives the control row, so the two do not compete above the grid. */ .og-cathead__nav { margin-top: var(--space-20, 20px); padding-top: var(--space-20, 20px); border-top: 1px solid var(--border, #e2e8f0); } /* An h2 by class, (0,1,0), which beats the theme's single bare-element heading rule in type-rhythm.css (0,0,1) whichever prints last. */ .og-cathead__nav-title { margin: 0 0 var(--space-12, 12px); font-size: 12px; line-height: 1.2; font-weight: var(--fw-semibold, 600); letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle, #64748b); } /* main.css already zeroes list-style and padding on ul (0,0,1); the UA's block margin is what is left to remove. THE TILES NOW STAND ON THE SAME COLUMN LINES AS THE PRODUCTS BELOW THEM. Two separate faults were in the old `repeat(auto-fill, minmax(160px, 1fr))` with a flat 8px gap, and both are arithmetic, not taste: 1 · THE COLUMN COUNT RAN THE WRONG WAY. auto-fill fits as many 160px tracks as it can, so the tile only ever got wider inside one band and then collapsed back at the next. Below 768px `.container` is padded 18px each side (main.css:480); above it 24px (main.css:151); `--container` caps at 1440px (main.css:106). 375px viewport → 339px row → 2 tiles of 165.5px 466px viewport → 430px row → 3 tiles of 138.0px ← NARROWER at a WIDER viewport 1280px viewport (1217px row, scrollbar) → 7 tiles of 167.9px So the widest screen in the shop drew the SECOND-narrowest tile in the shop, and `overflow-wrap: anywhere` below then broke "Dekoratiivsed taimekastid" and "Kasvatustelgid ja tehnika" mid-word on a 1440px desktop. The count is now stated, not fitted: 2 · 3 · then auto-fill on a 220px floor once the sidebar exists and matching is impossible anyway. 2 · THE GAP DID NOT MATCH THE GRID DIRECTLY UNDERNEATH. The product grid is 16px, 12px at ≤768px, 10px at ≤480px (woocommerce.css:88, :1590, :1755 — the same three values feedback.css:99-118 mirrors for the loading ghost). The tiles used one 8px value at every width, so at 375px the tile columns ran 0–165.5 / 173.5–339 while the cards below ran 0–164.5 / 174.5–339: the inner edges of two stacked 2-column grids sat ONE PIXEL apart, and the outer ones agreed. Mirroring the three values puts every tile edge on a card edge below 1024px, where both grids span the same container: 375px 2 cols, 10px gap → 164.5px, both grids 480px 2 cols, 10px gap → 217.0px, both grids 600px 2 cols, 12px gap → 276.0px, both grids 768px 3 cols, 12px gap → 232.0px, both grids (768px is the deliberate overlap: `min-width:768` gives 3 columns while `max-width:768` still gives the 12px gap, in the product grid and here alike — the same overlap feedback.css:107-113 documents.) From 720px to 767px the tiles are 3-up while the cards are still 2-up, because the product grid's own column breakpoint is 768 and this one is driven by the same value: that band is the one place the two disagree, and it disagrees by a column count, not by a pixel. Above 1024px the header sits at full container width while the products sit in the 1fr column beside a 280px sidebar (filters.css:18), so no column line can be shared and the tiles simply get a comfortable floor: 220px, which yields 4 tiles at 1024px and 5 at 1280px instead of 7. Plain `minmax(220px, 1fr)` is safe there precisely because the row is never narrower than 976px — no min() is needed and none is used, so there is no math-function support question. */ .og-cathead__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16, 16px); margin: 0; padding: 0; list-style: none; } /* Mirrors woocommerce.css:1590 (max-width:768px) — the product grid's gap. */ @media (max-width: 768px) { .og-cathead__grid { gap: var(--space-12, 12px); } } /* Mirrors woocommerce.css:1755 (max-width:480px). 10px is off the 4px ladder and is copied anyway: the point of this value is to equal the grid below it, not to be tidy on its own. Reported to the owner rather than "fixed" here — changing it means changing the product grid, which is a shared file and which feedback.css:117 also mirrors. */ @media (max-width: 480px) { .og-cathead__grid { gap: 10px; } } /* Mirrors woocommerce.css:92 (min-width:768px) — 3 columns. */ @media (min-width: 768px) { .og-cathead__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* At 1024px filters.css:18 puts a 280px sidebar beside the grid, so from here the two can no longer share a column line and the tiles get their own floor. */ @media (min-width: 1024px) { .og-cathead__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } .og-cathead__item { margin: 0; padding: 0; display: block; } /* The clickable block. 56px tall, filled, no shadow — a block of these reads as one mass at a glance, where 43 photo tiles read as 43 products. */ .og-cathead__tile { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8, 8px); width: 100%; min-height: 56px; padding: var(--space-12, 12px) var(--space-16, 16px); border: 1px solid transparent; border-radius: var(--radius, 12px); background-color: var(--surface-muted, #f1f5f9); color: var(--slate-dark, #1e293b); text-decoration: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .og-cathead__tile-name { font-size: 15px; line-height: 1.25; font-weight: var(--fw-semibold, 600); overflow-wrap: anywhere; } .og-cathead__tile-count { flex: 0 0 auto; min-width: 28px; padding: 2px var(--space-8, 8px); border-radius: var(--radius-pill, 999px); background-color: var(--surface, #ffffff); font-size: 12px; line-height: 1.5; font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums; text-align: center; color: var(--text-subtle, #64748b); } @media (hover: hover) { .og-cathead__tile:hover { background-color: var(--surface, #ffffff); border-color: var(--brand, #047857); color: var(--brand, #047857); transform: translateY(-1px); } .og-cathead__tile:hover .og-cathead__tile-count { background-color: var(--brand-a1, rgb(4 120 87 / .06)); color: var(--brand, #047857); } } .og-cathead__tile:focus-visible { outline: 2px solid var(--brand, #047857); outline-offset: 2px; } /* The overflow control. A native
, so there is no JS and the state survives with keyboard and screen reader support already built in. */ .og-cathead__more { margin-top: var(--space-8, 8px); } .og-cathead__more-btn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: var(--space-8, 8px); min-height: var(--tap-min, 44px); padding: var(--space-8, 8px) var(--space-16, 16px); border: 1px solid var(--border-strong, #cbd5e1); border-radius: var(--radius, 12px); background-color: var(--surface, #ffffff); font-size: 14px; line-height: 1.3; font-weight: var(--fw-semibold, 600); color: var(--slate-dark, #1e293b); cursor: pointer; list-style: none; transition: border-color .18s ease, color .18s ease; } .og-cathead__more-btn::-webkit-details-marker { display: none; } @media (hover: hover) { .og-cathead__more-btn:hover { border-color: var(--brand, #047857); color: var(--brand, #047857); } } .og-cathead__more-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; } .og-cathead__more-close { display: none; } .og-cathead__more[open] .og-cathead__more-open { display: none; } .og-cathead__more[open] .og-cathead__more-close { display: inline; } .og-cathead__more[open] .og-cathead__more-chev { transform: translateY(2px) rotate(-135deg); } .og-cathead__grid--rest { margin-top: var(--space-8, 8px); } /* ========================================================================== 3 · PAGER Server markup: nav.woocommerce-pagination > ul.page-numbers > li > a|span AJAX markup: nav.woocommerce-pagination.ostu-ajax-pagination > ul > li (inc/ajax-filters.php:1003 — note: no page-numbers class on the ul, which is why nothing here selects it) The pills themselves were already rebuilt in the theme's woocommerce.css and already measure 44px. What was missing is that the row floats free under the grid with no relationship to it, and that prev/next are two nameless chevrons. Both are fixed here. ========================================================================== */ /* (0,3,1) beats B's .woocommerce nav.woocommerce-pagination (0,2,1). The rule line is the change you see from across the room: the pager stops floating and becomes the foot of the results. */ .woocommerce-page .woo-content nav.woocommerce-pagination { margin-top: var(--space-40, 40px); padding-top: var(--space-24, 24px); border-top: 1px solid var(--border, #e2e8f0); text-align: center; } /* (0,3,2) beats B's .woocommerce nav.woocommerce-pagination ul (0,2,2): three classes to two, and the class column is compared first. */ .woocommerce-page .woo-content nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-8, 8px); width: 100%; margin: 0; padding: 0; border: 0; } /* (0,4,4) beats B's .woocommerce nav.woocommerce-pagination ul li span.current (0,3,4). A ring so the current page is unmistakable next to eight white pills, on top of the solid green fill it already had. */ .woocommerce-page .woo-content nav.woocommerce-pagination ul li span.current { box-shadow: 0 0 0 3px var(--brand-a1, rgb(4 120 87 / .06)); } /* Prev / next get their words back. B sets font-size: 0 on these anchors at (0,3,4) to hide WooCommerce's own arrow character, and paints a chevron with ::before at (0,2,4). Both are superseded at (0,4,4): the text is shown again, and the arrow now arrives inside the link text from inc/category-header.php instead of from CSS, so exactly one glyph is painted. When the AJAX pager sends a bare arrow and no span (see the file header), that arrow is the glyph and the button still reads correctly — it just has no word. */ .woocommerce-page .woo-content nav.woocommerce-pagination ul li a.prev, .woocommerce-page .woo-content nav.woocommerce-pagination ul li a.next { gap: var(--space-8, 8px); padding: 0 var(--space-16, 16px); font-size: 15px; line-height: var(--lh-flat, 1); } .woocommerce-page .woo-content nav.woocommerce-pagination ul li a.prev::before, .woocommerce-page .woo-content nav.woocommerce-pagination ul li a.next::before { content: none; } .og-pag__glyph { font-size: 20px; line-height: 1; } .og-pag__label { white-space: nowrap; } /* From 720px the row has space to put prev at one end and next at the other, with the numbers centred between them — the shape of a pager bar rather than a huddle of pills. BOTH ENDS OR NEITHER. An auto margin eats ALL the free space before justify-content ever gets a say, so a single auto margin does not spread the row, it shoves it. Measured markup, not theory: page 1 (curl .../aiakaubad/) → one