/**
 * Eröffnungs-Merker im Stil & KragenClub (includes/skc/eroeffnung-merker.php).
 *
 * Zwei Signale, bewusst unterschiedlich eingefärbt:
 *  - AKTIONSWARE trägt das rote Sale-Badge (sale-display.css, während der
 *    Eröffnung Signalrot #E30613 wie die Hero-Kachel).
 *  - REGULÄRE WARE trägt diesen Merker in Tiefdunkel mit Bronze-Zusatz — klar
 *    sichtbar, aber nicht in Konkurrenz zum roten Aktionssignal.
 *
 * Responsiv geprüft bei 375 / 768 / 1280 px: Der Merker ist zweizeilig und
 * bekommt eine Breitenbegrenzung, damit er auf 375 px nicht über die Kachel
 * hinausläuft; ab 480 px wächst die Schrift.
 */

/* ---------------------------------------------------------------------
 * Merker als kleiner runder Badge UNTEN RECHTS im Bild (seit 2026-08-03).
 * Das frühere zweizeilige Textband oben links lief auf 375 px über den
 * Kachelrand und verdeckte das Motiv (Axels Mobil-Rundgang).
 * ------------------------------------------------------------------ */
.zwcl-skc-merker {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 9;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3em;
	min-height: 3em;
	padding: .4em;
	border-radius: 999px;
	background: #1E252D;
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	box-shadow: 0 2px 8px rgba(30, 37, 45, .25);
	pointer-events: none;
}

/* Aktionsware (−30 %): Signalrot wie die Hero-Kachel. */
.zwcl-skc-merker--rot {
	background: #E30613;
}

/* Artikelseite: dasselbe Signal, eine Spur größer — es ist Teil der
   Kaufentscheidung, nicht nur ein Listenhinweis. */
.zwcl-skc-merker--gross {
	right: 14px;
	bottom: 14px;
	font-size: 1rem;
}

/* Die Kachel muss der Bezugsrahmen sein. WooCommerce setzt das für .onsale
   üblicherweise schon; hier abgesichert, ohne fremdes Layout zu verändern. */
.woocommerce ul.products li.product,
.woocommerce div.product div.images {
	position: relative;
}

/* ---------------------------------------------------------------------
 * Aktions-Badge während der Eröffnung: Signalrot statt Terracotta
 *
 * Höhere Spezifität als die Grundregel in sale-display.css (dort
 * `.woocommerce span.onsale.zwcl-sale-flash`), damit die Einfärbung nicht von
 * der Ladereihenfolge der beiden Stylesheets abhängt.
 * ------------------------------------------------------------------ */
.woocommerce span.onsale.zwcl-sale-flash.zwcl-sale-flash--eroeffnung,
span.onsale.zwcl-sale-flash.zwcl-sale-flash--eroeffnung {
	background: #E30613;
	flex-wrap: wrap;
	max-width: calc(100% - 24px);
	letter-spacing: .03em;
}

/* „ERÖFFNUNGSANGEBOT −30 %" ist deutlich länger als „AKTION −30 %" — auf
   375 px muss es umbrechen dürfen, sonst schiebt es sich aus der Kachel. */
.zwcl-sale-flash--eroeffnung .zwcl-sale-flash__label {
	font-size: .92em;
}

/* ---------------------------------------------------------------------
 * Betragszeile unter dem Preis
 * ------------------------------------------------------------------ */
/* Auf der Kachel MITTIG (Axel 2026-08-03: „bitte in die Mitte setzen, also
   nicht ganz links am Rand"). Titel und Preis bleiben linksbündig — die
   Sparzeile ist kein Fließtext, sondern ein Signal und darf eigenständig
   stehen. Auf der Artikelseite bleibt sie linksbündig am Preisblock (siehe
   .zwcl-skc-vorteilzeile weiter unten). */
.zwcl-skc-sparzeile {
	display: block;
	margin: .2em 0 .1em;
	padding: 0 .7rem .1rem;
	font-size: .85rem;
	font-weight: 600;
	color: #6B5227;
	text-align: center;
}

.zwcl-skc-sparzeile--aktion {
	color: #C0121A;
}

.zwcl-skc-vorteilzeile {
	margin: .3em 0 .2em;
}

/* Artikelseite: am Preisblock, also linksbündig und ohne Kachel-Innenabstand. */
.zwcl-skc-vorteilzeile .zwcl-skc-sparzeile {
	padding: 0;
	font-size: .95rem;
	text-align: left;
}

/* ---------------------------------------------------------------------
 * Kleine Viewports: Merker darf die Kachel nicht zustellen
 * ------------------------------------------------------------------ */
@media (max-width: 479px) {
	.zwcl-skc-merker {
		right: 6px;
		bottom: 6px;
		min-width: 2.7em;
		min-height: 2.7em;
		font-size: .75rem;
	}

	.zwcl-skc-sparzeile {
		font-size: .78rem;
	}
}