.woocommerce-breadcrumb {
	margin: 2rem 0;
}

.woocommerce-products-header {
	.page-title {
		position: relative;
		padding: 40px 0;
		text-transform: uppercase;
		overflow: hidden;
		text-align: center;

		&:before {
			content: 'shop';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: -1;
			top: 0;
			color: #e3f6f5;
			opacity: .3;
			font-size: 7.5rem;
			line-height: 1.1;
			font-weight: 400;
			text-transform: uppercase;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			pointer-events: none;
		}
	}
}

p.woocommerce-result-count {
	font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
	float: left;
}

form.woocommerce-ordering {
	width: 100%;
	text-align: end;
	padding-bottom: 1rem;

	select {
		border-radius: 0.188rem;
	}
}

ul.products {
	@for $i from 2 through 5 {
		&.columns-#{$i} {
			display: grid;
			grid-template-columns: repeat($i, 1fr);
			grid-gap: 1.5rem;

			li.product {
				display: flex;
				flex-direction: column;
				position: relative;
				border-radius: 0.188rem;
				margin-bottom: 1.5rem;

				.onsale {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					padding: 0 0.6rem;
					height: 1.6rem;
					border-radius: 0.188rem;
					font-size: 0.8rem;
					font-weight: 600;
					line-height: 0;
					text-transform: uppercase;
					color: $color_white;
					background-color: $color_main;
					top: 0.9rem;
					left: 0.9rem;
					z-index: 1;
				}

				.product-thumb {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					width: 100%;
					height: auto;
					margin-bottom: 1rem;

					a.woocommerce-LoopProduct-link {
						width: 100%;
						height: auto;
						margin-bottom: 1.5rem;
						border-radius: 0.188rem;

						img {
							width: 100%;
							height: 300px;
							object-fit: cover;
							object-position: center center;
							border-radius: inherit
						}
					}

					a.button,
					a.added_to_cart {
						text-align: center;
						border-radius: 0.2rem;
						padding: 10px;
						position: absolute;
						bottom: 1%;
						width: 80%;
						@include transition;

						&:hover {
							transform: translateY(-2px);
							box-shadow: 0 2px 4px rgba(0,0,0,.1);
							@include transition;
						}
					}

					a.added {
						display: none;
					}
				}

				a {
					h2 {
						margin: 0;
						@include transition;
					}
				}

				.product-cat {
					font-size: 11px;
					font-weight: 500;
					letter-spacing: 0.075em;
					text-transform: uppercase;
				}

				.star-rating {
					margin: 0.8rem 0;
				}

				.price {
					display: inline-flex;
					align-items: center;
					font-weight: 600;
					font-size: 1.3rem;
					letter-spacing: 0.03rem;
					padding-top: 0.5rem;
					margin-top: auto;

					del {
						font-size: 1rem;
						opacity: 0.5;
						order: 2;
						margin-left: 0.4rem;
					}

					ins {
						background: transparent;
					}
				}
			}
		}
	}
}

.woocommerce-pagination {
	ul.page-numbers {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 1.8rem;
		padding-right: 1.8rem;
		padding-bottom: 1.8rem;
		padding-left: 1.8rem;
		width: 100%;

		li {
			* {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 2.5rem;
				border-radius: 3px;
				color: $color_text_main;
			}

			*:not(.prev):not(.next) {
				width: 2.5rem;
			}

			.current {
				color: $color_white;
				background-color: $color_main;
				cursor: pointer;
			}
		}
	}
}

@media ( max-width: 42rem ) {
	.shop-loop {
		padding: 0 !important;

		ul.products {
			grid-template-columns: repeat(2, 1fr);

			li {
				a.woocommerce-LoopProduct-link {
					h2 {
						font-size: 1.1rem;
						line-height: 1.6rem;
					}
				}

				a.product-cat {
					margin-bottom: 0.5rem;
				}
			}
		}
	}
}

@media ( max-width: 26rem ) {
	.shop-loop {
		.woocommerce-result-count {
			margin-bottom: 1rem;
		}

		form.woocommerce-ordering {
			text-align: start;
		}

		ul.products {
			grid-template-columns: repeat(1, 1fr);
		}
	}
}