/* Product-card secondary image hover. Products without a second image receive no extra markup. */
.product-thumbnail{position:relative}
.product-thumbnail.has-secondary-product-image>img:first-child{transition:none}
.product-thumbnail .electro-secondary-product-image-layer{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;pointer-events:none}
.product-thumbnail .electro-secondary-product-image{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;margin:0}
.product-thumbnail>.onsale{z-index:3}
/* Electro wraps the featured image in a link (and may put the sale badge first),
   so selecting the thumbnail's first child image misses the actual main image. */
@media (hover:hover) and (pointer:fine){
	.product-thumbnail.has-secondary-product-image:hover>img,
	.product-thumbnail.has-secondary-product-image:focus-within>img,
	.product-thumbnail.has-secondary-product-image:hover>a img,
	.product-thumbnail.has-secondary-product-image:focus-within>a img{opacity:0!important}
	.product-thumbnail.has-secondary-product-image:hover .electro-secondary-product-image-layer,
	.product-thumbnail.has-secondary-product-image:focus-within .electro-secondary-product-image-layer{opacity:1}
}
@media (prefers-reduced-motion:reduce){.product-thumbnail .electro-secondary-product-image-layer{transition:none}}