/* Purpose: One rule for every media slot (cards, galleries, thumbnails, menu,
 * journal, search). Whatever size or shape an uploaded image or video is, it
 * fills its slot, cropped evenly from the centre (cover, 50% 50%). Slots own
 * their shape (aspect-ratio / fixed box); media never sets it.
 * `html body` lifts these past WooCommerce's `.woocommerce img { height:auto }`
 * on shop pages, while deliberate framings with two-class selectors (e.g. the
 * series hero video) still win. Loaded sitewide after the page styles. */

html body .series-media__img,
html body .series-media__video,
html body .product-card__img,
html body .buy-gallery__img,
html body .buy-gallery__thumb img,
html body .mega-media__img,
html body .mega-media__video,
html body .jcard__img,
html body .jfeatured__img,
html body .jarticle-media__img,
html body .search-hit__media img,
html body .series-phone__img,
html body .series-install__poster-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Coming-soon series: the dimmed MAXOTO mark stands in for product imagery
   (cards.php / megamenu.php / search.php fall back to the logo). Contained and
   quiet instead of cropped to cover. (user, 2026-09-21) */
html img.mega-media__img[src*="/maxoto-logo"],
html img.series-media__img[src*="/maxoto-logo"],
html .search-hit__media img[src*="/maxoto-logo"] {
	object-fit: contain !important;
	padding: 0 30%;
	opacity: 0.35;
	background: transparent;
}
html .series-media:has(> img[src*="/maxoto-logo"]),
html .product-card__media:has(img[src*="/maxoto-logo"]) { background: radial-gradient(60% 60% at 50% 50%, #141416, #0a0a0b); }