/*
 * Eröffnungshinweis im normalen Shop (includes/eroeffnung-shop.php).
 *
 * Terracotta wie jede andere Aktionsauszeichnung (Design-System §3) — das
 * Signalrot bleibt dem Stil & KragenClub vorbehalten. Die beiden Aktionen
 * sollen auch farblich auseinanderzuhalten sein.
 */

.zwcl-eroeffnung-shop {
	display: flex;
	flex-wrap: wrap;           /* 375 px: Marke und Text dürfen umbrechen. */
	align-items: baseline;
	gap: .5em;
	margin: 0 0 1.1em;
	padding: .7em .9em;
	border-left: 3px solid #C97955;
	background: #FBF3EE;
	border-radius: 4px;
	font-size: .95rem;
	line-height: 1.45;
	min-width: 0;              /* Grid-Falle: sonst sprengt langer Text die Spalte. */
}

.zwcl-eroeffnung-shop__marke {
	flex: 0 0 auto;
	background: #C97955;
	color: #fff;
	border-radius: 6px;
	padding: .18em .6em;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.zwcl-eroeffnung-shop__text {
	flex: 1 1 12em;
	min-width: 0;
	color: #6B4432;
	font-weight: 600;
}

/* Über Produktlisten etwas ruhiger — dort ist es Rahmeninformation. */
.woocommerce-products-header + .zwcl-eroeffnung-shop,
.zwcl-filters ~ .zwcl-eroeffnung-shop {
	font-size: .9rem;
}

/*
 * Hero-Overlay „Eröffnungsangebote bis 20.09." (zwcl_eroeffnung_hero_overlay_html)
 * auf Kategorie-, Marken- und Branchen-Heros. SIGNALROT auf Axels ausdrückliche
 * Anweisung 2026-08-22 („fettes rotes Eröffnungsangebote") — wie die Club-
 * Eröffnungskachel eine bewusste, befristete Ausnahme vom Design-System §3;
 * sie endet mit der Aktion von selbst (CSS wird dann nicht mehr geladen).
 * Positioniert im nächsten positionierten Vorfahren (Hero-Container).
 */
.zwcl-eroeffnung-hero {
	position: absolute;
	z-index: 3;
	top: clamp(10px, 3vw, 22px);
	left: 0;
	background: #E30613;
	color: #fff;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .45em 1em .45em 1.15em;
	border-radius: 0 6px 6px 0;
	font-size: clamp(.85rem, 2.4vw, 1.1rem);
	line-height: 1.25;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
	max-width: min(90%, 26em); /* 375 px: nie über den Hero-Rand hinaus. */
}

/* Der Marken-Hero war bisher nicht positioniert — Anker fürs Overlay. */
.zwcl-brandhero {
	position: relative;
}