is nested inside when
* row.blurb is truthy (services without a blurb render zero rows of
* extra height). 80-char cap upstream in normalizeServiceRow.
*
* Catalog-density-rework 2026-05-07: was 1-line nowrap+ellipsis, now
* 2-line clamp box. With the dropped chevron + delivery cells, the
* .service-row__name cell takes ~2.5fr of the row width — at 1180px
* container, that's ~600px which is enough to fit most 80-char blurbs
* on a single line; longer ones wrap to 2 lines and show the trailing
* text instead of mid-sentence "...". Mobile @media keeps the 1-line
* clamp it had before (icon column eats horizontal real-estate so
* 2-line blurb on a 360px viewport would push title off-screen). */
margin: 0.15rem 0 0;
font-size: 0.8125rem;
color: var(--muted-foreground);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.service-row__seller {
grid-area: seller;
display: flex;
align-items: center;
gap: 0.625rem;
min-width: 0;
font-size: 0.8125rem;
}
/* Avatar — bumped 24px → 40px in catalog-density-rework iter-2 2026-05-07b
* (Funpay parity). position:relative anchors the absolute online-dot
* overlay child. */
.service-row__seller-avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.service-row__seller-avatar img,
.service-row__seller-avatar svg {
width: 40px;
height: 40px;
border-radius: 50%;
display: block;
}
.service-row__seller-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.service-row__seller-name {
font-weight: 500;
color: var(--foreground);
/* Iter-2 2026-05-07b: simplified from inline-flex (which carried the
online-dot as a flex sibling per sales-count Slice 1 D8) to plain
block. Dot relocated to .service-row__seller-avatar overlay. The
inner .service-row__seller-name-text wrapper still owns
overflow:ellipsis below and stays load-bearing for long marketplace
seller names. */
display: block;
max-width: 100%;
min-width: 0;
}
/* Inner text wrapper — owns overflow:ellipsis on long marketplace seller
names like "sLeiter cs2 boosting/coaching account selling".
`display: block` is LOAD-BEARING per CSS spec: text-overflow:ellipsis
+ overflow:hidden have NO effect on inline elements (default span
display). Pre-iter-2 (sales-count polish slice 2026-04-29) the parent
.service-row__seller-name was inline-flex, which made this inner span
a flex item — flex items establish their own block formatting context,
so ellipsis worked. Iter-2 2026-05-07b moved the online-dot to the
avatar overlay and simplified the parent to plain `display: block`,
which made this inner span a regular inline run again — silently
breaking ellipsis until 2026-05-07i (this rule). With the seller
column at fixed 180px (~130px after avatar+gap), names longer than
~16 chars overflowed visually into the price column. The user-visible
bug surfaced when seller "sLeiter cs2 boosting/coaching account
selling" registered (~46 chars). Drift guard: locked by
tests/sales-count/follow-up-polish.test.js Section 1. */
.service-row__seller-name-text {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.service-row__seller-meta {
color: var(--muted-foreground);
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
/* sales-count Slice 1 / D8 / A10: meta-line is OPTIONAL — rendered
only when there's a rating OR sales-count badge to show. The EJS
gates the entire so layout collapses cleanly when neither
applies (no `min-height` cheat needed; the spans simply don't exist
in DOM). */
}
/* sales-count Slice 1 / Decision 2 + 3: "X sold" badge slots into the
rating-or-empty fall-through chain at priority 2 (rating > sales >
absent). Visual treatment matches the rating-count caption (muted
foreground, same font-size as seller-meta). */
.service-row__sales-badge {
color: var(--muted-foreground);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Online-dot — relocated from inline-next-to-name (sales-count Slice 1
* D8) to absolute-overlay on the avatar's bottom-right corner per iter-2
* 2026-05-07b. The 2px border-ring matching --background carves visual
* separation between dot and avatar so it doesn't blend on busy avatar
* imagery; canonical Funpay/Discord/Slack pattern. Size 6px → 12px to
* match the bigger avatar. */
.service-row__online-dot {
position: absolute;
bottom: -2px;
right: -2px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--background);
box-sizing: border-box;
z-index: 1;
}
.service-row__online-dot--online {
background: var(--success, hsl(142 70% 40%));
}
.service-row__online-dot--offline {
background: var(--muted-foreground);
opacity: 0.6;
}
.service-row__rating {
color: var(--foreground);
font-weight: 500;
white-space: nowrap;
}
.service-row__rating-star {
color: hsl(45 95% 50%);
}
.service-row__rating-count {
opacity: 0.7;
}
/* .service-row__delivery cell — DELETED in catalog-density-rework
* 2026-05-07. Delivery indicator is now an inline ⚡/🕒 icon next to
* .service-row__price-amount (see .service-row__delivery-icon below). */
.service-row__price {
grid-area: price;
text-align: right;
font-feature-settings: "tnum" 1;
/* Iter-5 2026-05-07e: simplified from column-flex stack (which placed
* "/ unit" on a second line below the amount) to right-aligned single
* cell. Inner .service-row__price-line is the inline-flex container
* for [amount + qty + ⚡] all on one baseline. */
display: flex;
justify-content: flex-end;
align-items: center;
}
/* Inline-flex wrapper keeps amount + qty + delivery icon on a single
* baseline. Iter-5 2026-05-07e absorbed the qty span into this row
* (was a sibling block below pre-iter-5). */
.service-row__price-line {
display: inline-flex;
align-items: baseline;
gap: 0.3rem;
white-space: nowrap;
}
.service-row__price-amount {
font-size: 0.9375rem;
font-weight: 700;
color: var(--foreground);
}
/* Delivery indicator — collapsed from the prior pill (.delivery-badge-inline,
* deleted) to an icon-only signal. Variant comes from deliveryBadge.variant
* (auto / manual). The full label ("Auto delivery" / "Manual delivery" /
* admin-overridden text) lives in the title= attr + aria-label= so screen
* readers + long-press tooltips still surface the human-readable string.
*
* --auto color: green (success token) — fast/instant signal, mirrors the
* Funpay convention of a green lightning ⚡.
* --manual color: muted-foreground — neutral. Clock 🕒 communicates
* "delivery is human-paced" without alarm. */
.service-row__delivery-icon {
font-size: 0.875rem;
line-height: 1;
flex-shrink: 0;
display: inline-block;
}
.service-row__delivery-icon--auto {
color: var(--success, hsl(142 70% 40%));
}
.service-row__delivery-icon--manual {
color: var(--muted-foreground);
}
/* Iter-5 2026-05-07e: was display:block (rendered on its own line below
* amount). Now inline-flex item (default display:inline) sitting on the
* same baseline as amount, separated by 0.3rem gap. Smaller font +
* muted color visually subordinates it to the price number. */
.service-row__price-qty {
font-size: 0.75rem;
color: var(--muted-foreground);
font-weight: 400;
}
/* -------------------------------------------------------------------------
* Group header (Phase 6 forward-compat — only renders when
* row.templateGroupCount > 1, which is false today; the conditional in
* the EJS template keeps this dead until Phase 6 schema activates).
* ------------------------------------------------------------------------- */
.service-group-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 1rem 0.5rem 0.875rem;
border-bottom: 1px solid var(--border);
border-left: 4px solid var(--service-row-tint, transparent);
background: var(--muted);
font-size: 0.8125rem;
}
.service-group-header__title {
font-weight: 600;
color: var(--foreground);
}
.service-group-header__meta {
color: var(--muted-foreground);
flex: 1;
}
/* Delivery badge pill block REMOVED in catalog-density-rework 2026-05-07.
* Was a 5-rule block (.delivery-badge-inline base + 4 modifier/element
* children) used exclusively by views/partials/service-row.ejs to render
* an "Auto delivery" / "Manual delivery" pill in its own .service-row__
* delivery grid cell. That cell was deleted in the rework; the delivery
* indicator is now an inline ⚡/🕒 icon next to .service-row__price-amount
* styled by .service-row__delivery-icon* above. The .delivery-badge-inline
* class is no longer referenced by any EJS, JS, or CSS in the repo —
* verified via `rg "delivery-badge-inline"` returning only test files
* which were updated alongside this rule deletion. */
/* -------------------------------------------------------------------------
* Empty state.
* ------------------------------------------------------------------------- */
.catalog-empty-state {
text-align: center;
padding: 3rem 1rem;
color: var(--muted-foreground);
}
.catalog-empty-state h3 {
margin: 0 0 0.5rem;
font-size: 1.125rem;
color: var(--foreground);
}
.catalog-empty-state .catalog-empty-cta {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
color: var(--foreground);
background: var(--background);
}
.catalog-empty-state .catalog-empty-cta:hover {
background: var(--accent);
}
/* -------------------------------------------------------------------------
* Load more.
* ------------------------------------------------------------------------- */
.catalog-load-more {
margin: 1.5rem auto 0;
display: block;
text-align: center;
padding: 0.625rem 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--background);
color: var(--foreground);
text-decoration: none;
font-weight: 500;
width: fit-content;
}
.catalog-load-more:hover {
background: var(--accent);
}
/* -------------------------------------------------------------------------
* Mobile (<720px) — Funpay-style flat row list (UX decision 2026-04-29,
* grid rectified 2026-04-28: prior 3-row template had `icon` in row 1 col 1
* AND row 3 col 1 with `blurb blurb` in row 2 — non-rectangular per CSS
* Grid spec → entire grid-template-areas declaration was invalid and
* discarded. Browser fell back to auto-flow placement, which pushed
* .service-row__seller into col 3 row 1 next to the title and squeezed
* the title column down to ~40% of width, causing 3-4 line title wraps
* on iPhone-width viewports. Fix: make icon span both rows in a valid
* 2-row template. The standalone `blurb` grid area was also dead — the
* sits inside