/* Produktkachel mit echten Artikeln aus dem Shop. Die Produktfotos haben
   weissen Grund, multiply legt sie auf die Fläche der jeweiligen Farbwelt. */

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.product-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.product-card {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	padding: 1.25rem;
	border: 0.0625rem solid var(--c-line);
	border-radius: var(--r-card, 0);
	background: var(--c-card-bg, var(--c-surface));
}

.product-card__img {
	width: 100%;
	height: 13rem;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.product-card__tag {
	justify-self: start;
	padding: 0.25rem 0.6rem;
	border-radius: var(--r-tag, 0.125rem);
	background: var(--c-tag-bg);
	color: var(--c-tag-ink);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.product-card__name {
	font-family: var(--f-body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.product-card__note {
	font-size: 0.9375rem;
	color: var(--c-muted);
}

.product-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 0.75rem;
	border-top: 0.0625rem solid var(--c-line);
	font-size: 0.875rem;
	color: var(--c-muted);
}

.product-card__price {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--c-ink);
}