/* Template Showcase — 搜索框与联想下拉
   全部作用域在 .tshow-search 下，避免和主题打架。

   这份样式会被加载到页头等非模板页面上，那些页面没有列表页的
   :root 变量块，所以每个 var() 都自带回退值，配色跟着「展示设置」走，
   取不到时退回和 frontend.css 一致的默认色。 */

.tshow-search {
	--tshow-search-height: 52px;
	--tshow-search-radius: 999px;
	--tshow-search-width: 100%;
	--tshow-search-surface: var( --tshow-bg, #ffffff );
	--tshow-search-line: var( --tshow-border, #e5e7eb );
	--tshow-search-ink: var( --tshow-text, #111827 );
	--tshow-search-soft: var( --tshow-muted, #6b7280 );
	--tshow-search-key: var( --tshow-primary, #2563eb );

	position: relative;
	display: block;
	width: var( --tshow-search-width );
	max-width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
}

.tshow-search *,
.tshow-search *::before,
.tshow-search *::after {
	box-sizing: border-box;
}

/* 页面正文里的宽版 */
.tshow-search--wide {
	--tshow-search-width: 560px;
}

.tshow-search--center {
	margin-left: auto;
	margin-right: auto;
}

/* 页头用的迷你版 */
.tshow-search--mini {
	--tshow-search-height: 38px;
	--tshow-search-width: 220px;
	font-size: 14px;
	display: inline-block;
	vertical-align: middle;
}

/* --- 输入框本体 --- */

.tshow-search__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
	height: var( --tshow-search-height );
	margin: 0;
	padding: 0 6px 0 14px;
	background: var( --tshow-search-surface );
	border: 1px solid var( --tshow-search-line );
	border-radius: var( --tshow-search-radius );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tshow-search__form:hover {
	border-color: #c7cdd6;
}

.tshow-search__form:focus-within {
	border-color: var( --tshow-search-key );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --tshow-search-key ) 18%, transparent );
}

/* color-mix 不支持时的回退：用一层淡阴影表示聚焦。 */
@supports not ( color: color-mix( in srgb, red 50%, blue ) ) {
	.tshow-search__form:focus-within {
		box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.16 );
	}
}

.tshow-search__icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-right: 8px;
	color: var( --tshow-search-soft );
	pointer-events: none;
}

.tshow-search--mini .tshow-search__icon svg {
	width: 16px;
	height: 16px;
}

.tshow-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var( --tshow-search-ink );
	font: inherit;
	line-height: normal;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.tshow-search__input::placeholder {
	color: var( --tshow-search-soft );
	opacity: 1;
}

/* 浏览器自带的清除叉和我们自己的重复了，去掉。 */
.tshow-search__input::-webkit-search-decoration,
.tshow-search__input::-webkit-search-cancel-button,
.tshow-search__input::-webkit-search-results-button {
	-webkit-appearance: none;
	appearance: none;
}

.tshow-search__input:focus {
	outline: 0;
	box-shadow: none;
}

.tshow-search__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0 2px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 17, 24, 39, 0.07 );
	color: var( --tshow-search-soft );
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.tshow-search__clear:hover {
	background: rgba( 17, 24, 39, 0.14 );
	color: var( --tshow-search-ink );
}

.tshow-search__clear[hidden] {
	display: none;
}

