/* Produktkarte – die eine Karte für Startseite, Kategorieseite und das
   Cross-Selling der Produktseite. Übernommen aus Design 1, Figma 158:768
   (Produktkarte) und 158:853 (Sale-Badge).

   Vorher lagen zwei Fassungen im Projekt: `.productcard` auf Start- und
   Kategorieseite, ein zweites `.product` auf der Produktseite mit zentriertem
   Text, ohne Merkzettel und mit kleinerem Preis. Das fiel im Vergleich auf.
   Es gibt jetzt nur noch diese. */

/* Wischreihe. Mobil mit Anhaltpunkten, ab Desktop vier Karten nebeneinander. */
.shelf {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 10.5rem;
	gap: var(--ffg-space-3);
	overflow-x: auto;
	padding-bottom: var(--ffg-space-3);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.shelf::-webkit-scrollbar {
	display: none;
}

/* Raster ohne Wischen – Kategorieseite. */
.grid {
	display: grid;
	gap: var(--ffg-space-3);
}

.productcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--ffg-space-3);
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
	scroll-snap-align: start;
}

.productcard__media {
	display: grid;
	place-items: center;
	padding: var(--ffg-space-2);
}

.productcard__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}

.productcard__wish {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	display: grid;
	place-items: center;
	width: var(--ffg-tap);
	height: var(--ffg-tap);
	color: var(--ffg-text);
}

.productcard__wish img {
	width: 1.125rem;
	height: 1.125rem;
}

.productcard__name {
	min-height: 2.5rem;
	margin: var(--ffg-space-2) 0 0;
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-base);
	font-weight: 600;
	line-height: var(--ffg-lh-base);
}

.productcard__desc {
	margin: var(--ffg-space-2) 0 0;
	color: var(--ffg-text);
	font-size: var(--ffg-size-sm);
	line-height: var(--ffg-lh-base);
}

.productcard__rating {
	display: flex;
	gap: 0.375rem;
	align-items: center;
	margin: var(--ffg-space-2) 0 0;
	color: var(--ffg-text);
	font-size: var(--ffg-size-xs);
}

.productcard__stars {
	color: var(--ffg-star);
	letter-spacing: 0.125rem;
}

.productcard__price {
	margin: var(--ffg-space-3) 0 0;
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-md);
	font-weight: 700;
}

.productcard__price del {
	color: var(--ffg-text);
	font-size: var(--ffg-size-sm);
	font-weight: 400;
}

/* Preis und Mengenwahl in einer Zeile – nur dort, wo direkt aus der Karte
   heraus gekauft wird. */
.productcard__buy {
	display: flex;
	gap: var(--ffg-space-2);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--ffg-space-3);
}

.productcard__buy .productcard__price {
	margin: 0;
}

.productcard__base {
	margin: 0.25rem 0 0;
	color: var(--ffg-text);
	font-size: var(--ffg-size-xs);
}

.productcard__base strong {
	font-weight: 600;
}

/* Nicht lieferbar: die Karte erklärt sich, statt stillschweigend zu fehlen. */
.productcard__soldout {
	margin: var(--ffg-space-3) 0 0;
	padding: 0.5rem 0.625rem;
	border-radius: var(--ffg-radius);
	background: var(--ffg-beige);
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-sm);
	font-weight: 600;
	text-align: center;
}

.productcard__actions {
	display: flex;
	gap: var(--ffg-space-2);
	margin-top: auto;
	padding-top: var(--ffg-space-3);
}

.productcard__actions .btn {
	flex: 1;
	min-width: 0;
}

.productcard__badge {
	position: absolute;
	top: 0.625rem;
	left: 0.625rem;
	padding: 0.375rem 0.5rem;
	border-radius: var(--ffg-radius);
	background: var(--ffg-red);
	color: var(--ffg-white);
	font-size: var(--ffg-size-xs);
	font-weight: 700;
}

.productcard__badge--mhd {
	background: var(--ffg-brown-logo);
}

@media (min-width: 30rem) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62rem) {
	.shelf {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-columns: unset;
		overflow: visible;
	}

	.grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--ffg-space-4);
	}
}