/*!
 * SmartListings Pro — directory pages.
 *
 * Everything is scoped under .slpro-directory and driven by custom properties,
 * so a site changes its look by changing tokens (Directory -> Appearance) rather
 * than by forking markup. Nothing here targets a theme by name: the defaults are
 * theme-neutral and the font stack inherits unless a site overrides it.
 *
 * Token defaults live here so the stylesheet is correct on its own; the plugin
 * only prints the ones a site has actually changed.
 */

.slpro-directory {
	/* palette */
	--slpro-brand: #1f5fa9;
	--slpro-brand-ink: #ffffff;
	--slpro-brand-hover: #17497f;
	--slpro-accent: #f5c400;
	--slpro-accent-ink: #2a2100;
	--slpro-ink: #14181d;
	--slpro-ink-2: #5b6672;
	--slpro-ink-3: #7a8592;
	--slpro-surface: #ffffff;
	--slpro-surface-2: #f5f7f9;
	--slpro-line: #e3e8ed;
	--slpro-line-strong: #cfd6de;

	/* shape */
	--slpro-radius: 10px;
	--slpro-radius-sm: 6px;
	--slpro-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .05);
	--slpro-shadow-lift: 0 2px 4px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .09);

	/* rhythm */
	--slpro-step: 16px;
	--slpro-width: 1120px;
	--slpro-gap: calc(var(--slpro-step) * 1.5);

	/* type */
	--slpro-font: inherit;
	--slpro-font-head: var(--slpro-font);
	--slpro-h1: clamp(1.7rem, 1.25rem + 1.6vw, 2.35rem);
	--slpro-h2: clamp(1.15rem, 1.02rem + .5vw, 1.4rem);

	box-sizing: border-box;
	max-width: var(--slpro-width);
	margin: 0 auto;
	padding: calc(var(--slpro-step) * 2) var(--slpro-step) calc(var(--slpro-step) * 3.5);
	font-family: var(--slpro-font);
	color: var(--slpro-ink);
	line-height: 1.55;
}

/* Density presets shift one number and the whole page follows. */
.slpro-d--compact { --slpro-step: 12px; }
.slpro-d--spacious { --slpro-step: 21px; }

