/**
 * Inventory (lot) table toolbar: grouped filters, "All filters" sheet, applied
 * chips, the Columns control and the columns it adds to the table
 * (feat-muvvtfqc8scd, feat-muvvqu1y952i, phase 1).
 *
 * Loaded after sample-finder-ui.css. Everything is in px: the theme's root is
 * 10px, the design's is 16px. Colours are the design tokens written literally
 * (the tokens are defined on .sb-sf, and the Columns sheet must not lose its
 * colours if it is ever moved out of that subtree):
 *   primary #06038d   foreground #141d2e   muted-foreground #647690
 *   border #dbdfe6    muted #edeff2        accent #ea733d
 *   destructive rgb(228,46,33)             background #f6f7f9
 * Navy and orange are the site's rgb(6,3,141) / rgb(234,115,61) (round 2); the
 * one exception is the added columns' header cells, which match the legacy
 * header row beside them (css/sample-finder-ui.css paints that #07038c).
 *
 * Buttons start from `all: unset` because the parent theme and the legacy
 * sheets style bare `button` / `input` and outrank a single class.
 */

/* --- Shared ---------------------------------------------------------------- */

.sb-sf .sb-tb button,
.sb-sf .sb-tb summary,
.sb-tb-toast {
	font-family: inherit;
}

/* Not the Include / Exclude buttons: those are the legacy pill panel's own. */
.sb-sf .sb-tb button:not(.sb-sf-pill__mode-btn) {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
}

.sb-sf .sb-tb button:focus-visible,
.sb-sf .sb-tb summary:focus-visible,
.sb-sf .sb-tb input:focus-visible {
	outline: 2px solid #06038d;
	outline-offset: 2px;
}

.sb-sf .sb-tb button[disabled] {
	cursor: default;
	opacity: 0.5;
}

.sb-sf .sb-tb svg.sb-tb-ico,
.sb-sf .sb-tb svg.lucide {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.sb-sf .sb-tb .sb-tb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sb-sf .sb-tb .sb-tb-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	box-sizing: border-box;
	background: rgba(6, 3, 141, 0.12);
	color: #06038d;
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
}

.sb-sf .sb-tb .sb-tb-badge.is-excl {
	background: rgba(228, 46, 33, 0.14);
	color: rgb(228, 46, 33);
}

.sb-sf .sb-tb .sb-tb-badge--solid {
	background: #06038d;
	color: #fff;
}

/* --- The bar --------------------------------------------------------------- */

.sb-sf .sb-tb {
	position: relative;
	border-radius: 8px 8px 0 0;
}

.sb-sf .sb-tb .sb-tb__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 12px;
	padding: 6px 10px;
	min-height: 43px;
	box-sizing: border-box;
}

.sb-sf .sb-tb form.sb-tb__form {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.sb-sf .sb-tb .sb-tb__groups {
	display: contents;
}

.sb-sf .sb-tb .sb-tb-sheet__body {
	display: contents;
}

.sb-sf .sb-tb .sb-tb-sheet__head,
.sb-sf .sb-tb .sb-tb-sheet__foot,
.sb-sf .sb-tb .sb-tb-group__chev-sheet,
.sb-sf .sb-tb .sb-tb-group__active {
	display: none;
}

.sb-sf .sb-tb .sb-tb__right {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	min-height: 30px;
}

.sb-sf .sb-tb .sb-tb__count {
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: #141d2e;
	white-space: nowrap;
}

.sb-sf .sb-tb .sb-tb__divider {
	width: 1px;
	height: 14px;
	background: rgba(219, 223, 230, 0.9);
}

.sb-sf .sb-tb .sb-tb__cols {
	position: relative;
	display: flex;
}

/* Columns / Export CSV / (mobile) Filters: outline primary. */
.sb-sf .sb-tb button.sb-tb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 28px;
	padding: 0 12px;
	border: 1px solid #06038d;
	border-radius: 6px;
	background: #fff;
	color: #06038d;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(20, 29, 46, 0.05);
	transition: background-color 150ms ease;
}

.sb-sf .sb-tb button.sb-tb-btn:hover:not([disabled]),
.sb-sf .sb-tb button.sb-tb-btn[aria-expanded="true"] {
	background: rgba(6, 3, 141, 0.1);
	color: #06038d;
}

.sb-sf .sb-tb button.sb-tb-btn .sb-tb-btn__n {
	font-weight: 400;
	color: #647690;
}

.sb-sf .sb-tb button.sb-tb-btn--filters {
	display: none;
}

/*
 * Export CSV takes its navy from the legacy `#export-samples-csv` rules, which
 * read `hsl(var(--primary))` (#07038c). Re-pointing the token on this one
 * button gives it the site's rgb(6,3,141) in every state those rules cover,
 * without restating them.
 */
.sb-sf .sb-tb #export-samples-csv.sb-tb-btn--export {
	--primary: 241.3 95.83% 28.24%;
}

.sb-sf .sb-tb button.sb-tb__all {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 8px;
	border-radius: 6px;
	color: #06038d;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.sb-sf .sb-tb button.sb-tb__all:hover {
	background: rgba(6, 3, 141, 0.06);
}

/* --- Group buttons and their popovers -------------------------------------- */

.sb-sf .sb-tb details.sb-tb-group {
	position: relative;
	flex: 0 0 auto;
}

.sb-sf .sb-tb .sb-tb__ghost {
	display: contents;
}

