/* 产品目录与详情共用的媒体状态层。 */
.pattrix-catalog-card-media,
.pattrix-new-product-media,
.pattrix-product-detail-primary-media {
	position: relative;
}

.pattrix-catalog-card-media img,
.pattrix-new-product-media img,
.pattrix-product-detail-primary-media img {
	transition: opacity var(--pattrix-duration-enter) var(--pattrix-ease-out);
}

.pattrix-catalog-card-media.is-crossfading img,
.pattrix-new-product-media.is-crossfading img,
.pattrix-product-detail-primary-media.is-crossfading img {
	opacity: .35;
}

.pattrix-catalog-card-media.is-loading::after,
.pattrix-new-product-media.is-loading::after,
.pattrix-product-detail-primary-media.is-loading::after {
	position: absolute;
	inset: 0;
	background: var(--pattrix-color-surface-strong);
	content: "";
	animation: pattrix-skeleton-shimmer 1.2s linear infinite;
	pointer-events: none;
}

.pattrix-product-detail-media-status {
	position: absolute;
	left: var(--pattrix-space-3);
	right: var(--pattrix-space-3);
	bottom: var(--pattrix-space-3);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pattrix-space-2);
	padding: var(--pattrix-space-2) var(--pattrix-space-3);
	background: var(--pattrix-color-surface-strong);
	border: 1px solid var(--pattrix-color-border-strong);
	color: var(--pattrix-color-text);
	font-size: var(--wp--preset--font-size--small);
}

[data-pattrix-media-status][hidden] { display: none; }
.pattrix-product-detail-media-status p { margin: 0; }
.pattrix-product-detail-media-status button {
	min-height: 44px;
	padding: 0 var(--pattrix-space-3);
	border: 1px solid var(--pattrix-color-border-strong);
	border-radius: var(--pattrix-radius-control);
	background: var(--pattrix-color-bg);
	color: var(--pattrix-color-text);
	font: inherit;
}
.pattrix-new-product-media.has-error img,
.pattrix-product-detail-primary-media.has-error img { opacity: .22; }
.pattrix-new-product-media > a { display: block; width: 100%; height: 100%; }
.pattrix-new-product-name,
.pattrix-new-product-specs { text-decoration: none; }
.pattrix-new-product-media img { transition: opacity var(--pattrix-duration-enter) var(--pattrix-ease-out), transform var(--pattrix-duration-enter) var(--pattrix-ease-out); }

@keyframes pattrix-skeleton-shimmer {
	50% { opacity: .65; }
}

@media (prefers-reduced-motion: reduce) {
	.pattrix-catalog-card-media img,
	.pattrix-new-product-media img,
	.pattrix-product-detail-primary-media img { transition: none; }
	.pattrix-catalog-card-media.is-loading::after,
	.pattrix-new-product-media.is-loading::after,
	.pattrix-product-detail-primary-media.is-loading::after { animation: none; }
}