/* Compact search results.
   One row tells the whole story — picture, what it is, what it does, what it
   costs — so nobody has to open three products to find the one they meant.
   Scoped under .sr so it can drop into the shop's glass panels and the staff
   dashboards without either one's styles reaching in. */

/* ── reading colour ───────────────────────────────────────────────────────
   These rows drop into four different pages that each name their text colour
   differently: the staff dashboards and products/premium use --ink, the
   landing page uses --text, and a page could define neither.

   So the text follows whichever the host page defines and falls back to
   --sr-ink, which is the only part that tracks the OS setting. Hard-coding a
   colour here and "fixing" dark mode with an override is what made the
   description unreadable: the override keys off :root, so anywhere the theme
   is set on a container instead — or the page is light on a dark-set device —
   the wrong one wins and the text disappears into the background. Inheriting
   the page's own variable cannot get out of step with the page. */
:root {
    --sr-ink: #0b1220;
    --sr-surface: #ffffff;
    --sr-line: #e8ecf2;
}
@media (prefers-color-scheme: dark) {
    :root {
        --sr-ink: #f8fafc;
        --sr-surface: #111827;
        --sr-line: #1e293b;
    }
}

.sr-hit {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line, var(--rule, #e2e8f0));
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: outline-color .12s ease;

    /* Held transparent rather than left unset, so the hover below only has to
       change the colour — an outline appearing from nothing makes the row
       twitch, and these rows sit in a tight list where that is very visible. */
    outline: 1.5px solid transparent;
    outline-offset: -1.5px;
    border-radius: 8px;
}
.sr-hit:last-child { border-bottom: 0; }

/* ── hover ─────────────────────────────────────────────────────────────────
   Outlined, not filled, for the same reason the matched word is: a background
   has to assume what colour the text on top of it is, and these rows inherit
   their colour from whatever page they are dropped into. A fill that reads
   well on the shop's light panel is wrong on a dark dashboard, and vice versa.

   An outline never touches the row's contents — the picture, the name and the
   description keep exactly the contrast they already had — so one rule is
   correct everywhere.

   `outline` rather than `border`: outlines are drawn outside the box model, so
   nothing reflows and no row moves when the pointer crosses it. The negative
   offset pulls it inside the row's own edge so it cannot be clipped by the
   list's `overflow: hidden`. */
.sr-hit:hover,
.sr-hit:focus-visible {
    outline-color: var(--brand, var(--accent-text, #7c3aed));
    background: transparent;
}

.sr-hit__img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: cover;
    border-radius: 9px;
    background: var(--surface, #f8fafc);
}

.sr-hit__body { flex: 1 1 auto; min-width: 0; }

/* Small, tight, and never more than two lines — a name is a label, not prose,
   and it is the description below that people are actually reading. */
.sr-hit__name {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.1px;
    color: var(--ink, var(--text, var(--sr-ink)));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sr-hit__brand {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--accent-text, #7c3aed);
    margin-top: 1px;
}

/* Shown IN FULL, not clamped.
   This is the part that saves the trip into the product, and a description cut
   off at three lines stops exactly where the detail that distinguishes two
   similar items usually lives. It is set very small so the whole thing can sit
   in a row without the row becoming a paragraph.

   Deliberately NOT the muted grey used for secondary text. At 9.5px a grey this
   light is genuinely hard to read, and this is the line people are here to
   read — so it takes near-full contrast in both themes and a little more
   weight than body text to hold up at this size. */
.sr-hit__desc {
    font-size: 9.5px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--ink, var(--text, var(--sr-ink)));
    margin-top: 2px;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.sr-hit__foot {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.sr-hit__price {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--accent-text, #7c3aed);
}

.sr-hit__meta { font-size: 10px; color: var(--muted, #94a3b8); }

.sr-hit__out {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
}
.sr-hit__in {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
}

/* Sold out: dimmed, and plainly not something you can tap. It renders as a
   span rather than a link (see search_result.js), so the cursor and the
   hover highlight have to be taken away too or it still invites a click. */
.sr-hit--out { opacity: .62; cursor: default; }
.sr-hit--out:hover { outline-color: transparent; background: transparent; }

/* ── the matched text ──────────────────────────────────────────────────────
   What someone typed, marked where it was found. With the full description on
   screen the row can be several lines long, and without this the eye has to
   re-read all of it to see why this result came back.

   Outlined, not filled. A yellow highlight has to assume what colour the text
   on top of it is, and it cannot: these rows inherit their colour from the
   host page, so on a dark theme the text is near-white and it disappeared into
   the yellow. An outline never touches the text colour — the word keeps
   whatever contrast it already had against whatever background it is on, and
   the mark reads the same in both themes.

   `background: none` first: browsers apply their own yellow to <mark>, and it
   ignores the theme entirely. */
.sr-hit mark,
.repair-tick mark,
.ds-mark mark {
    background: none;
    color: inherit;
    font-weight: 700;
    padding: 0 2px;
    border: 1px solid var(--brand, var(--accent-text, #7c3aed));
    border-radius: 4px;
    /* the border adds height; pull it back so lines do not jump apart */
    margin: 0 .5px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Only things with no page variable to inherit are set per theme here. The
   name and description are deliberately absent: they follow --ink/--text
   above, and repeating them here is precisely what put them out of step with
   the page they were sitting on. */
@media (prefers-color-scheme: dark) {
    .sr-hit { border-bottom-color: var(--line, var(--rule, #1e293b)); }
    .sr-hit__meta { color: var(--muted, #94a3b8); }
    .sr-hit__img { background: var(--surface, #0f172a); }
}
/* The mark needs no per-theme rule at all now: it borrows the page's own brand
   colour and never overrides the text, so it is correct in both themes by
   construction. That is the whole point of outlining it. */

/* ─────────────────────────────────────────────────────────────────────────
   The results container.

   Every staff dashboard used to set this to a 150px auto-fill card grid, so
   each row was squeezed into a narrow column — picture, name and the whole
   description sharing 150px. The row shape below was never actually visible,
   which is why the redesign looked like nothing had changed.

   It is a list: one row per line, full width, exactly like the landing page.
   Defined once here rather than inline on ten pages, so it cannot drift again.
   ───────────────────────────────────────────────────────────────────────── */
.search-results-grid,
.sr-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 14px;
    padding: 0;
    /* Same inheritance rule as the text: take the host page's own surface, and
       only fall back to something OS-aware if it names none. A flat #fff here
       put white text on a white panel on any dark page that happens not to
       define --surface. */
    background: var(--surface, var(--bg, var(--sr-surface)));
    border: 1px solid var(--line, var(--rule, var(--sr-line)));
    border-radius: 12px;
    overflow: hidden;
}