/*
 * mediarock Gewährleistungshinweis – Frontend
 *
 * Die Bildbreite kommt aus den Einstellungen und steht als --mrgg-width am Rahmen.
 */

.mrgg-notice {
	clear: both;
	margin: 1.25em 0;
	line-height: 1.3;
}

.mrgg-notice--loop {
	margin: 0.6em 0 0;
}

/* Innerhalb eines Warenkorb-Formulars (Divi stellt form.cart als Flexbox dar):
   immer eine eigene, volle Zeile. */
form.cart .mrgg-notice {
	flex: 0 0 100%;
	width: 100%;
}

.mrgg-align-center {
	text-align: center;
}

.mrgg-align-right {
	text-align: right;
}

.mrgg-link {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45em;
	max-width: 100%;
	text-decoration: none;
	box-shadow: none;
}

.mrgg-align-center .mrgg-link {
	align-items: center;
}

.mrgg-align-right .mrgg-link {
	align-items: flex-end;
}

.mrgg-image {
	display: block;
	width: var(--mrgg-width, 160px);
	max-width: 100%;
	height: auto;
	margin: 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mrgg-link:hover .mrgg-image,
.mrgg-link:focus-visible .mrgg-image {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.mrgg-caption {
	font-size: 0.85em;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mrgg-link:hover .mrgg-caption,
.mrgg-link:focus-visible .mrgg-caption {
	text-decoration: none;
}