/* `.sb-tb-ghost__btn`: the painted stand-in for a group button while the
   "All filters" sheet is open (js/sf-toolbar.js, ghostGroups). */
.sb-sf .sb-tb .sb-tb-ghost__btn {
	flex: 0 0 auto;
}

.sb-sf .sb-tb details.sb-tb-group > summary,
.sb-sf .sb-tb .sb-tb-ghost__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 10px;
	box-sizing: border-box;
	/* Lovable 7bc5f61e (7 Oct): `border-primary/30`, `hover:border-primary/50`,
	   applied `border-dashed border-primary/50`. */
	border: 1px solid rgba(6, 3, 141, 0.3);
	border-radius: 6px;
	background: transparent;
	color: rgba(20, 29, 46, 0.8);
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.sb-sf .sb-tb details.sb-tb-group > summary::-webkit-details-marker,
.sb-sf .sb-tb details.sb-tb-filter > summary::-webkit-details-marker,
.sb-sf .sb-tb details.sb-tb-sub > summary::-webkit-details-marker {
	display: none;
}

.sb-sf .sb-tb details.sb-tb-group > summary::marker,
.sb-sf .sb-tb details.sb-tb-filter > summary::marker,
.sb-sf .sb-tb details.sb-tb-sub > summary::marker {
	content: "";
}

.sb-sf .sb-tb details.sb-tb-group > summary:hover,
.sb-sf .sb-tb details.sb-tb-group[open] > summary {
	border-color: rgba(6, 3, 141, 0.5);
	background: rgba(237, 239, 242, 0.6);
	color: #141d2e;
}

.sb-sf .sb-tb details.sb-tb-group.is-active > summary,
.sb-sf .sb-tb .sb-tb-ghost__btn.is-active {
	border-style: dashed;
	border-color: rgba(6, 3, 141, 0.5);
	background: rgba(237, 239, 242, 0.6);
	color: #141d2e;
}

/* InventoryToolbar.tsx: `ChevronDown h-3.5 w-3.5 text-foreground/60`. */
.sb-sf .sb-tb details.sb-tb-group > summary .sb-tb-group__chev,
.sb-sf .sb-tb .sb-tb-ghost__btn .sb-tb-group__chev {
	width: 14px;
	height: 14px;
	color: rgba(20, 29, 46, 0.6);
	transition: transform 150ms ease;
}

.sb-sf .sb-tb details.sb-tb-group[open] > summary .sb-tb-group__chev {
	transform: rotate(180deg);
}

