/**
 * Product card purchase buttons (Add to Cart / Buy Now / More about the arrival).
 *
 * Kept in a real stylesheet file (not wp_add_inline_style) so WP Rocket's
 * "Remove Unused CSS" reliably parses and keeps it. See also the
 * rocket_rucss_safelist filter in functions.php which prevents these
 * selectors from being stripped from the generated Used CSS.
 */
ul.products li.product .rz-loop-buttons {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	width: 100%;
	padding: 0 6px 6px;
	box-sizing: border-box;
}

ul.products li.product .rz-loop-buttons .button {
	flex: 1 1 0;
	min-width: 0;
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 11px 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 6px;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

ul.products li.product .rz-loop-buttons .rz-loop-atc,
ul.products li.product .rz-loop-buttons a.rz-loop-atc {
	background: #fff !important;
	color: #1e4f12 !important;
	border: 1.5px solid #1e4f12 !important;
}

ul.products li.product .rz-loop-buttons .rz-loop-atc:hover,
ul.products li.product .rz-loop-buttons a.rz-loop-atc:hover {
	background: #1e4f12 !important;
	color: #fff !important;
}

ul.products li.product .rz-loop-buttons .rz-loop-buynow,
ul.products li.product .rz-loop-buttons a.rz-loop-buynow {
	background: #1e4f12 !important;
	color: #fff !important;
	border: 1.5px solid #1e4f12 !important;
}

ul.products li.product .rz-loop-buttons .rz-loop-buynow:hover,
ul.products li.product .rz-loop-buttons a.rz-loop-buynow:hover {
	background: #163c0e !important;
	color: #fff !important;
}

/* "More about the arrival" — for out-of-stock / coming-soon products. */
ul.products li.product .rz-loop-buttons .rz-loop-arrival,
ul.products li.product .rz-loop-buttons a.rz-loop-arrival {
	flex: 1 1 100%;
	background: #f3f4f1 !important;
	color: #1e4f12 !important;
	border: 1.5px solid #cdd6c8 !important;
}

ul.products li.product .rz-loop-buttons .rz-loop-arrival:hover,
ul.products li.product .rz-loop-buttons a.rz-loop-arrival:hover {
	background: #1e4f12 !important;
	color: #fff !important;
	border-color: #1e4f12 !important;
}

/* One clear set of buttons: hide the tiny hover cart icon + theme mobile ATC. */
ul.products li.product .product-featured-icons .product-loop-button-atc,
ul.products li.product .gz-button-add-to-cart-mobile {
	display: none !important;
}

@media (max-width: 767px) {
	ul.products li.product .rz-loop-buttons {
		gap: 8px;
		padding: 0 4px 4px;
	}

	ul.products li.product .rz-loop-buttons .button {
		font-size: 12px;
		padding: 10px 5px;
		min-height: 40px;
	}

	/* Shrink the product image on mobile so the price + buttons stay on screen
	   without scrolling. The theme makes the image 131% of the card width
	   (a tall 3:4 box); we cut that down and use "contain" so the whole
	   product pack still shows, just smaller. */
	ul.products li.product .gz-ratio--product-image {
		--gz-ratio-percent-mobile: 82%;
	}

	ul.products li.product .product-thumbnail img {
		object-fit: contain !important;
	}
}