/*
 * Tranquil Safaris Core - front-end listing styles.
 *
 * Everything is namespaced under .tsc- so nothing here can fight Bootstrap 5
 * or the safari (oslim) theme. No bare element selectors, no !important.
 */

.tsc-section {
	--tsc-sand: #faf6ef;
	--tsc-sand-deep: #f0e7d8;
	--tsc-line: #e3d7c3;
	--tsc-bark: #3a2f24;
	--tsc-ink: #241d16;
	--tsc-muted: #6f6355;
	--tsc-clay: #a8471f;
	--tsc-clay-dark: #833618;
	--tsc-savanna: #b7791f;
	--tsc-acacia: #4a6b46;
	--tsc-white: #ffffff;
	--tsc-radius: 12px;
	--tsc-shadow: 0 2px 6px rgba(58, 47, 36, 0.08);
	--tsc-shadow-lift: 0 14px 28px rgba(58, 47, 36, 0.16);
	--tsc-gap: 28px;
}

.tsc-section {
	padding-top: 40px;
	padding-bottom: 60px;
	color: var(--tsc-ink);
}

.tsc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- headers */

.tsc-header {
	margin-bottom: 24px;
}

.tsc-header__title {
	margin: 0 0 8px;
	color: var(--tsc-bark);
	font-size: 32px;
	line-height: 1.2;
}

.tsc-header__count {
	margin: 0 0 10px;
	color: var(--tsc-muted);
	font-size: 14px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.tsc-header__desc {
	max-width: 780px;
	color: var(--tsc-muted);
	font-size: 16px;
	line-height: 1.65;
}

.tsc-intro {
	margin-bottom: 32px;
	line-height: 1.7;
}

.tsc-intro > *:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------- filter bar */

.tsc-filterbar {
	margin: 0 0 32px;
	padding: 18px 20px;
	background-color: var(--tsc-sand);
	border: 1px solid var(--tsc-line);
	border-radius: var(--tsc-radius);
}

.tsc-filterbar__form {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	align-items: flex-end;
	margin: 0;
}

.tsc-filterbar__field {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	min-width: 0;
	gap: 6px;
}

.tsc-filterbar__label {
	margin: 0;
	color: var(--tsc-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tsc-filterbar__select {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	color: var(--tsc-ink);
	font-size: 15px;
	line-height: 1.3;
	background-color: var(--tsc-white);
	border: 1px solid var(--tsc-line);
	border-radius: 8px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--tsc-muted) 50%), linear-gradient(135deg, var(--tsc-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/*
 * The free-text field. Same box as the selects minus the chevron, so the bar
 * reads as one row of controls rather than a search bolted onto a filter bar.
 * `appearance: none` also removes Safari's native rounded search pill, which
 * would otherwise be the one square-cornered-by-someone-else control here.
 */
.tsc-filterbar__input {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	color: var(--tsc-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	background-color: var(--tsc-white);
	border: 1px solid var(--tsc-line);
	border-radius: 8px;
	appearance: none;
}

.tsc-filterbar__input::placeholder {
	color: var(--tsc-muted);
	opacity: 1;
}

/* WebKit's clear button, so it sits on the field's own colour. */
.tsc-filterbar__input::-webkit-search-cancel-button {
	cursor: pointer;
}

.tsc-filterbar__field--actions {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.tsc-filterbar__status {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--tsc-line);
}

.tsc-filterbar__count {
	margin: 0;
	color: var(--tsc-bark);
	font-size: 14px;
	font-weight: 600;
}

.tsc-filterbar__active {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
	font-size: 13px;
}

.tsc-filterbar__active-label {
	color: var(--tsc-muted);
}

.tsc-filterbar__chip {
	padding: 3px 10px;
	color: var(--tsc-bark);
	background-color: var(--tsc-sand-deep);
	border: 1px solid var(--tsc-line);
	border-radius: 999px;
}

.tsc-filterbar__reset {
	color: var(--tsc-clay);
	text-decoration: underline;
}

.tsc-filterbar__reset:hover,
.tsc-filterbar__reset:focus {
	color: var(--tsc-clay-dark);
}

/* -------------------------------------------------------------- buttons */

.tsc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tsc-btn--primary {
	color: var(--tsc-white);
	background-color: var(--tsc-clay);
	border-color: var(--tsc-clay);
}

.tsc-btn--primary:hover,
.tsc-btn--primary:focus {
	color: var(--tsc-white);
	background-color: var(--tsc-clay-dark);
	border-color: var(--tsc-clay-dark);
}

.tsc-btn--ghost {
	color: var(--tsc-bark);
	background-color: transparent;
	border-color: var(--tsc-line);
}

.tsc-btn--ghost:hover,
.tsc-btn--ghost:focus {
	color: var(--tsc-bark);
	background-color: var(--tsc-sand-deep);
	border-color: var(--tsc-muted);
}

/* ----------------------------------------------------------------- grid */

.tsc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tsc-gap);
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------- safari card */

.tsc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--tsc-white);
	border: 1px solid var(--tsc-line);
	border-radius: var(--tsc-radius);
	box-shadow: var(--tsc-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tsc-card:hover,
.tsc-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--tsc-shadow-lift);
}

.tsc-card__media {
	position: relative;
	overflow: hidden;
	background-color: var(--tsc-sand-deep);
}

.tsc-card__media-link {
	display: block;
	text-decoration: none;
}

.tsc-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.tsc-card__img--placeholder {
	background-image: linear-gradient(135deg, #e9dcc4 0%, #d8c3a0 45%, #c9a97b 100%);
}

.tsc-card:hover .tsc-card__img {
	transform: scale(1.04);
}

.tsc-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	color: var(--tsc-white);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	background-color: rgba(58, 47, 36, 0.85);
	border-radius: 999px;
}

.tsc-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}

.tsc-card__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.35;
}