.sb-sf .sb-tb .sb-tb-group__panel {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 70;
	width: 320px;
	max-width: calc(100vw - 24px);
	margin-top: 4px;
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid #dbdfe6;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(20, 29, 46, 0.14);
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sb-sf .sb-tb .sb-tb-group__panel.is-flip {
	left: auto;
	right: 0;
}

.sb-sf .sb-tb .sb-tb-group__title {
	margin: 0 !important;
	padding: 4px 4px 8px !important;
	font-size: 14px !important;
	line-height: 20px !important;
	font-weight: 600;
	color: #141d2e !important;
}

/* --- One filter: an accordion row ----------------------------------------- */

.sb-sf .sb-tb details.sb-tb-filter {
	border-top: 1px solid rgba(219, 223, 230, 0.7);
}

.sb-sf .sb-tb .sb-tb-group__title + details.sb-tb-filter {
	border-top: 0;
}

.sb-sf .sb-tb details.sb-tb-filter[hidden],
.sb-sf .sb-tb details.sb-tb-group[hidden] {
	display: none;
}

.sb-sf .sb-tb details.sb-tb-filter > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	padding: 6px 4px;
	box-sizing: border-box;
	border-radius: 4px;
	color: #141d2e;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.sb-sf .sb-tb details.sb-tb-filter > summary:hover,
.sb-sf .sb-tb details.sb-tb-filter[open] > summary {
	background: rgba(237, 239, 242, 0.7);
}

.sb-sf .sb-tb details.sb-tb-filter > summary .sb-tb-filter__chev {
	width: 14px;
	height: 14px;
	color: #06038d;
	transition: transform 150ms ease;
}

.sb-sf .sb-tb details.sb-tb-filter[open] > summary .sb-tb-filter__chev {
	transform: rotate(90deg);
}

.sb-sf .sb-tb details.sb-tb-filter > summary .sb-tb-filter__label {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- "HLA Typing": one expandable row holding the nine loci ----------------
   Lovable 02a15341 (InventoryToolbar.tsx FilterRows, nestHla): the row looks
   like a filter row; its content is the loci's own rows, indented `pl-4`. */

.sb-sf .sb-tb details.sb-tb-sub {
	border-top: 1px solid rgba(219, 223, 230, 0.7);
}

.sb-sf .sb-tb .sb-tb-group__title + details.sb-tb-sub {
	border-top: 0;
}

.sb-sf .sb-tb details.sb-tb-sub[hidden] {
	display: none;
}

.sb-sf .sb-tb details.sb-tb-sub > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	padding: 6px 4px;
	box-sizing: border-box;
	border-radius: 4px;
	color: #141d2e;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.sb-sf .sb-tb details.sb-tb-sub > summary:hover {
	background: rgba(237, 239, 242, 0.7);
}

.sb-sf .sb-tb details.sb-tb-sub > summary .sb-tb-filter__chev {
	width: 14px;
	height: 14px;
	color: #06038d;
	transition: transform 150ms ease;
}

.sb-sf .sb-tb details.sb-tb-sub[open] > summary .sb-tb-filter__chev {
	transform: rotate(90deg);
}

.sb-sf .sb-tb details.sb-tb-sub > summary .sb-tb-filter__label {
	flex: 1 1 auto;
	min-width: 0;
}

.sb-sf .sb-tb .sb-tb-sub__body {
	padding-left: 16px;
}

.sb-sf .sb-tb .sb-tb-sub__body > details.sb-tb-filter:first-child {
	border-top: 0;
}

/* The filter's own panel is the legacy pill panel: here it sits in the flow. */
.sb-sf .sb-tb details.sb-tb-filter > .sb-sf-pill__panel {
	position: static;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 8px 4px 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Option lists are as tall as their content (design round 3), up to a cap.
   A row is 28px on a 33px pitch. 232px held exactly seven rows, so an eighth
   (Volume / Size: "Full Bag") sat below the edge with nothing to say it was
   there (QC, 7 Oct). 280px holds eight whole rows and half of a ninth: a list
   of eight shows all of them, and a longer one is always cut mid-row, which
   reads as "scroll" with or without a visible scrollbar. */
.sb-sf .sb-tb details.sb-tb-filter .sb-sf-pill__list {
	max-height: 280px;
}

.sb-sf .sb-tb details.sb-tb-filter .sb-sf-pill__option:hover {
	background: rgba(237, 239, 242, 0.7);
}

.sb-sf .sb-tb details.sb-tb-filter .sb-sf-pill__option {
	font-weight: 400;
}

.sb-sf .sb-tb details.sb-tb-filter input.sb-sf-pill__search {
	background: #fff;
}

/* The tick takes the mode's colour: navy when including, red when excluding
   (FilterBar.tsx: `data-[state=checked]:bg-destructive` in exclude mode). */
.sb-sf .sb-tb details.sb-tb-filter .sb-sf-pill__option input[type="checkbox"] {
	accent-color: #06038d;
}

.sb-sf .sb-tb details.sb-tb-filter .sb-sf-pill__option.is-excluded input[type="checkbox"] {
	accent-color: rgb(228, 46, 33);
}

/* The applied values as pills under the toggle (FilterBar.tsx SelectedPills:
   `mb-2 flex flex-wrap gap-1 border-b border-border/60 pb-2`; a pill is
   `rounded-full border px-2 py-0.5 text-[11px] font-semibold`). */
.sb-sf .sb-tb .sb-tb-sel {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 8px;
	padding: 0 0 8px;
	border-bottom: 1px solid rgba(219, 223, 230, 0.6);
}

.sb-sf .sb-tb .sb-tb-sel[hidden] {
	display: none;
}

.sb-sf .sb-tb .sb-tb-sel__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	padding: 2px 8px;
	box-sizing: border-box;
	border: 1px solid #dbdfe6;
	border-radius: 999px;
	background: #edeff2;
	color: #141d2e;
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
}

.sb-sf .sb-tb .sb-tb-sel__pill.is-excl {
	border-color: rgba(228, 46, 33, 0.4);
	background: rgba(228, 46, 33, 0.1);
	color: rgb(228, 46, 33);
}

.sb-sf .sb-tb .sb-tb-sel__pill .sb-tb-sel__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sb-sf .sb-tb .sb-tb-sel__pill > svg.sb-tb-ico {
	width: 10px;
	height: 10px;
}

.sb-sf .sb-tb button.sb-tb-sel__x {
	display: inline-flex;
	flex: 0 0 auto;
	border-radius: 2px;
	color: inherit;
	opacity: 0.7;
}

.sb-sf .sb-tb button.sb-tb-sel__x:hover {
	opacity: 1;
}

.sb-sf .sb-tb button.sb-tb-sel__x svg.sb-tb-ico {
	width: 12px;
	height: 12px;
}

/* --- Applied chips ---------------------------------------------------------- */

.sb-sf .sb-tb .sb-tb__applied {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 6px 10px 8px;
	border-top: 1px solid rgba(219, 223, 230, 0.6);
}

.sb-sf .sb-tb .sb-tb__applied-label {
	flex: 0 0 auto;
	padding-top: 6px;
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #647690;
}

/* `!important` on the box: the product page's tab-pane prose rules
   (`.tab-pane:not(#faq)... ul, li, p`) carry three ids of specificity. */
.sb-sf .sb-tb ul.sb-tb__chips {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.sb-sf .sb-tb ul.sb-tb__chips.is-clamped {
	max-height: var(--sb-tb-chip-clamp, 60px);
	overflow: hidden;
}

.sb-sf .sb-tb li.sb-tb-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-height: 24px;
	margin: 0 !important;
	padding: 4px 6px 4px 10px !important;
	box-sizing: border-box;
	border-radius: 999px;
	background: rgba(6, 3, 141, 0.1);
	color: #06038d !important;
	font-size: 12px !important;
	line-height: 16px !important;
	font-weight: 600;
	list-style: none !important;
}

.sb-sf .sb-tb li.sb-tb-chip::before,
.sb-sf .sb-tb li.sb-tb-chip::marker {
	content: none;
}

.sb-sf .sb-tb li.sb-tb-chip.is-excl {
	background: rgba(228, 46, 33, 0.1);
	color: rgb(228, 46, 33) !important;
}

.sb-sf .sb-tb li.sb-tb-chip .sb-tb-chip__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.sb-sf .sb-tb li.sb-tb-chip svg {
	width: 12px;
	height: 12px;
}

.sb-sf .sb-tb button.sb-tb-chip__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	color: inherit;
}

