/* Make/Model/Year/Engine option lists: plain text/link selection instead of a visible
radio/checkbox control - shared by the standalone widget and the sidebar accordion
(both render the exact same .ymm-plain-options markup, see
ModelExtensionModuleYmmfilter::getMmyAccordionItems() for Make/Model/Year and
ControllerJournal3Filter::index() for Engine). Roof keeps its own separate image-card
styling below, unaffected.
Default/hover text color is left alone (inherits the same .links-text color and hover
color every other filter facet already uses - e.g. Categories) - only the native
control and count-badge are hidden, and the selected option is picked out via
font-weight instead of a checked radio circle. .count-badge is always present in the
shared checkbox/radio markup (meant for a product count, e.g. Categories' "Kastirauad
2"), but Make/Model/Year/Engine options never set `total`, so left alone it renders as
an empty circular outline - the "invisible radio circle" a lot of debugging chased
before finding this. */
.ymm-plain-options .filter-radio input[type="radio"],
.ymm-plain-options .filter-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ymm-plain-options .filter-radio .count-badge,
.ymm-plain-options .filter-checkbox .count-badge {
display: none;
}
/* Row spacing between options, forced identical on both surfaces rather than left to the
admin's per-module "Item Spacing" builder setting (.module-filter-36's own generated
CSS sets a --item-spacing custom property that a base rule then reads via
margin-top:var(--item-spacing, 0px) - the standalone widget never receives that
per-instance CSS at all, so it already renders at the 0px fallback, which is the
tighter, preferred look here). Overriding margin-top directly, same selector shape the
base rule uses, sidesteps that variable indirection (and whatever kept the admin
setting from visibly taking effect) entirely - both surfaces now get literally the same
rule instead of one depending on module-builder plumbing the other doesn't have. */
.ymm-plain-options .panel-body > div > label + label {
margin-top: 0 !important;
}
/* ⚠ 481 (the owner 10-18: „YMM nimekirja … shriftide suurused ja käitumisloogikad teeme samasuguseks nagu on
avaneva menüü kategooriakirjed … teksti värv on sama, hoverid on samad, avatud plokk/esimene rida on tume,
valikud on tuhmid"). THE PRECEDENT IS THE OPENING MENU'S CATEGORY ENTRIES, measured, never invented:
size var(--j-font_size-font-size--title-menu) (module-catalog_blocks-1147's own block „B. ÜKS RIDA")
resting foreground-secondary at weight 400 (the same block)
dim opacity .6 (the tree's ymm-no-match rule below, 10-15)
dark foreground-primary at weight 400 (the ymm-match/ymm-plain rule below - „tume aga mitte bold", 423)
hover the theme's text-link colour (the module's compiled .subitem:hover a)
is-selected/is-unselected are rendered server-side (item.has_selection + subitem.checked). !important where the
theme's later style.min.css declares the same property on .links-text at equal specificity (the file's old rule). */
/* ⚠ 482 (the owner's vocabulary, 10-18): TWO STATES ONLY - „normaalne" = the ordinary DARK entry text
(foreground-primary, the menu entries' own; NOT 481's lighter secondary) · „tuhm" = the 60% opacity dim
of that same dark. A list with NO selection is ALL normal (the markup already encodes it: is-unselected
renders only when the list has a selection); once one exists, the selected value is normal and every
other value dims (the is-unselected rule below). */
.ymm-plain-options .links-text {
font-size: var(--j-font_size-font-size--title-menu) !important;
font-weight: 400 !important;
color: hsla(var(--j-color-scheme-foreground-primary-h), var(--j-color-scheme-foreground-primary-s), calc(var(--j-color-scheme-foreground-primary-l) - 0%), calc(var(--j-color-scheme-foreground-primary-a) * 1));
}
/* the menu's hover (the 1147 module's own .subitem:hover a), replacing the old #F2B20D orange (481) */
.ymm-plain-options .filter-radio label:hover .links-text,
.ymm-plain-options .filter-checkbox label:hover .links-text {
color: hsla(var(--j-color-scheme-text-link-h), var(--j-color-scheme-text-link-s), calc(var(--j-color-scheme-text-link-l) - 0%), calc(var(--j-color-scheme-text-link-a) * 1)) !important;
}
.ymm-plain-options .is-unselected .links-text {
opacity: 0.6;
}
/* Roof: image cards, matching the reference JMI implementation
(catalog/view/theme/journal3/stylesheet/jmi-custom.css there) - same layout,
spacing and selected-state color. */
.ymm-cs-roof .filter-radio,
.ymm-cs-roof .filter-checkbox {
display: flex;
flex-direction: column;
}
.ymm-cs-roof .ymm-roof-card {
/* !important + flex-direction:column, not the plain "display:block" this used to be:
the theme's own base rule (.module-filter .panel-body>div>label{display:flex;
align-items:center}) is one selector-specificity point higher (an element selector
on top of the same two classes) and was winning over that, leaving the label as a
flex ROW. With the image's own width:100% (below) eating almost the card's entire
width in that row, the text label was squeezed into a ~4px sliver and wrapped
character-by-character down the full remaining height - a tall, cramped card whose
height scaled with how long each option's name happened to be (confirmed live: the
two options here rendered at 473px vs 229px tall, roughly proportional to their text
length). Column forces the intended picture-on-top/caption-below layout instead. */
display: flex !important;
flex-direction: column !important;
width: 100%;
padding: 0;
margin: 0 0 10px 0;
/* Transparent, not "none": reserves the same 2px box the selected/hover states
border with, so picking or hovering an option doesn't shift the layout by the
border's own width. */
border: 2px solid transparent;
border-radius: 4px;
background: transparent;
text-align: center;
overflow: hidden;
cursor: pointer;
}
.ymm-cs-roof .ymm-roof-card:last-child {
margin-bottom: 0;
}
.ymm-cs-roof .ymm-roof-card input[type="radio"],
.ymm-cs-roof .ymm-roof-card input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ymm-cs-roof .ymm-roof-card img {
display: block;
width: 100%;
height: auto;
/* Cancels this module's own admin-configured "image" styling (Filter module ->
general settings -> imageBorder/imageBackground/imagePadding/imageBorderRadius),
confirmed live: border, background, ~2px padding and a large border-radius, all
generated against the generic ".module-filter-{id} label img" selector - meant
for Make/Model brand logos, but Roof's own matches that same selector too,
since it's markup is otherwise identical (label > img). The roof illustrations
already sit inside .ymm-roof-card's own purpose-built card (border, background,
radius, padding - see below), so the image picking up a second, independent set
of the same properties is what read as a literal frame nested inside a frame. */
border: none !important;
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
.ymm-cs-roof .ymm-roof-card .links-text {
display: block;
padding: 7px 6px;
font-size: 13px;
line-height: 1.25;
}
.ymm-cs-roof .ymm-roof-card.is-selected {
border-color: #3c763d;
}
/* Same reasoning and same color as the .ymm-plain-options hover rule above: the
sidebar accordion's hover comes for free from Journal3's module-builder-generated
per-instance CSS, the standalone widget never receives that, so without an explicit
rule here the product page's Roof cards had no hover feedback at all (found via live
testing) even though the sidebar's did. Text color, not the border (a first attempt
at this used the border - wrong per the user's own correction: it must match the
same .links-text-color convention every other hover in this file uses, not invent a
different kind of feedback just for Roof). */
.ymm-cs-roof .ymm-roof-card:hover .links-text {
color: #F2B20D;
}
/* CS product page's own vehicle-selection guidance text (see product.twig,
next to product-ymm-widget) - shown only while the selection is incomplete
(server-computed, see ModelJmiThuleFitment::getPurchaseGateState()).
flash-a/-b alternate on each Add to Cart click attempted while still
incomplete (filter.js), red/black per user's explicit color choice - not a
gentle notice, meant to draw the eye since the click was just silently
blocked. */
/* ⚠ THE SHAPE THE OWNER APPROVED IN "Hoiatuse koht", VARIANT A, IN RED - 2026-09-16, and it
reverses this morning's frameless grey on his own reading of the page: "Minu viga,
hoiatustekst oli olemas, aga hall ja märkamatu." At the page's own #8B9198 it disappeared
into the description. The warning is the one thing on a blocked page that has to be seen
before anything else, so it is allowed to be the one thing that is not the page's own colour.
⚠ THE RED IS THE ONE THIS MESSAGE ALREADY WORE, not a new one: #c0392b, which stood in this
file from the day the message was written until P141 took it out this morning. The theme's
own palette was checked first, as the command asked: its pastel family carries
pastel-red / pastel-blue / pastel-green plus one shared pastel-foreground, and in the page's
own scheme-1 that foreground is hsl(221.5 51% 20%) - a navy, not a red. So the palette has a
registered red SURFACE and no registered red TEXT, and the surface is used below while the
text keeps the hex it already had.
⚠ THE BACKGROUND IS THE THEME'S, not a tint invented here: --j-color-scheme-pastel-red-*,
which resolves in scheme-1 to hsl(0 100% 96.08%) - the pale red the command names. A
re-scheme in admin carries it.
1px DASHED rather than the old 2px solid, semi-bold rather than 700, the page's own size
rather than 15px, and left rather than centred: the old look was a stop sign in the middle
of the column, and the owner rejected it explicitly. The 4px radius and the spacing are the
ones it already had. */
.ymm-gate-message {
margin: 10px 0;
padding: 8px 12px;
font-size: inherit;
font-weight: 600;
text-align: left;
border: 1px dashed #c0392b;
color: #c0392b;
background-color: hsla(var(--j-color-scheme-pastel-red-h), var(--j-color-scheme-pastel-red-s), var(--j-color-scheme-pastel-red-l), var(--j-color-scheme-pastel-red-a));
border-radius: 4px;
}
.ymm-gate-message.ymm-gate-flash-a {
color: #c0392b;
border-color: #c0392b;
}
.ymm-gate-message.ymm-gate-flash-b {
color: #000;
border-color: #000;
}
/* ⚠ P141'S `.product-price-group .ymm-gate-message` IS GONE - 2026-09-16. It dressed the
message for the price slot, frameless and in the page's own grey; the message is back at the
top of the column and wears the rule above, so that override has nothing left to match. */
/* ⚠ OSTA AND BUY NOW, SHOWN AND CLOSED - the owner, 2026-09-16. Only these two: the wrapper
carries the state and this names .btn-cart and [data-quick-buy] inside it, so Järjehoidjaks
and Võrdle are untouched - they promise nothing about fit.
⚠ NOT the theme's own .btn.disabled. That rule does give pointer-events:none, but inside
.button-group-page it also paints `.btn.disabled > span` at opacity 0 - the label disappears,
and a button whose word has vanished is not "shown but closed", it is gone. So the closed look
is said here instead, and said in the theme's own colours: the button's background and
foreground variables - the same eight the row's reset hands back in P135 - are pointed at the
page's secondary surface and secondary text, so it greys out in whatever scheme the shop is
wearing and no colour is written down.
pointer-events:none is what closes it: no click reaches the handler in product.twig, and no
hover state can paint. aria-disabled and tabindex=-1 are on the elements themselves (the
template), so a keyboard or a screen reader is told the same thing the eye is. And none of
this is what stops the sale - checkout/cart.php refuses the POST on its own. */
.button-group-page.ymm-gate-closed .btn-cart,
.button-group-page.ymm-gate-closed [data-quick-buy] {
pointer-events: none;
--j-color-scheme-button-background-h: var(--j-color-scheme-background-secondary-h);
--j-color-scheme-button-background-s: var(--j-color-scheme-background-secondary-s);
--j-color-scheme-button-background-l: var(--j-color-scheme-background-secondary-l);
--j-color-scheme-button-background-a: var(--j-color-scheme-background-secondary-a);
--j-color-scheme-button-foreground-h: var(--j-color-scheme-foreground-secondary-h);
--j-color-scheme-button-foreground-s: var(--j-color-scheme-foreground-secondary-s);
--j-color-scheme-button-foreground-l: var(--j-color-scheme-foreground-secondary-l);
--j-color-scheme-button-foreground-a: var(--j-color-scheme-foreground-secondary-a);
}
/* "Klotsid" project: the filter sidebar and the product listing scroll as two
genuinely independent blocks - mouse over one, only that one moves, the other
stays completely still. Journal3's own native "Sticky columns" admin setting
(positions.column_left...options.stickyCols, enabled per-layout in the database)
only ever gives plain position:sticky with no height cap - useful on its own, but
not this: a real independent-scroll block needs a bounded height AND its own
overflow, and both of those have to sit on the exact same element as the sticky
itself (see the max-height/overflow-y rule right below - if the cap were on a
different element than the sticky one, the sticky element would just have nothing
to visually stick against, and the capped element would become an ordinary,
non-sticky scroll box that scrolls away with the rest of the page like anything
else). So this is back to being a plain custom rule again, same shape as this
project's very first version - the native admin feature is still switched on
underneath (harmless - it just has no visible effect once this rule is also
present, since this element already has its own position:sticky) rather than
switched back off, on the chance a later, simpler need for column stickiness
without a scroll cap comes up again.
:has() (not a per-page id) is what makes this apply uniformly on every page that
has this filter, without listing pages one by one. */
@media (min-width: 992px) {
#column-left:has(.desktop-filter-wrapper) {
position: sticky;
top: var(--sticky-top-distance, 96px);
max-height: calc(100vh - var(--sticky-top-distance, 96px) - 16px);
overflow-y: auto;
/* Deliberately no overscroll-behavior:contain here (an earlier version of this
rule had it, to stop scrolling deep into a long list from also nudging the
page itself). Per the user: once this block's own scroll has genuinely run
out, further scrolling should carry on into the product column instead of
just stopping - which is exactly plain CSS scroll chaining, the browser's own
default once nothing here overrides it. */
/* Confirmed live: this scrollbar was rendering as a thin overlay (offsetWidth
equal to clientWidth - no space reserved for it at all), sitting on top of
the filter titles/caret icons at the right edge instead of in a lane of its
own. scrollbar-gutter reserves that lane on browsers that support it
(Chrome/Edge/Firefox); the padding is the part that actually matters
everywhere, including Safari/WebKit (no scrollbar-gutter support at all) -
it moves the real content left, off of wherever the browser decides to draw
an overlay scrollbar, regardless of whether space was ever formally reserved
for it. */
scrollbar-gutter: stable;
padding-right: 7px;
}
/* Journal3's own grid-rows wrapper (#column-left's direct child) carries its own
position:sticky in some configurations - left in normal flow here so it can't
compete with the outer sticky rule above and produce two overlapping
scrollbars. */
#column-left:has(.desktop-filter-wrapper) > .grid-rows {
position: static;
}
}
/* This module's admin-configured "Section Height" field (general.json's
sectionHeight / each item's own sectionCustomHeight) caps an individual expanded
panel's own .panel-body at a fixed height with its own overflow-y:auto - a
second, independent scrollbar nested inside the sidebar's own (#column-left
already has one - see above), showing up the moment any panel's content runs
taller than that cap (confirmed live: Make capped at 400px against 594px of
actual content). Per the user: every panel must open to its full height with no
scrollbar of its own - #column-left's own scrollbar is meant to be the only one,
for every filter alike, not something that only some filters happen to need
depending on an old admin setting nobody has revisited since. Overridden only
inside #column-left (not the setting itself, and not sitewide) since the same
Section Height field is a legitimate, unrelated choice anywhere else this module
type might be used. */
#column-left .panel-body {
max-height: none !important;
overflow-y: visible !important;
}
/* Cart page vehicle-fit line confirmation (checkout/cart.twig) - see
docs/db-changes/2026-07-31-cart-ymm-confirmation.migration. Needed-but-unconfirmed
gets a warning color to draw the eye among the other cart-line details (options,
reward points, recurring info) it sits alongside. */
.ymm-cart-confirm {
margin-top: 6px;
font-size: 13px;
}
.ymm-cart-confirm-needed {
color: #c0392b;
font-weight: 600;
}
/* Kit-assembly follow-up (2026-08-01): non-first lines of a grouped
(kit_group_id) confirmation show this note instead of their own checkbox -
see checkout/cart.php's index()/add(). Muted/italic so it doesn't compete
visually with the one real checkbox rendered on the group's first line. */
.ymm-cart-confirm-grouped-note {
color: #767676;
font-style: italic;
}
.ymm-cart-confirm-warning {
color: #c0392b;
font-size: 13px;
margin-bottom: 8px;
text-align: right;
}
/* The "hõljuk" flyout (a separate floating box, position:fixed, tracking
#column-left's own scroll to stay glued to its trigger) that used to live here
was reverted - after seeing it live, the user preferred the standalone YMM
widget's own plain accordion behavior instead (see catalog/view/theme/default/
template/extension/module/ymmfilter.twig: inline expand/collapse, no separate
box, active/hovered trigger just changes color). Simpler, and it sidesteps every
fragility the flyout kept surfacing - an invisible identity transform on a
Journal3 grid wrapper silently breaking position:fixed's own placement math, then
a stacking-context issue letting other filters' text render on top of it during
scroll. All filters now share the one plain accordion panel.twig already had
before "Klotsid" started (see filter.twig, filter.php, filter.js - the
flyoutList-driven branching in all three was removed alongside this). */
/* TYPE TO FILTER (2026-08-30) - the box, and the rule that does the hiding.
Unobtrusive on purpose: on desktop the panel opens with the cursor already in it, so it
should read as typing into the list rather than as a separate control. Both panel
surfaces use these classes - the standalone widget and the sidebar accordion render the
identical block. See docs/db-changes/2026-08-30-panel-type-to-filter.md. */
.ymm-panel-search {
padding: 0 0 6px;
}
.ymm-panel-search input[type="search"] {
width: 100%;
box-sizing: border-box;
padding: 4px 8px;
font-size: 0.9em;
line-height: 1.4;
border: 0;
border-bottom: 1px solid currentColor;
border-radius: 0;
background: transparent;
color: inherit;
opacity: 0.65;
}
.ymm-panel-search input[type="search"]:focus {
opacity: 1;
outline: none;
}
/* The hiding itself. !important because .filter-checkbox label / .filter-radio label are
given display by Journal3's own per-module generated stylesheet, which loads after this
file and would otherwise win - the same specificity fight pdp-gallery-grid.css already
documents against .swiper.main-image. */
.ymm-panel-search-hidden {
display: none !important;
}
/* THE TWO VEHICLE MARKS (owner, 2026-09-09, put back in code 2026-09-11).
P109 decided that a chosen vehicle never moves the structure - it only marks it: bold
when the category holds something that fits, dimmed when the vehicle is what emptied it.
The classes are written by ModelJournal3Category::markVehicle() and rendered by the
filter facet (.links-text), the categories modules (.category-layout) and the section
headings a category page and All Products share (.category-blocks h3).
⚠ THEY LIVE HERE, NOT IN A SETTING. P109 put these two rules in the Filter module's
admin "Custom CSS" field and by 2026-09-11 they were gone from every module, setting and
Journal Custom Code - the marks were still emitted and rendered as plain text, which
reads as "the feature is broken" rather than "a field was cleared". A repo file cannot be
lost by an admin edit. Weight 700, no colour and no font-family, so a theme recolour never
has to know.
⚠ THE EXTRA CLASS IN EACH SELECTOR IS NOT DECORATION. Journal3 generates a stylesheet per
module instance and ships it inline, AFTER this file. The sidebar list's own rule is
.module-categories-1145 .category-thumb .name a - three classes and an element, exactly what
.category-layout.ymm-match .name a was, and it sets font-weight:400. Equal specificity, later
in the cascade, so the mark lost and the name stayed regular while the dim kept working (that
rule sets no opacity). Naming .category-thumb / .category-block puts these rules one class
above the module's, which is a fact of the markup rather than an !important. */
/* ⚠ AND A DARKER COLOUR, NOT WEIGHT ALONE (owner, 2026-09-17): "Lisaks on, kitsendatud
valiku, tume (bold) tekst vähe eralduv. Lisaks Bold kasutamisele, peame ka teksti värvi
tumedamaks tegema." A bold row was still wearing the ordinary grey (foreground-secondary)
and had to carry the whole distinction on weight, against 25 grey rows around it.
THE VALUE IS THE THEME'S OWN, not a new colour: foreground-primary written exactly as
Journal3 writes it in its generated CSS, so a scheme change still moves it. It goes on the
MATCH rule only - a no-match row keeps opacity .6 and the ordinary colour, because dim is
what says "your car emptied this", and darkening it would fight that.
⚠ HOVER STILL WINS, and by the cascade rather than by omission. Every :hover rule for
these rows is at least as specific as the mark and ships later (the module's inline CSS
comes after this file), so the mouse still turns the row the link colour - and weight and
opacity are untouched by any :hover rule in the served CSS, so bold stays bold and dim
stays dim underneath it. */
/* ⚠ 419 (the owner 10-15): NORMAL IS THE DARK STYLE. `ymm-plain` (no vehicle, or a row the vehicle does not exclude) wears
exactly the `ymm-match` look - the theme's dark colour at the NORMAL weight (423: „tume aga mitte bold"); only `ymm-no-match` dims. */
.ymm-match .links-text,
.category-layout.ymm-match .category-thumb .name a,
.category-blocks .category-block h3.ymm-match,
.category-blocks h3.ymm-match,
.ymm-plain .links-text,
.category-layout.ymm-plain .category-thumb .name a,
.category-blocks .category-block h3.ymm-plain,
.category-blocks h3.ymm-plain {
font-weight: 400; /* 423 (the owner 10-15): „normaalne shrift tuleb tume aga mitte bold" */
color: hsla(var(--j-color-scheme-foreground-primary-h), var(--j-color-scheme-foreground-primary-s), calc(var(--j-color-scheme-foreground-primary-l) - 0%), calc(var(--j-color-scheme-foreground-primary-a) * 1));
}
.ymm-no-match .links-text,
.category-layout.ymm-no-match .category-thumb .name a,
.category-layout.ymm-no-match .category-thumb .product-count,
.category-blocks h3.ymm-no-match {
opacity: .6;
}
/* THE SAME TWO MARKS ON THE OFF-CANVAS CATEGORY TREE (owner, 2026-09-16):
"kategooriate valiku selliseks nagu oli eelmine moodul, arvestab valitud sõidukit".
The panel's tree is a Kataloogiplokid (catalog_blocks) record, whose rows are the parent
.catalog-title and the child .subitems .subitem a - neither of which any selector above
reaches. The classes come from the same place as everywhere else: getCategories() runs
markVehicle(), catalog_blocks.php copies ymm_class onto the block wrapper and onto each
child row, and nothing here decides anything.
⚠ THE SELECTORS ARE ONE CLASS ABOVE THE RECORD'S OWN CUSTOM CSS, for exactly the reason
the block above documents. That record carries the owner's five rules that made parent and
child identical so these marks would have weight and colour to spend, and rule 1 of them is
`.module-catalog_blocks-1147 .module-item .catalog-title {font-weight:400}` (0,3,0) and
`… .module-item .subitem a {font-weight:400}` (0,3,1), shipped inline AFTER this file.
Naming .module-catalog_blocks plus the mark class makes these (0,4,0) and (0,4,1), so the
mark wins on specificity rather than on !important, and his rules keep doing their job on
every unmarked row. The record id is deliberately NOT in these selectors - the marks are
the shop's convention, not one record's.
⚠ HOVER IS NOT MENTIONED ON PURPOSE. The theme's hover rules for these two rows set colour
and text-decoration only - no weight, no opacity - so a bold row stays bold and a dim row
stays dim with the mouse on it, and the orange keeps coming from the theme. Adding :hover
copies here would only restate what the cascade already does. */
.module-catalog_blocks .module-item .ymm-match .catalog-title,
.module-catalog_blocks .module-item .subitem.ymm-match a,
.module-catalog_blocks .module-item .ymm-plain .catalog-title,
.module-catalog_blocks .module-item .subitem.ymm-plain a {
font-weight: 400; /* 423 (the owner 10-15): „normaalne shrift tuleb tume aga mitte bold" */
color: hsla(var(--j-color-scheme-foreground-primary-h), var(--j-color-scheme-foreground-primary-s), calc(var(--j-color-scheme-foreground-primary-l) - 0%), calc(var(--j-color-scheme-foreground-primary-a) * 1));
}
.module-catalog_blocks .module-item .ymm-no-match .catalog-title,
.module-catalog_blocks .module-item .subitem.ymm-no-match a {
opacity: .6;
}
/* THE GROUP BOUNDARY (owner, 2026-09-11): "tekst 'sobivus' oleks keskel, kahe divider vahel,
ülemine divider paksem, alumine õhem". The row P118 puts above the first section of each
group - Sobivad / Universaalsed / Sõidukist sõltumatud.
It lives here rather than in product/category.twig's own inline block, beside the two marks
and for the same reason: the template is rebuilt and an admin can edit around it, a repo
stylesheet is neither. The border colour is the theme's own variable - the very one the
sections' dividers use - so a recolour in admin carries it along and there is no new hex
here, and no icon.
⚠ THE THIN LINE IS THE SECTION'S BOUNDARY. The label owns both rules, so the first block
under it drops the divider it would otherwise draw itself, or the reader sees two lines a
few pixels apart. That is what the third rule is for; it beats .category-block's own
border on three classes to one and does not depend on which stylesheet loads first. */
.category-blocks .category-group-label {
text-align: center;
padding: .6em 0;
margin-top: 28px;
border-top: 2px solid hsla(var(--j-color-scheme-background-border-h), var(--j-color-scheme-background-border-s), var(--j-color-scheme-background-border-l), var(--j-color-scheme-background-border-a));
border-bottom: 1px solid hsla(var(--j-color-scheme-background-border-h), var(--j-color-scheme-background-border-s), var(--j-color-scheme-background-border-l), var(--j-color-scheme-background-border-a));
font-size: var(--j-font_size-font-size--title-menu);
font-weight: 600;
opacity: .7;
}
/* The first group opens the list, so it keeps the two lines but not the gap above them. */
.category-blocks .category-group-label:first-child {
margin-top: 0;
}
.category-blocks .category-group-label + .category-block {
margin-top: 6px;
padding-top: 0;
border-top: none;
}
/* THE ONE RESULTS LINE (349; the owner 2026-10-11: „ma soovin lisada rea … samasse plokki kus on juba Toodete võrdlus
ja Sorteerimine"). product/category_results.twig, inside the sort bar's block (.products-filter, Journal's flex row
with wrap): a full-width row under the compare / sort controls, in the label row's look - centred, the same size and
weight, the same grey. The gap to the controls is T/4, T being the space above the controls today: the page title's
bottom spacing, Journal's Title style `valueBottomSpacing` 1.25em of the title size (20px desktop, 18px phone - so
T = 25px / 22.5px). That and the bar's bottom margin (`sortBarBox`, 32px) are Journal's own fields, left to the
owner; this file sets only the line's own gap. */
.category-results-line {
text-align: center;
/* ⚠ 481/482: the opening menu's category-entry look - the size was already the menu's; 482's
vocabulary makes the resting colour the ordinary DARK (foreground-primary), and only the
selection-driven rules below dim anything. */
font-size: var(--j-font_size-font-size--title-menu);
font-weight: 400;
color: hsla(var(--j-color-scheme-foreground-primary-h), var(--j-color-scheme-foreground-primary-s), calc(var(--j-color-scheme-foreground-primary-l) - 0%), calc(var(--j-color-scheme-foreground-primary-a) * 1));
}
.products-filter > .category-results-line {
flex: 0 0 100%;
margin-top: calc(var(--j-font_size-font-size--title-module) * 1.25 / 4);
}
/* Without a sort bar (the category page's subsections, or the bar switched off) the line stands alone above the blocks. */
.main-products-wrapper > .category-results-line {
margin-bottom: var(--j-gap-spacing-vertical-l);
}
/* The parts the line links to land below the sticky header - the same offset the sticky filter column uses above. */
.category-blocks .category-group-label,
.category-blocks .category-group-anchor {
scroll-margin-top: var(--sticky-top-distance, 96px);
}
/* ===========================================================================
THE HEADER'S VEHICLE ROW (owner, 2026-09-15): "Rida jaguneb 5 sektoriks."
Five sectors on the desktop - Mark | Aasta | Mudel | CS slot | ☑ - and two columns on
the phone, with the checkbox always in the right cell of the last row. The markup is
extension/module/ymmfilter_row.twig; the behaviour is the module's own, unchanged.
⚠ NO HEX, NO FONT NAME, NO HAND-TYPED WIDTH IN HERE, and that is the point. Every colour
is a scheme variable, every gap and size is one of the theme's own spacing/size
variables, the field's border and radius come from the header record's own search style
by carrying its .header-search class, and the row's background comes from the header
record's own background setting by carrying .mid-bar. A recolour or a resize in admin
therefore carries the row along, and nothing here has to be found and edited twice.
⚠ AND NO MEDIA QUERY. Desktop and phone are told apart by the theme's own
.desktop-header-active / .mobile-header-active classes, which Journal sets from the
header record's mobileHeaderAt setting (bound to the Laptop breakpoint, 1024, by P100).
A width written here could drift from that setting; a class cannot.
=========================================================================== */
/* ⚠ THE FIELD'S WHITE, RESOLVED AT THE ROOT - 2026-09-15, Cowork's 375px measurement.
The field reads the scheme's background-primary, and on the phone the row sits inside
.mobile-search-group, which carries color-scheme-scheme-3: the same variable resolves
there to hsl(33.6 100% 95.1%), the header cream, so the field came out cream while the
search box beside it stayed white (the base sheet paints a real #fff !important,
which is a paint the field cannot inherit).
A custom property is substituted on the element that DECLARES it, so resolving it here,
on :root, pins the page's own scheme - scheme-1, hsl(0 0% 100%) - and every descendant
inherits that one colour whatever bar it sits in. Still a variable, so a re-scheme of the
site carries the field along, and the desktop is unchanged because it was already reading
the page's scheme. */
:root {
--ymm-hr-field-bg: hsla(var(--j-color-scheme-background-primary-h), var(--j-color-scheme-background-primary-s), var(--j-color-scheme-background-primary-l), var(--j-color-scheme-background-primary-a));
/* The open list's edge, resolved here for exactly the same reason as the white above: read
inside .mobile-search-group it would be scheme-3's border, and the field and its list
have to read as one object on both headers. */
--ymm-hr-field-border: hsla(var(--j-color-scheme-background-border-h), var(--j-color-scheme-background-border-s), var(--j-color-scheme-background-border-l), var(--j-color-scheme-background-border-a));
/* ⚠ AND THE RESET BUTTON'S OWN TWO COLOURS, for the third time and the same reason - the
owner, 2026-09-15: "Mobiilis on nupu välimus teistsugune." It is the right button: the
theme paints every .btn from `button-background` and `button-foreground`, and those are
SCHEME variables, so inside the phone's search bar (scheme-3) the same button came out
hsl(221.5 51% 20%) on hsl(33.6 100% 95%) instead of the desktop's hsl(225.2 42.3% 39.4%)
on white. Captured here as numbers, handed back to the button below: no colour is written
down, the style and the class are untouched, and an admin re-scheme carries both headers. */
--ymm-hr-btn-bg-h: var(--j-color-scheme-button-background-h);
--ymm-hr-btn-bg-s: var(--j-color-scheme-button-background-s);
--ymm-hr-btn-bg-l: var(--j-color-scheme-button-background-l);
--ymm-hr-btn-bg-a: var(--j-color-scheme-button-background-a);
--ymm-hr-btn-fg-h: var(--j-color-scheme-button-foreground-h);
--ymm-hr-btn-fg-s: var(--j-color-scheme-button-foreground-s);
--ymm-hr-btn-fg-l: var(--j-color-scheme-button-foreground-l);
--ymm-hr-btn-fg-a: var(--j-color-scheme-button-foreground-a);
}
/* One element, moved between the two headers by head.js's own wrappers list - the same
mechanism #search, #cart and #logo use. The mobile wrapper is rendered empty on a
desktop-served page purely as that move's target, so it must take no space until it has
something in it. */
.mobile-header-top-wrapper:empty {
display: none;
}
.mobile-header-active .mobile-search-group {
flex-wrap: wrap;
}
.mobile-header-active .mobile-header-top-wrapper {
flex: 0 0 100%;
}
.mobile-header-active .mobile-header-top-wrapper > .ymm-header-row {
width: 100%;
}
/* THE ROW ITSELF. .mid-bar (carried in the markup) gives it the header record's background
and the full-viewport-width ::before that paints it. */
.ymm-header-row {
display: block;
padding-top: var(--j-gap-spacing---2);
padding-bottom: var(--j-gap-spacing---2);
/* ⚠ 1.3 SINCE 2026-09-15, and it is the whole of this change - the owner: "Proovime 4/4 ja
25 px kast … Otsing on peamine, YMM filter on selline abimaterjal, võib väiksem olla."
It was the theme's body 1.7, which made a 30 px field. At 1.3 the label's line box is
13 × 1.3 = 16.9px, the field is that plus a spacing step above and below = 24.9px, and
the glyph box Cowork measured at 17.0px lands 4.0px from the top and 4.0px from the
bottom. One constant, read by the cell, by the row's height and by the label's own
line-height, so none of them can drift from the others. */
--ymm-hr-line: 1.3;
/* THE FIELD IS THE TEXT PLUS A LITTLE - the owner, 2026-09-15. One line box of the field's
own font size, plus the smallest spacing step above and below. Not the header's bar
height, which is what made the row as tall as the mid bar, and since the line constant
above went to 1.3, not the search box's height either: 24.9px against its 40px, because
the search is the main thing on this bar and the vehicle row is the help beside it. */
--ymm-hr-cell: calc(var(--j-font_size-font-size-300) * var(--ymm-hr-line) + var(--j-gap-spacing---2) * 2);
/* The row's own height, named once: the cell plus the padding above and below it. Read by
the list cap below, so the two cannot drift apart. */
--ymm-hr-row-height: calc(var(--ymm-hr-cell) + var(--j-gap-spacing---2) * 2);
/* ⚠ THE LIST OPENS TO ITS FULL LENGTH - the owner, 2026-09-15: "Nimekirjad ei avane
täispikkuses, nad peaksid avanema täis pikkuses." It used to be capped at five rows
(130px), so a customer saw five of thirty-four makes.
⚠ THIS DOES NOT UNDO P93. His 2026-09-08 requirement was that the list scroll INSIDE ITS
OWN BOX and never scroll the page, and it still does: the list is position:absolute, so
the document's height does not change, and the cap is still there - it has simply stopped
being a row count and become the space that is actually on the screen. A short list draws
at its own height; a long one stops at the bottom of the viewport and scrolls inside
itself.
The subtraction is the sticky header's own parts, in the theme's own variables, so a
resize in admin carries the cap along: the top bar, the mid bar, this row, and one
spacing step left below the list. */
--ymm-hr-list-max: calc(100vh - var(--desktop-top-bar, 0px) - var(--desktop-header, 0px) - var(--ymm-hr-row-height) - var(--j-gap-spacing---6));
}
/* ⚠ THREE CLASSES, DELIBERATELY. .header .mid-bar is what style.min.css sizes and lays the
mid bar out with, and this file loads BEFORE it - so the height and the flex layout have
to be beaten on specificity, not on order. These are the only part of that bar's look the
row does not want: a bar of fields is as tall as its fields, and it can grow to a second
line.
⚠ NO min-height SINCE 2026-09-15 (the owner: "kasti suurus ainult veidi suurem kui tekst …
kogu header osa väiksemaks"). The row used to be forced to the mid bar's own 50px; now the
field's height decides, and the row is that plus its padding.
⚠ AND !important ON THE HEIGHT SINCE 2026-09-16 - the owner: "Soovin, et päise ülariba
peitumisel, päis ei suureneks." He read it as the top bar hiding; it was this row growing.
Carrying .mid-bar for the header's background (P125) also puts the row inside
`.desktop-header-active.header-sticky:not(.sticky-menu) header .mid-bar{height:
var(--desktop-sticky)}`, so the moment head.js sets header-sticky the row was forced from
its own 33px to the sticky bar's 50 - and the header went UP by 17 while the top bar went
down by 20. Nothing else grew: both bars kept their own heights.
WHY !important AND NOT MORE CLASSES. That rule is four classes and one type (0,4,1) against
this one's three (0,3,0), and it carries no !important of its own - so this is specificity,
not weight. But a tie does not help either: this file is delivered BEFORE style.min.css, so
an equal selector still loses on order, and the only way to outweigh it without naming the
sticky state would be to stack classes the element merely happens to also carry - which
would break again the first time the theme adds another header state. !important says the
thing that is actually true and says it once: THIS ROW IS AS TALL AS ITS OWN CONTENT, in
every state - sticky, not sticky, and .sticky-menu too, which today sets no height on the
mid bar at all. It is scoped to .ymm-header-row, so the mid bar beside it still takes
--desktop-sticky and the top bar still hides exactly as the owner set them in admin.
⚠ The phone needs nothing: there `.header` never matches (the row sits in .mobile-header >
.mobile-search-group, and is a tag, not that class), so neither rule reaches it -
checked, and no .mobile-sticky-* or .sticky-bar rule sets a height on it either. */
.header .mid-bar.ymm-header-row {
display: block;
height: auto !important;
}
.mobile-header-active .ymm-header-row {
/* ⚠ THE PHONE TAKES THE DESKTOP'S PROPORTION - the owner, 2026-09-15: "Kui mobiilivaates on
teised suhted, siis vii vastavusse." It used to size its cells from --mobile-search-bar
(36px) and pad the row with --mobile-search-padding (8px), so the field and the label sat
in a different relation to each other than on the desktop. --ymm-hr-cell is no longer
overridden here, so the formula above serves both, and the row's padding is the same
spacing step. The phone's own gap between cells stays the phone's, below. */
padding-top: var(--j-gap-spacing---2);
padding-bottom: var(--j-gap-spacing---2);
/* The same rule against the phone's own header: its top bar, its logo bar, the search bar
with its padding, this row, and one spacing step below. --sticky-top-distance is not
declared on this side, which is why the parts are summed rather than that one variable
read. */
--ymm-hr-row-height: calc(var(--ymm-hr-cell) + var(--j-gap-spacing---2) * 2);
--ymm-hr-list-max: calc(100vh - var(--mobile-top-bar, 0px) - var(--mobile-bar, 0px) - var(--mobile-search-bar, 0px) - var(--mobile-search-padding, 0px) * 2 - var(--ymm-hr-row-height) - var(--j-gap-spacing---6));
}
.ymm-header-row .ymm-hr-grid {
align-items: stretch;
/* ⚠ ONE GUTTER DOWN - the owner, 2026-09-15: "veergude kastid võivad olla teineteisele
lähemal". It was the header's own gutter-4 (28px), the gap between the header's big
blocks; gutter-3 is the next one down in the theme's own scale at 8px, which is the gap
the header uses between things that belong together. The row reads as one control, and
the 20px each join gives back is 100px of width the fields can use. */
gap: var(--j-gap-spacing---2) var(--j-gap-spacing-gutter-3);
}
/* ⚠ THE DESKTOP ROW IS NO LONGER FIVE EQUAL FIFTHS - the owner, 2026-09-15: "aasta ei võta
palju ruumi ja nimetused samuti. Siis ei pea seda kaherealiseks tegema kui lisandub
veerge."
Each field is as wide as its OWN longest value needs (the tracks below, measured from the
database in all four languages), the checkbox is pushed to the right edge, and the free
space sits between them - which is where a newly revealed field comes from, so the fields
already on the row never move. A second line is the browser's decision now: flex-wrap
takes one only when the content genuinely cannot fit, which at the shop's own widths means
1025px, not 1400px. */
.desktop-header-active .ymm-header-row .ymm-hr-grid {
display: flex;
flex-wrap: wrap;
/* Not stretch: a field is exactly one cell tall in every language, and the checkbox cell
is as tall as its own label needs - the Russian one takes two lines - so the two are
centred against each other rather than forced to one height. */
align-items: center;
}
/* ⚠ A FIELD MAY GIVE WAY BEFORE THE ROW BREAKS - 2026-09-15. The tracks below are what a
field WANTS: its longest value plus the clear space. At 1400px they all fit with room to
spare and nothing shrinks. At 1025px the widest state wants about 96px more than the header
has, and a row that breaks in two is worse than five fields each a few per cent narrower -
so they are allowed to shrink, down to a floor of six characters plus the clear space, and
the label ellipsises rather than the row wrapping. A wrap is left for what genuinely cannot
fit, and the tail below is what makes that case land correctly. */
.desktop-header-active .ymm-header-row .ymm-hr-sector {
flex: 0 1 auto;
min-width: calc(6 * var(--ymm-hr-char) + var(--ymm-hr-chrome));
height: var(--ymm-hr-cell);
}
/* One line means one cell height again - the fields' own. */
.desktop-header-active .ymm-header-row .ymm-hr-check {
height: var(--ymm-hr-cell);
}
/* Variant B on the phone: two columns and a 25px cell, as P130 built it. ⚠ NOTHING IS
COLUMN-PINNED ANY MORE - 2026-09-16. The checkbox used to be nailed to column 2 and the
reset to column 1 so the pair landed together at the end; with the checkbox first and the
reset last, plain auto-placement says the whole order by itself: the checkbox opens row 1,
the fields follow two to a row, and the reset takes the next free cell after the last one.
Its cell is therefore column 1 with an odd field count (3 fields -> row 3 left, 5 -> row 4
left) and column 2 with an even one (4 fields -> row 3 right). */
.mobile-header-active .ymm-header-row .ymm-hr-grid {
display: grid;
grid-auto-rows: var(--ymm-hr-cell);
grid-template-columns: repeat(2, 1fr);
gap: var(--mobile-search-padding);
}
/* On the phone the cell is half the row, so a long label wraps rather than pushing the grid
wider - and it wraps only when it cannot fit, with nothing clipping it. It needs no
grid-column: being first in the markup puts it in row 1, column 1. */
.mobile-header-active .ymm-header-row .ymm-hr-check {
white-space: normal;
/* ⚠ MARK AND AASTA SIDE BY SIDE - 370, PLAAN 0.8 (the owner 10-12, two phone screenshots:
„Mark …" on the right, „Aasta …" on the next line, half cut; P93 09-08: „lahtrid …
üksteise kõrval"). Being first in the markup, the checkbox took row 1 column 1, so Mark
sat beside it and Aasta started row 2. The phone now places it after the fields: Mark |
Aasta is row 1, each a half of the row, the fields after them pair on as before, and the
checkbox closes the grid. The desktop row (one flex line, the checkbox its first word)
is untouched - this rule is the phone's only. */
order: 1;
}
/* ⚠ THE TRACKS, MEASURED FROM THE DATABASE IN ALL FOUR LANGUAGES - 2026-09-15. Each number
is a character count, not a width: the longest thing that field can ever show, whichever
is longer of its own label and its longest option. `ch` is the font's own digit width, so
the track follows the type size rather than a pixel guess, and --ymm-hr-chrome is the box
around the text - the two paddings, the gap before the caret and the caret itself at 1em.
make 13 Mercedes-Benz (label: 10, fi)
year 9 "Aasta ..." (values are 4)
model 29 Transporter Chassi Double Cab (label: 10, ru)
roof 43 Sisäänrakennetut taittuvat poikittaistangot (fi; et is 39)
doors 8 the label, fi/ru (values are 3)
vansize length 14 "Kaubiku pikkus" (values are 8)
vansize height 14 "Kaubiku kõrgus" (values are 2)
engine 10 2,5 hybrid (label: 9, ru)
⚠ THE CAP IS THE 30%, and it is what stops one freak value eating the row: nothing is
capped at 1400px (the widest track, roof, is 320px against 365px), and at 1025px the roof
gives way first. A track never changes with what is revealed - only with the window - so
the fields already on the row cannot move when the next one appears. */
.desktop-header-active .ymm-header-row {
--ymm-hr-chrome: calc(var(--j-gap-spacing---5) * 2 + var(--j-gap-spacing---2) + 1em);
/* ⚠ A CHARACTER, NOT A DIGIT - 2026-09-15, and this is what was inflating every field.
The tracks were written in `ch`, which is the advance of "0", and in this face at this
size that is about 8.5px - while the text these fields actually show runs 6.0 to 6.9px a
character (Cowork, 1400px: "Mercedes-Benz" 90px over 13, "Transporter Chassi Double Cab"
183 over 29, "Kinnituspunktid" 90 over 15). Every track was therefore a quarter to a
third too wide, which is what pushed the full row onto a second line. 0.5em is the
measured average and the classic figure for a humanist sans; it is named once here so
every track reads the same measure. */
--ymm-hr-char: 0.5em;
}
.desktop-header-active .ymm-header-row .ymm-hr-sector {
width: min(calc(14 * var(--ymm-hr-char) + var(--ymm-hr-chrome)), 30%);
}
.desktop-header-active .ymm-header-row .ymm-hr-ymm_make {
width: min(calc(13 * var(--ymm-hr-char) + var(--ymm-hr-chrome)), 30%);
}
.desktop-header-active .ymm-header-row .ymm-hr-ymm_year {
width: min(calc(9 * var(--ymm-hr-char) + var(--ymm-hr-chrome)), 30%);
}
.desktop-header-active .ymm-header-row .ymm-hr-ymm_model {
width: min(calc(29 * var(--ymm-hr-char) + var(--ymm-hr-chrome)), 30%);
}
/* ⚠ THE ONE TRACK THAT IS CAPPED RATHER THAN MEASURED. Roof names run to 43 characters in
Finnish and 39 in Estonian, and a track that long pushes the six-cell row past the shop's
own 1216px content width. 32 is what the budget allows beside the other four and the
checkbox; because `ch` is the digit advance and digits are wider than lowercase letters, a
32ch track still holds roughly 35-38 characters of real text, so only the two longest
names are shown cut - and the full text is in the open list, one click away.
30 is what the budget allows: at the font's own digit width, measured at 7.5px from
Cowork's "2026 -> 30px", the six cells and their gaps come to 1198px against the shop's
1216px content width. */
.desktop-header-active .ymm-header-row .ymm-hr-ymm_roof {
width: min(calc(30 * var(--ymm-hr-char) + var(--ymm-hr-chrome)), 30%);
}
.desktop-header-active .ymm-header-row .ymm-hr-ymm_doors {
width: min(calc(8 * var(--ymm-hr-char) + var(--ymm-hr-chrome)), 30%);
}
.desktop-header-active .ymm-header-row .ymm-hr-ymm_engine {
width: min(calc(10 * var(--ymm-hr-char) + var(--ymm-hr-chrome)), 30%);
}
/* The checkbox cell is not a field: no caret, no padding of its own, and its label may take
two lines at the smaller type (P124), so it is sized for half of the longest label - the
Russian one, 32 characters - plus the box itself and the gap beside it. */
/* Its width is the box plus the gap plus its own label on ONE line - taken from the content
rather than from a character count, so each language gets exactly what it needs and the
Russian string, the longest of the four at 32 characters, is not cut either. */
.desktop-header-active .ymm-header-row .ymm-hr-check {
width: auto;
white-space: nowrap;
/* ⚠ IT DOES NOT GIVE WAY - 2026-09-16. Inside .ymm-hr-tail this was already true, because
the wrapper itself was flex:0 0 auto; standing in the row's own flex line it has to say
so, or the sector rule's flex:0 1 auto would shrink the label at 1025px. Its label is
already at its smallest, and it is the row's first word. */
flex: 0 0 auto;
}
/* ⚠ THE RESET WEARS THE FILTER MODULE'S OWN BUTTON, and nothing here repaints it. Its look
comes from Filter module 36's `resetButtonStyle` = the Journal button style **SMALL**, its
icon from that module's `resetIcon` (cancel, e5c9) and its word from its `resetText` - all
emitted as the generic `.reset-filter.btn` rules the markup's own class picks up. Edit that
button in admin and this one changes with it.
⚠ ONLY THE PROPORTIONS ARE THE ROW'S - the owner: "Vaid proportsioonid peavad õiged olema."
A pill built for a 40px sidebar arrives with .7em/.8em padding, which is a 29px button; the
height here is the row's own cell and the padding is one spacing step, so it matches the
fields beside it. The module's typography rules carry !important and are deliberately left
alone: the size of the type is the owner's to set on that button. */
.ymm-header-row .ymm-hr-reset {
display: flex;
align-items: center;
/* The page's own scheme, put back for the button that stands here - see the :root block.
The theme's .btn rules resolve these on the button itself, so re-declaring them on the
cell is enough and nothing about the button's own rules changes. */
--j-color-scheme-button-background-h: var(--ymm-hr-btn-bg-h);
--j-color-scheme-button-background-s: var(--ymm-hr-btn-bg-s);
--j-color-scheme-button-background-l: var(--ymm-hr-btn-bg-l);
--j-color-scheme-button-background-a: var(--ymm-hr-btn-bg-a);
--j-color-scheme-button-foreground-h: var(--ymm-hr-btn-fg-h);
--j-color-scheme-button-foreground-s: var(--ymm-hr-btn-fg-s);
--j-color-scheme-button-foreground-l: var(--ymm-hr-btn-fg-l);
--j-color-scheme-button-foreground-a: var(--ymm-hr-btn-fg-a);
}
.ymm-header-row .ymm-hr-reset .reset-filter {
height: var(--ymm-hr-cell);
display: inline-flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
padding-left: var(--j-gap-spacing---4);
padding-right: var(--j-gap-spacing---4);
/* ⚠ THE TYPE IS SAID HERE, BECAUSE THE BUTTON'S OWN STYLESHEET IS NOT ALWAYS IN THE PAGE
- the owner, 2026-09-16: "võrreldes ülejäänud päisega, proportsioonist väljas."
WHAT WAS HAPPENING. The Filter module's compiled CSS - the thing that paints this button,
`.reset-filter.btn{font-size:var(--j-font_size-font-size-200)!important}` among it - is
inlined by the row's template, and only when a vehicle is already chosen AT PAGE LOAD
(`{% if ymm_selected and ymm_filter_module_css %}`). Load a page with no vehicle, then
pick a make in the row, and the button appears through ymmRefreshWidget(), which swaps
`.ymmfilter-widget` ELEMENTS - the