.tsc-card__title-link {
	color: var(--tsc-bark);
	text-decoration: none;
}

.tsc-card__title-link:hover,
.tsc-card__title-link:focus {
	color: var(--tsc-clay);
}

.tsc-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	color: var(--tsc-muted);
	font-size: 13px;
	list-style: none;
}

.tsc-card__meta-item {
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
}

.tsc-card__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsc-card__pill {
	padding: 3px 10px;
	color: var(--tsc-acacia);
	font-size: 12px;
	font-weight: 600;
	background-color: rgba(74, 107, 70, 0.1);
	border-radius: 999px;
}

.tsc-card__excerpt {
	margin: 0;
	color: var(--tsc-muted);
	font-size: 14px;
	line-height: 1.6;
}

.tsc-card__actions {
	margin: auto 0 0;
	padding-top: 6px;
}

.tsc-card__cta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	color: var(--tsc-clay);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.tsc-card__cta:hover,
.tsc-card__cta:focus {
	color: var(--tsc-clay-dark);
}

.tsc-card--article .tsc-card__body {
	gap: 12px;
}

/* ------------------------------------------------------------ term card */

.tsc-term-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	color: var(--tsc-bark);
	text-decoration: none;
	background-color: var(--tsc-white);
	border: 1px solid var(--tsc-line);
	border-radius: var(--tsc-radius);
	box-shadow: var(--tsc-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tsc-term-card:hover,
.tsc-term-card:focus {
	color: var(--tsc-bark);
	text-decoration: none;
	transform: translateY(-6px);
	box-shadow: var(--tsc-shadow-lift);
}

.tsc-term-card__media {
	display: block;
	overflow: hidden;
	background-color: var(--tsc-sand-deep);
}

.tsc-term-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.tsc-term-card__img--placeholder {
	background-image: linear-gradient(135deg, #dfe8d8 0%, #bcd0b2 50%, #8fae86 100%);
}

.tsc-term-card:hover .tsc-term-card__img {
	transform: scale(1.05);
}

.tsc-term-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
}

.tsc-term-card__name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.tsc-term-card__count {
	color: var(--tsc-muted);
	font-size: 13px;
	letter-spacing: 0.03em;
}

/* ------------------------------------------------- sibling term nav row */

.tsc-siblings {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0 0 28px;
	padding: 14px 16px;
	background-color: var(--tsc-sand);
	border: 1px solid var(--tsc-line);
	border-radius: var(--tsc-radius);
}

.tsc-siblings__label {
	color: var(--tsc-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tsc-siblings__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsc-siblings__link {
	display: inline-block;
	padding: 5px 14px;
	color: var(--tsc-bark);
	font-size: 13px;
	text-decoration: none;
	background-color: var(--tsc-white);
	border: 1px solid var(--tsc-line);
	border-radius: 999px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tsc-siblings__link:hover,
.tsc-siblings__link:focus {
	color: var(--tsc-white);
	background-color: var(--tsc-clay);
	border-color: var(--tsc-clay);
}

.tsc-siblings__link.is-current {
	color: var(--tsc-white);
	background-color: var(--tsc-bark);
	border-color: var(--tsc-bark);
}

/* ------------------------------------------------------------- articles */

.tsc-articles {
	margin-top: 16px;
	padding-top: 32px;
	border-top: 1px solid var(--tsc-line);
}

.tsc-articles__title {
	margin: 0 0 24px;
	color: var(--tsc-bark);
	font-size: 26px;
	line-height: 1.25;
}

/* ----------------------------------------------------------- empty state */

.tsc-empty {
	padding: 48px 24px;
	text-align: center;
	background-color: var(--tsc-sand);
	border: 1px dashed var(--tsc-line);
	border-radius: var(--tsc-radius);
}

.tsc-empty__title {
	margin: 0 0 10px;
	color: var(--tsc-bark);
	font-size: 22px;
}

.tsc-empty__text {
	max-width: 520px;
	margin: 0 auto 20px;
	color: var(--tsc-muted);
	font-size: 15px;
	line-height: 1.6;
}

.tsc-empty__actions {
	margin: 0;
}

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

.tsc-pagination {
	margin: 8px 0 0;
}

.tsc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	color: var(--tsc-bark);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	background-color: var(--tsc-white);
	border: 1px solid var(--tsc-line);
	border-radius: 8px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tsc-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsc-pagination li {
	margin: 0;
}

.tsc-pagination a.page-numbers:hover,
.tsc-pagination a.page-numbers:focus {
	color: var(--tsc-white);
	background-color: var(--tsc-clay);
	border-color: var(--tsc-clay);
}

.tsc-pagination .page-numbers.current {
	color: var(--tsc-white);
	background-color: var(--tsc-bark);
	border-color: var(--tsc-bark);
}

.tsc-pagination .page-numbers.dots {
	background-color: transparent;
	border-color: transparent;
}

/* ---------------------------------------------------------- focus states */

.tsc-card__title-link:focus-visible,
.tsc-card__cta:focus-visible,
.tsc-term-card:focus-visible,
.tsc-siblings__link:focus-visible,
.tsc-filterbar__select:focus-visible,
.tsc-filterbar__input:focus-visible,
.tsc-filterbar__reset:focus-visible,
.tsc-btn:focus-visible,
.tsc-pagination a.page-numbers:focus-visible {
	outline: 3px solid var(--tsc-savanna);
	outline-offset: 2px;
}

/* --------------------------------------------------------- breakpoints */

@media (min-width: 768px) {
	.tsc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tsc-filterbar__field {
		flex: 1 1 180px;
	}

	.tsc-filterbar__field--actions {
		flex: 0 0 auto;
	}
}

@media (min-width: 992px) {
	.tsc-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tsc-header__title {
		font-size: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsc-card,
	.tsc-term-card,
	.tsc-card__img,
	.tsc-term-card__img,
	.tsc-btn,
	.tsc-siblings__link,
	.tsc-pagination .page-numbers {
		transition: none;
	}

	.tsc-card:hover,
	.tsc-card:focus-within,
	.tsc-term-card:hover,
	.tsc-term-card:focus {
		transform: none;
	}

	.tsc-card:hover .tsc-card__img,
	.tsc-term-card:hover .tsc-term-card__img {
		transform: none;
	}
}

/* ------------------------------------------- country / africa page blocks */

/*
 * Appended for templates/page-country.php and templates/page-africa.php.
 * Cards, grids, siblings, pagination and empty states are reused as-is; only
 * the header action row and the secondary block wrapper are new.
 */

.tsc-header__actions {
	margin: 14px 0 0;
}

.tsc-block {
	margin-top: 16px;
	padding-top: 32px;
	border-top: 1px solid var(--tsc-line);
}

.tsc-block__title {
	margin: 0 0 24px;
	color: var(--tsc-bark);
	font-size: 26px;
	line-height: 1.25;
}

.tsc-block__actions {
	margin: 0;
}

.tsc-listing--country .tsc-block .tsc-siblings {
	margin: 0;
}

/* ------------------------------------------ legacy grid column modifiers */

/*
 * Appended for inc/legacy-widgets.php. The resurrected `ucaddon_*` widgets
 * carry a saved column count (1-4); these modifiers apply it on wide screens
 * only. Regardless of the requested N the grid is never more than one column
 * below 576px and never more than two below 992px, so the base `.tsc-grid`
 * responsive behaviour is preserved. Nothing here touches `.tsc-card`.
 *
 * The doubled class keeps these ahead of the `.tsc-grid` breakpoint rules
 * above without relying on source order alone.
 */

.tsc-grid.tsc-grid--cols-1,
.tsc-grid.tsc-grid--cols-2,
.tsc-grid.tsc-grid--cols-3,
.tsc-grid.tsc-grid--cols-4 {
	grid-template-columns: 1fr;
}

@media (min-width: 576px) {
	.tsc-grid.tsc-grid--cols-2,
	.tsc-grid.tsc-grid--cols-3,
	.tsc-grid.tsc-grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.tsc-grid.tsc-grid--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tsc-grid.tsc-grid--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
 * Revived decorative legacy widgets  (inc/legacy-decorative.php)
 *
 * Appended block. Nothing above this line is modified, and nothing here
 * restyles .tsc-card or .tsc-grid - the shapes below are their own.
 *
 * The palette custom properties at the top of this file are declared on
 * .tsc-section. These blocks also render OUTSIDE any .tsc-section (the front
 * page is a theme template, and the footer social list is global), so each
 * root re-declares the handful of tokens it needs rather than inheriting
 * nothing and falling back to transparent.
 * ========================================================================== */

.tsc-hover-tile,
.tsc-iconbox,
.tsc-carousel,
.tsc-social,
.tsc-accordion,
.tsc-strip {
	--tsc-d-sand: #faf6ef;
	--tsc-d-line: #e3d7c3;
	--tsc-d-bark: #3a2f24;
	--tsc-d-ink: #241d16;
	--tsc-d-muted: #6f6355;
	--tsc-d-clay: #a8471f;
	--tsc-d-savanna: #b7791f;
	--tsc-d-acacia: #12493e;
	--tsc-d-white: #ffffff;
	--tsc-d-radius: 12px;
	--tsc-d-shadow: 0 2px 6px rgba(58, 47, 36, 0.08);
	--tsc-d-shadow-lift: 0 14px 28px rgba(58, 47, 36, 0.16);
	box-sizing: border-box;
}

.tsc-hover-tile *,
.tsc-iconbox *,
.tsc-carousel *,
.tsc-social *,
.tsc-accordion *,
.tsc-strip * {
	box-sizing: border-box;
}

/* ------------------------------------------------- hover / focus reveal tile */

.tsc-hover-tile {
	position: relative;
	display: block;
	width: 100%;
	min-height: 260px;
	overflow: hidden;
	border-radius: var(--tsc-d-radius);
	background-color: var(--tsc-d-bark);
	box-shadow: var(--tsc-d-shadow);
	text-decoration: none;
	isolation: isolate;
}

.tsc-hover-tile--linked:hover,
.tsc-hover-tile--linked:focus-visible {
	box-shadow: var(--tsc-d-shadow-lift);
}

.tsc-hover-tile__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.tsc-hover-tile__img--placeholder {
	background-color: var(--tsc-d-sand);
}

.tsc-hover-tile--linked:hover .tsc-hover-tile__img,
.tsc-hover-tile--linked:focus-visible .tsc-hover-tile__img {
	transform: scale(1.05);
}

.tsc-hover-tile__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		rgba(10, 8, 6, 0.86) 0%,
		rgba(10, 8, 6, 0.55) 38%,
		rgba(10, 8, 6, 0.08) 100%
	);
}

.tsc-hover-tile__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 260px;
	padding: 20px;
	color: var(--tsc-d-white);
}

.tsc-hover-tile__title {
	display: block;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/*
 * The revealed panel is clipped, not removed: it stays in the accessibility
 * tree and in find-in-page, and it opens on keyboard focus as well as on
 * hover, so the tile is fully usable without a pointer.
 */
.tsc-hover-tile__reveal {
	display: block;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
}

.tsc-hover-tile:hover .tsc-hover-tile__reveal,
.tsc-hover-tile:focus .tsc-hover-tile__reveal,
.tsc-hover-tile:focus-visible .tsc-hover-tile__reveal,
.tsc-hover-tile:focus-within .tsc-hover-tile__reveal {
	max-height: 16em;
	margin-top: 10px;
	opacity: 1;
}

.tsc-hover-tile__text {
	display: block;
	font-size: 15px;
	line-height: 1.5;
}

.tsc-hover-tile__text p {
	margin: 0 0 8px;
}

.tsc-hover-tile__text p:last-child {
	margin-bottom: 0;
}

.tsc-hover-tile__cta {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 18px;
	border-radius: 999px;
	background-color: var(--tsc-d-clay);
	color: var(--tsc-d-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* No hover available (touch): never hide the panel behind a gesture. */
@media (hover: none) {
	.tsc-hover-tile__reveal {
		max-height: none;
		margin-top: 10px;
		opacity: 1;
	}
}

/* -------------------------------------------------------------- icon box */

.tsc-iconbox {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px;
	border: 1px solid var(--tsc-d-line);
	border-radius: var(--tsc-d-radius);
	background-color: var(--tsc-d-white);
	box-shadow: var(--tsc-d-shadow);
	color: var(--tsc-d-ink);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.tsc-iconbox:hover,
.tsc-iconbox:focus-within {
	box-shadow: var(--tsc-d-shadow-lift);
	transform: translateY(-2px);
}

.tsc-iconbox__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 14px;
	background-color: var(--tsc-d-acacia);
	color: var(--tsc-d-white);
	font-size: 24px;
}

.tsc-iconbox__img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.tsc-iconbox__title {
	margin: 0 0 10px;
	color: var(--tsc-d-bark);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.tsc-iconbox__text {
	color: var(--tsc-d-muted);
	font-size: 15px;
	line-height: 1.6;
}

.tsc-iconbox__text p {
	margin: 0 0 10px;
}

.tsc-iconbox__text p:last-child {
	margin-bottom: 0;
}

.tsc-iconbox__actions {
	margin: 16px 0 0;
}

.tsc-iconbox__cta {
	display: inline-block;
	padding: 9px 20px;
	border-radius: 999px;
	background-color: var(--tsc-d-clay);
	color: var(--tsc-d-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.tsc-iconbox__cta:hover,
.tsc-iconbox__cta:focus {
	background-color: var(--tsc-d-bark);
	color: var(--tsc-d-white);
}

/* ------------------------------------------ scroll-snap carousel and strip */

/*
 * No slider library, no script, no external assets. The track is a plain
 * overflow-x flex row with scroll snapping: it swipes on touch, drag-scrolls
 * on a trackpad, and is focusable so the arrow keys, Home and End scroll it.
 */

.tsc-carousel,
.tsc-strip {
	margin: 24px 0;
}

.tsc-carousel__track,
.tsc-strip__track {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 4px 4px 18px;
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 4px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.tsc-carousel__item,
.tsc-strip__item {
	flex: 0 0 auto;
	width: min(82%, 300px);
	margin: 0;
	scroll-snap-align: start;
}

.tsc-carousel__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--tsc-d-line);
	border-radius: var(--tsc-d-radius);
	background-color: var(--tsc-d-white);
	box-shadow: var(--tsc-d-shadow);
	color: var(--tsc-d-ink);
	text-decoration: none;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

a.tsc-carousel__card:hover,
a.tsc-carousel__card:focus-visible {
	box-shadow: var(--tsc-d-shadow-lift);
	transform: translateY(-3px);
}

.tsc-carousel__img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.tsc-carousel__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 18px;
}

.tsc-carousel__title {
	display: block;
	margin-bottom: 8px;
	color: var(--tsc-d-bark);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.tsc-carousel__text {
	display: block;
	color: var(--tsc-d-muted);
	font-size: 14px;
	line-height: 1.55;
}

.tsc-carousel__text p {
	margin: 0 0 8px;
}

.tsc-carousel__text p:last-child {
	margin-bottom: 0;
}

.tsc-carousel__cta {
	display: inline-block;
	align-self: flex-start;
	margin-top: 14px;
	color: var(--tsc-d-clay);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tsc-strip__item {
	width: min(88%, 420px);
}

.tsc-strip__img {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: var(--tsc-d-radius);
	background-color: var(--tsc-d-sand);
}

/* --------------------------------------------------------- social links */

.tsc-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsc-social__item {
	margin: 0;
}

.tsc-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #ebebeb;
	color: var(--tsc-d-acacia);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.tsc-social__link:hover,
.tsc-social__link:focus-visible {
	background-color: var(--tsc-d-savanna);
	color: var(--tsc-d-white);
	transform: translateY(-2px);
}

/* ------------------------------------------------- details/summary accordion */

.tsc-accordion {
	margin: 24px 0;
}

.tsc-accordion__item {
	margin-bottom: 12px;
	overflow: hidden;
	border: 1px solid var(--tsc-d-line);
	border-radius: var(--tsc-d-radius);
	background-color: var(--tsc-d-white);
}

.tsc-accordion__item:last-child {
	margin-bottom: 0;
}

.tsc-accordion__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background-color: var(--tsc-d-sand);
	color: var(--tsc-d-bark);
	cursor: pointer;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
}

.tsc-accordion__summary::-webkit-details-marker {
	display: none;
}

.tsc-accordion__item[open] .tsc-accordion__summary {
	background-color: var(--tsc-d-acacia);
	color: var(--tsc-d-white);
}

.tsc-accordion__icon {
	flex: 0 0 auto;
	font-size: 18px;
	opacity: 0.85;
}

.tsc-accordion__title {
	flex: 1 1 auto;
}

/*
 * Plus / minus drawn in CSS so no icon font is required for the control
 * itself to be understandable.
 */
.tsc-accordion__marker {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.tsc-accordion__marker::before,
.tsc-accordion__marker::after {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: currentColor;
	content: "";
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease;
}

.tsc-accordion__marker::before {
	width: 14px;
	height: 2px;
}

.tsc-accordion__marker::after {
	width: 2px;
	height: 14px;
}

.tsc-accordion__item[open] .tsc-accordion__marker::after {
	opacity: 0;
}

.tsc-accordion__panel {
	padding: 18px;
	color: var(--tsc-d-ink);
	font-size: 15px;
	line-height: 1.65;
}

.tsc-accordion__panel p {
	margin: 0 0 12px;
}

.tsc-accordion__panel p:last-child {
	margin-bottom: 0;
}

.tsc-accordion__panel ul,
.tsc-accordion__panel ol {
	margin: 0 0 12px 20px;
	padding: 0;
}

.tsc-accordion__panel a {
	color: var(--tsc-d-clay);
}

/* ----------------------------------------------- focus states (additive) */

.tsc-hover-tile:focus-visible,
.tsc-iconbox__cta:focus-visible,
.tsc-carousel__track:focus-visible,
.tsc-carousel__card:focus-visible,
.tsc-strip__track:focus-visible,
.tsc-social__link:focus-visible,
.tsc-accordion__summary:focus-visible {
	outline: 3px solid var(--tsc-d-savanna);
	outline-offset: 2px;
}

/* ------------------------------------------------------- wider viewports */

@media (min-width: 576px) {
	.tsc-carousel__item {
		width: 300px;
	}

	.tsc-strip__item {
		width: 420px;
	}
}

@media (min-width: 992px) {
	.tsc-hover-tile,
	.tsc-hover-tile__body {
		min-height: 320px;
	}

	.tsc-hover-tile__title {
		font-size: 20px;
	}
}

/* ------------------------------------------------------- reduced motion */

/*
 * Mirrors the guard earlier in this file. Every transition and transform the
 * block above introduces is switched off, the reveal panel opens instantly
 * rather than sliding, and the snap tracks stop smooth-scrolling.
 */
@media (prefers-reduced-motion: reduce) {
	.tsc-hover-tile__img,
	.tsc-hover-tile__reveal,
	.tsc-iconbox,
	.tsc-carousel__card,
	.tsc-social__link,
	.tsc-accordion__marker::before,
	.tsc-accordion__marker::after {
		transition: none;
	}

	.tsc-hover-tile--linked:hover .tsc-hover-tile__img,
	.tsc-hover-tile--linked:focus-visible .tsc-hover-tile__img,
	.tsc-iconbox:hover,
	.tsc-iconbox:focus-within,
	a.tsc-carousel__card:hover,
	a.tsc-carousel__card:focus-visible,
	.tsc-social__link:hover,
	.tsc-social__link:focus-visible {
		transform: none;
	}

	.tsc-carousel__track,
	.tsc-strip__track {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------------ *
 * Featured marker
 *
 * Rendered by the theme's country grid on a card whose safari carries the
 * editor's "featured" flag (inc/featured.php). It reuses the card's existing
 * `.tag` pill wholesale — same geometry, same corner radius, same row — and
 * only changes the two colours, so it cannot fall out of step with the pills
 * beside it. The rule lives here rather than in the theme because the flag it
 * describes is the plugin's, and a theme change must not strip the marker off
 * a trip that is still featured.
 *
 * The word is "Featured" and nothing else. This site records no sales, no
 * ratings and no traffic, so there is nothing here to call a best seller.
 * ------------------------------------------------------------------------ */
.tsc-feat-tag {
	background: #EAB924;
	color: #3A2E25;
	letter-spacing: .02em;
}

/* ==========================================================================
 * THE LISTINGS
 * --------------------------------------------------------------------------
 * /safaris/ became the second item in the main navigation and the destination
 * of roughly twenty "browse the packages" links across the site, and its design
 * had never been touched. This block is that design pass. It applies to every
 * template that carries `.tsc-listing`, which is all of them:
 * listing-safaris, listing-activities, listing-destinations, page-africa,
 * archive-safaris and the three taxonomy templates.
 *
 * WHAT IS **NOT** HERE
 * --------------------
 * The card. The safari card is now the site's own `.lg`, styled entirely by the
 * theme's style.css section 12, which is loaded on every page. Not one of those
 * declarations is repeated, overridden or forked below. What IS below is the
 * three classes the card has no slot for - the areas line, the excerpt and the
 * footer button - which the theme invented for the country page and keeps in
 * country.css. country.css is enqueued on country pages only, so the listings
 * cannot inherit them and they are declared here instead, scoped to `.tsc-lg`
 * so they can never reach a `.lg` this plugin did not render. If the theme ever
 * hoists `.ts-lg__*` into ds.css, every rule here becomes redundant and can go.
 *
 * TOKENS
 * ------
 * The palette at the top of this file (sand, clay, savanna) predates the brand
 * and is nobody's colours. Rather than rewrite 600 lines of rules, the token
 * VALUES are rebound to the brand's on `.tsc-listing`, so the filter bar,
 * buttons, chips, term cards, empty states and pagination all move onto
 * --ac / --gold / --cream / --line in one place. The declarations above are
 * untouched and still work standalone.
 *
 * THE SHELL
 * ---------
 * These templates are built on `.container > .row > .col-xl-12`, which is
 * Bootstrap markup - and there is no Bootstrap on this site. Grepped: no rule
 * for `.container`, `.row` or `.col-*` exists in the theme stylesheet, ds.css,
 * or any enqueued plugin stylesheet. Every listing has therefore been running
 * edge to edge with no maximum width and no side gutter at all. The shell is
 * given here, scoped to `.tsc-listing`, at the brand's own --shell.
 *
 * NOTHING SQUARE-CORNERED, and no rotation anywhere: buttons 12px, cards 18px
 * (the theme's own), large surfaces 22px.
 * ========================================================================== */

/* ------------------------------------------------------------- 1. tokens */

.tsc-listing {
	--tsc-sand: var(--cream, #F7F3EE);
	--tsc-sand-deep: #EFE7DC;
	--tsc-line: var(--line, #E6E0D8);
	--tsc-bark: var(--ink, #3A2E25);
	--tsc-ink: var(--ink, #3A2E25);
	--tsc-muted: var(--muted, #7A6F66);
	--tsc-clay: var(--ac, #124933);
	--tsc-clay-dark: var(--ac-dark, #0C3323);
	--tsc-savanna: var(--gold-dark, #C99C13);
	--tsc-acacia: var(--ac-mid, #1B6146);
	--tsc-radius: 22px;
	--tsc-shadow: var(--shadow-sm, 0 4px 16px rgba(58, 46, 37, 0.08));
	--tsc-shadow-lift: var(--shadow, 0 12px 40px rgba(58, 46, 37, 0.12));
	--tsc-gap: clamp(16px, 1.7vw, 26px);
}

/* -------------------------------------------------------------- 2. shell */

.tsc-section.tsc-listing {
	padding-top: clamp(28px, 4vw, 56px);
	padding-bottom: clamp(40px, 5vw, 76px);
	font-family: var(--sans, "Outfit", system-ui, sans-serif);
}

.tsc-listing .container {
	width: 100%;
	max-width: var(--shell, 1300px);
	margin-inline: auto;
	/* 16px is the floor at 390px; no horizontal scroll at any width. */
	padding-inline: clamp(16px, 3.2vw, 28px);
}

.tsc-listing .row {
	margin: 0;
}

/*
 * min-width:0 is load-bearing, not tidying. A grid track sized `1fr` floors at
 * the MIN-CONTENT of its item, so a long card title or a wide pill row pushes
 * the track past the shell and the page scrolls sideways. The same applies to
 * this Bootstrap-shaped column, which defaults to auto.
 */
.tsc-listing [class*="col-"] {
	min-width: 0;
	padding: 0;
}

/* ----------------------------------------------------------- 3. page head */

.tsc-listing__head {
	max-width: 74ch;
	margin: 0 0 clamp(22px, 2.6vw, 34px);
}

.tsc-listing__title {
	margin: 0;
	color: var(--ac, #124933);
	font-family: var(--sans, "Outfit", system-ui, sans-serif);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/*
 * The thin gold hairline is the divider the business card and the A4
 * letterhead both use beneath the wordmark. Gold is the flourish; it is never
 * body text on white.
 */
.tsc-listing__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 16px;
	background: var(--gold, #EAB924);
	border-radius: 2px;
}

.tsc-listing .tsc-intro {
	margin: 18px 0 0;
	color: var(--body, #5F564E);
	font-size: clamp(15.5px, 1.05vw, 17.5px);
	line-height: 1.75;
}

.tsc-listing .tsc-intro p {
	margin: 0 0 12px;
}

.tsc-listing .tsc-intro > *:last-child {
	margin-bottom: 0;
}

.tsc-listing .tsc-intro strong {
	color: var(--ink, #3A2E25);
	font-weight: 600;
}

/* The live catalogue total. Never a number typed into copy. */
.tsc-listing__stat {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 16px 0 0;
	color: var(--muted, #7A6F66);
	font-size: 14.5px;
	line-height: 1.6;
}

.tsc-listing__stat svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--ac, #124933);
}

/* --------------------------------------------------------- 4. filter bar */

.tsc-listing .tsc-filterbar {
	margin: 0 0 clamp(22px, 2.6vw, 32px);
	padding: clamp(16px, 1.7vw, 22px);
	background-color: var(--cream, #F7F3EE);
	border: 1px solid var(--line, #E6E0D8);
	border-radius: 22px;
}

.tsc-listing .tsc-filterbar__label {
	color: var(--ac, #124933);
	font-size: 11px;
	letter-spacing: 0.08em;
}

.tsc-listing .tsc-filterbar__select {
	min-height: 46px;
	padding: 11px 42px 11px 14px;
	color: var(--ink, #3A2E25);
	font-family: var(--sans, "Outfit", system-ui, sans-serif);
	font-size: 15px;
	background-color: #fff;
	border-color: var(--line, #E6E0D8);
	border-radius: 12px;
	/* The theme's own #chev stroke chevron, inlined so it can tint the field. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6F66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-size: 16px 16px;
	background-repeat: no-repeat;
}

.tsc-listing .tsc-filterbar__select:hover {
	border-color: var(--ac-mid, #1B6146);
}

/*
 * The search field, at the listing's scale. 46px like the selects and the
 * buttons, 12px radius like everything else on this page, Outfit like the rest
 * of the bar. It is given more of the row than a select because what goes in it
 * is a phrase rather than a one-word label.
 */
.tsc-listing .tsc-filterbar__input {
	min-height: 46px;
	padding: 11px 14px;
	color: var(--ink, #3A2E25);
	font-family: var(--sans, "Outfit", system-ui, sans-serif);
	font-size: 15px;
	background-color: #fff;
	border-color: var(--line, #E6E0D8);
	border-radius: 12px;
}

.tsc-listing .tsc-filterbar__input:hover {
	border-color: var(--ac-mid, #1B6146);
}

.tsc-listing .tsc-filterbar__input::placeholder {
	color: var(--muted, #7A6F66);
}

@media (min-width: 768px) {
	/*
	 * Wide enough to hold a typed phrase without the three selects dropping to
	 * a second row on a 768px tablet. `flex-basis` rather than a width, so the
	 * bar keeps distributing whatever is left.
	 */
	.tsc-listing .tsc-filterbar__field--search {
		flex: 2 1 260px;
	}
}

.tsc-listing .tsc-btn {
	min-height: 46px;
	padding: 0 20px;
	font-family: var(--sans, "Outfit", system-ui, sans-serif);
	font-size: 14px;
	letter-spacing: 0.01em;
	border-radius: 12px;
}

/*
 * The letterhead's footer band at button scale: solid forest green, white
 * label, and the gold hairline capping its top edge - drawn as an inset shadow
 * so it follows the 12px radius instead of squaring the corner off.
 */
.tsc-listing .tsc-btn--primary {
	background-color: var(--ac, #124933);
	border-color: var(--ac, #124933);
	box-shadow: inset 0 2px 0 0 var(--gold, #EAB924);
}

.tsc-listing .tsc-btn--primary:hover,
.tsc-listing .tsc-btn--primary:focus {
	background-color: var(--ac-dark, #0C3323);
	border-color: var(--ac-dark, #0C3323);
	box-shadow: inset 0 3px 0 0 var(--gold, #EAB924);
}

.tsc-listing .tsc-btn--ghost {
	color: var(--ink, #3A2E25);
	background-color: #fff;
	border-color: var(--line, #E6E0D8);
}

.tsc-listing .tsc-btn--ghost:hover,
.tsc-listing .tsc-btn--ghost:focus {
	color: var(--ac, #124933);
	background-color: #fff;
	border-color: var(--ac, #124933);
}

.tsc-listing .tsc-filterbar__count {
	color: var(--ac, #124933);
	font-size: 14.5px;
}

.tsc-listing .tsc-filterbar__chip {
	color: var(--ac-dark, #0C3323);
	font-weight: 600;
	background-color: var(--ac-soft, #E6EDE9);
	border-color: transparent;
}

.tsc-listing .tsc-filterbar__reset {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ac, #124933);
}

/* --------------------------------------------------------------- 5. grid */

.tsc-listing .tsc-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tsc-gap);
	margin: 0 0 clamp(26px, 3vw, 40px);
}

@media (min-width: 620px) {
	.tsc-listing .tsc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.tsc-listing .tsc-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Four across only once the shell is genuinely wide enough for a 200px-tall
 * card image not to look letterboxed - the same count the homepage packages
 * band runs.
 */
@media (min-width: 1240px) {
	.tsc-listing .tsc-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------- 6. the card's three extra content slots */

/*
 * The card itself is style.css section 12 and is not touched. These three
 * classes carry content `.lg` has no slot for. `.tsc-lg` is a scoping hook
 * with no appearance of its own.
 */

.tsc-lg {
	width: 100%;
}

/* Parks the trip spends a day in. Plain text, never links - see below. */
.tsc-lg .ts-lg__areas {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 10px 0 0;
	color: var(--muted, #7A6F66);
	font-size: 13px;
	line-height: 1.55;
}

.tsc-lg .ts-lg__areas-k {
	margin-right: 4px;
	color: var(--ac, #124933);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tsc-lg .ts-lg__areas-v {
	color: var(--body, #5F564E);
}

/* Three lines, clamped, so every card can still bottom-align its footer row. */
.tsc-lg .ts-lg__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 10px 0 0;
	color: var(--body, #5F564E);
	font-size: 14px;
	line-height: 1.6;
}

/*
 * THE FOOTER BUTTON, AND WHY IT CARRIES A z-index
 * -----------------------------------------------
 * style.css gives `.lg{position:relative}` and `.lg-top h3 a::after{inset:0}`.
 * The pseudo-element's containing block is the CARD, so that ::after is a
 * transparent sheet over the whole card at z-index 1 - it is what makes the
 * card clickable, and it means any anchor inside `.lg-body` is painted
 * underneath it and receives no clicks at all. It looks perfect in the markup
 * and in a screenshot; it is dead. The save heart escapes only because
 * style.css gives `.heart{position:relative;z-index:3}`, and this button needs
 * exactly the same escape. Verified with elementFromPoint at the button's own
 * centre - reading the markup is not evidence, because the markup looked right
 * in both previous cases where this bug shipped.
 */
.tsc-lg .ts-lg__cta {
	position: relative;
	z-index: 2;
	display: inline-flex;
	flex: 1 1 auto;
	gap: 9px;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 16px;
	color: #fff;
	font-family: var(--sans, "Outfit", system-ui, sans-serif);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-decoration: none;
	background: var(--ac, #124933);
	border: 0;
	border-radius: 12px;
	box-shadow: inset 0 2px 0 0 var(--gold, #EAB924);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.tsc-lg .ts-lg__cta svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--gold, #EAB924);
	transition: transform 0.2s ease;
}

.tsc-lg .ts-lg__cta:hover,
.tsc-lg .ts-lg__cta:focus {
	color: #fff;
	background: var(--ac-dark, #0C3323);
	box-shadow: inset 0 3px 0 0 var(--gold, #EAB924);
}

.tsc-lg .ts-lg__cta:hover svg {
	transform: translateX(4px);
}

/*
 * style.css aligns the footer row to flex-end, which is right for two stacked
 * label/value blocks; the button is a single line and sits centred against the
 * number beside it.
 */
.tsc-lg .price {
	gap: 14px;
	align-items: center;
}

.tsc-lg .price .amt {
	flex: none;
}

/* -------------------------------------------------------- 7. empty state */

.tsc-listing .tsc-empty {
	padding: clamp(28px, 4vw, 48px) 24px;
	background-color: var(--cream, #F7F3EE);
	border: 1px solid var(--line, #E6E0D8);
	border-radius: 22px;
}

.tsc-listing .tsc-empty__title {
	color: var(--ink, #3A2E25);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
}

.tsc-listing .tsc-empty__text {
	max-width: 54ch;
}

.tsc-listing .tsc-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* --------------------------------------------------------- 8. pagination */

.tsc-listing .tsc-pagination {
	margin: 0;
}

.tsc-listing .tsc-pagination .page-numbers {
	min-width: 44px;
	min-height: 44px;
	height: auto;
	padding: 0 14px;
	color: var(--ink, #3A2E25);
	font-variant-numeric: tabular-nums;
	background-color: #fff;
	border-color: var(--line, #E6E0D8);
	border-radius: 12px;
}

.tsc-listing .tsc-pagination a.page-numbers:hover,
.tsc-listing .tsc-pagination a.page-numbers:focus {
	color: var(--ac, #124933);
	background-color: #fff;
	border-color: var(--ac, #124933);
}

.tsc-listing .tsc-pagination .page-numbers.current {
	color: #fff;
	background-color: var(--ac, #124933);
	border-color: var(--ac, #124933);
}

.tsc-listing .tsc-pagination .page-numbers.dots {
	min-width: 24px;
	padding: 0;
	color: var(--muted, #7A6F66);
	background-color: transparent;
	border-color: transparent;
}

/* ------------------------------------------------------- 9. focus states */

.tsc-listing .tsc-lg .lg-top h3 a:focus-visible,
.tsc-listing .tsc-lg .heart:focus-visible,
.tsc-listing .tsc-lg .ts-lg__cta:focus-visible,
.tsc-listing .tsc-filterbar__select:focus-visible,
.tsc-listing .tsc-filterbar__input:focus-visible,
.tsc-listing .tsc-btn:focus-visible,
.tsc-listing .tsc-pagination a.page-numbers:focus-visible,
.tsc-listing .tsc-filterbar__reset:focus-visible {
	outline: 2px solid var(--gold, #EAB924);
	outline-offset: 3px;
}

/* --------------------------------------------- 10. small screens (390px) */

@media (max-width: 519px) {
	/*
	 * Filter and Clear share the row rather than stacking; both keep their 46px
	 * height, so neither drops under the 44px floor.
	 */
	.tsc-listing .tsc-filterbar__field--actions .tsc-btn {
		flex: 1 1 140px;
	}

	.tsc-listing .tsc-empty__actions .tsc-btn {
		flex: 1 1 100%;
	}

	/* The card footer: button first, day count under it, nothing squeezed. */
	.tsc-lg .price {
		flex-wrap: wrap;
	}

	.tsc-lg .ts-lg__cta {
		flex: 1 1 100%;
	}
}

/* ----------------------------------------------------- 11. reduced motion */

@media (prefers-reduced-motion: reduce) {
	.tsc-lg .ts-lg__cta,
	.tsc-lg .ts-lg__cta svg {
		transition: none;
	}

	.tsc-lg .ts-lg__cta:hover svg {
		transform: none;
	}
}