/* Optional self-contained type, for themes whose body font is unusable here. */
.slpro-t--system {
	--slpro-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------- defences */
/*
 * Page builders style bare tags globally (Divi and Elementor both do). These
 * rules are not opinionated design, they are the minimum needed for the layout
 * below to survive whatever the active theme paints.
 */
/*
 * Every one of these is wrapped in :where() on purpose, and it is the single
 * most important detail in this file.
 *
 * `.slpro-directory a` scores (0,1,1). `.slpro-cta--primary` scores (0,1,0). So
 * a plain descendant rule here silently outranks every component class below
 * it, and the first symptom is white-on-brand button text rendering in the link
 * colour -- an invisible "Call now" on a blue button, which is exactly the bug
 * this shape caused on the first deploy.
 *
 * :where() contributes zero specificity, so `.slpro-directory :where(a)` scores
 * (0,1,0): still enough to beat a theme's bare `a` at (0,0,1), and low enough
 * that any component class further down this file wins on source order. That is
 * precisely the behaviour wanted -- hold the line against the theme, yield to
 * ourselves.
 */
.slpro-directory *,
.slpro-directory *::before,
.slpro-directory *::after { box-sizing: border-box; }

.slpro-directory :where(img) { max-width: 100%; height: auto; display: block; }
.slpro-directory :where(p) { margin: 0 0 calc(var(--slpro-step) * .75); }
.slpro-directory :where(p:last-child) { margin-bottom: 0; }
.slpro-directory :where(ul.slpro-plain) { list-style: none; margin: 0; padding: 0; }
.slpro-directory :where(a) { color: var(--slpro-brand); text-decoration-thickness: from-font; }
.slpro-directory :where(a:hover) { color: var(--slpro-brand-hover); }
.slpro-directory :where(h1, h2, h3) { font-family: var(--slpro-font-head); color: var(--slpro-ink); line-height: 1.2; }
.slpro-directory :focus-visible { outline: 2px solid var(--slpro-brand); outline-offset: 2px; border-radius: 3px; }

/* ------------------------------------------------------------- page header */

.slpro-breadcrumbs {
	font-size: .875rem;
	color: var(--slpro-ink-3);
	margin: 0 0 var(--slpro-step);
	display: flex;
	flex-wrap: wrap;
	gap: 0 .45em;
	align-items: center;
}
.slpro-breadcrumbs a { color: var(--slpro-ink-2); text-decoration: none; }
.slpro-breadcrumbs a:hover { color: var(--slpro-brand); text-decoration: underline; }
.slpro-breadcrumbs [aria-hidden] { color: var(--slpro-line-strong); }

.slpro-pagehead { margin: 0 0 calc(var(--slpro-step) * 1.5); }
.slpro-pagehead h1 {
	font-size: var(--slpro-h1);
	margin: 0;
	letter-spacing: -.015em;
	text-wrap: balance;
}
.slpro-pagehead .slpro-sub {
	margin: calc(var(--slpro-step) * .4) 0 0;
	color: var(--slpro-ink-2);
	font-size: 1rem;
}

/* --------------------------------------------------------------- surfaces */

.slpro-card {
	background: var(--slpro-surface);
	border: 1px solid var(--slpro-line);
	border-radius: var(--slpro-radius);
	box-shadow: var(--slpro-shadow);
}

.slpro-section-title {
	font-size: var(--slpro-h2);
	margin: calc(var(--slpro-step) * 2) 0 var(--slpro-step);
	letter-spacing: -.01em;
}
.slpro-section-title:first-child { margin-top: 0; }

.slpro-badge {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .3em .7em;
	border-radius: 100px;
	background: var(--slpro-accent);
	color: var(--slpro-accent-ink);
	line-height: 1.4;
}
.slpro-badge--quiet {
	background: var(--slpro-surface-2);
	color: var(--slpro-ink-2);
	border: 1px solid var(--slpro-line);
}

.slpro-notice {
	border: 1px solid var(--slpro-line);
	border-left: 5px solid var(--slpro-brand);
	background: var(--slpro-surface-2);
	padding: calc(var(--slpro-step) * .85) calc(var(--slpro-step) * 1.1);
	border-radius: var(--slpro-radius-sm);
	margin: 0 0 var(--slpro-step);
	font-size: .95rem;
}
.slpro-notice--warn { border-left-color: #d63638; background: #fdf3f3; }

/* ------------------------------------------------------------ listing page */

.slpro-listing { display: grid; gap: var(--slpro-gap); align-items: start; }

/* card: one column, everything stacked. The safe default on any theme. */
.slpro-l-listing--card .slpro-listing { grid-template-columns: minmax(0, 1fr); }
.slpro-l-listing--card .slpro-listing__rail { max-width: none; }

/* split: content left, a sticky contact rail right. */
@media (min-width: 880px) {
	.slpro-l-listing--split .slpro-listing,
	.slpro-l-listing--hero .slpro-listing {
		grid-template-columns: minmax(0, 1fr) 330px;
	}
	.slpro-l-listing--split .slpro-listing__rail,
	.slpro-l-listing--hero .slpro-listing__rail {
		position: sticky;
		top: calc(var(--slpro-step) * 1.5);
	}
}

.slpro-listing__main { min-width: 0; display: grid; gap: var(--slpro-gap); }
.slpro-listing__rail { min-width: 0; display: grid; gap: var(--slpro-step); }

.slpro-block {
	background: var(--slpro-surface);
	border: 1px solid var(--slpro-line);
	border-radius: var(--slpro-radius);
	box-shadow: var(--slpro-shadow);
	padding: calc(var(--slpro-step) * 1.35);
}
.slpro-block > :first-child { margin-top: 0; }
.slpro-block > :last-child { margin-bottom: 0; }
.slpro-block__title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
	margin: 0 0 calc(var(--slpro-step) * .7);
	color: var(--slpro-ink);
}

/* identity strip: logo + name + address, sits above everything on card layout */
.slpro-identity {
	display: flex;
	gap: var(--slpro-step);
	align-items: flex-start;
	flex-wrap: wrap;
}
.slpro-identity__logo {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border: 1px solid var(--slpro-line);
	border-radius: var(--slpro-radius-sm);
	background: var(--slpro-surface);
	padding: 6px;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.slpro-identity__logo img { max-height: 100%; width: auto; object-fit: contain; }
.slpro-identity__body { flex: 1 1 240px; min-width: 0; }
.slpro-address { color: var(--slpro-ink-2); font-size: .97rem; margin: 0; }

/* contact rail */
.slpro-contact { display: grid; gap: calc(var(--slpro-step) * .55); }
.slpro-contact__row { display: flex; gap: .6em; align-items: baseline; font-size: .95rem; }
.slpro-contact__label {
	flex: 0 0 auto;
	color: var(--slpro-ink-3);
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 700;
	min-width: 62px;
}
.slpro-contact__value { min-width: 0; overflow-wrap: anywhere; }

.slpro-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .8em 1.15em;
	border-radius: var(--slpro-radius-sm);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border: 1px solid transparent;
	line-height: 1.2;
	transition: background-color .12s ease, border-color .12s ease;
}
.slpro-cta--primary,
a.slpro-cta--primary { background: var(--slpro-brand); color: var(--slpro-brand-ink); }
.slpro-cta--primary:hover,
a.slpro-cta--primary:hover { background: var(--slpro-brand-hover); color: var(--slpro-brand-ink); }
.slpro-cta--ghost {
	background: var(--slpro-surface);
	color: var(--slpro-brand);
	border-color: var(--slpro-line-strong);
}
.slpro-cta--ghost:hover { border-color: var(--slpro-brand); background: var(--slpro-surface-2); }
.slpro-cta--block { display: flex; width: 100%; }
.slpro-cta-stack { display: grid; gap: calc(var(--slpro-step) * .5); }

.slpro-phone {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-decoration: none;
	display: inline-block;
}

/* hours */
.slpro-hours { display: grid; gap: 2px; font-size: .95rem; }
.slpro-hours__row {
	display: flex;
	justify-content: space-between;
	gap: var(--slpro-step);
	padding: .3em 0;
	border-bottom: 1px dashed var(--slpro-line);
}
.slpro-hours__row:last-child { border-bottom: 0; }
.slpro-hours__day { color: var(--slpro-ink-2); }
.slpro-hours__val { font-variant-numeric: tabular-nums; text-align: right; }
.slpro-hours__row--closed .slpro-hours__val { color: var(--slpro-ink-3); }

/* questions and answers */
.slpro-faq { display: grid; gap: 0; }
.slpro-faq__item { padding: .8em 0; border-bottom: 1px solid var(--slpro-line); }
.slpro-faq__item:first-child { padding-top: 0; }
.slpro-faq__item:last-child { border-bottom: 0; padding-bottom: 0; }
.slpro-faq__q { margin: 0 0 .3em; font-size: 1rem; line-height: 1.4; font-weight: 700; color: var(--slpro-ink); }
.slpro-faq__a { color: var(--slpro-ink-2); font-size: .95rem; }
.slpro-faq__a p { margin: 0 0 .5em; }
.slpro-faq__a p:last-child { margin-bottom: 0; }

/* tag dimensions */
.slpro-tags { display: grid; gap: var(--slpro-step); }
.slpro-tagset__label {
	display: block;
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--slpro-ink-3);
	margin: 0 0 .5em;
}
.slpro-chips { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: 0; padding: 0; }
.slpro-chip {
	display: inline-block;
	padding: .35em .75em;
	border: 1px solid var(--slpro-line);
	border-radius: 100px;
	background: var(--slpro-surface-2);
	color: var(--slpro-ink-2);
	font-size: .875rem;
	text-decoration: none;
	line-height: 1.4;
}
.slpro-chip:hover { border-color: var(--slpro-brand); color: var(--slpro-brand); background: var(--slpro-surface); }
.slpro-chip--primary,
a.slpro-chip--primary {
	background: var(--slpro-brand);
	border-color: var(--slpro-brand);
	color: var(--slpro-brand-ink);
	font-weight: 600;
}
.slpro-chip--primary:hover,
a.slpro-chip--primary:hover { background: var(--slpro-brand-hover); color: var(--slpro-brand-ink); }
.slpro-chip__count { opacity: .65; font-variant-numeric: tabular-nums; }