.sb-sf .sb-tb button.sb-tb-chip__x:hover {
	background: rgba(20, 29, 46, 0.1);
}

.sb-sf .sb-tb button.sb-tb__clear,
.sb-sf .sb-tb button.sb-tb__more {
	flex: 0 0 auto;
	height: 24px;
	padding: 0 8px;
	border-radius: 6px;
	color: #141d2e;
	font-size: 12px;
	line-height: 24px;
	font-weight: 500;
	white-space: nowrap;
}

.sb-sf .sb-tb button.sb-tb__more[hidden] {
	display: none;
}

.sb-sf .sb-tb button.sb-tb__more {
	color: #06038d;
	font-weight: 700;
}

.sb-sf .sb-tb button.sb-tb__clear:hover,
.sb-sf .sb-tb button.sb-tb__more:hover {
	background: rgba(237, 239, 242, 0.9);
}

/* --- "All filters" sheet ---------------------------------------------------- */

.sb-sf .sb-tb .sb-tb-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.8);
}

.sb-sf .sb-tb .sb-tb-backdrop[hidden] {
	display: none;
}

html.sb-tb-lock,
html.sb-tb-lock-cols {
	overflow: hidden;
}

.sb-sf .sb-tb .sb-tb__groups.is-sheet {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	width: 448px;
	max-width: 100vw;
	box-sizing: border-box;
	background: #f6f7f9;
	box-shadow: -8px 0 32px rgba(20, 29, 46, 0.2);
}

.sb-sf .sb-tb .is-sheet .sb-tb-sheet__head {
	position: relative;
	display: block;
	flex: 0 0 auto;
	padding: 16px 16px 12px;
	border-bottom: 1px solid rgba(219, 223, 230, 0.9);
}

.sb-sf .sb-tb .is-sheet .sb-tb-sheet__title {
	margin: 0 32px 8px 0;
	padding: 0;
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #141d2e;
}

.sb-sf .sb-tb .is-sheet button.sb-tb-sheet__x {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	color: #141d2e;
	opacity: 0.7;
}

.sb-sf .sb-tb .is-sheet button.sb-tb-sheet__x:hover {
	opacity: 1;
	background: rgba(20, 29, 46, 0.06);
}

.sb-sf .sb-tb .is-sheet button.sb-tb-sheet__x svg {
	width: 16px;
	height: 16px;
}

.sb-sf .sb-tb label.sb-tb-find,
.sb-cols label.sb-cols__find {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	color: #647690;
}

.sb-sf .sb-tb label.sb-tb-find svg,
.sb-cols label.sb-cols__find svg {
	position: absolute;
	left: 10px;
	width: 14px;
	height: 14px;
	pointer-events: none;
}

