/**
 * Teco Loop Grid：独立查询循环（WP_Query）的网格样式，BEM 前缀 teco-loop-grid__*。
 * 不依赖 Woo 商店 ul.products / li.product，与「相关产品」小工具样式解耦。
 * 列数：容器查询 + --teco-lg-cols-m/t/d。
 */
.elementor-widget-teco-loop-grid .teco-loop-grid {
	width: 100%;
	max-width: 100%;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__inner {
	container-type: inline-size;
	container-name: teco-lg;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__block-title {
	margin: 0 0 1em;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__empty {
	margin: 0;
	padding: 0.75em 0;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__inner ul.teco-loop-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-auto-flow: row;
	align-items: stretch;
	justify-items: center;
	gap: 2.5rem 1.5rem;
	grid-template-columns: repeat(var(--teco-lg-cols-m, 2), minmax(0, 1fr));
	grid-auto-rows: minmax(0, auto);
}

.elementor-widget-teco-loop-grid .teco-loop-grid__inner ul.teco-loop-grid__list::before,
.elementor-widget-teco-loop-grid .teco-loop-grid__inner ul.teco-loop-grid__list::after {
	content: none;
	display: none;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__item {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	grid-column: auto;
	justify-self: stretch;
	box-sizing: border-box;
	margin: 0;
	height: auto;
	/* 勿用 overflow-x: hidden，会裁掉子级 .teco-loop-grid__card 的 box-shadow */
	overflow: visible;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Loop 项模板：内嵌 Elementor 根节点，避免撑破网格 */
.elementor-widget-teco-loop-grid .teco-loop-grid__template {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__template > .elementor {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	/* 让 border-radius 对卡片内所有子元素（含顶部图片）同等裁剪，使四个角的圆角视觉一致 */
	overflow: hidden;
	/* Elementor「产品卡片 → 卡片整体缩放」：--teco-lg-card-scale，默认 1 */
	transform: scale(var(--teco-lg-card-scale, 1));
	transform-origin: top center;
}

@container teco-lg (min-width: 768px) {
	.elementor-widget-teco-loop-grid .teco-loop-grid__inner ul.teco-loop-grid__list {
		grid-template-columns: repeat(var(--teco-lg-cols-t, 3), minmax(0, 1fr));
	}
}

@container teco-lg (min-width: 1024px) {
	.elementor-widget-teco-loop-grid .teco-loop-grid__inner ul.teco-loop-grid__list {
		grid-template-columns: repeat(var(--teco-lg-cols-d, 4), minmax(0, 1fr));
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 768px) {
		.elementor-widget-teco-loop-grid .teco-loop-grid__inner ul.teco-loop-grid__list {
			grid-template-columns: repeat(var(--teco-lg-cols-t, 3), minmax(0, 1fr));
		}
	}

	@media (min-width: 1024px) {
		.elementor-widget-teco-loop-grid .teco-loop-grid__inner ul.teco-loop-grid__list {
			grid-template-columns: repeat(var(--teco-lg-cols-d, 4), minmax(0, 1fr));
		}
	}
}

/* 图片区：固定竖向比例（默认 3:4，由容器 --teco-lg-media-aspect 控制），图在框内等比例缩放；背景默认白（Elementor 样式可覆盖） */
.elementor-widget-teco-loop-grid .teco-loop-grid__media-link {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--teco-lg-media-aspect, 3 / 4);
	flex: 0 0 auto;
	min-height: 0;
	text-decoration: none;
	overflow: hidden;
	border-radius: inherit;
	box-sizing: border-box;
	background-color: #fff;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__media-link img {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	/* 默认 90%，Elementor selector 直接覆盖此 width/height，translate 始终保持居中 */
	width: 90%;
	height: 90%;
	transform: translate(-50%, -50%);
	object-fit: contain;
	object-position: center;
	border-radius: inherit;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__media-placeholder {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	background: rgba(0, 0, 0, 0.06);
	border-radius: inherit;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__entry-title {
	flex: 0 0 auto;
	font-size: inherit;
	font-weight: 400;
	margin: 0.65em 0 0;
	padding: 0 0.25em;
	line-height: 1.35;
	text-align: center;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__entry-title a {
	color: inherit;
	text-decoration: none;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__entry-title a:hover {
	text-decoration: underline;
}

/* 分页：与 .page-numbers 约定一致，便于接主题与 WooCommerce 分页样式 */
.elementor-widget-teco-loop-grid .teco-loop-grid__pagination {
	margin: 1.25em 0 0;
	padding: 0;
	text-align: center;
	box-sizing: border-box;
	width: 100%;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__pagination ul.page-numbers {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	justify-content: center;
	align-items: center;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__pagination .page-numbers {
	display: inline-block;
	padding: 0.35em 0.65em;
	text-decoration: none;
	border: 1px solid rgba(142, 100, 180, 0.35);
	border-radius: 4px;
	line-height: 1.25;
	box-sizing: border-box;
	/* 与首屏 <a> 链接色一致；AJAX 的 <button> 不再继承灰字 */
	color: var(--e-global-color-accent, var(--e-global-color-primary, #e87722));
}

.elementor-widget-teco-loop-grid .teco-loop-grid__pagination .page-numbers.current {
	font-weight: 600;
	background: rgba(142, 100, 180, 0.12);
	color: var(--e-global-color-text, #333333);
}

.elementor-widget-teco-loop-grid .teco-loop-grid__pagination .page-numbers.dots {
	color: var(--e-global-color-text, #555555);
	background: transparent;
	cursor: default;
}

/* AJAX 换页后分页为 <button>：去掉系统默认按钮皮，颜色走上一段 .page-numbers */
.elementor-widget-teco-loop-grid .teco-loop-grid__pagination button.page-numbers {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	font: inherit;
	line-height: inherit;
	background: transparent;
	cursor: pointer;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__pagination button.page-numbers:hover,
.elementor-widget-teco-loop-grid .teco-loop-grid__pagination button.page-numbers:focus-visible {
	background: transparent;
}

/* ── 工具栏（排序）─────────────────────────────────────────────────────────── */
.elementor-widget-teco-loop-grid .teco-loop-grid__toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	margin: 0 0 0.85em;
	box-sizing: border-box;
}

.elementor-widget-teco-loop-grid .teco-loop-grid__toolbar-end {
	flex: 0 0 auto;
}

.elementor-widget-teco-loop-grid .teco-loop-grid-ordering__form {
	margin: 0;
}

.elementor-widget-teco-loop-grid .teco-loop-grid-ordering__select.orderby {
	max-width: 100%;
	min-width: 11rem;
	cursor: pointer;
	font: inherit;
	line-height: inherit;
	padding: 0.35em 0.65em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
}
