/* ========================================================================== INFO DENSITY — assets/css/info-density.css Loaded by inc/info-density.php on single product pages only, priority 22. ========================================================================== OWNER (ET): kaks nähtavat asja tootelehel. 1. Pildi peal väike arv „3 / 12" — mitmes pilt praegu on ja mitu neid kokku on. Telefonis on see ainus märk, et pilte saab lükata. 2. Spetsifikatsiooni tabel: numbrid ja mõõdud loetavamad, tootekoodid (EAN, mudeli number) eristuvad kirjatüübiga, sest need on koodid, mitte omadused. Ridu ei lisata ega eemaldata. WHAT THIS FILE DELIBERATELY DOES NOT DO --------------------------------------------------------------------------- · No `display` property on any element of the spec table. CLAUDE.md Trap 11: a non-table `display` on a `` voids its colspan and generates an anonymous cell in column one. assets/css/product-sections.css:144-148 already converts that table — all five of table/tbody/tr/th/td, which is the sanctioned whole-table pattern — below 768px. This file adds paint only, so it is display-agnostic and cannot half-convert anything. · No width, height, top or left. CLAUDE.md Trap 9 and the "transform and opacity only" rule. · Nothing about the Montonio block (CLAUDE.md invariant 1). This sheet is scoped to the single product template, carries no selector from that area, and inc/info-density.php never enqueues it outside is_product(). TOKENS. Every var() carries its literal as a fallback: a hand-built deploy zip that loses assets/css/tokens.css must degrade to the right colour, not to the guaranteed-invalid value that would take the whole declaration — and every other declaration in the rule — down with it. ========================================================================== */ /* ========================================================================== §1 · THE GALLERY COUNTER ========================================================================== MEASURED, not assumed. 45 live product pages sampled 2026-08-14 from the 3472 URLs in product-sitemap{,2,3,4}.xml: every single one carries between 4 and 12 gallery images, median 9. There is no counter anywhere in the shop today — grep for `ostu-gal` on a live product page returns only the theme's `ostu-gallery-col` wrapper (inc/single-product.php:467). WHY A SCRIM AND NOT A WHITE CHIP. The pill sits on a product photograph whose brightness is unknown and, on a dropship catalogue, unknowable. The design pack answers this exact case with a role rather than a colour: --scrim-photo-strong is documented in tokens.css:144 as "sama, kui peal on teksti" — the darker of the two photo scrims, for when the scrim carries text. White on it, which is --text-on-dark. SHAPE comes from the D5 badge family (design pack §D5, sample line 1450): 24px tall, 0 10px padding, pill radius, --label-sm. The numeric badge in that same row (−32%) is the one that carries tabular figures and no uppercase transform, and this is a numeric badge — so it follows that one. Tabular numerals matter here for a reason you can see: without them the pill visibly changes width between "1 / 12" and "8 / 12". NOT A CONTROL. `pointer-events: none` is load-bearing, not tidiness: the pill lies on top of the swipe surface on a phone, and 73% of this shop's traffic is phones. It must never absorb a swipe or a tap meant for the photo. Because it is not tappable it is also correctly exempt from the 44px target-size rule (WCAG 2.5.5) — the enlarge control next to it (woocommerce.css:534) is the tappable object and already measures 44×44. PLACEMENT. Bottom-right INSIDE `.flex-viewport`, which is the window FlexSlider builds around the slides. That is the frame of the photograph; the thumbnail strip is a sibling below it, so nothing collides. The viewport is the positioning context — the rule below asks for it, and inc/info-density.php verifies the COMPUTED value at runtime before appending, because a stylesheet is not proof of application (Trap 1). SPECIFICITY .single-product.woocommerce div.product .woocommerce-product-gallery .flex-viewport = (0,5,1). Same chain assets/css/product-polish.css:167 uses, and for the same reason: it beats FlexSlider's own `.flex-viewport` (0,1,0) and any single-class plugin rule outright. UNVERIFIED IN A BROWSER — see the runtime guard above, which is what actually decides. ========================================================================== */ .single-product.woocommerce div.product .woocommerce-product-gallery .flex-viewport { position: relative; } .ostu-galc { position: absolute; right: var(--space-12, 12px); bottom: var(--space-12, 12px); z-index: 3; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill, 999px); background: var(--scrim-photo-strong, rgb(15 23 42 / .72)); color: var(--text-on-dark, #ffffff); font: var(--label-sm, 600 12px/1 'DM Sans', 'Segoe UI', sans-serif); letter-spacing: var(--label-sm-tracking, .06em); font-variant-numeric: tabular-nums; /* Never a control: no taps, no text selection, no drag target. */ pointer-events: none; -webkit-user-select: none; user-select: none; } /* REQUIRED, not defensive. The script hides the pill with the `hidden` attribute whenever it cannot answer honestly (slider not built, fewer than two real slides, no active slide). `[hidden]{display:none}` lives in the USER AGENT stylesheet, and an author `display` — the inline-flex above — beats the user agent outright whatever the specificity. Without this line a "hidden" pill stays on screen showing a stale number, which is precisely the outcome README.md §3 rule 2 forbids. */ .ostu-galc[hidden] { display: none; } /* The tick. The number has already changed by the time this runs — the motion only draws the eye to the change, it never carries it. 120ms is --dur-fast, the press duration the system already uses (tokens.css:295). */ @keyframes ostu-galc-tick { from { opacity: .55; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } .ostu-galc.is-tick { animation: ostu-galc-tick var(--dur-fast, 120ms) var(--ease, cubic-bezier(.2, .6, .3, 1)) both; } /* The sentence a screen reader hears when the slide changes: "Pilt 3 / 12". Off screen, but NOT display:none and NOT visibility:hidden — either would remove it from the accessibility tree and the live region would go silent. The visual pill is aria-hidden, so nothing is announced twice. */ .ostu-galc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* prefers-reduced-motion — COMPLETE, not partial. Someone who asked the OS to stop animation still needs to see WHICH image they are on, so the pill keeps working and the number keeps updating; only the movement stops. tokens.css:304 already zeroes --dur-fast under this query; this is the explicit belt, because a zero-duration animation and no animation are not the same thing in every engine and this is the kind of rule that must not be nearly right. */ @media (prefers-reduced-motion: reduce) { .ostu-galc, .ostu-galc.is-tick { animation: none; transform: none; opacity: 1; } } /* ========================================================================== §2 · THE SPEC SHEET — VALUES YOU CAN READ, CODES YOU CAN RECOGNISE ========================================================================== inc/info-density.php §3 puts the decisive rows first and the catalogue identifiers last. This section makes the two kinds of row LOOK like two kinds of row, which is the whole point of moving them. WHY THIS IS WORTH DOING, MEASURED. Across the 45 sampled products: · 12 (27%) print EAN as the LAST row of the spec table and 3 (7%) open the table with an identifier — the order was whatever the supplier feed happened to contain; · values are dense strings the eye cannot parse in a proportional face: "38.98 x 20.47 x 990 x 520 x 410mm", "8720286646908", "SZ-302B"; · the longest table sampled had 28 rows, the median 7. 1. TABULAR FIGURES ON EVERY VALUE. A spec sheet is a column of numbers read vertically. Proportional digits make "110 kg" and "544,3 kg" fail to line up; tabular figures cost nothing and are what --price-* already uses everywhere else in this system (tokens.css:205). 2. `overflow-wrap: anywhere` ON VALUES ONLY. The dimension strings above are one unbroken token. In a 66%-wide cell on a 375px phone an unbreakable token is what pushes a table past its container — and the label column, which has real words in it, is deliberately left alone so ordinary Estonian labels still break at spaces. 3. IDENTIFIERS IN THE MONO FACE. --font-mono (tokens.css:165) is what the design pack itself uses for machine values throughout the reference page. An EAN set in mono reads as a code you copy, not as a property you compare — which is exactly the distinction the reorder just made. The label goes --text-subtle (4,76:1 on white, the AA floor the token file marks at tokens.css:31 as "ära mine allapoole") and the value --text-muted (7,58:1), so the group reads quieter without reading faint. WHY ATTRIBUTE SELECTORS AND NOT A CLASS OF OUR OWN. WooCommerce builds the row class from the array key — `woocommerce-product-attributes-item--attribute_ean` — and the additional-information template accepts no other hook for it. The keys below are the ones actually present on this catalogue, read off the live HTML, not guessed: attribute_ean (15 of 45 products), attribute_mudeli-number (19 of 45). A key that is not in this list simply keeps the default row look; nothing breaks, the group is just smaller. SPECIFICITY. Both containers are matched because the section layout is an owner toggle (inc/product-sections.php:34) and either can be live: .ostu-psec--additional_information .panel table.shop_attributes … = (0,3,2) for a bare th/td, and (0,4,3) once the tr[class*=] is in the chain — above assets/css/product-sections.css:131 (0,3,2) and assets/css/woocommerce.css:762 (0,3,1). #tab-additional_information … carries an id, so it is above both by a whole column. PAINT ONLY. No display, no width, no position — see the file header. ========================================================================== */ .ostu-psec--additional_information .panel table.shop_attributes td, #tab-additional_information table.shop_attributes td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* Catalogue identifiers — the tail of the sheet after the reorder. */ .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_ean"] th, .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_gtin"] th, .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_sku"] th, .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_mudeli-number"] th, .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_tootekood"] th, .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_artikkel"] th, #tab-additional_information table.shop_attributes tr[class*="--attribute_ean"] th, #tab-additional_information table.shop_attributes tr[class*="--attribute_gtin"] th, #tab-additional_information table.shop_attributes tr[class*="--attribute_sku"] th, #tab-additional_information table.shop_attributes tr[class*="--attribute_mudeli-number"] th, #tab-additional_information table.shop_attributes tr[class*="--attribute_tootekood"] th, #tab-additional_information table.shop_attributes tr[class*="--attribute_artikkel"] th { color: var(--text-subtle, #64748b); } .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_ean"] td, .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_gtin"] td, .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_sku"] td, .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_mudeli-number"] td, .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_tootekood"] td, .ostu-psec--additional_information .panel table.shop_attributes tr[class*="--attribute_artikkel"] td, #tab-additional_information table.shop_attributes tr[class*="--attribute_ean"] td, #tab-additional_information table.shop_attributes tr[class*="--attribute_gtin"] td, #tab-additional_information table.shop_attributes tr[class*="--attribute_sku"] td, #tab-additional_information table.shop_attributes tr[class*="--attribute_mudeli-number"] td, #tab-additional_information table.shop_attributes tr[class*="--attribute_tootekood"] td, #tab-additional_information table.shop_attributes tr[class*="--attribute_artikkel"] td { color: var(--text-muted, #475569); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); /* One notch down: a mono face sets larger than a proportional one at the same nominal size, and this row must not out-shout the specs above it. */ font-size: var(--fs-xs, 13px); } /* ========================================================================== §3 · THE BUY-BOX SPEC LIST ========================================================================== inc/single-product.php:304-311 prints the top five specs as a
next to the price. Its values carry the same dense figures as the sheet below — "180 x 62 x 78 cm (L x S x K)", "110 kg" — in a column roughly 300px wide on a phone. Same two declarations, same two reasons as §2.1 and §2.2, and nothing else: that list is owned by another module and this file only lends it the figures treatment. SPECIFICITY, stated honestly. assets/css/single.css:109 owns this element at (0,2,0) and sets margin, text-align, colour, size and weight. It does NOT set either property below, and neither does anything else in the theme — which is the real reason these apply. The selector is written at the same (0,2,0) anyway rather than one class lower, so that if single.css ever does declare one of them, priority 22 against its 20 decides the tie instead of the rule silently dying (CLAUDE.md Trap 1 is exactly that failure mode). ========================================================================== */ .single-product .ostu-keyspecs__dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }