/**
 * Catalog chrome overlay for Sample Finder.
 *
 * Prod catalog layout (1440px column, hidden breadcrumbs, orange pill tabs)
 * without replacing teammate markup: extra In Stock pills, extra columns,
 * and the scrollable lots table stay.
 *
 * Units: px only (theme html { font-size: 10px }).
 */

/* --- Hide Rank Math / Woo crumbs (prod catalog CSS) ---------------------- */

body.sb-catalog-archive .rank-math-breadcrumb,
body.sb-catalog-archive .woocommerce-breadcrumb,
body.sb-catalog-archive .woocommerce-sidebar,
body.sb-catalog-archive .fl-sidebar,
body.sb-catalog-archive nav.breadcrumb {
	display: none !important;
}

/* --- Match prod: break out of Beaver / Woo, one 1440px column ------------ */

body.sb-sf-page,
body.sb-catalog-archive.sb-sf-page {
	/* v3 `--background` is rgb(246,247,249); this sheet loads after the
	   app-wide rule in site-header.css and would otherwise win on order. */
	background: #f6f7f9;
}

body.sb-catalog-archive .fl-page-content .fl-content {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	border: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.sb-catalog-archive #fl-main-content,
body.sb-catalog-archive .fl-page,
body.sb-catalog-archive .fl-page-content {
	overflow-x: clip;
	max-width: 100%;
}

body.sb-catalog-archive #fl-main-content > .container {
	max-width: 100% !important;
	margin: 0 auto !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * The BB row/column selectors are confined to the page content. Unscoped,
 * they flattened the global footer: its row went from x=135 w=1170 with
 * five 234px columns to x=0 w=1440 with every column full-bleed, and the
 * footer grew from 401 to 752 tall. The page-level wrappers above them
 * stay unscoped -- those are what the release is for, and none of them
 * exists inside the footer.
 */
body.sb-sf-page .fl-page-content,
body.sb-sf-page .fl-content,
body.sb-sf-page .fl-content-full,
body.sb-sf-page .fl-post,
body.sb-sf-page .fl-post-content,
body.sb-sf-page .woocommerce,
body.sb-sf-page .woocommerce-page,
body.sb-sf-page #content,
body.sb-sf-page .content-area,
body.sb-sf-page #fl-main-content .fl-row-content-wrap,
body.sb-sf-page #fl-main-content .fl-row-fixed-width,
body.sb-sf-page #fl-main-content .fl-row-content,
body.sb-sf-page #fl-main-content .fl-col,
body.sb-sf-page #fl-main-content .fl-col-content,
body.sb-sf-page #fl-main-content .fl-module,
body.sb-sf-page #fl-main-content .fl-module-content {
	max-width: 100% !important;
	width: 100% !important;
}

body.sb-sf-page #fl-main-content .fl-row-fixed-width,
body.sb-sf-page #fl-main-content .fl-row-content,
body.sb-sf-page #fl-main-content .fl-col-content,
body.sb-sf-page #fl-main-content .fl-module-content,
body.sb-sf-page .woocommerce {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Same inner width as .sb-site-header__inner (1440px, 16/24px pad). */
.sb-catalog-archive.sb-sf-shell {
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding: 24px 16px 48px;
}

@media (min-width: 640px) {
	.sb-catalog-archive.sb-sf-shell {
		padding-left: 24px;
		padding-right: 24px;
	}
}

.sb-sf {
	background: transparent;
	font-family: Inter, system-ui, sans-serif;
	color: #141d2e;
}

/*
 * Beaver Builder's `.row` carries `margin: 0 -15px` and nothing compensates it
 * here, so `.fl-content` -- and the shell inside it -- start 15px left of the
 * viewport and run 30px wider. The shell's own padding was therefore rendering
 * as a 9px gutter at 1280 and 768, and 1px at 375. At 1440 the shell's
 * max-width absorbs the overhang, which is why only the narrow widths were
 * wrong.
 *
 * Zeroing the row's own margin is the fix: giving the shell a compensating
 * margin does not work, because it carries `width: 100%` and margins then push
 * it outward instead of narrowing it.
 *
 *   1440  row 1440, shell capped 1440, padding 24  ->  x=24  w=1392
 *   1280  row 1280, shell 1280,        padding 24  ->  x=24  w=1232
 *    375  row  375, shell  375,        padding 16  ->  x=16  w=343
 */
body.sb-catalog-archive .container > .row {
	margin-left: 0;
	margin-right: 0;
}

.sb-sf .sb-sf-inner,
.sb-sf .max-w-\[1440px\] {
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.sb-sf--embedded {
	width: 100%;
}

/* --- Hero ---------------------------------------------------------------- */

.sb-sf .sb-sf-hero {
	text-align: center;
	/* Design: max-w-3xl. 820px came from the 18px base resolving that class. */
	max-width: 768px;
	margin: 0 auto 28px;
}

.sb-sf .sb-sf-hero h1,
.sb-sf .sb-sf-hero .font-heading {
	font-family: Inter, system-ui, sans-serif !important;
	font-size: 36px !important;
	/* Design: sm:text-4xl is 36px/40px; 44px here made the hero a line taller. */
	line-height: 40px !important;
	/* Index.tsx: `font-heading text-3xl sm:text-4xl font-bold tracking-tight
	   text-primary`. The PRODUCT page's H1 is font-extrabold
	   (ProductDetail.tsx) and that is almost certainly where 800 came from --
	   but the two headings differ on purpose. */
	font-weight: 700 !important;
	/* Design: tracking-tight on the hero is -0.025em, not -0.02em -- 7px
	   of drift across the 39-character line at 36px. */
	letter-spacing: -0.025em;
	color: #07038c !important;
	margin: 0 !important;
}

.sb-sf .sb-sf-hero p {
	margin: 12px 0 0 !important;
	/*
	 * Design: text-sm, 14px/20px. The parent theme's 18px base resolved that
	 * class to 16px/24px here, which is what pushed the subtitle onto a second
	 * line at anything narrower than a full 1440.
	 */
	font-size: 14px !important;
	line-height: 20px !important;
	color: #647690 !important;
}

@media (max-width: 767px) {
	.sb-catalog-archive.sb-sf-shell {
		padding: 24px 16px 40px;
	}

}

/*
 * The design's hero is `text-3xl sm:text-4xl`: 36px/40px from 640px up and
 * 30px/36px below it. The local step was 28px and it fired at 767px, so the
 * hero was a size too small on phones and dropped a breakpoint too early.
 */
@media (max-width: 639px) {
	.sb-sf .sb-sf-hero h1,
	.sb-sf .sb-sf-hero .font-heading {
		font-size: 30px !important;
		line-height: 36px !important;
	}
}

/* --- View tabs (v2 design: white chip + orange underline) ---------------- */

.sb-sf .sb-sf-tabs {
	/*
	 * Design: 24px clear above the band and 24px below (hero bottom 201 ->
	 * band top 225; band bottom 265 -> next top 289). The shorthand below
	 * used to read `margin: 0 auto 20px`, which left 28 above and 20 below --
	 * and because this file loads AFTER sample-finder-ui.css at equal
	 * specificity, a margin rule added there could never win.
	 */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 24px auto;
	position: relative;
	overflow: visible;
	z-index: 6;
}

.sb-sf .sb-sf-tabs [role="tablist"],
.sb-sf .sb-sf-tabs .sb-sf-tabs__list {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 4px;
	border-radius: 6px;
	background: rgba(237, 239, 242, 0.4) !important;
	border: 1px solid rgba(219, 223, 230, 0.6) !important;
	box-shadow: none !important;
}

.sb-sf .sb-sf-tabs [role="tab"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 30px;
	padding: 6px 16px;
	border-bottom: 2px solid transparent !important;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: #647690;
	text-decoration: none;
	background: transparent !important;
	border: 0 !important;
	border-radius: 4px;
	box-shadow: none !important;
	cursor: pointer;
}

.sb-sf .sb-sf-tabs [role="tab"]:hover,
.sb-sf .sb-sf-tabs [role="tab"]:focus-visible {
	color: #07038c;
}

.sb-sf .sb-sf-tabs [role="tab"][aria-selected="true"],
.sb-sf .sb-sf-tabs [role="tab"].is-active {
	/*
	 * A white chip underlined in NAVY. AC7 keeps orange for calls to action,
	 * and a selected tab is a state -- the same reasoning that moved the filter
	 * pill's selected state off accent this round.
	 */
	background: #fff !important;
	color: #141d2e !important;
	border: 0 !important;
	border-bottom: 2px solid #07038c !important;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

@media (max-width: 767px) {
	.sb-sf .sb-sf-tabs [role="tablist"],
	.sb-sf .sb-sf-tabs .sb-sf-tabs__list {
		/* The design keeps this control compact at every width; stretching it to
		   100% made the two tabs fill the phone viewport. */
		width: fit-content;
		max-width: 100%;
	}

	.sb-sf .sb-sf-tabs [role="tab"] {
		min-width: 0;
		flex: 0 0 auto;
	}
}

.sb-sf .sb-sf-tabs .sb-sf-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * The design's mark is a bare 16px lucide circle-help in the muted
	 * foreground -- no ring around it. The extra 1px border read as a boxy
	 * chip next to the view toggle.
	 */
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #647690;
	cursor: help;
	flex-shrink: 0;
}

.sb-sf .sb-sf-tabs .sb-sf-tip:hover,
.sb-sf .sb-sf-tabs .sb-sf-tip:focus-visible {
	background: rgba(237, 239, 242, 0.6);
	color: #141d2e;
	outline: 0;
}

/*
 * A keyboard user got the same tint a mouse user gets on hover, and nothing
 * else (C3-4). Every other reachable control in this table -- filter pill
 * summaries, sort headers, pagination buttons -- shows a 2px navy ring, so this
 * one does too. The hover tint above is untouched.
 */
.sb-sf .sb-sf-tabs .sb-sf-tip:focus-visible {
	outline: 2px solid #07038c;   /* --ring 242 96% 28% */
	outline-offset: 2px;
}

.sb-sf .sb-sf-tabs .sb-sf-tip__mark {
	display: inline-flex;
	line-height: 0;
	color: inherit;
}

.sb-sf .sb-sf-tabs .sb-sf-tip__mark svg {
	width: 16px;
	height: 16px;
	display: block;
}

.sb-sf .sb-sf-tabs .sb-sf-tip__bubble {
	position: absolute;
	left: 50%;
	top: calc(100% + 8px);
	z-index: 30;
	width: 260px;
	padding: 12px 14px;
	border-radius: 6px;
	background: #141d2e;
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	white-space: normal;
	text-align: left;
	box-shadow: 0 8px 20px rgba(20,29,46, 0.18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(4px);
	transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.sb-sf .sb-sf-tabs .sb-sf-tip__bubble::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-bottom-color: #141d2e;
}

.sb-sf .sb-sf-tabs .sb-sf-tip__bubble strong {
	display: block;
	margin: 8px 0 2px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	color: #fff;
}

.sb-sf .sb-sf-tabs .sb-sf-tip__bubble strong:first-child {
	margin-top: 0;
}

.sb-sf .sb-sf-tabs .sb-sf-tip:hover .sb-sf-tip__bubble,
.sb-sf .sb-sf-tabs .sb-sf-tip:focus-visible .sb-sf-tip__bubble,
.sb-sf .sb-sf-tabs .sb-sf-tip:focus-within .sb-sf-tip__bubble {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 767px) {
	.sb-sf .sb-sf-tabs .sb-sf-tip__bubble {
		left: auto;
		right: 0;
		width: min(260px, calc(100vw - 48px));
		transform: translateY(4px);
	}

	.sb-sf .sb-sf-tabs .sb-sf-tip__bubble::before {
		left: auto;
		right: 6px;
		transform: none;
	}

	.sb-sf .sb-sf-tabs .sb-sf-tip:hover .sb-sf-tip__bubble,
	.sb-sf .sb-sf-tabs .sb-sf-tip:focus-visible .sb-sf-tip__bubble,
	.sb-sf .sb-sf-tabs .sb-sf-tip:focus-within .sb-sf-tip__bubble {
		transform: translateY(0);
	}
}

/* --- Filter chips -------------------------------------------------------- */

.sb-sf .sb-sf-filter-form {
	display: block;
}

.sb-sf details.sb-sf-pill > summary {
	min-height: 26px;
	padding: 4px 10px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: #334155;
	background: #fff;
	/*
	 * Not `!important`. This base declaration was the top of an arms race:
	 * it forced every other pill rule -- the grid variant's 60% hairline, the
	 * include/exclude tones -- to carry `!important` to be seen at all, and
	 * the tones then had to out-specify `[open]` and `:hover` greys that were
	 * important for the same reason. Without it the cascade reads straight:
	 * base (0,2,2) < grid variant (0,3,1) < tone (0,3,2).
	 */
	border: 1px solid rgba(219, 223, 230, 0.6);
	border-radius: 8px;
	box-shadow: none;
}

.sb-sf details.sb-sf-pill > summary:hover {
	border-color: #cbd5e1 !important;
	background: #f8fafc;
}

.sb-sf details.sb-sf-pill[open] > summary {
	border-color: #cbd5e1 !important;
}

/* The pill count is a state badge, not a call to action: navy, per AC7. */
.sb-sf details.sb-sf-pill > summary span[class*="rounded-full"] {
	background: #07038c !important;
	color: #fff !important;
	font-size: 11px;
	min-width: 16px;
	height: 16px;
}

.sb-sf a.sb-sf-clear,
.sb-sf .sb-sf-clear {
	font-size: 13px;
	color: #647690;
}

.sb-sf [data-sb-panel-count] {
	font-size: 13px;
	font-weight: 500;
	color: #647690;
}

/*
 * AC8-AC11: Export CSV is an outline button -- white fill, navy border, navy
 * bold label -- so the orange accent stays reserved for Add to Cart and the
 * other primary commerce actions.
 */
.sb-sf #export-samples-csv {
	height: 28px;
	padding: 0 12px;
	border: 1px solid hsl(var(--primary));
	border-radius: 6px;
	background: hsl(var(--card));
	color: hsl(var(--primary));
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.sb-sf #export-samples-csv svg {
	color: hsl(var(--primary));
}

/* AC9: hover changes the fill only -- border and label hold their colour. */
.sb-sf #export-samples-csv:hover:not(:disabled),
.sb-sf #export-samples-csv:focus-visible:not(:disabled) {
	background: hsl(var(--primary) / 0.1);
	border-color: hsl(var(--primary));
	color: hsl(var(--primary));
}

/* AC10: disabled keeps the outline at reduced opacity and is not clickable. */
.sb-sf #export-samples-csv:disabled,
.sb-sf #export-samples-csv[aria-disabled="true"] {
	background: hsl(var(--card));
	border-color: hsl(var(--primary));
	color: hsl(var(--primary));
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

/* --- All Products rows --------------------------------------------------- */

.sb-sf [data-sb-sf-stage] > .hidden.md\:grid,
.sb-sf [data-sb-sf-stage] > div.hidden {
	background: #eef2f7;
	color: #07038c;
	font-family: Inter, system-ui, sans-serif;
	letter-spacing: 0.04em;
	padding: 12px 16px;
}

.sb-sf [data-sb-sf-stage] > .hidden.md\:grid a,
.sb-sf [data-sb-sf-stage] > .hidden.md\:grid button {
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: #07038c;
	text-transform: uppercase;
	background: transparent !important;
	box-shadow: none !important;
}

.sb-sf [data-sb-sf-stage] > .hidden.md\:grid button:focus,
.sb-sf [data-sb-sf-stage] > .hidden.md\:grid button:active,
.sb-sf [data-sb-sf-stage] > .hidden.md\:grid button:focus-visible {
	background: transparent !important;
	box-shadow: none !important;
}

.sb-sf [data-sb-sf-stage] > .grid {
	padding-top: 16px;
	padding-bottom: 16px;
	border-bottom-color: #dbdfe6;
}

/*
 * BRIAN 14 SEP: 16/22 -> 14/20, matching the In Stock table's product title on
 * the same page. This rule is where the All Products title size actually comes
 * from -- (0,5,0) plus !important, so the markup's `text-sm` and a (0,3,1)
 * override both lost to it silently. Found with matched.py rather than guessed;
 * three prior attempts at this had no effect at all.
 */
/*
 * v4, 15 Sep: GroupedProductTable.tsx gives the condition
 * `font-heading text-base font-bold text-primary` -- 16px, with Tailwind's
 * text-base line-height of 24px. Back to the design's size.
 *
 * This REVERSES the 14 Sep change above, deliberately. That change was made when
 * the whole row was oversized -- a 73px row with a 40px button and an 18px
 * inherited base -- and dropping the title to 14px was the quickest way to make
 * the row read as tight. The row is now at the component's own dimensions
 * (py-2, h-8 button), so the title can carry its designed size without the row
 * looking heavy. Registered as superseding B22-1; if Brian still reads it as too
 * big, this rule is the one to change and 14/20 is the value to return to.
 */
.sb-sf [data-sb-sf-stage] > .grid .font-heading.text-primary,
.sb-sf [data-sb-sf-stage] > .grid .text-primary {
	color: #07038c !important;
	font-size: 16px !important;
	/* `leading-tight` in the component, not Tailwind's default text-base
	   leading: 16px * 1.25 = 20px. Critic 1 finding 6. */
	line-height: 20px !important;
}

.sb-sf [data-sb-sf-instock] .sb-sf-lot-condition {
	font-size: 14px !important;
	line-height: 18px !important;
}

.sb-sf [data-sb-sf-stage] > .grid .bg-accent {
	background: #eb743d !important;
	color: #fff !important;
	border-radius: 8px;
	height: 40px;
	min-width: 148px;
	font-size: 13px;
	box-shadow: none;
}

.sb-sf [data-sb-sf-stage] > .grid .bg-accent:hover,
.sb-sf [data-sb-sf-stage] > .grid a:hover .bg-accent {
	background: rgba(235,116,61,0.9) !important;
}

.sb-sf [data-sb-sf-stage] .text-xs.uppercase {
	font-size: 11px;
	letter-spacing: 0.06em;
	color: #647690;
}

/* --- In Stock table header (keep sticky + scroll) ------------------------ */

/*
 * v2 design values, measured off the flat export rather than transcribed:
 * 12px/700 Inter, tracking-wide (0.025em), solid white on the brand navy, and
 * white-at-20% dividers. This sheet loads after sample-finder-ui.css, so it is
 * the one that decides -- editing only that file left every value here intact.
 */
.sb-sf [data-sb-sf-instock] thead th {
	font-family: Inter, system-ui, sans-serif;
	/*
	 * `!important` because `.sb-sf [data-sb-sf-stage] .text-xs.uppercase`
	 * (0,4,0) outranks this selector (0,2,2) and was pinning the labels to
	 * 11px/0.06em -- the header sits inside that stage wrapper.
	 */
	font-size: 12px !important;
	line-height: 16px !important;
	/* The design's header is `text-xs font-bold uppercase
	   text-table-header-foreground` and that is the whole class list -- no
	   `tracking-*`. 0.025em is 0.3px at 12px, spread across 24 uppercase
	   columns, which is the difference between the header row fitting the
	   frozen-column table and not. */
	letter-spacing: normal !important;
	/* AC2/AC7: solid white. At 88% the label failed the AA contrast check. */
	color: #fff !important;
	/* hsl(242 96% 28%) -- the design's --table-header token, = rgb(7,3,140). */
	background: hsl(var(--brand-navy)) !important;
	border-color: hsl(0 0% 100% / 0.2) !important;
}

/* AC5: the Product cell keeps the export's neutral border/60 underline. */
.sb-sf [data-sb-sf-instock] thead th.sb-sf-freeze--left {
	border-bottom-color: hsl(var(--border) / 0.6) !important;
}

.sb-sf [data-sb-sf-instock] thead th .sb-sf-sort,
.sb-sf [data-sb-sf-instock] thead th button {
	color: inherit !important;
	/* Same stage-wrapper override as the cell above. */
	font-size: 12px !important;
	line-height: 16px !important;
	/* The design's header is `text-xs font-bold uppercase
	   text-table-header-foreground` and that is the whole class list -- no
	   `tracking-*`. 0.025em is 0.3px at 12px, spread across 24 uppercase
	   columns, which is the difference between the header row fitting the
	   frozen-column table and not. */
	letter-spacing: normal !important;
	/* The design's sort control is a bare text button, not a chip. */
	border-radius: 0 !important;
}


.sb-sf [data-sb-sf-add-to-cart] {
	background: #eb743d !important;
	color: #fff !important;
	border: 0;
	border-radius: 5px;
	height: 30px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 600;
}

.sb-sf [data-sb-sf-add-to-cart]:hover {
	background: rgba(235,116,61,0.9) !important;
}

/* Hero subtitle link: the design sets it bold and underlined so it reads as a
   link rather than running on as part of the sentence. */
.sb-sf .sb-catalog-hero__subtitle-link,
.sb-catalog-hero__subtitle .sb-catalog-hero__subtitle-link {
	/* Index.tsx: `text-primary-glow font-semibold underline underline-offset-2`
	   -- semibold, which is 600. Bold was a reading of "the design sets it
	   bold", not a measurement of it. */
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	/* `color: inherit` here took the muted colour of the surrounding <p>, so the
	   link rendered #647690 -- the primary-glow the comment above already names
	   was never actually set. */
	color: #307FE2;
}

/* --- Space above the Sample Finder (v2 design) ------------------------- */
/*
 * The design leaves 32px between the site header and the hero; live had 64px.
 * Two sources: Beaver Builder's .fl-content carries margin-top:40px and the
 * catalog shell adds 24px of padding. The theme margin is zeroed here and the
 * shell owns the whole gap.
 *
 * This lives in sample-finder-catalog.css, not product-catalog-archive.css:
 * that sheet is not enqueued on /products/, so the same rule there did nothing.
 */
body.sb-catalog-archive .fl-content { margin-top: 0 !important; }
body.sb-catalog-archive .sb-sf-shell { padding-top: 32px; }

/*
 * The grouped row's product title is now a real anchor (C3-2), so it needs the
 * link chrome suppressed -- it is styled entirely by its utility classes, and a
 * browser underline would be a visible change where this fix must have none.
 * It also gets the catalog's focus ring, since it is now the row's keyboard
 * entry point.
 */
.sb-sf-catalog-row a.sb-sf-row-title {
	text-decoration: none;
	color: inherit;
}

.sb-sf-catalog-row a.sb-sf-row-title:focus-visible {
	outline: 2px solid #07038c;   /* --ring 242 96% 28% */
	outline-offset: 2px;
	border-radius: 2px;
}