/* Shop example badges (docs/shop-examples.md): out-of-stock badge and the second image of a card. */
.myco-card-media {
	position: relative;
	display: block;
}

/* Second image: display:none + loading="lazy" = fetched only once shown (never on touch screens). Outranks WooCommerce's
   ".woocommerce ul.products li.product a img" (0,3,4) display:block. */
.woocommerce ul.products li.product a img.myco-card-media__alt {
	position: absolute;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* Mouse: shown (and fetched) on hover. To fetch it with the page instead, add in this block:
   .woocommerce ul.products li.product a img.myco-card-media__alt { display: block; opacity: 0; } */
@media (hover: hover) and (pointer: fine) {
	.woocommerce ul.products li.product:hover a img.myco-card-media__alt {
		display: block;
		opacity: 1;
	}
}

/* Keyboard focus in the card, on any device (a mouse click's focus does not count). */
.woocommerce ul.products li.product:has(:focus-visible) a img.myco-card-media__alt {
	display: block;
	opacity: 1;
}

.myco-badge {
	position: absolute;
	z-index: 1;
	inset-block-start: var(--myco-space-xs);
	inset-inline-start: var(--myco-space-xs);
	padding: 0.15em 0.55em;
	border-radius: var(--myco-radius-sm);
	background: var(--myco-color-text);
	color: var(--myco-color-bg);
	font-size: var(--myco-font-size-sm);
}