.sb-sf .sb-tb label.sb-tb-find input[type="search"],
.sb-cols label.sb-cols__find input[type="search"] {
	width: 100%;
	height: 36px;
	margin: 0;
	padding: 0 10px 0 32px;
	box-sizing: border-box;
	border: 1px solid #dbdfe6;
	border-radius: 6px;
	background: #f6f7f9;
	color: #141d2e;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.sb-sf .sb-tb label.sb-tb-find input[type="search"]:focus,
.sb-cols label.sb-cols__find input[type="search"]:focus {
	border-color: #06038d;
	outline: 2px solid #06038d;
	outline-offset: 1px;
}

.sb-sf .sb-tb .is-sheet .sb-tb-sheet__body {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	padding: 4px 12px 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.sb-sf .sb-tb .is-sheet details.sb-tb-group {
	position: static;
	display: block;
	border-bottom: 1px solid rgba(219, 223, 230, 0.9);
}

.sb-sf .sb-tb .is-sheet details.sb-tb-group > summary {
	display: flex;
	width: 100%;
	height: auto;
	min-height: 44px;
	padding: 8px 4px;
	gap: 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #141d2e;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.sb-sf .sb-tb .is-sheet details.sb-tb-group > summary:hover {
	background: rgba(237, 239, 242, 0.9);
}

.sb-sf .sb-tb .is-sheet details.sb-tb-group > summary .sb-tb-group__chev,
.sb-sf .sb-tb .is-sheet details.sb-tb-group > summary > .sb-tb-badge {
	display: none;
}

.sb-sf .sb-tb .is-sheet details.sb-tb-group > summary .sb-tb-group__chev-sheet {
	display: block;
	width: 16px;
	height: 16px;
	color: #06038d;
	transition: transform 150ms ease;
}

.sb-sf .sb-tb .is-sheet details.sb-tb-group[open] > summary .sb-tb-group__chev-sheet {
	transform: rotate(90deg);
}

.sb-sf .sb-tb .is-sheet details.sb-tb-group > summary .sb-tb-group__name {
	flex: 1 1 auto;
}

.sb-sf .sb-tb .is-sheet details.sb-tb-group > summary .sb-tb-group__active {
	display: inline;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: #647690;
}

.sb-sf .sb-tb .is-sheet .sb-tb-group__panel {
	position: static;
	width: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0 0 8px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.sb-sf .sb-tb .is-sheet .sb-tb-group__title {
	display: none;
}

.sb-sf .sb-tb .is-sheet details.sb-tb-filter > summary,
.sb-sf .sb-tb .is-sheet details.sb-tb-sub > summary {
	min-height: 40px;
	font-size: 13px;
	line-height: 18px;
}

.sb-sf .sb-tb .is-sheet .sb-tb-find__none {
	margin: 0;
	padding: 16px 4px;
	font-size: 13px;
	line-height: 18px;
	color: #647690;
}

.sb-sf .sb-tb .sb-tb-find__none[hidden] {
	display: none;
}

.sb-sf .sb-tb .is-sheet .sb-tb-sheet__foot {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid rgba(219, 223, 230, 0.9);
	background: #fff;
}

.sb-sf .sb-tb .is-sheet button.sb-tb-sheet__clear {
	height: 40px;
	padding: 0 16px;
	border-radius: 6px;
	color: #141d2e;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.sb-sf .sb-tb .is-sheet button.sb-tb-sheet__clear:hover {
	background: rgba(237, 239, 242, 0.9);
}

.sb-sf .sb-tb .is-sheet button.sb-tb-sheet__show {
	height: 40px;
	padding: 0 16px;
	border-radius: 6px;
	background: #ea733d;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	white-space: nowrap;
}

.sb-sf .sb-tb .is-sheet button.sb-tb-sheet__show:hover {
	background: #e0632a;
}

/* --- Columns control -------------------------------------------------------- */

.sb-cols {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	width: 352px;
	max-width: calc(100vw - 24px);
	max-height: min(72vh, 560px);
	margin-top: 4px;
	box-sizing: border-box;
	border: 1px solid #dbdfe6;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(20, 29, 46, 0.16);
	color: #141d2e;
	font-size: 12px;
	line-height: 16px;
	text-align: left;
}

.sb-cols p,
.sb-cols li.sb-cols__row {
	margin: 0 !important;
	padding: 0;
}

.sb-sf .sb-tb .sb-cols button:focus-visible,
.sb-cols input:focus-visible {
	outline: 2px solid #06038d;
	outline-offset: 2px;
}

.sb-cols .sb-cols__head {
	position: relative;
	flex: 0 0 auto;
	padding: 12px 12px 10px;
	border-bottom: 1px solid rgba(219, 223, 230, 0.9);
}

.sb-cols .sb-cols__title {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: #141d2e;
}

.sb-cols .sb-cols__sub {
	font-size: 12px;
	line-height: 16px;
	color: #647690;
}

.sb-cols .sb-cols__wide {
	margin-top: 4px;
	font-size: 11px;
	line-height: 16px;
	color: #647690;
}

.sb-cols .sb-cols__wide[hidden],
.sb-cols .sb-cols__pane[hidden] {
	display: none;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__x {
	display: none;
}

.sb-cols .sb-cols__tabs {
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
	margin: 10px 12px 8px;
	padding: 4px;
	border-radius: 6px;
	background: #edeff2;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__tab {
	flex: 1 1 0;
	height: 32px;
	border-radius: 4px;
	color: #647690;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	text-align: center;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__tab.is-on {
	background: #fff;
	color: #141d2e;
	box-shadow: 0 1px 2px rgba(20, 29, 46, 0.1);
}

.sb-cols .sb-cols__pane {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.sb-cols label.sb-cols__find {
	flex: 0 0 auto;
	margin: 0 8px 8px;
}

.sb-cols .sb-cols__list,
.sb-cols ol.sb-cols__order {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0 8px 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.sb-cols .sb-cols__list {
	border-top: 1px solid rgba(219, 223, 230, 0.9);
}

.sb-cols .sb-cols__group + .sb-cols__group {
	border-top: 1px solid rgba(219, 223, 230, 0.7);
}

.sb-cols .sb-cols__ghead {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0 2px;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__gtoggle {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0 4px;
	border-radius: 4px;
	color: #141d2e;
	font-size: 12px;
	line-height: 16px;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__gtoggle svg {
	color: #06038d;
	transition: transform 150ms ease;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__gtoggle[aria-expanded="false"] svg {
	transform: rotate(-90deg);
}

.sb-cols .sb-cols__gname {
	font-weight: 700;
}

.sb-cols .sb-cols__gcount {
	color: #647690;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__gall {
	flex: 0 0 auto;
	height: 24px;
	padding: 0 6px;
	border-radius: 4px;
	color: #06038d;
	font-size: 11px;
	line-height: 24px;
	font-weight: 700;
	white-space: nowrap;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__gall:hover,
.sb-sf .sb-tb .sb-cols button.sb-cols__gtoggle:hover {
	background: rgba(237, 239, 242, 0.9);
}

.sb-cols label.sb-cols__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	margin: 0;
	padding: 0 6px;
	border-radius: 4px;
	color: #141d2e;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	cursor: pointer;
}

.sb-cols label.sb-cols__opt:hover {
	background: rgba(237, 239, 242, 0.7);
}

.sb-cols label.sb-cols__opt.is-locked {
	cursor: default;
}

.sb-cols label.sb-cols__opt input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #06038d;
}

.sb-cols .sb-cols__optname {
	min-width: 0;
}

.sb-cols .sb-cols__note {
	color: #647690;
	font-size: 11px;
	white-space: nowrap;
}

.sb-cols .sb-cols__lock {
	margin-left: auto;
	display: inline-flex;
	color: #647690;
}

.sb-cols .sb-cols__lock svg,
.sb-cols .sb-cols__grip svg {
	width: 12px;
	height: 12px;
}

.sb-cols .sb-cols__none {
	padding: 16px 6px;
	color: #647690;
}

.sb-cols ol.sb-cols__order {
	padding-top: 2px;
}

.sb-cols li.sb-cols__row {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	margin: 0;
	padding: 0 2px;
	border-radius: 4px;
	list-style: none;
	font-size: 12px;
	line-height: 16px;
	color: #141d2e;
}

.sb-cols li.sb-cols__row::before {
	content: none;
}

.sb-cols li.sb-cols__row:hover {
	background: rgba(237, 239, 242, 0.7);
}

.sb-cols li.sb-cols__row.is-dragging {
	opacity: 0.5;
}

.sb-cols .sb-cols__grip {
	display: inline-flex;
	width: 16px;
	justify-content: center;
	color: #647690;
	cursor: grab;
}

.sb-cols li.sb-cols__row.is-locked .sb-cols__grip {
	cursor: default;
}

.sb-cols .sb-cols__num {
	width: 18px;
	text-align: right;
	color: #647690;
	font-variant-numeric: tabular-nums;
}

.sb-cols .sb-cols__rowname {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__act {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	color: #141d2e;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__act:hover:not([disabled]) {
	background: rgba(20, 29, 46, 0.08);
}

.sb-sf .sb-tb .sb-cols button.sb-cols__act[disabled] {
	opacity: 0.3;
}

.sb-cols .sb-cols__foot {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	border-top: 1px solid rgba(219, 223, 230, 0.9);
}

.sb-cols .sb-cols__saved {
	font-size: 11px;
	line-height: 16px;
	color: #647690;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding: 0 8px;
	border-radius: 6px;
	color: #141d2e;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
}

.sb-sf .sb-tb .sb-cols button.sb-cols__reset:hover:not([disabled]) {
	background: rgba(237, 239, 242, 0.9);
}

.sb-cols .sb-cols__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sb-cols-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.8);
}

/* --- Export feedback -------------------------------------------------------- */

.sb-tb-toast {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 100002;
	max-width: calc(100vw - 32px);
	padding: 12px 16px;
	box-sizing: border-box;
	border: 1px solid #dbdfe6;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(20, 29, 46, 0.16);
	color: #141d2e;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 150ms ease, transform 150ms ease;
}

.sb-tb-toast.is-on {
	opacity: 1;
	transform: none;
}

/* --- The table: columns a visitor can add ---------------------------------- */

/* Hidden until ticked. The inline boot script writes the per-visitor rules. */
.sb-sf .sb-sf-instock-table .sb-x {
	display: none;
}

.sb-sf [data-sb-sf-instock] .sb-sf-instock-table thead th.sb-x {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #07038c; /* the legacy header row's own navy, so the row is one colour */
	color: #fff;
	text-align: left;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 1px solid rgba(219, 223, 230, 0.6);
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.sb-sf [data-sb-sf-instock] .sb-sf-instock-table thead th.sb-x .sb-sf-th__plain {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.9;
}

.sb-sf [data-sb-sf-instock] .sb-sf-instock-table tbody td.sb-x {
	border-bottom: 1px solid rgba(219, 223, 230, 0.6);
	border-right: 1px solid rgba(219, 223, 230, 0.6);
	font-size: 12px;
	transition: background-color 150ms ease;
}

.sb-sf [data-sb-sf-instock] .sb-sf-instock-table tr.group:hover td.sb-x {
	background: #edeff2;
}

.sb-sf [data-sb-sf-instock] .sb-sf-instock-table tbody td.sb-x:empty::before {
	content: "\2014";
	color: #647690;
}

/* Lot # is frozen only while it is the second column. */
.sb-sf [data-sb-sf-instock] .sb-sf-instock-table.sb-lot-free .sb-sf-freeze--lot {
	left: auto !important;
	box-shadow: none;
}

.sb-sf [data-sb-sf-instock] .sb-sf-instock-table.sb-lot-free tbody td.sb-sf-freeze--lot {
	position: static;
	z-index: auto;
}

.sb-sf [data-sb-sf-instock] .sb-sf-instock-table.sb-lot-free thead th.sb-sf-freeze--lot {
	z-index: 20;
}

/*
 * The legacy sheet mutes "the second cell" (`tbody td:nth-child(2)`), which was
 * always Lot #. Columns can move now, so the colour follows the column, not the
 * position.
 */
.sb-sf [data-sb-sf-instock] .sb-sf-instock-table tbody td:nth-child(2):not([data-col="specimen_order"]) {
	color: #141d2e !important;
}

.sb-sf [data-sb-sf-instock] .sb-sf-instock-table tbody td[data-col="specimen_order"] {
	color: #647690 !important;
}

/*
 * Row heights from the design pack: header 36px, body rows 49px. `height` on a
 * table cell is a minimum, so a wrapping Medications / Comorbidities cell still
 * grows its row. Vertical only: no column width changes.
 */
.sb-sf [data-sb-sf-instock] .sb-sf-instock-table thead th.sb-sf-th {
	height: 36px;
}

.sb-sf [data-sb-sf-instock] .sb-sf-instock-table tbody td.sb-sf-td {
	height: 49px;
}

/*
 * No empty band under the header.
 *
 * css/sample-finder-ui.css keeps a 12px generated row at the top of <tbody> as
 * "the band the top scrollbar sits in", and since 22 Sep hides that scrollbar
 * (`display: none !important`, the owner's "exactly ONE horizontal scrollbar"
 * criterion). The band outlived the bar it was room for. If the top rail is
 * ever restored, delete this rule with the one that hides it.
 */
.sb-sf [data-sb-sf-instock] .sb-sf-instock-table tbody::before {
	display: none;
}

/* --- Pagination stacked below 640 (TablePagination.tsx: flex-col sm:flex-row):
       page buttons, then "Results per page" with its label, then "Showing". --- */

@media (max-width: 639px) {
	.sb-sf [data-sb-sf-view="instock"] .sb-sf-panel-foot {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
	}

	.sb-sf [data-sb-sf-view="instock"] .sb-sf-panel-foot [data-sb-sf-pagination] {
		order: 1;
		margin-left: 0;
		justify-content: center;
	}

	.sb-sf [data-sb-sf-view="instock"] .sb-sf-panel-foot .sb-sf-per-page {
		order: 2;
		margin-left: 0;
	}

	.sb-sf [data-sb-sf-view="instock"] .sb-sf-panel-foot .sb-sf-per-page__label {
		display: inline;
	}

	.sb-sf [data-sb-sf-view="instock"] .sb-sf-panel-foot .sb-sf-showing {
		order: 3;
		width: auto;
		margin-right: 0;
		text-align: center;
	}
}

/* --- Wrapping below 1280, phone layout below 768 --------------------------- */

@media (max-width: 767px) {
	/*
	 * A product name wraps on a phone (the column is 120px): two lines, then an
	 * ellipsis; the full name stays in the link's title. On wider screens the
	 * legacy one-line clip is unchanged.
	 */
	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table td.sb-sf-freeze--left a .sb-sf-lot-condition {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: normal;
		overflow: hidden;
		overflow-wrap: break-word;
		word-break: normal;
	}

	/*
	 * The table on a phone (design, 375): Product frozen at 120px, Price frozen
	 * at 88px with the price above a compact "Add" button, Lot # scrolling with
	 * the rest. At the desktop widths (240 + 96 + 148) the three frozen columns
	 * were wider than the screen and no data column could be seen at all.
	 */
	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table .sb-sf-col--product,
	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table .sb-sf-freeze--left {
		width: 120px;
		min-width: 120px;
		max-width: 120px;
	}

	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table .sb-sf-col--action,
	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table .sb-sf-freeze--right {
		width: 88px;
		min-width: 88px;
		max-width: 88px;
	}

	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table .sb-sf-freeze--lot {
		left: auto !important;
		box-shadow: none;
	}

	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table tbody td.sb-sf-freeze--lot {
		position: static;
		z-index: auto;
	}

	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table thead th.sb-sf-freeze--lot {
		z-index: 20;
	}

	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table tbody td.sb-sf-freeze--right > div {
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
	}

	/* "Add": the button's text (and so its accessible name) is still
	   "Add to Cart"; only what is painted is shortened. */
	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table button.sb-sf-atc-btn {
		width: 48px !important;
		min-width: 48px !important;
		font-size: 0 !important;
	}

	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table button.sb-sf-atc-btn::after {
		content: "Add";
		font-size: 12px;
		line-height: 16px;
	}

	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table button.sb-sf-quote-btn {
		width: 64px !important;
		min-width: 64px !important;
	}

	.sb-sf .sb-tb .sb-tb__bar {
		flex-wrap: wrap;
		align-items: center;
		padding: 8px 10px;
	}

	.sb-sf .sb-tb form.sb-tb__form {
		flex: 0 0 auto;
	}

	.sb-sf .sb-tb button.sb-tb-btn--filters {
		display: inline-flex;
	}

	.sb-sf .sb-tb button.sb-tb-btn {
		height: 36px;
	}

	.sb-sf .sb-tb button.sb-tb__all,
	.sb-sf .sb-tb .sb-tb__divider {
		display: none;
	}

	/* The group buttons are not shown on a phone: the sheet is the only way in. */
	.sb-sf .sb-tb .sb-tb__groups:not(.is-sheet) {
		display: none;
	}

	/* The right cluster dissolves into the bar so the count can take a line
	   of its own under all three buttons. */
	.sb-sf .sb-tb .sb-tb__right {
		display: contents;
	}

	.sb-sf .sb-tb .sb-tb__cols {
		margin-left: auto;
	}

	.sb-sf .sb-tb .sb-tb__count {
		order: 3;
		flex: 0 0 100%;
		text-align: left;
	}

	/* "Price" on a phone: the column is 88px. The button's text, and so its
	   accessible name, is still "Price / Action". */
	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table thead th[data-col="price"] .sb-sf-sort {
		font-size: 0 !important;
	}

	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table thead th[data-col="price"] .sb-sf-sort::before {
		content: "Price";
		font-size: 12px !important;
		line-height: 16px;
	}

	/* The id: the legacy sheets size this button by #export-samples-csv. */
	.sb-sf .sb-tb #export-samples-csv.sb-tb-btn--export {
		width: 36px;
		height: 36px;
		padding: 0;
	}

	.sb-sf .sb-tb button.sb-tb-btn--export .sb-tb-btn__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.sb-sf .sb-tb .sb-tb__applied {
		flex-wrap: wrap;
	}

	.sb-sf .sb-tb .sb-tb__groups.is-sheet {
		top: auto;
		left: 0;
		width: auto;
		max-height: 85vh;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 32px rgba(20, 29, 46, 0.2);
	}

	.sb-sf .sb-tb .sb-tb__cols {
		position: static;
	}

	.sb-cols {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100001;
		width: auto;
		max-width: none;
		max-height: 85vh;
		margin: 0;
		border: 0;
		border-radius: 16px 16px 0 0;
	}

	.sb-sf .sb-tb .sb-cols button.sb-cols__x {
		position: absolute;
		top: 10px;
		right: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 6px;
		color: #141d2e;
	}

	.sb-cols .sb-cols__head {
		padding-right: 44px;
	}

	.sb-cols label.sb-cols__opt,
	.sb-cols li.sb-cols__row {
		min-height: 40px;
		font-size: 13px;
	}

	.sb-sf .sb-tb .sb-cols button.sb-cols__act {
		width: 36px;
		height: 36px;
	}

	.sb-tb-toast {
		right: 12px;
		left: 12px;
		bottom: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-sf .sb-tb *,
	.sb-cols *,
	.sb-tb-toast {
		transition: none !important;
	}
}

/* --- Lot table header: a focus ring that can be seen (QC round 2, N2) -------
   css/sample-finder-ui.css gives every .sb-sf-sort a 2px #07038c outline, which
   is the header's own fill: on the lot table the focused sort button had no
   visible indicator at all. White on the navy header (15.9:1), 3px clear of
   the label, inside the cell's 8px / 10px padding so a frozen neighbour cannot
   cover it. Catalog and product pages, every width. */

.sb-sf [data-sb-sf-instock] .sb-sf-instock-table thead th .sb-sf-sort:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- Product pages: the tab pane's body-copy rules (QC round 2, N3) ---------
   On a product page the lot table sits in a tab pane, and
   css/single-product-modern.css styles that pane's copy with
     body.single-product .sb-product-tabs .tabs-content
       .tab-pane:not(#faq):not(#overview):not(#protocols) li, p, td, .accordion_content
         { font-size: 12px !important; line-height: 22px; color: #334155 }
       ... h2 { font-size: 20px !important; line-height: 28px !important; font-weight: 700 !important }
       @media (max-width: 767px) ... h2 { 18px / 26px }
       @media (max-width: 479px) ... li, p { font-size: 14px !important }
   The three :not(#id) count as three ids, so those rules outrank every
   selector in this file, !important or not. The toolbar's own <p>, <li> and
   <h2> therefore differed from the catalog: chips and "Showing" at 14px on a
   phone (a long chip pushed "Clear all" to its own line), group and sheet
   titles, the Columns sheet's head and rows, the empty state.

   The values below are the catalog's, restated behind the same prefix so they
   win there too. Nothing here applies on the catalog. */

body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-sf .sb-tb li.sb-tb-chip {
	font-size: 12px !important;
	line-height: 16px !important;
}

body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-sf .sb-tb p.sb-tb-group__title {
	font-size: 14px !important;
	line-height: 20px !important;
}

body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-sf .sb-tb .sb-tb-sheet__title {
	margin: 0 32px 8px 0 !important;
	font-family: inherit !important;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 600 !important;
	color: #141d2e !important;
}

body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-sf p.sb-sf-pill__empty {
	font-size: 12px !important;
	line-height: 18px;
	color: #647690;
}

body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-sf p.sb-sf-showing {
	font-size: 12px !important;
	line-height: 16px;
	color: #647690;
}

/* The empty state's message: `text-sm text-muted-foreground`. */
body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-sf [data-sb-sf-stage] p.text-sm {
	font-size: 14px !important;
	line-height: 20px;
	color: #647690;
}

body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-cols p.sb-cols__title {
	font-size: 14px !important;
	line-height: 20px;
	color: #141d2e;
}

body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-cols p.sb-cols__sub {
	font-size: 12px !important;
	line-height: 16px;
	color: #647690;
}

body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-cols p.sb-cols__wide {
	font-size: 11px !important;
	line-height: 16px;
	color: #647690;
}

body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-cols li.sb-cols__row {
	font-size: 12px !important;
	line-height: 16px;
	color: #141d2e;
}

@media (max-width: 767px) {
	body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-cols li.sb-cols__row {
		font-size: 13px !important;
	}
}

/* Include / Exclude inherit their line-height (`.sb-sf button { line-height:
   inherit }`), and in the tab pane what they inherit is the copy's 22px; on
   the catalog it computes to 14.5px. Below 992 the skin's own button rule
   sets it on both pages. */
@media (min-width: 992px) {
	body.single-product .sb-product-tabs .tabs-content .tab-pane:not(#faq):not(#overview):not(#protocols) .sb-sf .sb-tb .sb-sf-pill__mode-btn {
		line-height: 14.5px;
	}
}

@media (forced-colors: active) {
	.sb-sf .sb-tb button:focus-visible,
	.sb-sf .sb-tb summary:focus-visible,
	.sb-sf [data-sb-sf-instock] .sb-sf-instock-table thead th .sb-sf-sort:focus-visible {
		outline: 2px solid Highlight;
	}

	.sb-sf .sb-tb details.sb-tb-group.is-active > summary {
		border-style: dashed;
		border-color: Highlight;
	}
}