/*
 * Merch (Roadmap Block 2): Produkte als Fotoabzüge auf dem Vorhang, die Rückseite als kleiner Abzug in der Ecke.
 * Markup: inc/merch.php. Nur auf der Merch-Seite geladen; der Hinweis auf der Startseite steht in studio-home.css.
 */

/* Die Abzüge liegen direkt auf dem Vorhang, nicht im Pult-Feld der normalen Seiten (wie FAQ) */
.page main#main-page .wp-block-group.default-box-shadow:has(.studio-merch) {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.studio-merch { display: grid; gap: var(--wp--preset--spacing--60, 2rem); }

.studio-merch__lead {
	max-width: 60ch;
	margin: 0;
	font-size: var(--studio-step-1);
	color: var(--studio-text);
}

.studio-merch__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 3rem 2.5rem;
	margin: 0;
	padding: 1rem 0 0;
	list-style: none;
}

.studio-merch__item {
	rotate: var(--studio-tilt, -1.4deg);
	padding-bottom: 1.25rem;
}

/* Produktfotos: weißer Studiohintergrund, quadratisch, ohne Vergilbung */
.studio-merch__item img { aspect-ratio: 1; object-fit: contain; filter: none; background: oklch(100% 0 0); }

/* Rückseite: kleiner Abzug auf der unteren rechten Ecke des Fotos, beim Zeigen etwas größer */
.studio-merch__photos { position: relative; display: block; }

.studio-merch__item .studio-merch__back {
	position: absolute;
	right: -1.25rem;
	bottom: -0.25rem;
	width: 38%;
	padding: 0.35rem;
	background: oklch(100% 0 0);
	rotate: 6deg;
	box-shadow: 0 8px 14px -4px oklch(0% 0 0 / 0.6);
	transition: scale 200ms var(--studio-ease), rotate 200ms var(--studio-ease);
}

.studio-merch__item:hover .studio-merch__back,
.studio-merch__item:focus-visible .studio-merch__back { scale: 1.12; rotate: 3deg; }

.studio-merch__item .studio-print__by { color: var(--studio-paper-ink); text-decoration: underline; text-underline-offset: 3px; }

.studio-merch__shop { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.studio-merch__item .studio-merch__back { transition: none; }
}