/* socials */
.slpro-socials { display: flex; flex-wrap: wrap; gap: .4em; }
.slpro-socials a {
	font-size: .85rem;
	padding: .35em .7em;
	border: 1px solid var(--slpro-line);
	border-radius: var(--slpro-radius-sm);
	text-decoration: none;
	color: var(--slpro-ink-2);
}
.slpro-socials a:hover { border-color: var(--slpro-brand); color: var(--slpro-brand); }

/* offer */
.slpro-offer-banner {
	border: 1px solid var(--slpro-accent);
	background: linear-gradient(0deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)), var(--slpro-accent);
	border-radius: var(--slpro-radius);
	padding: calc(var(--slpro-step) * 1.1);
}
.slpro-offer-banner__label {
	font-size: .7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	display: block;
	margin: 0 0 .3em;
}

/* --------------------------------------------------------------- gallery */

.slpro-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.slpro-gallery a {
	display: block;
	border-radius: var(--slpro-radius-sm);
	overflow: hidden;
	border: 1px solid var(--slpro-line);
	aspect-ratio: 4 / 3;
	background: var(--slpro-surface-2);
}
.slpro-gallery a img { width: 100%; height: 100%; object-fit: cover; }
.slpro-gallery .slpro-gallery-lead { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* hero preset lifts the lead photo out to full width above the columns */
.slpro-hero {
	border-radius: var(--slpro-radius);
	overflow: hidden;
	border: 1px solid var(--slpro-line);
	margin: 0 0 var(--slpro-gap);
	aspect-ratio: 21 / 8;
	background: var(--slpro-surface-2);
}
.slpro-hero img { width: 100%; height: 100%; object-fit: cover; }

/* video */
.slpro-video { position: relative; }
.slpro-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--slpro-radius-sm); overflow: hidden; }
.slpro-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.slpro-video-poster {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--slpro-radius-sm);
	overflow: hidden;
	background: #000;
}
.slpro-video-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.slpro-video-poster .play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 2.6rem;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.slpro-video-poster:hover img { opacity: 1; }

