/* FILE: woocommerce/loop/_products.scss */

// Unfortunately, in some cases also a DIV wrapper has a class of `.products`...
ul.products {

	.product {
		flex: 0 1 auto;
		display: flex;
		flex-direction: column;
		width: calc( 100% - var(--posts_list_gap) );
		margin: var(--posts_list_gap) calc( var(--posts_list_gap) / 2 );

		.has-posts-list-cascade & {
			justify-content: center;
		}

	}

	a {
		text-decoration: none;

		&:first-child {
			display: block;
		}

	}

	.woocommerce-LoopProduct-link {
		color: inherit;
	}

	img {
		vertical-align: top;
	}

	.description {
		position: relative;
		padding: 2em 0 0;

		@include media( map_get( $breakpoint, 'xl' ) ) {
			display: flex;
			justify-content: space-between;
		}

	}

	h3 {
		margin: 0;
		font-size: var(--typography_heading_size_posts);

		@include media( map_get( $breakpoint, 'xl' ) ) {
			margin-#{$right}: .5rem;
		}

	}

	.button,
	.added_to_cart {
		padding: 0;
		margin: 0;
		text-align: inherit;
		text-decoration: none;
		white-space: nowrap;

		&,
		&:hover,
		&:focus,
		&:active {
			background: none;
			color: var(--color_accent);
			border: 0;
			box-shadow: none;
		}

	}

	.button {
		margin-top: 1em;

		&::before {
			content: '+ ';
			speak: none;
		}

		&.loading::after {
			content: '\2026'; // …
		}

		&.added::after {
			content: ' \002713'; // check mark
		}

	}

	.added_to_cart {
		font-size: .8em;
		font-style: italic;

		&::after {
			content: ' \2192'; // →

			.rtl & {
				content: ' \2190'; // ←
			}

		}

	}

}

// In default WordPress search results.
.posts .product {

	.entry-header {
		margin-bottom: 0;
	}

	.entry-summary {
		display: none;
	}

}