/* =========================================================
   GRILLA DE PRODUCTOS — FEEDBACK AL TOCAR UNA TARJETA
   Al clickear un producto se marca la tarjeta como .is-loading
   (lo agrega grid-tap-feedback.js) mientras carga la ficha:
   se atenúa la imagen + spinner. Ademas un micro "tap" en :active.
   ========================================================= */

/* micro-feedback inmediato al tocar (touch/click) */
.shop-item .shop-item-inner .product-media,
.shop-item .shop-item-inner .item-media {
	transition: transform 0.15s ease, opacity 0.2s ease;
}
.shop-item .shop-item-inner a.thumb-hover:active .product-media,
.shop-item .shop-item-inner a.thumb-hover:active .item-media {
	transform: scale(0.985);
}

/* estado "cargando ficha" */
.shop-item.is-loading .shop-item-inner {
	pointer-events: none;
}
.shop-item.is-loading .product-media,
.shop-item.is-loading .item-media {
	position: relative;
}
/* atenuar solo la imagen/enlace, NO el contenedor (opacity en el
   contenedor tambien atenuaria el spinner y el disco). */
.shop-item.is-loading .product-media > a,
.shop-item.is-loading .item-media > a,
.shop-item.is-loading .product-media .thumb-hover,
.shop-item.is-loading .item-media .thumb-hover {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}
/* disco blanco detrás del spinner para que se lea sobre cualquier imagen */
.shop-item.is-loading .product-media::before,
.shop-item.is-loading .item-media::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	z-index: 5;
	pointer-events: none;
}
.shop-item.is-loading .product-media::after,
.shop-item.is-loading .item-media::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-top-color: #002d5d;
	border-radius: 50%;
	animation: ohpima-grid-spin 0.6s linear infinite;
	z-index: 6;
	pointer-events: none;
}
@keyframes ohpima-grid-spin {
	to { transform: rotate(360deg); }
}