/**
 * Shared utilities used across blocks, patterns and template parts.
 *
 * Enqueued unconditionally on every front-end view (see
 * zozia_beauty_enqueue_assets in functions.php). The theme's style.css is not
 * loaded on the front end, and each block ships its own conditionally-loaded
 * stylesheet, so cross-cutting rules need a home of their own rather than
 * being duplicated per block or smuggled into header.css.
 */

/**
 * Hides content visually while leaving it available to screen readers and
 * search engines. Used for the homepage h1, which has no slot in a design
 * whose banner carries rotating campaign titles.
 */
.zozia-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/**
 * Product-card thumbnail. Fills its positioned container the way the previous
 * `background-size: cover` did, but as a real <img> — so the image carries alt
 * text, a srcset for high-density and narrow screens, and native lazy loading,
 * none of which a CSS background can provide.
 *
 * The container keeps its own width/height; this only makes the image cover it.
 */
.zozia-product-thumb {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * Second-image hover crossfade, shared by every product card that renders
 * through zozia_get_product_thumb_html() with $zozia_with_hover = true
 * (Discover Favorites, Trending Now, Deals, Spotlight Deals, Related
 * Products, Wishlist Grid). The `--hover` image is the product's first
 * gallery photo, stacked on top of `.zozia-product-thumb` in the same
 * positioned box; each card component's own stylesheet fades it in and
 * scales both images from its own `:hover` selector (e.g.
 * `.zozia-discover-favorites__card:hover .zozia-product-thumb--hover`) —
 * this file only owns what's identical everywhere: the transition and the
 * hover image's resting (invisible) state.
 */
.zozia-product-thumb,
.zozia-product-thumb--hover {
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.zozia-product-thumb--hover {
	opacity: 0;
}

/**
 * Resting position/opacity for the shop/category grid's injected hover
 * image (see zozia_add_shop_grid_hover_image() in inc/wc-products.php).
 * Kept here rather than in shop.css — which is enqueued only on the shop
 * page and category archives — because `woocommerce/product-image` (the
 * block it hooks) also renders on the product search results template,
 * which never loads shop.css. Without this, an unstyled duplicate <img>
 * would sit in normal flow there, doubling the card's height, instead of
 * just staying an inert, invisible layer. The `:hover` reveal + zoom live
 * in shop.css, scoped to `.zozia-shop-grid`, since only the shop/category
 * grid gets the interactive treatment.
 */
.zozia-shop-hover-thumb {
	position: absolute;
	inset: 0;
	opacity: 0;
}