/* Ensure the new container behaves like a grid */
.products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--2-xs);

	list-style: none; /* Just in case any stray styles remain */

	@media screen and (min-width: 768px) {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: var(--wp--preset--spacing--s);
	}
}

/* Ensure the product cards look right */
.products-grid .product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.product-card {
	container-name: product-card;
	container-type: inline-size;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	row-gap: 0;
	color: var(--wp--preset--color--bleu-fonce);
	text-decoration: none;

	.product-card__header {
		background-color: var(--wp--preset--color--gris);
		display: flex;
		flex-direction: column;
		margin-bottom: var(--wp--preset--spacing--s);
		/* position: relative;
		padding-bottom: 100%;
		overflow: hidden; */
	}

	.product-card__content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		column-gap: var(--wp--preset--spacing--xs);
		row-gap: var(--wp--preset--spacing--2-xs);

		@media screen and (max-width: 500px) {
			justify-content: flex-end;
		}

		@container product-card (max-width: 200px) {
			flex-direction: column;
			align-items: flex-end;

			button {
				margin-left: 0;
				align-self: flex-end;
			}
		}

		button {
			margin-left: auto;

			@media screen and (max-width: 500px) {
				padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
				font-size: var(--wp--preset--font-size--minus-1);
			}
		}
	}

	.amount {
		font-size: var(--wp--preset--font-size--1);
		font-weight: 900;
		color: var(--wp--preset--color--bleu-ciel);
	}

	img {
		padding-bottom: var(--wp--preset--spacing--xs);
		width: 100%;
		object-fit: cover;
		object-position: center;
	}

	.woocommerce-loop-product__title {
		color: var(--wp--preset--color--bleu-fonce);
		margin: auto var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs);
	}

	h2 {
		font-size: var(--wp--preset--font-size--0);
	}
}