/* Product Layout */

.product-page-title {
	font-size: 28px;
	font-weight: 300;
	flex: 1;
}
.product-filter {
	display: flex;
	padding: 30px 0;
}

.sort {
	display: flex;
	align-self: flex-end;
}

.collection-sort {
 display: flex;
	flex-direction: column;
}

.collection-sort:first-child {
	padding-right: 20px;
}

label {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	line-height: 2em;
	text-transform: uppercase;
}

.products {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;	/* Abstand zwischen den Kacheln */
}

.product-card {
	position:relative;
	display: flex;
	flex-direction: column;
	
	padding: 2%;
	flex: 1 16%;
	
	background-color: #FFF;
	/* box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25); */
	border:1px solid lightgrey;
	/* max-width sorgt dafür, dass alle Bilder gleich gross sind und nicht an die Zeilen angepasst werden */
	max-width: 16%; 
}
.product-card:hover {
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.product-image img {
	width: 100%;
}

.product-info {
	margin-top: auto;
	padding-top: 20px;
	text-align: center;
}

.product-marker {
	position:absolute;
	width: 20px;
	height:20px;
	background-color:red;
	top: -4px;
	right:-4px;
	z-index:999;
	text-align:center;
}

@media ( max-width: 920px ) {
	.product-card {
		flex: 1 21%;
		max-width: 21%;
	}
	.products .product-card:first-child, 
	.products .product-card:nth-child(2) {
		flex: 2 46%;
		max-width: 46%;
	}
}


@media ( max-width: 600px ) {
	.product-card {
		flex: 1 46%;
	}
}

@media ( max-width: 480px ) {
	h1 {
		margin-bottom: 20px;
	}
	.product-filter {
		flex-direction: column;
	}
	.sort {
		align-self: flex-start;
	}
}