/**
 * 闪得 分类产品网格 - 作用域适配样式
 *
 * 复用 css/category.css（图片/图标瀑布流卡）与 css/music.css（音频轨道波形）视觉，
 * 这里补充网格布局（图标/视频/音频）与视频卡专属样式，全部限定在 .shande-cat-products 作用域内，
 * 支持一页多个实例。列数由内联 --cat-cols 变量控制（小部件设置）。
 */

/* ---------- 通用网格容器（图标/视频/音频扁平布局） ---------- */
.shande-cat-products .music-track-fav .shande-fav-btn__label { display: none; }
.shande-cat-products .music-track-fav.shande-fav-btn.is-favorited,
.shande-cat-products .music-track-fav.shande-fav-btn.is-favorited:hover {
	color: #f59e0b;
}
.shande-cat-products .music-track-fav.shande-fav-btn.is-favorited .shande-fav-btn__icon {
	fill: currentColor;
	stroke: currentColor;
}
.shande-cat-products .cat-grid {
	display: grid;
	width: 100%;
}

/* ---------- 图标网格（复刻源码 css/icons.css 的 .icon-card） ---------- */
.shande-cat-products .cat-grid--icon {
	grid-template-columns: repeat(var(--cat-cols, 8), 1fr);
	gap: 16px;
}
/* 图标卡：竖排居中，悬停上浮 */
.shande-cat-products .cat-grid--icon .icon-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.shande-cat-products .cat-grid--icon .icon-card:hover {
	transform: translateY(-4px);
}
/* 预览方格：灰底 + 14px 圆角，悬停轻微放大 */
.shande-cat-products .cat-grid--icon .icon-card__preview {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f7fa;
	transition: transform 0.3s;
	overflow: hidden;
}
.shande-cat-products .cat-grid--icon .icon-card:hover .icon-card__preview {
	transform: scale(1.05);
}
/* 占位 SVG 图标：描边色，悬停变主色 */
.shande-cat-products .cat-grid--icon .icon-card__preview svg {
	stroke: #4b5563;
	transition: stroke 0.2s;
}
.shande-cat-products .cat-grid--icon .icon-card:hover .icon-card__preview svg {
	stroke: #096ddd;
}
/* 上传的 SVG/图片图标：等比缩放在方格内居中 */
.shande-cat-products .cat-grid--icon .icon-card__img {
	width: 56%;
	height: 56%;
	object-fit: contain;
	display: block;
}
/* 图标名称：12px，悬停变主色，超出省略 */
.shande-cat-products .cat-grid--icon .icon-card__name {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 500;
	color: #4b5563;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	transition: color 0.2s;
}
.shande-cat-products .cat-grid--icon .icon-card:hover .icon-card__name {
	color: #096ddd;
}