/* --------------------------------------------------------------- results */

.slpro-resultcount { color: var(--slpro-ink-2); font-size: .95rem; margin: 0 0 var(--slpro-step); }

.slpro-results { display: grid; gap: calc(var(--slpro-step) * .75); }

.slpro-l-results--cards .slpro-results {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--slpro-step);
}
.slpro-l-results--compact .slpro-results { gap: 0; }

.slpro-result {
	background: var(--slpro-surface);
	border: 1px solid var(--slpro-line);
	border-radius: var(--slpro-radius);
	padding: calc(var(--slpro-step) * 1.05);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 var(--slpro-step);
	align-items: start;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.slpro-result:hover { border-color: var(--slpro-line-strong); box-shadow: var(--slpro-shadow-lift); }
.slpro-result--sponsored {
	border-color: var(--slpro-accent);
	box-shadow: inset 3px 0 0 var(--slpro-accent), var(--slpro-shadow);
}

.slpro-result__thumb {
	grid-row: 1 / span 3;
	width: 92px;
	height: 92px;
	border-radius: var(--slpro-radius-sm);
	overflow: hidden;
	border: 1px solid var(--slpro-line);
	background: var(--slpro-surface-2);
	display: block;
}
.slpro-result__thumb img { width: 100%; height: 100%; object-fit: cover; }
/*
 * A row with no photo collapses to one column. The modifier is written by PHP
 * rather than inferred with :has(), because a listing with no thumbnail is the
 * common case here -- only 1 of 3,168 imported records has a photo -- so the
 * default browse layout must not depend on a selector for its basic shape.
 */
.slpro-result--nothumb { grid-template-columns: minmax(0, 1fr); }

.slpro-result__flag { grid-column: 2; margin: 0 0 .4em; }
.slpro-result__name { font-size: 1.08rem; margin: 0 0 .25em; grid-column: 2; letter-spacing: -.005em; }
.slpro-result__name a { text-decoration: none; }
.slpro-result__name a:hover { text-decoration: underline; }
.slpro-result__meta { grid-column: 2; color: var(--slpro-ink-2); font-size: .92rem; margin: 0; }
.slpro-result__meta a { text-decoration: none; font-weight: 600; }
.slpro-result__tags { grid-column: 2; margin: .55em 0 0; }

.slpro-result--nothumb .slpro-result__flag,
.slpro-result--nothumb .slpro-result__name,
.slpro-result--nothumb .slpro-result__meta,
.slpro-result--nothumb .slpro-result__tags { grid-column: 1; }

/* compact: a dense list, borders collapse into rules */
.slpro-l-results--compact .slpro-result {
	border-radius: 0;
	border-width: 0 0 1px;
	box-shadow: none;
	padding: calc(var(--slpro-step) * .8) 0;
}
.slpro-l-results--compact .slpro-result:hover { box-shadow: none; background: var(--slpro-surface-2); }
.slpro-l-results--compact .slpro-result__thumb { width: 56px; height: 56px; }
.slpro-l-results--compact .slpro-result--sponsored { box-shadow: inset 3px 0 0 var(--slpro-accent); padding-left: var(--slpro-step); }

/* cards: photo on top, text below */
.slpro-l-results--cards .slpro-result { grid-template-columns: minmax(0, 1fr); }
.slpro-l-results--cards .slpro-result__thumb {
	grid-row: auto;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	margin: 0 0 calc(var(--slpro-step) * .7);
}
.slpro-l-results--cards .slpro-result__flag,
.slpro-l-results--cards .slpro-result__name,
.slpro-l-results--cards .slpro-result__meta,
.slpro-l-results--cards .slpro-result__tags { grid-column: 1; }

/* ------------------------------------------------------- browse indexes */

.slpro-index { margin: 0 0 calc(var(--slpro-step) * 2); }

/*
 * Placed after the businesses -- the default -- the index needs a rule above it,
 * or it reads as a continuation of the last result rather than as navigation.
 */
.slpro-results ~ .slpro-index,
.slpro-pagination + .slpro-index,
.slpro-empty + .slpro-index {
	margin-top: calc(var(--slpro-step) * 2.5);
	padding-top: calc(var(--slpro-step) * 1.5);
	border-top: 1px solid var(--slpro-line);
}
.slpro-results ~ .slpro-index .slpro-section-title,
.slpro-pagination + .slpro-index .slpro-section-title,
.slpro-empty + .slpro-index .slpro-section-title { margin-top: 0; }

.slpro-index__more { margin: calc(var(--slpro-step) * .6) 0 0; }
.slpro-index__more > summary {
	display: inline-block;
	cursor: pointer;
	font-size: .875rem;
	font-weight: 600;
	color: var(--slpro-brand);
	padding: .35em .8em;
	border: 1px dashed var(--slpro-line-strong);
	border-radius: 100px;
	list-style: none;
	user-select: none;
}
.slpro-index__more > summary::-webkit-details-marker { display: none; }
.slpro-index__more > summary::before { content: "+ "; }
.slpro-index__more[open] > summary::before { content: "\2212 "; }
.slpro-index__more > summary:hover { border-color: var(--slpro-brand); background: var(--slpro-surface-2); }
.slpro-index__more[open] > summary { margin: 0 0 calc(var(--slpro-step) * .6); }

.slpro-l-index--columns .slpro-index .slpro-chips {
	display: block;
	columns: 4 180px;
	column-gap: var(--slpro-step);
}
.slpro-l-index--columns .slpro-index .slpro-chips li { break-inside: avoid; margin: 0 0 .25em; }
.slpro-l-index--columns .slpro-index .slpro-chip {
	border: 0;
	background: none;
	padding: 0;
	border-radius: 0;
	color: var(--slpro-brand);
	font-size: .95rem;
}
.slpro-l-index--columns .slpro-index .slpro-chip:hover { text-decoration: underline; background: none; }

/* ------------------------------------------------------------- pagination */

.slpro-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: calc(var(--slpro-step) * 2) 0 0;
	align-items: center;
}
.slpro-pagination a,
.slpro-pagination span {
	min-width: 40px;
	padding: .5em .7em;
	text-align: center;
	border: 1px solid var(--slpro-line);
	border-radius: var(--slpro-radius-sm);
	text-decoration: none;
	color: var(--slpro-ink-2);
	font-size: .92rem;
	font-variant-numeric: tabular-nums;
	background: var(--slpro-surface);
}
.slpro-pagination a:hover { border-color: var(--slpro-brand); color: var(--slpro-brand); }
.slpro-pagination a[aria-current="page"],
.slpro-pagination [aria-current="page"] {
	background: var(--slpro-brand);
	border-color: var(--slpro-brand);
	color: var(--slpro-brand-ink);
	font-weight: 700;
}
.slpro-pagination .slpro-ellipsis { border: 0; background: none; min-width: 0; padding: .5em .2em; color: var(--slpro-ink-3); }

