/*!
 * Technical product layout - catalogue cards (shop and product category pages)
 * Builds on woocommerce.css. Selectors repeat #content.ef-wc so they match the weight of its
 * specificity overrides (which crop every card image to a square with object-fit: cover).
 */

/* Whole board, never cropped: the uncropped image sits inside a square tile on the product's own
   photo background (--efi-tile-bg, set per card from "Main image background"). */
.woocommerce #content.ef-wc ul.products li.product.efi-tp-catalog-item a img,
#content.ef-wc ul.products li.product.efi-tp-catalog-item img {
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	height: auto;
	padding: 0;
	object-fit: contain;
	background: var(--efi-tile-bg, var(--ef-tile, #f7f7f7));
}

/* Gentler zoom: the full image stays inside the tile on hover. */
#content.ef-wc ul.products li.product.efi-tp-catalog-item:hover img {
	transform: scale(1.025);
}

/* Title fills the card body; long names wrap instead of overflowing, buttons line up at the bottom. */
#content.ef-wc ul.products li.product.efi-tp-catalog-item > a.woocommerce-loop-product__link {
	flex: 1 1 auto;
}

.woocommerce #content.ef-wc ul.products li.product.efi-tp-catalog-item h2.woocommerce-loop-product__title,
#content.ef-wc ul.products li.product.efi-tp-catalog-item .woocommerce-loop-product__title {
	padding: 1.15rem 1.25rem 1rem;
	font-size: 1.1rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

#content.ef-wc ul.products li.product.efi-tp-catalog-item .button {
	align-self: stretch;
	margin: auto 1.25rem 1.25rem;
}

/* "View cart" link WooCommerce adds after an AJAX Add to Cart: centred under the button, inside the card padding. */
#content.ef-wc ul.products li.product.efi-tp-catalog-item .button.added {
	margin-bottom: 0.65rem;
}

#content.ef-wc ul.products li.product.efi-tp-catalog-item a.added_to_cart {
	align-self: center;
	margin: 0 1.25rem 1.1rem;
	padding: 0.2rem 0.5rem;
	color: var(--accent, #00bcd4);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#content.ef-wc ul.products li.product.efi-tp-catalog-item a.added_to_cart:hover {
	text-decoration-thickness: 2px;
}

/* Keyboard focus: visible ring on the link or button, and the card border lights up as on hover. */
#content.ef-wc ul.products li.product.efi-tp-catalog-item:focus-within {
	border-color: var(--accent, #00bcd4);
}

#content.ef-wc ul.products li.product.efi-tp-catalog-item a:focus-visible {
	outline: 2px solid var(--accent, #00bcd4);
	outline-offset: -2px;
	border-radius: var(--ef-radius-sm, 6px);
}

#content.ef-wc ul.products li.product.efi-tp-catalog-item a.button:focus-visible {
	outline-offset: 3px;
}

/* Shop introduction (the shop page's content, shown under the heading): same style as category descriptions. */
.ef-wc .woocommerce-products-header .page-description {
	max-width: 60ch;
	margin: 0;
}

.ef-wc .woocommerce-products-header .page-description p {
	margin: 0;
	color: var(--ef-muted, #94a3b8);
	font-size: 1.05rem;
	line-height: 1.6;
}