.tshow-search__submit {
	flex: 0 0 auto;
	height: calc( var( --tshow-search-height ) - 12px );
	margin-left: 6px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var( --tshow-search-key );
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tshow-search__submit:hover,
.tshow-search__submit:focus-visible {
	background: var( --tshow-primary-hover, #1d4ed8 );
	color: #fff;
}

.tshow-search--mini .tshow-search__submit {
	padding: 0 14px;
	font-size: 13px;
}

/* --- 深色页头 --- */

.tshow-search--dark {
	--tshow-search-surface: rgba( 255, 255, 255, 0.1 );
	--tshow-search-line: rgba( 255, 255, 255, 0.28 );
	--tshow-search-ink: #fff;
	--tshow-search-soft: rgba( 255, 255, 255, 0.75 );
}

.tshow-search--dark .tshow-search__form:hover {
	border-color: rgba( 255, 255, 255, 0.5 );
}

.tshow-search--dark .tshow-search__clear {
	background: rgba( 255, 255, 255, 0.18 );
	color: #fff;
}

.tshow-search--dark .tshow-search__toggle {
	color: #fff;
}

/* --- 收起成图标的迷你版 --- */

.tshow-search__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var( --tshow-search-height );
	height: var( --tshow-search-height );
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: currentColor;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tshow-search__toggle:hover {
	background: rgba( 17, 24, 39, 0.06 );
}

.tshow-search--expandable .tshow-search__toggle {
	display: inline-flex;
}

.tshow-search--expandable {
	width: auto;
}

.tshow-search--expandable.is-collapsed .tshow-search__form {
	display: none;
}

.tshow-search--expandable:not( .is-collapsed ) {
	width: var( --tshow-search-width );
}

.tshow-search--expandable:not( .is-collapsed ) .tshow-search__toggle {
	display: none;
}

/* --- 下拉面板 --- */

.tshow-search__panel {
	position: absolute;
	z-index: 100000; /* 页头常有自己的层级，这里要压得住。 */
	top: calc( 100% + 8px );
	left: 0;
	width: 100%;
	min-width: 300px;
	max-height: min( 60vh, 440px );
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px;
	background: #fff;
	border: 1px solid var( --tshow-border, #ececf0 );
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba( 17, 24, 39, 0.16 );
	color: var( --tshow-text, #111827 );
	font-size: 14px;
	text-align: left;
}

.tshow-search__panel[hidden] {
	display: none;
}

/* 迷你框比结果窄，面板自己撑开；靠近视口右边时脚本会加 is-right 翻边。 */
.tshow-search--mini .tshow-search__panel {
	width: 360px;
	max-width: calc( 100vw - 32px );
}

.tshow-search__panel.is-right {
	left: auto;
	right: 0;
}

.tshow-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 8px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: background 0.12s ease;
}

.tshow-search__item:hover,
.tshow-search__item.is-active {
	background: rgba( 17, 24, 39, 0.05 );
	color: inherit;
	text-decoration: none;
}

/* 缩略图统一走 16:10，宽度一个变量定死。两块结果的图来源不同（站内是
   自己的截图，市场是 Envato 的预览图），尺寸和比例都不一样，不锁死的话
   一列下来高低参差，这是下拉里最显眼的毛病。 */
.tshow-search__thumb {
	position: relative;
	flex: 0 0 auto;
	width: var( --tshow-thumb-w, 76px );
	height: calc( var( --tshow-thumb-w, 76px ) / 1.6 );
	overflow: hidden;
	border-radius: 8px;
	background: rgba( 17, 24, 39, 0.06 );
}

.tshow-search__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	object-fit: cover;
	object-position: top center; /* 截图的信息都在顶部，别居中裁掉。 */
	border-radius: inherit;
}

.tshow-search__body {
	flex: 1 1 auto;
	min-width: 0;
}

.tshow-search__name {
	display: block;
	overflow: hidden;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tshow-search__name mark {
	padding: 0;
	background: transparent;
	color: var( --tshow-primary, #2563eb );
	font-weight: 700;
}

.tshow-search__meta {
	display: block;
	overflow: hidden;
	margin-top: 2px;
	color: var( --tshow-muted, #6b7280 );
	font-size: 12.5px;
	line-height: 1.4;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tshow-search__tag {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba( 37, 99, 235, 0.1 );
	background: color-mix( in srgb, var( --tshow-primary, #2563eb ) 12%, transparent );
	color: var( --tshow-primary, #2563eb );
	font-size: 11.5px;
	font-weight: 600;
	vertical-align: 1px;
}

.tshow-search__tag--featured {
	background: rgba( 240, 184, 73, 0.22 );
	color: #92610a;
}

.tshow-search__footer {
	display: block;
	margin-top: 4px;
	padding: 10px 10px 9px;
	border-top: 1px solid var( --tshow-border, #ececf0 );
	color: var( --tshow-primary, #2563eb );
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border-radius: 0 0 10px 10px;
}

.tshow-search__footer:hover,
.tshow-search__footer.is-active {
	background: rgba( 17, 24, 39, 0.05 );
	color: var( --tshow-primary-hover, #1d4ed8 );
}

.tshow-search__state {
	padding: 22px 16px;
	color: var( --tshow-muted, #6b7280 );
	text-align: center;
}

.tshow-search__state strong {
	display: block;
	margin-bottom: 4px;
	color: var( --tshow-text, #111827 );
	font-size: 14px;
}

.tshow-search__spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	border: 2px solid rgba( 17, 24, 39, 0.15 );
	border-top-color: var( --tshow-primary, #2563eb );
	border-radius: 50%;
	vertical-align: -3px;
	animation: tshow-search-spin 0.7s linear infinite;
}

@keyframes tshow-search-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tshow-search__spinner {
		animation-duration: 2s;
	}

	.tshow-search__form,
	.tshow-search__item,
	.tshow-search__submit {
		transition: none;
	}
}

/* --- 结果页上的搜索提示条 --- */

.tshow-search-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 24px;
	padding: 14px 18px;
	background: rgba( 17, 24, 39, 0.035 );
	border-radius: 12px;
	font-size: 0.95rem;
}

.tshow-search-summary__term {
	font-weight: 600;
}

.tshow-search-summary__count {
	color: var( --tshow-muted, #6b7280 );
}

.tshow-search-summary__clear {
	margin-left: auto;
	color: var( --tshow-primary, #2563eb );
	font-size: 0.9rem;
	text-decoration: none;
}

.tshow-search-summary__clear:hover {
	text-decoration: underline;
}

/* --- 手机 --- */

@media ( max-width: 600px ) {
	.tshow-search--wide {
		--tshow-search-height: 46px;
	}

	.tshow-search--wide .tshow-search__submit {
		padding: 0 14px;
	}

	.tshow-search__panel,
	.tshow-search--mini .tshow-search__panel {
		width: min( 92vw, 360px );
		min-width: 0;
	}

	.tshow-search {
		--tshow-thumb-w: 64px;
	}
}

/* --- 补进主题搜索下拉的那行描述 ---
   主题的下拉长什么样我们不知道，所以尽量不带自己的观点：字号和颜色都从
   周围继承，只保证它独占一行、不撑破容器。 */

.tshow-theme-desc {
	display: block;
	overflow: hidden;
	margin-top: 2px;
	color: inherit;
	font-size: 0.85em;
	font-weight: 400;
	line-height: 1.4;
	opacity: 0.7;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- 下拉里的分区（站内 / Envato 市场） --- */

.tshow-search__section + .tshow-search__section {
	margin-top: 2px;
}

.tshow-search__sectionTitle {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 10px 5px;
	color: var( --tshow-muted, #6b7280 );
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* 标题两边各一条细线，把两块结果分得干净些，又不至于像两个独立面板。 */
.tshow-search__sectionTitle::after {
	flex: 1 1 auto;
	height: 1px;
	background: var( --tshow-border, #ececf0 );
	content: "";
}

.tshow-search__state--inline {
	padding: 12px 10px;
	font-size: 13px;
	text-align: left;
}

/* 站外结果：右上角一个小箭头，点开是新标签页，别让人误以为还在站内。 */
.tshow-search__item--envato .tshow-search__name::after {
	content: "↗";
	margin-left: 5px;
	color: var( --tshow-muted, #6b7280 );
	font-size: 0.85em;
	font-weight: 400;
}

.tshow-search__tag--price {
	background: rgba( 16, 122, 84, 0.1 );
	color: #0b7a52;
}

/* 分区标题右边那行小字：中文关键词被译成英文时，标出实际搜的是哪个词。 */
.tshow-search__sectionNote {
	font-weight: 400;
	letter-spacing: 0;
	opacity: 0.8;
	text-transform: none;
}

/* --- 挂在主题搜索下拉旁边的 Envato 浮层 ---

   这块不进主题的 DOM，而是挂在 <body> 上、绝对定位到主题下拉的正下方
   （见 theme-search.js）。这样主题那棵树一个节点都不动，它的排版一点都
   不会受影响——「出现市场结果不能影响站内结果」这条要求，只有这样才是
   结构上成立的，而不是靠一条条样式去压。

   代价是这块得完全自足：背景、边框、阴影、字号、缩略图尺寸全都自己定，
   不继承任何东西。深浅配色由脚本按页面底色算好后写进变量。 */

.tshow-envato-pop {
	--tshow-pop-bg: #ffffff;
	--tshow-pop-fg: #111827;
	--tshow-pop-line: rgba( 17, 24, 39, 0.10 );
	--tshow-pop-hover: rgba( 17, 24, 39, 0.06 );
	--tshow-pop-thumb-w: 72px;
	--tshow-pop-thumb-h: 48px;

	position: absolute;
	z-index: 100001; /* 主题的下拉自己层级就高，这块得压得住。 */
	box-sizing: border-box;
	max-height: 60vh;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var( --tshow-pop-line );
	border-radius: 12px;
	background: var( --tshow-pop-bg );
	box-shadow: 0 18px 44px rgba( 0, 0, 0, 0.22 );
	color: var( --tshow-pop-fg );
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.4;
	text-align: left;
}

.tshow-envato-pop * {
	box-sizing: border-box;
}

.tshow-envato-pop__title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 10px 5px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	opacity: 0.6;
	text-transform: uppercase;
}

.tshow-envato-pop__note {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.tshow-envato-pop__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 10px;
	border-radius: 8px;
	color: inherit;
	font-size: 13.5px;
	font-weight: 400;
	text-decoration: none;
}

.tshow-envato-pop__item:hover,
.tshow-envato-pop__item:focus {
	background: var( --tshow-pop-hover );
	color: inherit;
	text-decoration: none;
}

/* 缩略图一律锁进同一个 16:10 的框，按 cover 裁切。Envato 的预览图有方有
   扁，不锁的话一列下来高低参差。 */
.tshow-envato-pop__thumb {
	display: block;
	flex: 0 0 auto;
	width: var( --tshow-pop-thumb-w );
	height: var( --tshow-pop-thumb-h );
	overflow: hidden;
	border-radius: 6px;
	background: var( --tshow-pop-hover );
}

.tshow-envato-pop__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border-radius: inherit;
	object-fit: cover;
	object-position: top center;
}

.tshow-envato-pop__body {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.tshow-envato-pop__name {
	display: block;
	overflow: hidden;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tshow-envato-pop__name::after {
	content: "↗";
	margin-left: 5px;
	font-size: 0.85em;
	opacity: 0.55;
}

.tshow-envato-pop__meta {
	display: block;
	overflow: hidden;
	margin-top: 2px;
	font-size: 12px;
	opacity: 0.62;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tshow-envato-pop__price {
	font-weight: 600;
	opacity: 0.9;
}

.tshow-envato-pop__more {
	display: block;
	margin-top: 2px;
	padding: 8px 10px;
	border-top: 1px solid var( --tshow-pop-line );
	color: inherit;
	font-size: 12.5px;
	font-weight: 600;
	opacity: 0.8;
	text-align: center;
	text-decoration: none;
}

.tshow-envato-pop__more:hover {
	background: var( --tshow-pop-hover );
	opacity: 1;
	text-decoration: none;
}

@media ( max-width: 600px ) {
	.tshow-envato-pop {
		--tshow-pop-thumb-w: 56px;
		--tshow-pop-thumb-h: 38px;
	}
}

/* --- 全站右上角的悬浮迷你搜索框 ---
   位置、宽度、层级都由设置写进内联变量，这里只定行为。 */

.tshow-float-search {
	position: fixed;
	z-index: var( --tshow-float-z, 9990 );
	top: var( --tshow-float-top, 24px );
	right: var( --tshow-float-right, 24px );
	line-height: 1;
}

/* 登录状态下顶部有管理工具条，往下让一让。 */
.tshow-float-search--adminbar {
	top: calc( var( --tshow-float-top, 24px ) + 32px );
}

/* 收起状态是一个圆图标，给它一层底和阴影，否则浮在页面上认不出是可点的。 */
.tshow-float-search .tshow-search__toggle {
	border: 1px solid var( --tshow-border, #e5e7eb );
	background: var( --tshow-bg, #ffffff );
	box-shadow: 0 6px 18px rgba( 17, 24, 39, 0.14 );
}

.tshow-float-search .tshow-search--dark .tshow-search__toggle {
	border-color: rgba( 255, 255, 255, 0.28 );
	background: rgba( 20, 22, 26, 0.72 );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.35 );
}

/* 展开后的输入框同样要能从页面里跳出来。 */
.tshow-float-search .tshow-search__form {
	box-shadow: 0 6px 18px rgba( 17, 24, 39, 0.14 );
}

/* 贴着右边缘，下拉一律向左展开。 */
.tshow-float-search .tshow-search__panel {
	right: 0;
	left: auto;
}

@media ( max-width: 782px ) {
	.tshow-float-search--adminbar {
		/* 手机上的管理工具条是 46px 高。 */
		top: calc( var( --tshow-float-top, 24px ) + 46px );
	}

	.tshow-float-search--desktop {
		display: none;
	}

	.tshow-float-search {
		top: calc( var( --tshow-float-top, 24px ) / 1.5 );
		right: calc( var( --tshow-float-right, 24px ) / 1.5 );
	}
}

/* --- 搜索结果页底部的「Envato 市场」区块 ---
   卡片的比例、圆角、留白都对着站内的模板卡片走，两块看着是一页里的东西，
   只是右上角的 ↗ 和价格说明它通向站外。 */

.tshow-market {
	margin: 40px 0 8px;
	padding-top: 28px;
	border-top: 1px solid var( --tshow-border, #ececf0 );
}

.tshow-market__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 18px;
}

.tshow-market__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.tshow-market__note {
	color: var( --tshow-muted, #6b7280 );
	font-size: 0.85rem;
}

.tshow-market__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
}

.tshow-market__card {
	display: block;
	overflow: hidden;
	border: 1px solid var( --tshow-border, #ececf0 );
	border-radius: var( --tshow-radius, 12px );
	background: var( --tshow-bg, #fff );
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.tshow-market__card:hover {
	box-shadow: 0 12px 28px rgba( 17, 24, 39, 0.12 );
	color: inherit;
	text-decoration: none;
	transform: translateY( -2px );
}

.tshow-market__thumb {
	display: block;
	position: relative;
	overflow: hidden;
	padding-top: 62.5%; /* 16:10，和站内卡片一致 */
	background: rgba( 17, 24, 39, 0.06 );
}

.tshow-market__thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: top center;
}

.tshow-market__body {
	display: block;
	padding: 12px 14px 14px;
}

.tshow-market__name {
	display: block;
	overflow: hidden;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	/* 标题两行封顶，卡片高度才齐。 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.tshow-market__name::after {
	content: "↗";
	margin-left: 5px;
	font-size: 0.85em;
	opacity: 0.5;
}

.tshow-market__meta {
	display: block;
	overflow: hidden;
	margin-top: 6px;
	color: var( --tshow-muted, #6b7280 );
	font-size: 0.82rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tshow-market__price {
	color: #0b7a52;
	font-weight: 700;
}

.tshow-market__more {
	display: inline-block;
	margin-top: 20px;
	padding: 9px 20px;
	border: 1px solid var( --tshow-border, #ececf0 );
	border-radius: 999px;
	color: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.tshow-market__more:hover {
	border-color: var( --tshow-primary, #2563eb );
	color: var( --tshow-primary, #2563eb );
	text-decoration: none;
}

/* 加载骨架：先占住位置，内容回来再替换，页面不会跳。 */
.tshow-market__skeleton {
	padding-top: 62.5%;
	border-radius: var( --tshow-radius, 12px );
	background: rgba( 17, 24, 39, 0.06 );
	animation: tshow-market-pulse 1.4s ease-in-out infinite;
}

@keyframes tshow-market-pulse {
	50% {
		opacity: 0.55;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tshow-market__skeleton {
		animation: none;
	}

	.tshow-market__card {
		transition: none;
	}
}

@media ( max-width: 600px ) {
	.tshow-market {
		margin-top: 28px;
		padding-top: 20px;
	}

	.tshow-market__grid {
		gap: 14px;
		grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	}
}

/* 区块标题旁的上下文：分类页上写明这批市场模板是按哪个分类找的。 */
.tshow-market__for {
	color: var( --tshow-muted, #6b7280 );
	font-size: 0.9rem;
}

/* 「发送模板的标题给客服即可，无需购买」。卡片点过去是站外的售卖页，价格
   就摆在那儿，不先把这句说清楚，看到价格的人多半就走了。所以它跟着标题走，
   而不是塞在整块的最下面等人翻到。 */
.tshow-market__hint {
	color: var( --tshow-primary, #2563eb );
	font-size: 0.85rem;
	font-weight: 600;
}

/* --- 分类名带分隔符时拆成的几组 ---
   「能源/电池/光伏」是三个并列的词，不是一个词组。每组一个小标题、一行卡片，
   看的人能对上「这一行是按哪个词找的」。 */

.tshow-market__group + .tshow-market__group {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px dashed var( --tshow-border, #ececf0 );
}

.tshow-market__subhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 14px;
}

.tshow-market__subhead .tshow-market__for {
	color: inherit;
	font-size: 0.95rem;
	font-weight: 600;
}

/* 拆开之后每组下面各有一个「在 Envato 查看全部」，按钮离本组的卡片近一些，
   免得和下一组的标题黏在一起。 */
.tshow-market--split .tshow-market__more {
	margin-top: 14px;
}

@media ( max-width: 600px ) {
	.tshow-market__group + .tshow-market__group {
		margin-top: 22px;
		padding-top: 18px;
	}
}