/* -------------------------------------------------------------- footer CTA */

.slpro-footer-cta {
	margin: calc(var(--slpro-step) * 2.5) 0 0;
	padding: calc(var(--slpro-step) * 1.4);
	background: var(--slpro-surface-2);
	border: 1px solid var(--slpro-line);
	border-radius: var(--slpro-radius);
	display: flex;
	flex-wrap: wrap;
	gap: var(--slpro-step);
	align-items: center;
	justify-content: space-between;
}
.slpro-footer-cta__text { margin: 0; }
.slpro-footer-cta__text strong { display: block; font-size: 1.08rem; }
.slpro-footer-cta__text span { color: var(--slpro-ink-2); font-size: .95rem; }

.slpro-empty {
	padding: calc(var(--slpro-step) * 2.5) var(--slpro-step);
	text-align: center;
	color: var(--slpro-ink-2);
	border: 1px dashed var(--slpro-line-strong);
	border-radius: var(--slpro-radius);
}

/* ---------------------------------------------------------------- related */

.slpro-related { display: grid; gap: calc(var(--slpro-step) * .5); }
.slpro-related__item {
	display: flex;
	justify-content: space-between;
	gap: var(--slpro-step);
	padding: .55em 0;
	border-bottom: 1px solid var(--slpro-line);
	font-size: .95rem;
}
.slpro-related__item:last-child { border-bottom: 0; }
.slpro-related__item a { text-decoration: none; font-weight: 600; }
.slpro-related__item a:hover { text-decoration: underline; }
.slpro-related__item span { color: var(--slpro-ink-3); white-space: nowrap; }

