/* ==========================================================================
OstuGrupp — Otsingu viimistlus (search UX)
Owner: inc/search-ux.php. Loads site-wide, because section 1 styles the
header search dropdown and the header renders on every page.
⚠ DO NOT EDIT assets/css/live-search.css from here — that file belongs to
inc/live-search.php and is left byte-identical. Section 1 below OVERRIDES
four of its rules on purpose; each override states the specificity pair it
has to beat, and every one of them is arithmetic on the selectors as
written, NOT a measurement in a browser. The conductor measures.
⚠ There is deliberately NO ![]()
rule in this file. One existed —
.ogsx-cat .ogsx-cat__img — and it had never matched a single element:
curl of the rendered no-results page returns ogsx-cat__glyph six times
and ogsx-cat__img zero times, because no top-level product_cat in this
shop carries a term thumbnail. The PHP branch that would have emitted
that ![]()
is gone too (inc/search-ux.php), so the rule was removed
rather than left as a rule nobody can test.
IF an image is ever put back here, remember what the dead rule was
guarding against: WooCommerce core ships
.woocommerce img, .woocommerce-page img { height:auto; max-width:100% }
at (0,1,1), and BOTH search views carry the woocommerce-page body class
(verified in the live markup) — so any image rule here that sets height
must clear (0,1,1). CLAUDE.md trap 1.
========================================================================== */
/* ==========================================================================
1 · HEADER DROPDOWN — the row you are on must be unmistakable
==========================================================================
The dropdown already showed picture + name + price on one row and already
moved with ↑/↓/Enter/Esc (inc/live-search.js). What it did not do was make
the CURRENT row obvious: live-search.css:85-89 gives the active row the same
--muted fill as plain hover plus a 1px inset ring at 30% opacity. On a white
panel, at arm's length, "highlighted" and "not highlighted" looked the same.
Specificity, selector by selector:
row .og-ls-panel .og-ls-list > .og-ls-item > a (0,3,1)
beats live-search.css:76 .og-ls-item a (0,1,1)
hover …> .og-ls-item > a:hover (0,4,1)
beats live-search.css:85 .og-ls-item a:hover (0,2,1)
active …> .og-ls-item.is-active > a (0,4,1)
beats live-search.css:86 .og-ls-item.is-active a (0,2,1)
title …> .og-ls-item.is-active > a .og-ls-title (0,5,1)
beats live-search.css:121-122 (0,3,1)
Hover and active tie at (0,4,1); active is written second, so on a tie it
wins. That is the order we want — a keyboard user who also has the mouse
somewhere over the panel should see where the KEYBOARD is.
========================================================================== */
/* Wider panel. live-search.css:17-22 sets width at (0,1,0); this is (0,2,0).
The panel is anchored right:0 and grows leftwards, and the 100vw cap is
kept so it can never reach past the viewport edge. */
.og-ls-host .og-ls-panel {
width: min(520px, calc(100vw - 32px));
}
.og-ls-panel .og-ls-list > .og-ls-item > a {
/* 14px → 12px. tokens.css defines no --space-14 (4, 8, 12, 16, 20, 24, 32,
40, 48, 56, 64, 80), so `var(--space-14, 14px)` always fell through to its
literal — and live-search.css:79, the rule this one overrides, already uses
var(--space-12, 12px). The override was raising the gap off the scale for
no stated reason; with this line the name --space-14 no longer appears
anywhere in assets/css. 2px, desktop only (the header search is
display:none until 1024px, main.css:220-224). */
gap: var(--space-12, 12px);
padding: 10px 12px;
border-left: 3px solid transparent;
border-radius: var(--radius, 12px);
}
.og-ls-panel .og-ls-list > .og-ls-item > a:hover {
background: var(--muted, #f1f5f9);
border-left-color: transparent;
box-shadow: none;
}
/* The active row: a solid green wash, a 3px green edge and a ring. Three
signals instead of one, so it survives a bright screen and a bad angle. */
.og-ls-panel .og-ls-list > .og-ls-item.is-active > a {
background: rgb(4 120 87 / .10);
border-left-color: var(--green, #047857);
box-shadow: inset 0 0 0 1px rgb(4 120 87 / .35);
}
.og-ls-panel .og-ls-list > .og-ls-item.is-active > a .og-ls-title {
color: var(--green-dark, #035e43);
}
/* Bigger picture. live-search.css:91-102 sets 52px at (0,1,0); this is
(0,2,0). The skeleton box is bumped in the same breath — they are the same
row a tenth of a second apart, and a size change between them is a jump. */
.og-ls-panel .og-ls-thumb,
.og-ls-panel .og-ls-skeleton-thumb {
width: 62px;
height: 62px;
}
/* Price is the second thing a shopper reads and it was the same size as the
name. live-search.css:125-130 is (0,1,0); this is (0,2,0). */
.og-ls-panel .og-ls-price {
font-size: 16px;
color: var(--slate-dark, #1e293b);
}
/* "Vaata kõiki tulemusi (N)" was a quiet text link at the bottom of a list of
pictures. It is the row that takes you to the whole result set, so it gets
the weight of a control. live-search.css:150-161 is (0,1,0) → (0,2,0). */
.og-ls-panel .og-ls-all {
min-height: 46px;
background: var(--muted, #f1f5f9);
font-size: 15px;
}
.og-ls-panel .og-ls-all:hover,
.og-ls-panel .og-ls-all.is-active {
background: var(--green, #047857);
color: #fff;
}
/* ==========================================================================
2 · RESULTS PAGE — how many, said once and said large
==========================================================================
Printed by inc/search-ux.php on woocommerce_archive_description, i.e. inside