/**
 * Yitu Storefront —— 商品归档无限滚动。
 *
 * 骨架卡片复用主题的 li.product 列宽，所以不设宽度，只填内容占位，
 * 避免加载中列数变化造成 CLS。
 */

.ysf-is {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 8px 0 4px;
}

/* 触发器本身不占视觉空间，只作为 IntersectionObserver 的锚。 */
.ysf-is-sentinel {
	width: 100%;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.ysf-is-progress {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #6b7280;
	text-align: center;
}

.ysf-is-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 24px;
	font-size: 14px;
	color: #4b5563;
}

.ysf-is-spinner {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	border: 2px solid rgba(107, 114, 128, .25);
	border-top-color: #374151;
	border-radius: 50%;
	animation: ysf-is-spin .7s linear infinite;
}

@keyframes ysf-is-spin {
	to { transform: rotate(360deg); }
}

.ysf-is-more,
.ysf-is-retry {
	appearance: none;
	min-width: 220px;
	padding: 12px 28px;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	background: #fff;
	color: #111827;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}

.ysf-is-more:hover,
.ysf-is-retry:hover {
	background: #111827;
	border-color: #111827;
	color: #fff;
	box-shadow: 0 6px 18px rgba(17, 24, 39, .16);
}

.ysf-is-more:active,
.ysf-is-retry:active {
	transform: translateY(1px);
	box-shadow: none;
}

.ysf-is-more:focus-visible,
.ysf-is-retry:focus-visible {
	outline: 2px solid #111827;
	outline-offset: 2px;
}

.ysf-is-retry {
	min-width: 0;
	border-color: #dc2626;
	color: #b91c1c;
}

.ysf-is-retry:hover {
	background: #b91c1c;
	border-color: #b91c1c;
}

/* ── 骨架 ───────────────────────────────────────────────────────── */

.ysf-is-skeleton {
	list-style: none;
	pointer-events: none;
}

.ysf-is-skeleton-thumb,
.ysf-is-skeleton-line {
	background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 37%, #eef0f3 63%);
	background-size: 400% 100%;
	animation: ysf-is-shimmer 1.4s ease infinite;
	border-radius: 6px;
}

.ysf-is-skeleton-thumb {
	aspect-ratio: 1 / 1;
	width: 100%;
	margin-bottom: 12px;
}

.ysf-is-skeleton-line {
	height: 12px;
	margin: 0 12px 8px;
}

.ysf-is-skeleton-line--short {
	width: 55%;
}

@keyframes ysf-is-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* ── 新卡片入场 ─────────────────────────────────────────────────── */

.ysf-is-new {
	animation: ysf-is-enter .32s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes ysf-is-enter {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* ── 分页导航：弱化，不移除 ─────────────────────────────────────── */
/* 爬虫靠这些 <a> 发现第 2 页往后的全部商品，只能改样式，不能摘。 */

.ysf-is-pagination-label {
	margin: 4px 0 0;
	font-size: 12px;
	color: #9ca3af;
	text-align: center;
}

.woocommerce-pagination.ysf-is-pagination {
	opacity: .62;
	transform: scale(.92);
	transform-origin: center top;
	transition: opacity .2s ease;
}

.woocommerce-pagination.ysf-is-pagination:hover,
.woocommerce-pagination.ysf-is-pagination:focus-within {
	opacity: 1;
}

.ysf-is.is-done + .ysf-is-pagination-label,
.ysf-is.is-done ~ .woocommerce-pagination.ysf-is-pagination {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ysf-is-spinner,
	.ysf-is-skeleton-thumb,
	.ysf-is-skeleton-line,
	.ysf-is-new {
		animation: none;
	}

	.ysf-is-more,
	.ysf-is-retry,
	.woocommerce-pagination.ysf-is-pagination {
		transition: none;
	}
}

/* ── 接管后收起底部控制条 ───────────────────────────────────────── */
/* 只靠 class 收起视觉，DOM 节点一个不删：那些分页 <a> 是 Googlebot 发现
   第 2 页往后全部商品的唯一途径，而它不滚动页面，也就永远不会走到这个状态。 */

.ysf-is-controls-hidden > .woocommerce-result-count,
.ysf-is-controls-hidden > .ysf-is-pagination-label,
.ysf-is-controls-hidden > .woocommerce-pagination {
	display: none;
}

.ysf-is-controls-hidden > .ysf-is {
	padding: 0;
	gap: 0;
}