/*
 * Bausteine im Shop: Hinweiszeile, GARAN-Karte, Fußleiste.
 * Unbunt, mit Haarlinien gefasst. Das Signet trägt die Farbe.
 */

/* ── Hinweiszeile ──────────────────────────────────────────────────────── */

/*
 * Der Baustein nimmt die volle Breite seiner Spalte. Die Haarlinien fluchten
 * dadurch mit dem übrigen Inhalt – eine auf 460 px gedeckelte Zeile stand
 * sichtbar zu kurz in einer breiten Produktspalte.
 */
.notice {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 0;
	border-top: 1px solid var(--heuc-hairline);
	border-bottom: 1px solid var(--heuc-hairline);
	transition: border-color .18s ease;
}

.notice:hover,
.notice:focus-visible {
	border-color: var(--heuc-hairline-strong);
}

.notice__mark {
	flex: 0 0 auto;
	height: 26px;
}

.notice__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.notice__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--heuc-ink);
}

.notice__sub {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--heuc-ink-2);
}

.notice__more {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--heuc-ink-2);
	white-space: nowrap;
	border-bottom: 1px solid var(--heuc-hairline-strong);
	padding-bottom: 1px;
}

.notice:hover .notice__more {
	color: var(--heuc-ink);
	border-color: var(--heuc-ink);
}

/* Kompakt – Katalog, Warenkorb, Kasse */
:host([data-size='s']) .notice {
	gap: 11px;
	padding: 11px 0;
}

:host([data-size='s']) .notice__mark {
	height: 22px;
}

:host([data-size='s']) .notice__title {
	font-size: 13px;
}

:host([data-size='s']) .notice__sub {
	display: none;
}

/* ── GARAN-Karte ───────────────────────────────────────────────────────── */

.garan {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 14px 0;
	border-top: 1px solid var(--heuc-hairline);
	border-bottom: 1px solid var(--heuc-hairline);
	transition: border-color .18s ease;
}

.garan:hover,
.garan:focus-visible {
	border-color: var(--heuc-hairline-strong);
}

/*
 * Das amtliche Label darf unter keinen Umständen gestaucht oder angeschnitten
 * werden – flex-shrink bleibt deshalb auf 0 und die Breite fest.
 */
.garan__label {
	flex: 0 0 78px;
	width: 78px;
	min-width: 78px;
}

.garan__label svg {
	width: 100%;
	height: auto;
}

.garan__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.garan__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--heuc-ink);
}

.garan__meta {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--heuc-ink-2);
	overflow-wrap: anywhere;
}

.garan__more {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--heuc-ink-2);
	white-space: nowrap;
	border-bottom: 1px solid var(--heuc-hairline-strong);
	padding-bottom: 1px;
}

.garan:hover .garan__more {
	color: var(--heuc-ink);
	border-color: var(--heuc-ink);
}

:host([data-size='s']) .garan {
	gap: 12px;
	padding: 11px 0;
}

:host([data-size='s']) .garan__label {
	flex: 0 0 58px;
	width: 58px;
	min-width: 58px;
}

:host([data-size='s']) .garan__title {
	font-size: 13px;
}

:host([data-size='s']) .garan__meta,
:host([data-size='s']) .garan__more {
	display: none;
}

/* ── Fußleiste auf Shop-Ebene ──────────────────────────────────────────── */

:host([data-variant='bar']) {
	width: 100%;
}

.bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 16px 24px;
	border-top: 1px solid var(--heuc-hairline);
	background: var(--heuc-bg);
	flex-wrap: wrap;
}

.bar__mark {
	flex: 0 0 auto;
	height: 22px;
}

.bar__title {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--heuc-ink);
}

.bar__sub {
	font-size: 13px;
	color: var(--heuc-ink-2);
}

.bar__more {
	font-size: 13px;
	color: var(--heuc-ink-2);
	border-bottom: 1px solid var(--heuc-hairline-strong);
	padding-bottom: 1px;
}

.bar:hover .bar__more {
	color: var(--heuc-ink);
	border-color: var(--heuc-ink);
}

@media (max-width: 640px) {
	.bar {
		padding: 13px 16px;
		gap: 9px;
	}
	.bar__sub {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}