.wc-block-grid {

	.wc-block-grid__products {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		padding: 0;
		margin: 0 0 $gap-large;

		.wc-block-grid__product {
			padding: 0 $gap 0 0;
			margin: 0 0 $gap-large 0;
			float: none;
			width: auto;
			position: relative;
			text-align: center;

			.wc-block-grid__product-link {
				text-decoration: none;
			}

			.wc-block-grid__product-image {
				text-decoration: none;
				margin-bottom: $gap;
				display: block;

				img {
					vertical-align: middle;
				}
			}

			.wc-block-grid__product-title {
				line-height: 1.2;
				font-weight: 700;
			}

			.wc-block-grid__product-title,
			.wc-block-grid__product-price,
			.wc-block-grid__product-rating {
				margin-bottom: $gap-small;
				display: block;
			}

			.wp-block-button {
				margin: 0;
			}

			.wc-block-grid__product-add-to-cart {
				margin: 0;
				word-break: break-word;
				white-space: normal;

				a {
					word-break: break-word;
					white-space: normal;
					margin: 0;

					&.loading {
						opacity: 0.25;
						padding-right: 2.618em;

						&::after {
							font-family: WooCommerce; /* stylelint-disable-line */
							content: "\e01c";
							vertical-align: top;
							font-weight: 400;
							position: absolute;
							top: 0.618em;
							right: 1em;
							animation: spin 2s linear infinite;
						}
					}

					&.added::after {
						font-family: WooCommerce; /* stylelint-disable-line */
						content: "\e017";
						margin-left: 0.53em;
						vertical-align: bottom;
					}
				}

				.added_to_cart {
					text-align: center;
				}
			}

			.wc-block-grid__product-onsale {
				font-weight: 700;
				position: absolute;
				text-align: center;
				top: 0;
				left: 0;
				margin: 0;
				background-color: #000;
				color: #fff;
				display: inline-block;
				font-size: 0.75em;
				line-height: 1;
				padding: 0.5em;
				z-index: 9;
				text-transform: uppercase;
			}

			.wc-block-grid__product-rating {

				.star-rating {
					overflow: hidden;
					position: relative;
					width: 5.3em;
					height: 1.618em;
					line-height: 1.618;
					font-size: 1em;
					font-family: star; /* stylelint-disable-line */
					font-weight: 400;
					display: inline-block;
					margin: 0 auto;

					&::before {
						content: "\53\53\53\53\53";
						top: 0;
						left: 0;
						right: 0;
						position: absolute;
						opacity: 0.5;
						color: #aaa;
					}

					span {
						overflow: hidden;
						top: 0;
						left: 0;
						right: 0;
						position: absolute;
						padding-top: 1.5em;
					}

					span::before {
						content: "\53\53\53\53\53";
						top: 0;
						left: 0;
						right: 0;
						position: absolute;
						color: #000;
					}
				}
			}
		}
	}

	&.has-1-columns {

		.wc-block-grid__products {
			display: block;
		}

		.wc-block-grid__product {
			margin-left: auto;
			margin-right: auto;
		}
	}

	@for $i from 2 to 9 {
		&.has-#{$i}-columns .wc-block-grid__product {
			flex: 1 0 calc(#{ 100% / $i });
			max-width: 100% / $i;
		}
	}

	.wc-block-grid__products {
		font-size: 1em;

		.wc-block-grid__product-title {
			font-size: 1em;
		}

		.wc-block-grid__product-price {
			font-size: 0.8em;
		}

		.wp-block-button span.wc-block-grid__product-add-to-cart,
		.wc-block-grid__product-add-to-cart a {
			font-size: 0.8em;
			line-height: 1.4;
		}
	}

	&.has-4-columns:not(.alignwide):not(.alignfull),
	&.has-5-columns:not(.alignfull),
	&.has-6-columns:not(.alignfull),
	&.has-7-columns,
	&.has-8-columns {

		.wc-block-grid__products {
			font-size: 0.8em;
		}
	}
}

.theme-twentysixteen {
	.wc-block-grid {
		// Prevent white theme styles.
		.price ins {
			color: #77a464;
		}
	}
}
.theme-twentynineteen {
	// Change the title font to match headings.
	.wc-block-grid__product-title,
	.wc-block-grid__product-onsale {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	}
}