/* Product grid on phones: two per row.
 *
 * WooCommerce ships woocommerce-smallscreen.css with
 *
 *     .woocommerce ul.products[class*="columns-"] li.product { width: 48%; float: right; }
 *
 * written for the old float layout, where there was no gap to account for. The theme lays the
 * grid out with flex and a gap instead, and sets width: calc(50% - 10px) in its own
 * @media (max-width: 767px) block - the arithmetic that actually fits.
 *
 * Both rules have identical specificity, so whichever comes last wins. That used to be the
 * theme, because WooCommerce enqueues its stylesheet early and the child theme's at priority
 * 100. Autoptimize changes the outcome: it groups CSS by media attribute, and
 * woocommerce-smallscreen.css carries media="only screen and (max-width: 768px)", so it ends
 * up in its own bundle that is always emitted AFTER the media="all" one. WooCommerce wins, and
 * 48% + 48% + the 20px gap overflows the row, so the second card wraps and the grid collapses
 * to one product per row.
 *
 * Source order cannot be relied on here, so these rules carry one extra class and beat the
 * WooCommerce rule wherever they both apply.
 *
 * The range is max-width 768px, matching woocommerce-smallscreen.css rather than the theme's
 * 767px: at exactly 768px WooCommerce's rule applies and the theme's does not, so that one
 * pixel of viewport was broken too.
 *
 * Scoped to small screens TWICE, on purpose. The file is enqueued with a media attribute AND
 * carries this query, because Autoptimize silently dropped the first version of this wrapper -
 * written as `@media only screen and (max-width: 768px)` - and dumped the rules at top level,
 * where they rearranged the desktop grid too. It keeps `@media (max-width: …)` without the
 * `only screen and` prefix, which is the form the theme's own stylesheet uses and which
 * survives aggregation. Do not reintroduce `only screen` here.
 */

@media (max-width: 768px) {

	/* --wpff-products-gap keeps the gap and the card width in step - change it in one place. */
	.woocommerce ul.products[class*="columns-"][class*="columns-"],
	.woocommerce-page ul.products[class*="columns-"][class*="columns-"] {
		--wpff-products-gap: 12px;
		gap: var(--wpff-products-gap);
	}

	/* .productBox is the theme's own class on every card; body.woocommerce covers archives
	   where a card might render without it. Either way: one class more than WooCommerce. */
	.woocommerce ul.products[class*="columns-"] li.product.productBox,
	.woocommerce-page ul.products[class*="columns-"] li.product.productBox,
	body.woocommerce ul.products[class*="columns-"] li.product,
	body.woocommerce-page ul.products[class*="columns-"] li.product {
		width: calc(50% - var(--wpff-products-gap, 12px) / 2);
		float: none;
		clear: none;
		margin: 0;
	}

	/* YITH badges are drawn at 50x50 and hung outside the picture's corner by
	 * `margin: -1.5em !important`, which is fine on a desktop card. Two across on a phone the
	 * card is 170px, so the badge covered a fifth of the photo and the left column's badge ran
	 * 7.5px off the edge of the screen.
	 *
	 * scale() rather than width/height: badges come in image and text flavours, and resizing a
	 * text badge's box would clip the text instead of shrinking it. The origin is the corner the
	 * badge is anchored to, so it shrinks in place.
	 *
	 * The margin reset needs !important only because YITH's own rule carries one. The selector
	 * is also a class heavier than theirs, so it would win on specificity alone if they ever
	 * drop it.
	 */
	li.product.productBox .yith-wcbm-badge[class*="yith-wcbm-badge-"] {
		transform: scale(.66);
		transform-origin: top left;
		margin: 0 !important;
	}
}