/* ---------- 视频网格 ---------- */
.shande-cat-products .cat-grid--video {
	grid-template-columns: repeat(var(--cat-cols, 4), 1fr);
	gap: 18px;
}
.shande-cat-products .cat-video-card {
	cursor: pointer;
	border-radius: 10px;
	overflow: hidden;
}
.shande-cat-products .cat-video-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 10px;
	overflow: hidden;
}
.shande-cat-products .cat-video-badge {
	position: absolute;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 4px;
	line-height: 1.4;
}
.shande-cat-products .cat-video-badge--quality {
	top: 8px;
	left: 8px;
}
.shande-cat-products .cat-video-badge--duration {
	bottom: 8px;
	right: 8px;
}
.shande-cat-products .cat-video-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	background: rgba(0, 0, 0, 0.3);
}
.shande-cat-products .cat-video-card:hover .cat-video-play {
	opacity: 1;
}
.shande-cat-products .cat-video-name {
	padding: 10px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: #1d2129;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- 音频列表（复刻源码 music.css：每行占满宽度；列数由 --cat-cols 控制） ---------- */
.shande-cat-products .cat-grid--audio {
	display: grid;
	grid-template-columns: repeat(var(--cat-cols, 1), 1fr);
	gap: 16px;
}
.shande-cat-products .cat-grid--audio .music-track-item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 24px 28px;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	background: #fff;
	transition: box-shadow 0.2s, border-color 0.2s;
	position: relative;
	cursor: pointer;
}
.shande-cat-products .cat-grid--audio .music-track-item:hover {
	border-color: #d1d5db;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.shande-cat-products .cat-grid--audio .music-track-play {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: #096ddd;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-right: 16px;
	transition: transform 0.2s;
}
.shande-cat-products .cat-grid--audio .music-track-play:hover {
	transform: scale(1.1);
}
.shande-cat-products .cat-grid--audio .music-track-play svg {
	width: 44px;
	height: 44px;
}
.shande-cat-products .cat-grid--audio .music-track-info {
	flex: 1;
	min-width: 0;
	padding-top: 2px;
}
.shande-cat-products .cat-grid--audio .music-track-name {
	font-size: 16px;
	font-weight: 600;
	color: #1d2129;
	margin-bottom: 4px;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.shande-cat-products .cat-grid--audio .music-track-tags {
	font-size: 13px;
	color: #86909c;
	margin-bottom: 3px;
}
.shande-cat-products .cat-grid--audio .music-track-meta {
	font-size: 12.5px;
	color: #a8abb2;
}
.shande-cat-products .cat-grid--audio .music-track-fav {
	position: absolute;
	top: 24px;
	right: 28px;
	border: none;
	background: transparent;
	color: #c9cdd4;
	cursor: pointer;
	padding: 4px;
	transition: color 0.2s ease;
}
.shande-cat-products .cat-grid--audio .music-track-fav:hover,
.shande-cat-products .cat-grid--audio .music-track-fav.is-faved {
	color: #096ddd;
}
.shande-cat-products .cat-grid--audio .music-track-wave {
	width: 100%;
	padding-left: 64px;
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.shande-cat-products .cat-grid--audio .music-track-waveform {
	flex: 1;
	height: 30px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
/* 底层灰色波形（完整） */
.shande-cat-products .cat-grid--audio .music-track-waveform .wave-bg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
}
.shande-cat-products .cat-grid--audio .music-track-waveform .wave-bg span {
	flex: 1 1 0;
	min-width: 0;
	background: #c9cdd4;
	margin-right: 1px;
}
/* 与详情页一致：完整波形保持全宽，仅裁剪已播放部分。 */
.shande-cat-products .cat-grid--audio .music-track-waveform .wave-played {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100% !important;
	clip-path: inset(0 100% 0 0);
	overflow: hidden;
	display: flex;
	align-items: center;
	pointer-events: none;
	transition: none;
}
.shande-cat-products .cat-grid--audio .music-track-waveform .wave-played span {
	flex: 1 1 0;
	min-width: 0;
	background: #4e5969;
	margin-right: 1px;
}
.shande-cat-products .cat-grid--audio .music-track-item.is-playing .music-track-waveform .wave-played span {
	background: #096ddd;
}
/* 时长文本 */
.shande-cat-products .cat-grid--audio .music-track-duration {
	font-size: 12.5px;
	color: #86909c;
	white-space: nowrap;
	min-width: 38px;
	text-align: right;
	flex-shrink: 0;
}
/* 播放中：整行高亮 + 播放键变主色 */
.shande-cat-products .cat-grid--audio .music-track-item.is-playing {
	border-color: #096ddd;
	background: #f0f9ff;
}
.shande-cat-products .cat-grid--audio .music-track-item.is-playing .music-track-play {
	color: #096ddd;
}
/* 播放中：SVG 隐藏，改显均衡器条动画 */
.shande-cat-products .cat-grid--audio .music-track-item.is-playing .music-track-play svg {
	display: none;
}
.shande-cat-products .cat-grid--audio .music-track-play .audio-bars {
	display: none;
	width: 24px;
	height: 24px;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
}
.shande-cat-products .cat-grid--audio .music-track-item.is-playing .music-track-play .audio-bars {
	display: flex;
}
.shande-cat-products .cat-grid--audio .audio-bars span {
	display: block;
	width: 3.5px;
	background: #096ddd;
	border-radius: 1.5px;
	transform-origin: bottom;
}
.shande-cat-products .cat-grid--audio .audio-bars span:nth-child(1) {
	animation: shandeCatBar1 1.8s ease-in-out infinite;
}
.shande-cat-products .cat-grid--audio .audio-bars span:nth-child(2) {
	animation: shandeCatBar2 1.5s ease-in-out infinite;
}
.shande-cat-products .cat-grid--audio .audio-bars span:nth-child(3) {
	animation: shandeCatBar3 2s ease-in-out infinite;
}
@keyframes shandeCatBar1 {
	0%   { height: 6px; }
	50%  { height: 22px; }
	100% { height: 6px; }
}
@keyframes shandeCatBar2 {
	0%   { height: 20px; }
	50%  { height: 8px; }
	100% { height: 20px; }
}
@keyframes shandeCatBar3 {
	0%   { height: 10px; }
	50%  { height: 24px; }
	100% { height: 10px; }
}

/* ---------- 「全部」混合视图里的图标卡 ----------
 * 混合视图下图标产品与图片产品同处瀑布流列（.products-col），没有 .cat-grid--icon
 * 外层，需在此单独给图标卡补样式：灰底圆角方格 + 居中小图标（SVG/图片等比缩放），
 * 避免线性图标被当成大图铺满、裁成黑块。方格高度收敛，读起来就是「小图标」而非大图。 */
.shande-cat-products .products-grid--mixed .products-col .icon-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.shande-cat-products .products-grid--mixed .products-col .icon-card:hover {
	transform: translateY(-4px);
}
.shande-cat-products .products-grid--mixed .products-col .icon-card__preview {
	width: 100%;
	height: 160px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f7fa;
	transition: transform 0.3s;
	overflow: hidden;
}
.shande-cat-products .products-grid--mixed .products-col .icon-card:hover .icon-card__preview {
	transform: scale(1.05);
}
.shande-cat-products .products-grid--mixed .products-col .icon-card__preview svg {
	width: 44px;
	height: 44px;
	stroke: #4b5563;
	transition: stroke 0.2s;
}
.shande-cat-products .products-grid--mixed .products-col .icon-card:hover .icon-card__preview svg {
	stroke: #096ddd;
}
/* 上传的 SVG/图片图标：等比缩放居中，不铺满方格 */
.shande-cat-products .products-grid--mixed .products-col .icon-card__img {
	max-width: 45%;
	max-height: 45%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.shande-cat-products .products-grid--mixed .products-col .icon-card__name {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 500;
	color: #4b5563;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	transition: color 0.2s;
}
.shande-cat-products .products-grid--mixed .products-col .icon-card:hover .icon-card__name {
	color: #096ddd;
}

/* ---------- 图片卡固定比例（其他素材自定义比例用） ---------- */
.shande-cat-products .product-thumb--fixed {
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}

/* ---------- 响应式 ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.shande-cat-products .cat-grid--video {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 768px) {
	/* 分类与搜索共用图片瀑布流：缩小列间留白，列数仍由原布局控制。 */
	.shande-cat-products.shande-templates[data-layout="waterfall"] .products-grid,
	.shande-cat-products.shande-templates[data-layout="waterfall"] .products-col {
		gap: 10px;
	}
	.shande-cat-products .cat-grid--icon {
		grid-template-columns: repeat(4, 1fr);
	}
	.shande-cat-products .cat-grid--video {
		grid-template-columns: repeat(2, 1fr);
	}
	.shande-cat-products .cat-grid--audio {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 480px) {
	.shande-cat-products .cat-grid--icon {
		grid-template-columns: repeat(3, 1fr);
	}
	.shande-cat-products .cat-grid--video {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 图片分类卡与首页模板卡共用完整视觉结构。
   分类页已有自己的瀑布列宽，因此这里只解除首页 .templates-col 的列宽计算。 */
.shande-cat-products.shande-templates .products-col > .templates-col {
	flex: none;
	width: 100%;
	min-width: 0;
}

.shande-cat-products.shande-templates .template-card--vertical {
	min-height: 0;
}

/* ============================================================
   搜索结果页（search.php）
   模板直接复用「分类产品网格」的卡片渲染，这里只补页面级的外边距
   与空态样式。卡片、瀑布流、加载更多的样式全部沿用上方规则。
   ============================================================ */
.shande-search-results {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* 统计条与分类页同款，但搜索页没有右侧需求广场提示，留白收一下。 */
.shande-search-results .results-stat-bar {
  margin-bottom: 16px;
}

/* 无结果 / 空关键词 / 组件缺失：统一一张居中说明，不摆假卡片。 */
.shande-search-empty {
  padding: 72px 20px 88px;
  text-align: center;
}

.shande-search-empty__title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  color: #161f2b;
}

.shande-search-empty__desc {
  max-width: 460px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.9;
  color: #6b7486;
}

@media (max-width: 768px) {
  .shande-search-results {
    padding: 16px 14px 36px;
  }

  .shande-search-empty {
    padding: 52px 16px 64px;
  }

  .shande-search-empty__title {
    font-size: 19px;
  }
}

/* Responsive native masonry redistributes cards before removing spare columns.
   Override the legacy nth-child display:none rules only for initialised roots.
   Font-only list/cover layouts retain the tryout plugin's display:contents. */
.shande-cat-products.sd-cat-responsive-columns:not(.zgft-all-fonts) .products-grid > .products-col {
  display: flex;
  min-width: 0;
}

/* Compact two-column phone prices; dedicated font tryout list is unchanged. */
@media (max-width: 480px) {
  .shande-cat-products.shande-templates:not([data-zg-current-view="list"]) .template-card--vertical {
    padding-bottom: 6px;
  }
  .shande-cat-products.shande-templates:not([data-zg-current-view="list"]) .template-card--vertical > .template-pricing {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: minmax(29px, auto);
    gap: 4px;
    align-items: start;
    min-height: 29px;
  }
  /* The non-member preview button can wrap to two short lines on narrow phones. */
  .shande-cat-products.shande-templates:not([data-zg-current-view="list"]):has(.template-pricing--preview) .template-card--vertical > .template-pricing {
    grid-template-rows: minmax(40px, auto);
    min-height: 40px;
  }
  .shande-cat-products.shande-templates:not([data-zg-current-view="list"]):has(.template-pricing--member) .template-card--vertical > .template-pricing {
    grid-template-rows: minmax(29px, auto) minmax(16px, auto);
    min-height: 49px;
  }
  .shande-cat-products.shande-templates:not([data-zg-current-view="list"]) .template-card--vertical > .template-pricing--member {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
  .shande-cat-products.shande-templates:not([data-zg-current-view="list"]) .template-card--vertical > .template-pricing--member > .template-pricing__member-line {
    display: contents;
  }
  .shande-cat-products.shande-templates:not([data-zg-current-view="list"]) .template-card--vertical > .template-pricing--member > .template-pricing__member-line > strong {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 18px;
    line-height: 1.35;
  }
  .shande-cat-products.shande-templates:not([data-zg-current-view="list"]) .template-pricing__member-line > strong > .template-pricing__label {
    font-size: 10px;
    font-weight: 500;
  }
  .shande-cat-products.shande-templates:not([data-zg-current-view="list"]) .template-card--vertical > .template-pricing--member > del {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }
  .shande-cat-products.shande-templates:not([data-zg-current-view="list"]) .template-card--vertical > .template-pricing--member > .template-pricing__member-line > em {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    margin: 0;
    padding: 0 5px;
    line-height: 16px;
    white-space: nowrap;
  }
}