/* ------------------------------------------------------------ staff preview */

.slpro-preview-bar {
	border: 1px solid #d63638;
	border-left-width: 5px;
	background: #fdf3f3;
	padding: calc(var(--slpro-step) * .9) calc(var(--slpro-step) * 1.1);
	border-radius: var(--slpro-radius-sm);
	margin: 0 0 var(--slpro-step);
	font-size: .92rem;
}
.slpro-preview-bar a { font-weight: 600; }

/* --------------------------------------------------------------- dark mode */
/*
 * Only when the site opted in. A directory page that goes dark while the theme
 * around it stays light looks broken, so this is a per-site setting rather than
 * an unconditional media query.
 */
@media (prefers-color-scheme: dark) {
	.slpro-scheme--auto {
		--slpro-ink: #e8ecf1;
		--slpro-ink-2: #a6b1bf;
		--slpro-ink-3: #8a94a2;
		--slpro-surface: #171b21;
		--slpro-surface-2: #1f242c;
		--slpro-line: #2c333d;
		--slpro-line-strong: #3d4650;
		--slpro-shadow: 0 1px 2px rgba(0, 0, 0, .3);
		--slpro-shadow-lift: 0 8px 24px rgba(0, 0, 0, .45);
	}
	.slpro-scheme--auto .slpro-notice--warn { background: #2a1a1b; }
	.slpro-scheme--auto .slpro-preview-bar { background: #2a1a1b; }
	.slpro-scheme--auto .slpro-offer-banner {
		background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)), var(--slpro-accent);
	}
}

/* --------------------------------------------------------------- not found */

/*
 * The directory 404. It reuses .slpro-pagehead, .slpro-section-title, .slpro-cta
 * and .slpro-chips, so it inherits every per-site design token rather than
 * carrying a second set. Only the search row and the kicker are new.
 */

.slpro-notfound__kicker {
	margin: 0 0 4px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--slpro-muted);
}

.slpro-notfound__search {
	margin: 0 0 calc(var(--slpro-step) * 1.5);
	padding: var(--slpro-step);
	background: var(--slpro-surface-2, var(--slpro-surface));
	border: 1px solid var(--slpro-line);
	border-radius: var(--slpro-radius);
}

.slpro-notfound__label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}

/*
 * Wraps rather than shrinking the field. On a phone a side-by-side input and
 * button leaves the input too narrow to read what you typed, which on a 404 is
 * the one interaction that has to work.
 */
.slpro-notfound__searchrow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.slpro-notfound__searchrow input[type="search"] {
	flex: 1 1 16rem;
	min-width: 0;
	padding: 10px 12px;
	font: inherit;
	color: var(--slpro-ink);
	background: var(--slpro-surface);
	border: 1px solid var(--slpro-line);
	border-radius: var(--slpro-radius);
}

.slpro-notfound__searchrow input[type="search"]:focus-visible {
	outline: 2px solid var(--slpro-brand);
	outline-offset: 1px;
}

.slpro-notfound__add {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 calc(var(--slpro-step) * 1.5);
}

.slpro-notfound__add .slpro-sub {
	margin: 0;
}

.slpro-notfound__uplist {
	margin: 0 0 var(--slpro-step);
	padding: 0;
	list-style: none;
}

.slpro-notfound__uplist li { margin: 0 0 6px; }

/* ------------------------------------------------------------------- print */

@media print {
	.slpro-directory { max-width: none; padding: 0; }
	.slpro-footer-cta,
	.slpro-pagination,
	.slpro-preview-bar,
	.slpro-video { display: none; }
	.slpro-block, .slpro-result { box-shadow: none; break-inside: avoid; }
}