/**
 * Motto Planet – Blocksy Infinite Scroll UX v1.3.0
 *
 * VISUAL / PERFORMANCE NOTES
 * - The outer card border and shadow were removed.
 * - Skeletons mirror the live vertical product-card rhythm: image, two-line
 *   title and price row.
 * - The skeleton column count is supplied from the real product grid.
 * - One group-level opacity animation is used; there is no multi-layer shimmer.
 * - Animated properties remain transform and opacity.
 */
.mp-isux {
	position: relative;
	isolation: isolate;
	contain: layout paint style;
	box-sizing: border-box;
	width: 100%;
	margin: clamp(24px, 3.4vw, 44px) auto 16px;
	padding: 0;
	color: var(--mp-isux-text, #20242b);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.mp-isux__progress {
	position: relative;
	width: min(100%, 520px);
	height: 2px;
	margin: 0 auto 18px;
	background: color-mix(in srgb, var(--mp-isux-accent, #b05875) 10%, transparent);
	border-radius: 999px;
	overflow: hidden;
	opacity: 0;
	transition: opacity .18s ease;
}

.mp-isux__progress span {
	display: block;
	width: 38%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, transparent, var(--mp-isux-accent, #b05875), transparent);
	transform: translate3d(-130%, 0, 0);
}

.mp-isux[data-state="loading"] .mp-isux__progress {
	opacity: 1;
}

.mp-isux[data-state="loading"] .mp-isux__progress span {
	will-change: transform;
	animation: mp-isux-progress 1.15s cubic-bezier(.45, 0, .55, 1) infinite;
}

.mp-isux__main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 52px;
	padding-inline: 14px;
	text-align: left;
}

.mp-isux__copy {
	display: grid;
	gap: 3px;
}

.mp-isux__title {
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.018em;
}

.mp-isux__text {
	color: var(--mp-isux-muted, #6f7680);
	font-size: clamp(13px, 1.2vw, 15px);
	line-height: 1.45;
}

.mp-isux__icon {
	display: none;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--mp-isux-accent, #b05875);
	background: color-mix(in srgb, var(--mp-isux-accent, #b05875) 9%, #fff);
	border: 1px solid color-mix(in srgb, var(--mp-isux-accent, #b05875) 18%, transparent);
	border-radius: 50%;
}

.mp-isux__icon svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mp-isux[data-state="ready"] .mp-isux__icon--arrow,
.mp-isux[data-state="loading"] .mp-isux__icon--spinner,
.mp-isux[data-state="loaded"] .mp-isux__icon--check,
.mp-isux[data-state="end"] .mp-isux__icon--check {
	display: inline-flex;
}

.mp-isux__icon--spinner span,
.mp-isux-toast__spinner {
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 2px solid color-mix(in srgb, var(--mp-isux-accent, #b05875) 23%, transparent);
	border-top-color: var(--mp-isux-accent, #b05875);
	border-radius: 50%;
	will-change: transform;
	animation: mp-isux-spin .72s linear infinite;
}

.mp-isux[data-state="loaded"] .mp-isux__icon,
.mp-isux[data-state="end"] .mp-isux__icon {
	color: #397454;
	background: #edf8f1;
	border-color: #d4eddd;
}

/* Product-card-shaped skeleton grid. */
.mp-isux__skeletons {
	display: grid;
	grid-template-columns: repeat(var(--mp-isux-columns, 3), minmax(0, 1fr));
	gap: var(--grid-columns-gap, clamp(16px, 2vw, 28px));
	max-height: 0;
	margin-top: 0;
	opacity: 0;
	overflow: hidden;
	transform: translate3d(0, 8px, 0);
	transition: max-height .3s ease, margin .3s ease, opacity .22s ease, transform .3s ease;
}

.mp-isux[data-state="loading"] .mp-isux__skeletons:not([hidden]) {
	max-height: 1800px;
	margin-top: clamp(22px, 3vw, 36px);
	opacity: 1;
	transform: translate3d(0, 0, 0);
	animation: mp-isux-pulse 1.2s ease-in-out infinite;
}

.mp-isux__skeleton {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.mp-isux__skeleton-image,
.mp-isux__skeleton-title i,
.mp-isux__skeleton-price i {
	display: block;
	background: #e9eaec;
}

.mp-isux__skeleton-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: clamp(12px, 1.2vw, 17px);
	background: linear-gradient(145deg, #e6e7e9, #eff0f2);
}

.mp-isux__skeleton-title {
	display: grid;
	gap: 8px;
	margin-top: 16px;
}

.mp-isux__skeleton-title i {
	height: 14px;
	border-radius: 999px;
}

.mp-isux__skeleton-title i:first-child {
	width: 94%;
}

.mp-isux__skeleton-title i:last-child {
	width: 72%;
}

.mp-isux__skeleton-price {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.mp-isux__skeleton-price i:first-child {
	width: 76px;
	height: 18px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mp-isux-accent, #b05875) 18%, #e9eaec);
}

.mp-isux__skeleton-price i:last-child {
	width: 30px;
	height: 9px;
	border-radius: 999px;
}

.mp-isux__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 17px;
}

.mp-isux__actions[hidden] {
	display: none;
}

.mp-isux__button,
.mp-isux__button:hover,
.mp-isux__button:focus {
	appearance: none;
	min-height: 40px;
	padding: 8px 17px;
	font: inherit;
	font-size: 13px;
	font-weight: 650;
	line-height: 1.2;
	color: var(--mp-isux-text, #20242b);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--mp-isux-accent, #b05875) 42%, #dfe3e8);
	border-radius: 999px;
	box-shadow: none !important;
	outline: none;
	cursor: pointer;
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.mp-isux__button:hover {
	transform: translate3d(0, -1px, 0);
	border-color: var(--mp-isux-accent, #b05875);
	background: color-mix(in srgb, var(--mp-isux-accent, #b05875) 6%, #fff);
}

.mp-isux__button:focus-visible {
	outline: 2px solid var(--mp-isux-accent, #b05875);
	outline-offset: 3px;
}

.mp-isux-toast {
	position: fixed;
	left: 50%;
	bottom: max(18px, env(safe-area-inset-bottom));
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 11px;
	max-width: min(90vw, 440px);
	padding: 12px 18px;
	color: var(--mp-isux-text, #20242b);
	background: color-mix(in srgb, var(--mp-isux-surface, #fff) 97%, var(--mp-isux-accent, #b05875));
	border: 1px solid color-mix(in srgb, var(--mp-isux-accent, #b05875) 24%, #dfe3e8);
	border-radius: 999px;
	box-shadow: 0 12px 34px rgba(21, 25, 31, .16);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(-50%, 16px, 0) scale(.98);
	transition: opacity .2s ease, visibility .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
	pointer-events: none;
}

.mp-isux-toast[data-visible="true"] {
	opacity: 1;
	visibility: visible;
	transform: translate3d(-50%, 0, 0) scale(1);
}

.mp-isux-toast strong {
	font-size: 14px;
	line-height: 1.3;
}

.mp-isux-toast[data-state="loaded"] .mp-isux-toast__spinner {
	border: 0;
	animation: none;
	background: #397454;
	box-shadow: inset 0 0 0 6px #edf8f1;
}

/* Keep Blocksy's loader functional but visually secondary. */
.mp-isux-enhanced .ct-pagination .ct-loader {
	opacity: .18;
}

/**
 * Only the confirmed native terminal message is visually hidden. Unlike v1.2.0,
 * the entire pagination container is never display:none, so Blocksy can continue
 * to update its own DOM and internal request lifecycle.
 */
.mp-isux-native-terminal--hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (max-width: 767px) {
	.mp-isux {
		margin-top: 24px;
	}

	.mp-isux__progress {
		margin-bottom: 14px;
	}

	.mp-isux__main {
		justify-content: flex-start;
		gap: 12px;
		padding-inline: 4px;
	}

	.mp-isux__icon {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
	}

	.mp-isux__icon svg {
		width: 19px;
		height: 19px;
	}

	.mp-isux__skeletons {
		gap: 12px;
	}

	.mp-isux[data-state="loading"] .mp-isux__skeletons:not([hidden]) {
		margin-top: 22px;
	}

	.mp-isux__skeleton-image {
		border-radius: 12px;
	}

	.mp-isux__skeleton-title {
		gap: 6px;
		margin-top: 11px;
	}

	.mp-isux__skeleton-title i {
		height: 10px;
	}

	.mp-isux__skeleton-price {
		margin-top: 10px;
	}

	.mp-isux__skeleton-price i:first-child {
		width: 58px;
		height: 14px;
	}

	.mp-isux-toast {
		bottom: max(12px, env(safe-area-inset-bottom));
		padding: 11px 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mp-isux__progress,
	.mp-isux__progress span,
	.mp-isux__icon--spinner span,
	.mp-isux__skeletons,
	.mp-isux-toast__spinner,
	.mp-isux-toast,
	.mp-isux__button {
		animation: none !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@keyframes mp-isux-spin {
	to { transform: rotate(360deg); }
}

@keyframes mp-isux-progress {
	to { transform: translate3d(365%, 0, 0); }
}

@keyframes mp-isux-pulse {
	0%, 100% { opacity: .72; }
	50% { opacity: 1; }
}